/**
 * at-amber Theme - Pattern System (Modular)
 *
 * Decorative geometric background patterns for card headers, hero sections, and visual elements
 * Version: 2.0 - Refactored for true modularity
 * Date: 2025-11-20
 *
 * USAGE:
 * ------
 * Patterns can be applied to ANY element independently:
 *
 * Option 1 - Pattern only (apply to any element):
 * <div class="pattern-grid-bold">Your content</div>
 *
 * Option 2 - Pattern + Container layout (centered, padded):
 * <div class="pattern-container pattern-grid-bold">Your content</div>
 *
 * AVAILABLE PATTERNS:
 * -------------------
 * - pattern-dots-small      : Dense small dots in grid
 * - pattern-dots-large      : Sparse large dots
 * - pattern-grid-fine       : Thin grid lines, tight spacing
 * - pattern-grid-bold       : Thick grid lines, wide spacing
 * - pattern-diagonal-thin   : Subtle diagonal stripes
 * - pattern-diagonal-bold   : Prominent diagonal stripes
 * - pattern-chevron         : V-shaped zigzag pattern
 * - pattern-crescents       : Crescent shapes pattern
 * - pattern-crosshatch      : Diagonal grid forming diamonds
 * - pattern-waves           : Layered horizontal/vertical lines
 *
 * CUSTOMIZATION:
 * --------------
 * All patterns use --accent color at low opacity. To customize:
 * .my-element.pattern-grid-bold { background-image: ...; }
 *
 * COLOR SYSTEM:
 * -------------
 * All patterns use the single amber accent color from the theme (--accent: #d4a574)
 * Applied at 0.08-0.15 opacity for subtle, consistent visual effect
 */

/* ===================================================================
   PATTERN CONTAINER (OPTIONAL LAYOUT HELPER)
   =================================================================== */

/**
 * Optional layout wrapper for patterns
 * Provides centered, padded layout with gradient base
 * Use ONLY when you want this specific layout style
 */
.pattern-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 2rem;
	overflow: hidden;
}

/* Ensure content inside pattern container is above the pattern */
.pattern-container > * {
	position: relative;
	z-index: 1;
}

/* ===================================================================
   STANDALONE PATTERNS (APPLY TO ANY ELEMENT)
   =================================================================== */

/* Base gradient for all patterns */
.pattern-dots-small,
.pattern-dots-large,
.pattern-grid-fine,
.pattern-grid-bold,
.pattern-diagonal-thin,
.pattern-diagonal-bold,
.pattern-chevron,
.pattern-crescents,
.pattern-crosshatch,
.pattern-waves {
	background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

/* ===== PATTERN: DOTS SMALL ===== */
/* Dense small dots in a grid pattern - subtle and professional */
.pattern-dots-small {
	background-image:
		radial-gradient(circle, rgba(212, 165, 116, 0.12) 2px, transparent 2px),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 25px 25px, 100% 100%;
	background-position: 0 0, 0 0;
}

/* ===== PATTERN: DOTS LARGE ===== */
/* Sparse large dots - more prominent and bold */
.pattern-dots-large {
	background-image:
		radial-gradient(circle, rgba(212, 165, 116, 0.15) 4px, transparent 4px),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 45px 45px, 100% 100%;
	background-position: 0 0, 0 0;
}

/* ===== PATTERN: GRID FINE ===== */
/* Thin grid lines with tight spacing - elegant and structured */
.pattern-grid-fine {
	background-image:
		linear-gradient(rgba(212, 165, 116, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(212, 165, 116, 0.10) 1px, transparent 1px),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 30px 30px, 30px 30px, 100% 100%;
	background-position: 0 0, 0 0, 0 0;
}

/* ===== PATTERN: GRID BOLD ===== */
/* Thick grid lines with wide spacing - strong and architectural */
.pattern-grid-bold {
	background-image:
		linear-gradient(rgba(212, 165, 116, 0.15) 2px, transparent 2px),
		linear-gradient(90deg, rgba(212, 165, 116, 0.15) 2px, transparent 2px),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 50px 50px, 50px 50px, 100% 100%;
	background-position: 0 0, 0 0, 0 0;
}

/* ===== PATTERN: DIAGONAL THIN ===== */
/* Subtle diagonal stripes - dynamic but understated */
.pattern-diagonal-thin {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 12px,
			rgba(212, 165, 116, 0.08) 12px,
			rgba(212, 165, 116, 0.08) 24px
		),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 100% 100%;
}

/* ===== PATTERN: DIAGONAL BOLD ===== */
/* Prominent diagonal stripes - energetic and eye-catching */
.pattern-diagonal-bold {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 20px,
			rgba(212, 165, 116, 0.15) 20px,
			rgba(212, 165, 116, 0.15) 40px
		),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 100% 100%;
}

/* ===== PATTERN: CHEVRON ===== */
/* V-shaped zigzag pattern - modern and directional */
.pattern-chevron {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 15px,
			rgba(212, 165, 116, 0.10) 15px,
			rgba(212, 165, 116, 0.10) 30px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 15px,
			rgba(212, 165, 116, 0.10) 15px,
			rgba(212, 165, 116, 0.10) 30px
		),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 100% 100%;
}

/* ===== PATTERN: CRESCENTS ===== */
/* Crescent shapes pattern - organic and technical */
.pattern-crescents {
	background-image:
		radial-gradient(circle at 0% 50%, transparent 24%, rgba(212, 165, 116, 0.15) 25%, rgba(212, 165, 116, 0.15) 26%, transparent 27%),
		radial-gradient(circle at 100% 50%, transparent 24%, rgba(212, 165, 116, 0.15) 25%, rgba(212, 165, 116, 0.15) 26%, transparent 27%),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 40px 40px, 40px 40px, 100% 100%;
	background-position: 0 0, 20px 20px, 0 0;
}

/* ===== PATTERN: CROSSHATCH ===== */
/* Diagonal grid forming diamond shapes - sophisticated and textured */
.pattern-crosshatch {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 18px,
			rgba(212, 165, 116, 0.10) 18px,
			rgba(212, 165, 116, 0.10) 20px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 18px,
			rgba(212, 165, 116, 0.10) 18px,
			rgba(212, 165, 116, 0.10) 20px
		),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 100% 100%;
}

/* ===== PATTERN: WAVES ===== */
/* Layered horizontal and vertical lines - calm and flowing */
.pattern-waves {
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 10px,
			rgba(212, 165, 116, 0.08) 10px,
			rgba(212, 165, 116, 0.08) 20px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 10px,
			rgba(212, 165, 116, 0.06) 10px,
			rgba(212, 165, 116, 0.06) 20px
		),
		linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	background-size: 100% 100%;
}

/* ===================================================================
   RESPONSIVE ADJUSTMENTS
   =================================================================== */

@media (max-width: 768px) {
	.pattern-container {
		min-height: 150px;
		padding: 1.5rem;
	}
}