/**
 * Design Tokens
 *
 * SECTION A — Legacy V6 tokens (backward-compat layer).
 * These tokens were ported from prototype/styles.css and remain in place so
 * all pre-HP-02B templates continue to function without modification.
 * Do NOT remove or rename these without a full audit of every file that
 * references them (header.css, navigation.css, components.css, etc.).
 *
 * SECTION B — HP-02A DS-* tokens (canonical layer for Homepage V2).
 * All new HP-02B CSS files (layout.css, nav.css, hero.css, cards.css,
 * forms.css, trust.css, cookie.css) must reference ONLY DS-* properties.
 * Never use DS-* and legacy tokens interchangeably in the same rule.
 *
 * Source: HP-02A.05A (Global), HP-02A.05B (Spacing), HP-02A.05C (Component).
 * BD-01 correction: DS-C-TEXT-MUTED resolved to #5E6673 (not #9CA3AF).
 * BD-02 placeholders: 4 tokens awaiting Founder resolution — see comments.
 */

/* =========================================================================
   SECTION A — Legacy V6 tokens (pre-HP-02B, backward compat)
   ========================================================================= */

:root {
	--color-primary: #0F4C3A;
	--color-secondary: #3E8E6B;
	--color-accent: #D9A441;
	--color-bg: #FAFAF7;
	--color-navy: #10243E;
	--color-text: #1A1A1A;
	--color-text-muted: #4F6F63;
	--color-text-on-navy: #FAFAF7;
	--color-text-on-navy-muted: #9FB8AC;
	--color-error: #C0362C;
	--color-success: #0F4C3A;
	--border-hairline: 1px solid rgba(15, 76, 58, 0.12);
	--border-hairline-navy: 1px solid rgba(250, 250, 247, 0.18);

	--font-display: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", "Courier New", monospace;

	--space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
	--space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

	--radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;
	--color-border: #e5e7eb;
	--shadow-card-hover: 0 4px 12px rgba(15, 76, 58, 0.08);
	--motion-fast: 150ms ease-out;
	--bp-wide: 1280px;
}

/* =========================================================================
   SECTION B — HP-02A DS-* Canonical Design Token System
   Source: HP-02A.05A / HP-02A.05B / HP-02A.05C
   =========================================================================

   Tier 1: Global tokens (raw values — no semantic meaning)
   Tier 2: Semantic tokens (map global → meaning)
   Tier 3: Alias/component tokens (map semantic → specific use)

   ========================================================================= */

:root {

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Colour Palette (DS-G-C-*)
	   ----------------------------------------------------------------------- */

	--DS-G-C-001: #1C2B4A;   /* Brand Navy */
	--DS-G-C-002: #2A6049;   /* Brand Green */
	--DS-G-C-003: #B8922A;   /* Brand Gold (fails AA for normal body text on light bg) */
	--DS-G-C-004: #FFFFFF;   /* Pure White */
	--DS-G-C-005: #F5F6F8;   /* Mist (off-white surface) */
	--DS-G-C-006: #1A1F2E;   /* Body text (near-black) */
	--DS-G-C-007: #D4D8DF;   /* Border */
	--DS-G-C-008: #E5E7EB;   /* Rule / divider */
	--DS-G-C-009: #5E6673;   /* Muted text — BD-01 corrected value (was #9CA3AF) */
	--DS-G-C-010: #B91C1C;   /* Error red */
	--DS-G-C-011: #166534;   /* Success green */
	--DS-G-C-012: #92400E;   /* Warning amber */
	--DS-G-C-013: #1E3A8A;   /* Info blue */
	--DS-G-C-014: #0F172A;   /* Dark surface (dark-mode base) */
	--DS-G-C-015: #1E2D45;   /* Dark card surface */
	--DS-G-C-016: #2A3A58;   /* Dark border */
	--DS-G-C-017: #CDD3E0;   /* Dark body text */
	--DS-G-C-018: #8B9AB5;   /* Dark muted text */

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Typography (DS-G-F-*)
	   ----------------------------------------------------------------------- */

	/* No external CDN — Georgia + system-ui only; Inter ExtraBold WOFF2 for logo only */
	--DS-G-F-001: Georgia, "Times New Roman", serif;         /* Serif (headings, pull quotes) */
	--DS-G-F-002: system-ui, -apple-system, "Segoe UI", sans-serif; /* Body / UI text */
	--DS-G-F-003: "Cascadia Code", "Fira Mono", "Courier New", monospace; /* Code / mono */
	--DS-G-F-LOGO: "Inter ExtraBold", system-ui, sans-serif; /* Logo "Harita" only — WOFF2 subset */

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Spacing Scale (DS-G-SP-*)
	   4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
	   ----------------------------------------------------------------------- */

	--DS-G-SP-001: 4px;
	--DS-G-SP-002: 8px;
	--DS-G-SP-003: 12px;
	--DS-G-SP-004: 16px;
	--DS-G-SP-005: 24px;
	--DS-G-SP-006: 32px;
	--DS-G-SP-007: 48px;
	--DS-G-SP-008: 64px;
	--DS-G-SP-009: 96px;

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Border Radius (DS-G-R-*)
	   ----------------------------------------------------------------------- */

	--DS-G-R-001: 2px;    /* Extra small */
	--DS-G-R-002: 4px;    /* Small */
	--DS-G-R-003: 6px;    /* Base */
	--DS-G-R-004: 8px;    /* Medium */
	--DS-G-R-005: 12px;   /* Large */
	--DS-G-R-006: 999px;  /* Pill */

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Breakpoints (DS-BP-*)
	   9 breakpoints per HP-02A.03 §3.
	   Usage: @media (min-width: var(--DS-BP-005)) { … }
	   Note: CSS custom properties cannot be used in @media queries — use
	   the raw px values listed here as the reference when writing breakpoints.
	   These variables serve as documentation only (not usable in media queries).
	   Raw values: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1600
	   ----------------------------------------------------------------------- */

	--DS-BP-001: 320px;   /* Minimum supported width */
	--DS-BP-002: 375px;   /* iPhone SE / standard small */
	--DS-BP-003: 390px;   /* iPhone 14/15 */
	--DS-BP-004: 414px;   /* iPhone Plus */
	--DS-BP-005: 768px;   /* Tablet portrait */
	--DS-BP-006: 1024px;  /* Tablet landscape / small desktop */
	--DS-BP-007: 1280px;  /* Desktop standard */
	--DS-BP-008: 1440px;  /* Desktop wide */
	--DS-BP-009: 1600px;  /* Ultra-wide (content well max) */

	/* -----------------------------------------------------------------------
	   Tier 1 — Global Motion (DS-G-M-*)
	   ----------------------------------------------------------------------- */

	--DS-G-M-001: 150ms ease-out;   /* Fast — micro-interactions */
	--DS-G-M-002: 250ms ease-out;   /* Base — most transitions */
	--DS-G-M-003: 400ms ease-in-out; /* Slow — page-level reveals */

	/* -----------------------------------------------------------------------
	   Tier 2 — Semantic Colour Tokens (DS-C-*)
	   Maps Tier 1 globals to meaningful roles. Always reference DS-C-* in
	   component CSS — never reference DS-G-C-* directly in component rules.
	   ----------------------------------------------------------------------- */

	/* Brand */
	--DS-C-BRAND-NAVY:   var(--DS-G-C-001);
	--DS-C-BRAND-GREEN:  var(--DS-G-C-002);
	--DS-C-BRAND-GOLD:   var(--DS-G-C-003);

	/* Surfaces */
	--DS-C-BG-PRIMARY:   var(--DS-G-C-004);  /* Page background (light) */
	--DS-C-BG-MIST:      var(--DS-G-C-005);  /* Section alternate background */
	--DS-C-BG-NAVY:      var(--DS-G-C-001);  /* Navy surface (header, footer, callouts) */
	--DS-C-BG-DARK:      var(--DS-G-C-014);  /* Dark-mode page background */

	/* Text */
	--DS-C-TEXT-PRIMARY: var(--DS-G-C-006);  /* Default body text */
	--DS-C-TEXT-MUTED:   var(--DS-G-C-009);  /* BD-01: corrected to #5E6673 */
	--DS-C-TEXT-ON-NAVY: var(--DS-G-C-004);  /* Text on navy surface */
	--DS-C-TEXT-GOLD:    var(--DS-G-C-003);  /* Gold — headings on navy only (not body text) */

	/* Borders & Rules */
	--DS-C-BORDER:       var(--DS-G-C-007);
	--DS-C-RULE:         var(--DS-G-C-008);

	/* Focus */
	--DS-C-FOCUS:        var(--DS-G-C-002);  /* Brand Green — ACC-QG-04 */

	/* Semantic states */
	--DS-C-ERROR:        var(--DS-G-C-010);
	--DS-C-SUCCESS:      var(--DS-G-C-011);
	--DS-C-WARNING:      var(--DS-G-C-012);
	--DS-C-INFO:         var(--DS-G-C-013);

	/* BD-02 PLACEHOLDERS — awaiting Founder resolution before Sprint 1 gate */
	/* These 4 tokens must be replaced with Founder-approved values. */
	--DS-C-HERO-OVERLAY: rgba(28, 43, 74, 0.65); /* BD-02: Hero image overlay — Founder to specify opacity/colour */
	--DS-C-BORDER-RULE:  var(--DS-G-C-008);      /* BD-02: Alias for section rule borders — Founder to confirm */

	/* -----------------------------------------------------------------------
	   Tier 2 — Semantic Typography (DS-T-*)
	   ----------------------------------------------------------------------- */

	--DS-T-FAMILY-SERIF:  var(--DS-G-F-001);
	--DS-T-FAMILY-SANS:   var(--DS-G-F-002);
	--DS-T-FAMILY-MONO:   var(--DS-G-F-003);
	--DS-T-FAMILY-LOGO:   var(--DS-G-F-LOGO);

	/* Type scale (fluid via clamp where appropriate) */
	--DS-T-SIZE-XS:   0.75rem;   /* 12px */
	--DS-T-SIZE-SM:   0.875rem;  /* 14px */
	--DS-T-SIZE-BASE: 1rem;      /* 16px */
	--DS-T-SIZE-MD:   1.125rem;  /* 18px */
	--DS-T-SIZE-LG:   1.25rem;   /* 20px */
	--DS-T-SIZE-XL:   1.5rem;    /* 24px */
	--DS-T-SIZE-2XL:  1.875rem;  /* 30px */
	--DS-T-SIZE-3XL:  2.25rem;   /* 36px */
	--DS-T-SIZE-4XL:  3rem;      /* 48px */

	/* Line heights */
	--DS-T-LEADING-TIGHT:  1.2;
	--DS-T-LEADING-SNUG:   1.35;
	--DS-T-LEADING-BASE:   1.65;
	--DS-T-LEADING-LOOSE:  1.8;

	/* Letter spacing */
	--DS-T-TRACKING-TIGHT:  -0.01em;
	--DS-T-TRACKING-BASE:    0;
	--DS-T-TRACKING-WIDE:    0.05em;
	--DS-T-TRACKING-WIDER:   0.1em;
	--DS-T-TRACKING-WIDEST:  0.15em;

	/* -----------------------------------------------------------------------
	   Tier 2 — Semantic Spacing (DS-SP-*)
	   ----------------------------------------------------------------------- */

	--DS-SP-SECTION-Y:     var(--DS-G-SP-007);   /* 48px — vertical section padding */
	--DS-SP-SECTION-Y-LG:  var(--DS-G-SP-008);   /* 64px — wide-viewport section padding */
	--DS-SP-CONTAINER-X:   var(--DS-G-SP-004);   /* 16px — horizontal content well padding (mobile) */
	--DS-SP-GAP-CARD:      var(--DS-G-SP-005);   /* 24px — card grid gap */
	--DS-SP-GAP-INLINE:    var(--DS-G-SP-003);   /* 12px — inline element gap */

	/* BD-02 PLACEHOLDERS */
	--DS-SP-INLINE-XS:     4px;    /* BD-02: extra-small inline spacing — Founder to confirm */
	--DS-LY-HERO-MIN-H:    560px;  /* BD-02: hero section minimum height — Founder to confirm */

	/* -----------------------------------------------------------------------
	   Tier 2 — Layout (DS-LY-*)
	   ----------------------------------------------------------------------- */

	--DS-LY-CONTENT-WELL-MAX:    1200px;  /* Maximum content well width at ≥ 1280px */
	--DS-LY-CONTENT-WELL-MOBILE: 335px;   /* Minimum readable content width at 375px */
	--DS-LY-Z-HEADER:     100;
	--DS-LY-Z-OVERLAY:    200;
	--DS-LY-Z-MODAL:      300;
	--DS-LY-Z-TOAST:      400;

	/* -----------------------------------------------------------------------
	   Tier 2 — Shadow (DS-SH-*)
	   ----------------------------------------------------------------------- */

	--DS-SH-SM:   0 1px 3px rgba(28, 43, 74, 0.08);
	--DS-SH-BASE: 0 2px 8px rgba(28, 43, 74, 0.10);
	--DS-SH-MD:   0 4px 16px rgba(28, 43, 74, 0.12);
	--DS-SH-LG:   0 8px 32px rgba(28, 43, 74, 0.14);

	/* -----------------------------------------------------------------------
	   Tier 3 — Component Alias Tokens (DS-A-*)
	   Maps semantic tokens to specific component properties.
	   ----------------------------------------------------------------------- */

	/* Focus ring — ACC-QG-04 */
	--DS-A-FOCUS-RING:        2px solid var(--DS-C-FOCUS);
	--DS-A-FOCUS-RING-OFFSET: 2px;

	/* Content well */
	--DS-A-WELL-MAX:  var(--DS-LY-CONTENT-WELL-MAX);
	--DS-A-WELL-PAD:  var(--DS-SP-CONTAINER-X);

	/* Hub card */
	--DS-A-CARD-BG:      var(--DS-C-BG-PRIMARY);
	--DS-A-CARD-BORDER:  var(--DS-C-BORDER);
	--DS-A-CARD-RADIUS:  var(--DS-G-R-004);
	--DS-A-CARD-SHADOW:  var(--DS-SH-SM);
	--DS-A-CARD-SHADOW-H: var(--DS-SH-MD);

	/* Newsletter form */
	--DS-A-INPUT-BG:      var(--DS-C-BG-PRIMARY);
	--DS-A-INPUT-BORDER:  var(--DS-C-BORDER);
	--DS-A-INPUT-RADIUS:  var(--DS-G-R-003);
	--DS-A-INPUT-FOCUS:   var(--DS-C-FOCUS);

	/* Buttons */
	--DS-A-BTN-PRIMARY-BG:     var(--DS-C-BRAND-GREEN);
	--DS-A-BTN-PRIMARY-TEXT:   var(--DS-G-C-004);
	--DS-A-BTN-PRIMARY-RADIUS: var(--DS-G-R-003);
	--DS-A-BTN-SECONDARY-BG:   transparent;
	--DS-A-BTN-SECONDARY-BORDER: var(--DS-C-BRAND-GREEN);
	--DS-A-BTN-SECONDARY-TEXT: var(--DS-C-BRAND-GREEN);
}

/* =========================================================================
   HP-02A Dark Mode — DS-* semantic overrides only.
   Light mode (prefers-color-scheme: light) uses :root values above.
   Dark mode: redefine surface, text, and border semantics only.
   Component CSS always references DS-C-* tokens — no hardcoded colours.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
	:root {
		--DS-C-BG-PRIMARY:   var(--DS-G-C-014);
		--DS-C-BG-MIST:      var(--DS-G-C-015);
		--DS-C-BG-NAVY:      var(--DS-G-C-001);   /* Navy stays constant */
		--DS-C-TEXT-PRIMARY: var(--DS-G-C-017);
		--DS-C-TEXT-MUTED:   var(--DS-G-C-018);
		--DS-C-TEXT-ON-NAVY: var(--DS-G-C-004);
		--DS-C-BORDER:       var(--DS-G-C-016);
		--DS-C-RULE:         var(--DS-G-C-015);
		--DS-A-CARD-BG:      var(--DS-G-C-015);
		--DS-A-CARD-BORDER:  var(--DS-G-C-016);
		--DS-A-INPUT-BG:     var(--DS-G-C-015);
		--DS-A-INPUT-BORDER: var(--DS-G-C-016);
		--DS-SH-SM:   0 1px 3px rgba(0, 0, 0, 0.3);
		--DS-SH-BASE: 0 2px 8px rgba(0, 0, 0, 0.35);
		--DS-SH-MD:   0 4px 16px rgba(0, 0, 0, 0.4);
		--DS-SH-LG:   0 8px 32px rgba(0, 0, 0, 0.45);
	}
}

/* Explicit theme toggle overrides — viewer's data-theme stamp wins over media query */
:root[data-theme="dark"] {
	--DS-C-BG-PRIMARY:   var(--DS-G-C-014);
	--DS-C-BG-MIST:      var(--DS-G-C-015);
	--DS-C-BG-NAVY:      var(--DS-G-C-001);
	--DS-C-TEXT-PRIMARY: var(--DS-G-C-017);
	--DS-C-TEXT-MUTED:   var(--DS-G-C-018);
	--DS-C-TEXT-ON-NAVY: var(--DS-G-C-004);
	--DS-C-BORDER:       var(--DS-G-C-016);
	--DS-C-RULE:         var(--DS-G-C-015);
	--DS-A-CARD-BG:      var(--DS-G-C-015);
	--DS-A-CARD-BORDER:  var(--DS-G-C-016);
	--DS-A-INPUT-BG:     var(--DS-G-C-015);
	--DS-A-INPUT-BORDER: var(--DS-G-C-016);
	--DS-SH-SM:   0 1px 3px rgba(0, 0, 0, 0.3);
	--DS-SH-BASE: 0 2px 8px rgba(0, 0, 0, 0.35);
	--DS-SH-MD:   0 4px 16px rgba(0, 0, 0, 0.4);
	--DS-SH-LG:   0 8px 32px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
	/* Explicitly restore all dark overrides to light defaults */
	--DS-C-BG-PRIMARY:   var(--DS-G-C-004);
	--DS-C-BG-MIST:      var(--DS-G-C-005);
	--DS-C-TEXT-PRIMARY: var(--DS-G-C-006);
	--DS-C-TEXT-MUTED:   var(--DS-G-C-009);
	--DS-C-BORDER:       var(--DS-G-C-007);
	--DS-C-RULE:         var(--DS-G-C-008);
	--DS-A-CARD-BG:      var(--DS-G-C-004);
	--DS-A-CARD-BORDER:  var(--DS-G-C-007);
	--DS-A-INPUT-BG:     var(--DS-G-C-004);
	--DS-A-INPUT-BORDER: var(--DS-G-C-007);
	--DS-SH-SM:   0 1px 3px rgba(28, 43, 74, 0.08);
	--DS-SH-BASE: 0 2px 8px rgba(28, 43, 74, 0.10);
	--DS-SH-MD:   0 4px 16px rgba(28, 43, 74, 0.12);
	--DS-SH-LG:   0 8px 32px rgba(28, 43, 74, 0.14);
}