/* ═══ The Quiet Ascent — design tokens (from design-system handoff) ═══
   Single source: colors + typography + spacing + effects. Fonts load via <link>. */

/* ─── Color tokens ───────────────────────────────────────────────────────────
   Studio-Ghibli-inspired natural palette — golden-hour warmth meeting a living
   forest at dusk. The tricolor (saffron / green / navy) is still the origin
   story, but the balance is even now: warm gold and living green carry equal
   weight, a soft dusk-sky blue is a real third color, and warm cream/white
   returns as an actual light surface so nothing feels underground.

   Warm  → Saffron  (honey-gold, golden hour) — co-primary, key actions
   Cool  → Forest   (verdant, alive) — co-primary, equal weight
   Sky   → Dusk blue (Ghibli evening sky) — real third color
   Light → Cream / warm-white — real light surfaces AND text on dark
   Dark  → Deep pine dusk — warm, living darkness, never a bunker
*/
:root {
  /* ── Dark ground — forest canopy at night (deep green-black, lantern-lit) ── */
  --ink-900: #0e1712;   /* page background — deep green-black night */
  --ink-850: #13201a;   /* deep panel */
  --ink-800: #182a22;   /* card / surface — richer forest green */
  --ink-750: #1f3329;   /* raised / input / hover surface */
  --ink-700: #2b4437;   /* borders, dividers */
  --ink-600: #3c5a49;   /* strong border / disabled edge */

  /* ── Light surfaces — warm cream / white (real light sections & cards) ── */
  --paper-50:  #f8f2e6;  /* lightest warm white — hero / light section bg */
  --paper-100: #f1e8d6;  /* cream card on light */
  --paper-200: #e6d9c1;  /* border / step on light */
  --paper-300: #d5c4a4;  /* deeper cream detail */
  --ink-on-light: #22302a; /* deep pine — text on cream */
  --ink-on-light-soft: #4d5c53; /* muted text on cream */

  /* ── Cream base (text & bright detail on dark) ── */
  --cream-50:  #f5eede;
  --cream-100: #e9dfc8;
  --cream-300: #bcb598;  /* muted text on dark */
  --cream-500: #8f9683;  /* subtle / meta — leans green in the dusk */
  --cream-700: #5f6b5c;  /* faint / placeholder */

  /* ── Saffron — true saffron: burnt marigold / turmeric-orange (CO-PRIMARY) ── */
  --saffron-300: #f2ac64;
  --saffron-400: #ea9441;
  --saffron-500: #e07c29;  /* primary — marigold orange, warm & inviting, not yellow */
  --saffron-600: #c26420;  /* hover */
  --saffron-700: #9c4f18;  /* pressed */
  --saffron-glow: rgba(224, 124, 41, 0.30);
  --saffron-tint: rgba(224, 124, 41, 0.16);
  --saffron-tint-strong: rgba(224, 124, 41, 0.24);

  /* ── Forest — verdant, alive (CO-PRIMARY, cool, equal weight) ── */
  --forest-300: #86c99b;
  --forest-400: #5cae79;
  --forest-500: #40935f;  /* co-primary — actions, success, big surfaces */
  --forest-600: #327a4c;
  --forest-700: #235739;
  --forest-glow: rgba(64, 147, 95, 0.22);
  --forest-tint: rgba(64, 147, 95, 0.15);
  --forest-tint-strong: rgba(64, 147, 95, 0.22);

  /* ── Sky — Ghibli dusk-evening blue (REAL third color) ── */
  --sky-300: #9cc2e0;
  --sky-400: #6fa0cc;
  --sky-500: #5083b5;  /* real blue — features, info, links */
  --sky-600: #3e678f;
  --sky-700: #2f4e6c;
  --sky-glow: rgba(80, 131, 181, 0.22);
  --sky-tint: rgba(80, 131, 181, 0.16);

  /* ── Navy aliases (kept for compatibility → now the dusk-sky blue) ── */
  --navy-400: var(--sky-400);
  --navy-500: var(--sky-500);
  --navy-600: var(--sky-600);

  /* ── Feedback ── */
  --danger-400: #d98479;
  --danger-500: #c56458;
  --warn-400:   #e2b24d;

  /* ── Semantic aliases ── */
  --bg:              var(--ink-900);
  --surface:         var(--ink-800);
  --surface-raised:  var(--ink-750);
  --surface-deep:    var(--ink-850);
  --border:          var(--ink-700);
  --border-strong:   var(--ink-600);

  /* Light-surface semantics */
  --surface-light:   var(--paper-100);
  --surface-light-2: var(--paper-50);
  --border-light:    var(--paper-200);
  --text-on-light:   var(--ink-on-light);
  --text-on-light-muted: var(--ink-on-light-soft);

  --text-primary:    var(--cream-50);
  --text-heading:    var(--cream-100);
  --text-muted:      var(--cream-300);
  --text-subtle:     var(--cream-500);
  --text-placeholder:var(--cream-700);
  --text-on-accent:  #1c2410;   /* on saffron */
  --text-on-forest:  #f5eede;   /* on forest */

  /* Two co-primaries + a real third; accent = the one key action per screen */
  --primary-warm:    var(--saffron-500);
  --primary-cool:    var(--forest-500);
  --accent:          var(--saffron-500);
  --accent-hover:    var(--saffron-600);
  --accent-press:    var(--saffron-700);
  --accent-bright:   var(--saffron-300);

  --secondary:       var(--forest-500);
  --secondary-hover: var(--forest-600);

  --link:            var(--sky-400);
  --info:            var(--sky-500);
  --success:         var(--forest-400);
  --danger:          var(--danger-500);
  --warning:         var(--warn-400);
}

/* ─── Typography tokens ──────────────────────────────────────────────────────
   Display  → Bebas Neue     (condensed, all-caps headlines, big numbers, CTAs)
   Serif    → Spectral       (body copy, editorial descriptions, quotes)
   Sans     → Hanken Grotesk (UI labels, eyebrows, meta, nav, form fields)
*/
:root {
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  --font-serif:   'Spectral', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Type scale (rem, base 16px) */
  --t-2xs:  0.6875rem;  /* 11px — eyebrows, micro-labels */
  --t-xs:   0.75rem;    /* 12px */
  --t-sm:   0.875rem;   /* 14px */
  --t-base: 1rem;       /* 16px — body */
  --t-md:   1.125rem;   /* 18px — lead body */
  --t-lg:   1.375rem;   /* 22px */
  --t-xl:   1.75rem;    /* 28px */
  --t-2xl:  2.5rem;     /* 40px */
  --t-3xl:  3.5rem;     /* 56px */
  --t-4xl:  5rem;       /* 80px */
  --t-5xl:  7.5rem;     /* 120px — hero display */

  /* Line heights */
  --lh-tight:   0.92; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* Letter spacing */
  --ls-display: 0.04em; /* @kind other */
  --ls-eyebrow: 0.28em; /* @kind other */
  --ls-label:   0.10em; /* @kind other */
  --ls-tight:  -0.02em; /* @kind other */

  /* Weights (sans) */
  --fw-normal: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semi:   600; /* @kind other */
  --fw-bold:   700; /* @kind other */
  --fw-black:  800; /* @kind other */
}

/* ─── Spacing, radii, layout ─────────────────────────────────────────────────
   8px soft grid. Generous whitespace is a brand value — prefer larger steps.
*/
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radii — organic curves over sharp tech angles, but restrained */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* Touch target */
  --touch: 44px;

  /* Content widths */
  --w-prose:   64ch;
  --w-content: 1120px;
  --w-narrow:  620px;
}

/* ─── Shadows, glows, textures, motion ───────────────────────────────────────
   Depth comes from soft, warm shadows and restrained saffron glow on the ONE
   key action per screen — never a light-show. Grain overlay adds natural texture.
*/
:root {
  /* Dusk-forest elevation — shadows carry the deep pine, warm not neutral-black */
  --shadow-sm:  0 1px 2px rgba(10, 18, 14, 0.40);
  --shadow-md:  0 6px 20px rgba(10, 18, 14, 0.45);
  --shadow-lg:  0 18px 48px rgba(8, 15, 12, 0.55);
  --shadow-card: 0 2px 12px rgba(10, 18, 14, 0.38), inset 0 1px 0 rgba(245, 238, 222, 0.04);
  /* Soft shadow for cards sitting on LIGHT (cream) surfaces */
  --shadow-light: 0 2px 10px rgba(74, 62, 40, 0.10), 0 12px 32px rgba(74, 62, 40, 0.08);

  /* Glows — one per screen, and no longer only warm. Pick the tone that fits. */
  --glow-accent:  0 0 26px rgba(224, 124, 41, 0.36), 0 0 66px rgba(224, 124, 41, 0.16);
  --glow-accent-sm: 0 0 18px rgba(224, 124, 41, 0.28);
  --glow-forest:  0 0 24px rgba(64, 147, 95, 0.24), 0 0 60px rgba(64, 147, 95, 0.10);
  --glow-sky:     0 0 24px rgba(80, 131, 181, 0.24);

  /* Focus ring */
  --ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--saffron-500); /* @kind shadow */

  /* Motion — calm and grounded: short, eased, no bounce */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast: 0.14s; /* @kind other */
  --dur:      0.22s; /* @kind other */
  --dur-slow: 0.4s; /* @kind other */

  /* Grain texture (fine, low-opacity film) — apply as an overlay layer */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") /* @kind other */;
}