/* ============================================================
   Deep Sea Fauna — Design Tokens (brand kit: bakery / chalkboard)
   CSS custom properties: colors, type, spacing, layout
   Fonts: self-hosted Source Sans 3 under /fonts/ (WOFF2 + WOFF, font-display: swap).
   ============================================================ */

/* ── Source Sans 3 (site-wide sans) ── */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'),
       url('/fonts/source-sans-3-latin-400-normal.woff') format('woff');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-sans-3-v19-latin-600.woff2') format('woff2'),
       url('/fonts/source-sans-3-latin-600-normal.woff') format('woff');
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/source-sans-3-v19-latin-700.woff2') format('woff2'),
       url('/fonts/source-sans-3-latin-700-normal.woff') format('woff');
}

:root {
  /* ── Brand colors (from brand-kit/brand-kit.txt) ── */
  --color-brioche:        #C8882A;  /* Primary — Brioche Gold */
  --color-crust:          #8B5E2A;  /* Secondary — Crust Amber */
  --color-cream:          #F5ECD7;  /* Accent / Fresh Cream */
  --color-shopfront:      #1A1A18;  /* Dark — Shopfront Black */
  --color-cobblestone:    #6B6560;  /* Neutral */
  --color-parchment:      #FAF3E8;  /* Background */
  --color-chalkboard:     #2D2D2B;  /* Pop / chalk panels */

  /* ── Semantic mapping (used across existing components) ── */
  --color-primary:        var(--color-shopfront);
  --color-primary-light:   #2a2824;  /* lifted shopfront for hovers/gradients */
  --color-primary-dark:   #0e0e0c;  /* footer / deeper bar */
  --color-bg:             var(--color-parchment);
  /* Warm amber wash (~10% Brioche on parchment, kit “bakery window”) */
  --color-bg-alt:         #f3ebdc;
  --color-bg-dark:        var(--color-chalkboard);
  --color-accent:         var(--color-brioche);
  --color-accent-light:   #d9a54a;  /* lighter gold for hovers on dark */
  --color-cta:            var(--color-brioche);
  --color-cta-light:      #d9a54a;
  --color-cta-dark:       var(--color-crust);
  /* Success stays green-leaning for “OK” / a11y semantics */
  --color-success:        #4a5d3e;
  --color-text:           var(--color-shopfront);
  --color-text-light:     #494743;  /* muted prose — ≥4.5:1 on parchment (was cobblestone-only) */
  --color-text-placeholder: #575450;
  --color-text-on-dark:   var(--color-cream);
  --color-text-on-dark-muted: rgba(245, 236, 215, 0.9);
  /* Text on gold / amber fills — shopfront on brioche meets WCAG AA (white on #C8882A ≈ 3:1) */
  --color-text-on-gold:   var(--color-shopfront);
  --color-border:         #d4c9b5;
  --color-border-dark:    rgba(245, 236, 215, 0.18);
  --color-error:          #b91c1c;
  --color-white:          #ffffff;

  /* ── WCAG 2.1 AA contrast (light surfaces: parchment / alt stripes) ──
     Brioche (#C8882A) is kept for large display accents & fills — not for small body text. */
  --color-link:             #5c3f14;  /* ≥4.5:1 on parchment for normal body links */
  --color-link-hover:       #3d2a0e;
  --color-heading-accent:   #6e4a18;  /* hero emphasis / h1 accents on light bg */
  --color-focus-ring:       #5c3f14;  /* visible focus on light backgrounds */
  --color-focus-ring-dark:  #f5e6bc;  /* focus on shopfront / chalkboard / CTA bands */

  /* ── Typography (single optimized sans family) ── */
  --font-display: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-subhead: var(--font-body);
  --font-body:    'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-display);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;

  --line-height-body:    1.6;
  --line-height-heading: 1.15;
  --line-height-tight:   1.05;

  /* ── Spacing (8px base) ── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Layout ── */
  --layout-max:         min(1360px, 92vw);
  --max-width:          1360px;
  --max-width-narrow:   920px;
  --content-padding-x:  clamp(1rem, 4vw, 3rem);
  --gutter-bg:          var(--color-bg);

  /* ── Surfaces (kit: parchment cards, thin Brioche border, icon washes) ── */
  --surface-card:       var(--color-parchment);
  --border-brand:       rgba(200, 136, 42, 0.42);
  --icon-wash-bg:       rgba(200, 136, 42, 0.14);
  --ring-focus-input:   rgba(200, 136, 42, 0.28);

  /* ── Radii — pills for primary actions per brand kit ── */
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ── Shadows — warm neutrals ── */
  --shadow-sm: 0 1px 2px rgba(26, 26, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(26, 26, 24, 0.09);
  --shadow-lg: 0 8px 24px rgba(26, 26, 24, 0.12);
  --shadow-xl: 0 16px 40px rgba(26, 26, 24, 0.14);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ── */
  --z-base:    1;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-skip:    9999;
}

@supports (color: color-mix(in srgb, white, black)) {
  :root {
    --color-bg-alt: color-mix(in srgb, var(--color-brioche) 10%, var(--color-parchment));
  }
}