/**
 * Hayder Voice — Design Tokens
 * All CSS custom properties in @layer tokens.
 */

/* @property typed custom properties */
@property --c-accent {
	syntax: '<color>';
	inherits: true;
	initial-value: oklch(65% 0.12 55);
}

@property --gradient-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --progress {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

@property --blur-amount {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}

@layer tokens {

	:root {
		/* ============================================================
		 * COLORS — OKLCH Color System
		 * ============================================================ */

		/* Dark backgrounds */
		--c-void:         oklch(8%  0.004 60);
		--c-abyss:        oklch(10% 0.005 60);
		--c-surface:      oklch(12% 0.006 60);
		--c-border:       oklch(16% 0.006 60);
		--c-border-mid:   oklch(20% 0.007 60);
		--c-dust:         oklch(35% 0.008 60);
		--c-muted:        oklch(52% 0.010 65);
		--c-body:         oklch(72% 0.012 70);
		--c-heading:      oklch(88% 0.010 70);
		--c-white:        oklch(95% 0.008 75);
		--c-pure:         oklch(98% 0.004 80);

		/* Amber — primary accent */
		--c-amber:        oklch(70% 0.120 55);
		--c-amber-dim:    oklch(52% 0.090 55);
		--c-amber-bright: oklch(80% 0.130 55);
		--c-amber-glow:   oklch(70% 0.120 55 / 0.15);
		--c-amber-border: oklch(70% 0.120 55 / 0.30);

		/* Emotional palette */
		--c-ember:  oklch(55% 0.140 30);
		--c-sage:   oklch(65% 0.080 155);
		--c-slate:  oklch(58% 0.060 230);

		/* Computed colors */
		--c-amber-surface: color-mix(in oklch, var(--c-amber) 8%, var(--c-void));
		--c-amber-overlay: color-mix(in oklch, var(--c-amber) 15%, transparent);

		/* Semantic alias */
		--c-accent: var(--c-amber);

		/* ============================================================
		 * TYPOGRAPHY
		 * ============================================================ */

		--font-serif:   'Cormorant Garamond VF', 'Cormorant Garamond', Georgia, serif;
		--font-display: 'Playfair Display', serif;
		--font-sans:    'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

		/* Fluid type scale — uses container queries (cqi) */
		--text-2xs: clamp(0.65rem,  0.8cqi,  0.75rem);
		--text-xs:  clamp(0.75rem,  1cqi,    0.875rem);
		--text-sm:  clamp(0.875rem, 1.2cqi,  1rem);
		--text-base:clamp(1rem,     1.4cqi,  1.125rem);
		--text-md:  clamp(1.125rem, 1.6cqi,  1.375rem);
		--text-lg:  clamp(1.25rem,  1.8cqi,  1.625rem);
		--text-xl:  clamp(1.5rem,   2.2cqi,  2rem);
		--text-2xl: clamp(2rem,     3cqi,    2.75rem);
		--text-3xl: clamp(2.5rem,   5cqi,    4rem);
		--text-4xl: clamp(3.5rem,   7cqi,    6rem);
		--text-hero:clamp(4rem,     10cqi,   10rem);

		/* ============================================================
		 * SPACING
		 * ============================================================ */

		--space-1:  0.25rem;
		--space-2:  0.5rem;
		--space-3:  0.75rem;
		--space-4:  1rem;
		--space-5:  1.25rem;
		--space-6:  1.5rem;
		--space-8:  2rem;
		--space-10: 2.5rem;
		--space-12: 3rem;
		--space-16: 4rem;
		--space-20: 5rem;
		--space-24: 6rem;
		--space-32: 8rem;
		--space-40: 10rem;
		--space-48: 12rem;
		--space-64: 16rem;

		/* ============================================================
		 * CONTAINERS
		 * ============================================================ */

		--container-sm: 680px;
		--container-md: 960px;
		--container-lg: 1200px;
		--container-xl: 1440px;
		--container-pad: clamp(1rem, 5vw, 4rem);

		/* ============================================================
		 * BORDER RADIUS
		 * ============================================================ */

		--radius-sm:   4px;
		--radius-md:   8px;
		--radius-lg:   16px;
		--radius-xl:   24px;
		--radius-full: 9999px;

		/* ============================================================
		 * SHADOWS
		 * ============================================================ */

		--shadow-sm:    0 1px 3px oklch(0% 0 0 / 0.4);
		--shadow-md:    0 4px 16px oklch(0% 0 0 / 0.5);
		--shadow-lg:    0 12px 40px oklch(0% 0 0 / 0.6);
		--shadow-xl:    0 24px 80px oklch(0% 0 0 / 0.7);
		--shadow-glow:  0 0 40px var(--c-amber-glow);
		--shadow-amber: 0 8px 32px oklch(70% 0.120 55 / 0.25);

		/* ============================================================
		 * EASING
		 * ============================================================ */

		--ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
		--ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
		--ease-dramatic: cubic-bezier(0.76, 0, 0.24, 1);
		--ease-in-expo:  cubic-bezier(0.7,  0, 0.84, 0);
		--ease-out-expo: cubic-bezier(0.16, 1, 0.3,  1);
		--ease-linear:   linear;

		/* ============================================================
		 * DURATIONS
		 * ============================================================ */

		--duration-fast:   150ms;
		--duration-base:   300ms;
		--duration-slow:   600ms;
		--duration-slower: 900ms;
		--duration-page:   1200ms;

		/* ============================================================
		 * Z-INDEX
		 * ============================================================ */

		--z-below:      -1;
		--z-base:        0;
		--z-card:        10;
		--z-dropdown:    20;
		--z-sticky:      30;
		--z-header:      40;
		--z-overlay:     50;
		--z-modal:       60;
		--z-cursor:      70;
		--z-loader:      80;
		--z-transition:  90;

		/* ============================================================
		 * LINE HEIGHTS
		 * ============================================================ */

		--lh-tight:   1.1;
		--lh-snug:    1.3;
		--lh-normal:  1.6;
		--lh-relaxed: 1.8;
		--lh-reading: 1.9;
		--lh-loose:   2.0;

		/* ============================================================
		 * LETTER SPACING
		 * ============================================================ */

		--ls-tight:  -0.02em;
		--ls-normal:  0em;
		--ls-wide:    0.04em;
		--ls-wider:   0.08em;
		--ls-widest:  0.16em;

		/* ============================================================
		 * HEADER
		 * ============================================================ */

		--header-height:     72px;
		--header-height-md:  64px;
		--header-height-sm:  56px;

		/* ============================================================
		 * TRANSITIONS (shorthand)
		 * ============================================================ */

		--transition-base:  all var(--duration-base) var(--ease-smooth);
		--transition-fast:  all var(--duration-fast) var(--ease-smooth);
		--transition-slow:  all var(--duration-slow) var(--ease-smooth);
		--transition-color: color var(--duration-base) var(--ease-smooth),
		                    background-color var(--duration-base) var(--ease-smooth),
		                    border-color var(--duration-base) var(--ease-smooth);
	}

} /* @layer tokens */