/* ============================================================
   Jovian Design — Brand Tokens v0.1 (color system first pass)
   Canonical token source. styleguide/index.html embeds a copy
   of these values so the guide stays a single portable file;
   if you change a value here, change it there too (or vice
   versa) until we add a build step.
   Contrast: every pairing documented in the style guide passes
   WCAG 2.2 AA (4.5:1 text, 3:1 large text / UI components),
   verified programmatically — see the contrast matrix in the
   guide, which recomputes ratios from these values on load.
   ============================================================ */

:root {
  /* ---------- Primitives: Night (aubergine-tinted neutrals) ---------- */
  --jd-night-950: #120D1A;  /* Deep Field — deepest backdrop, on-accent text */
  --jd-night-900: #1A1326;  /* Nightfall — default page background */
  --jd-night-800: #251B36;  /* Umbra — surface (cards, nav) */
  --jd-night-700: #322647;  /* Penumbra — raised surface, subtle borders */
  --jd-night-600: #453A5C;  /* Ridgeline — borders, dividers */

  /* ---------- Primitives: Moonlight (text neutrals) ---------- */
  --jd-moon-100: #F0EBF7;   /* Moonlight — primary text */
  --jd-moon-300: #C9C0D8;   /* Silver Haze — secondary text */
  --jd-moon-500: #A396B8;   /* Dusk Silver — muted text, min for body copy */

  /* ---------- Primitives: Twilight (brand purples) ---------- */
  --jd-twilight-600: #5C4A80; /* Deep Twilight — filled chips/bands w/ light text */
  --jd-twilight-400: #8E7BB8; /* Twilight — decorative, large text only */
  --jd-lilac-300: #C4B2E8;    /* Lilac — links, info, Guild accent */
  --jd-lilac-200: #D7CAF0;    /* Pale Lilac — link hover, focus ring */

  /* ---------- Primitives: Io (Jovian orange — the triangle) ---------- */
  --jd-io-300: #F7A263;     /* Io Bright — orange text on dark, small sizes */
  --jd-io-400: #F58F49;     /* Io Rising — orange headings/text on dark */
  --jd-io-500: #EE7A33;     /* Io — primary CTA fill (dark text on top) */
  --jd-io-600: #D96524;     /* Io Deep — CTA hover/active */

  /* ---------- Primitives: warm & natural accents ---------- */
  --jd-dusk-300: #E4A9C0;   /* Dusk Rose — sky pinks, illustration, tags */
  --jd-sage-300: #AFC7A4;   /* Sage — Guild growth accent, success text */
  --jd-sage-400: #93AE88;   /* Deep Sage — sage UI elements, icons */
  --jd-gold-300: #E8C476;   /* Candle Gold — warmth, warning text */
  --jd-rose-300: #F2919F;   /* Signal Rose — danger/error text */

  /* ---------- Semantic: layout ---------- */
  --jd-bg: var(--jd-night-900);
  --jd-bg-deep: var(--jd-night-950);
  --jd-surface: var(--jd-night-800);
  --jd-surface-raised: var(--jd-night-700);
  --jd-border: var(--jd-night-600);
  --jd-border-subtle: var(--jd-night-700);

  /* ---------- Semantic: text ---------- */
  --jd-text: var(--jd-moon-100);
  --jd-text-secondary: var(--jd-moon-300);
  --jd-text-muted: var(--jd-moon-500);
  --jd-heading: var(--jd-moon-100);

  /* ---------- Semantic: interactive ---------- */
  --jd-link: var(--jd-lilac-300);
  --jd-link-hover: var(--jd-lilac-200);
  --jd-accent: var(--jd-io-500);
  --jd-accent-bright: var(--jd-io-400);
  --jd-accent-deep: var(--jd-io-600);
  --jd-on-accent: var(--jd-night-950);
  --jd-focus: var(--jd-lilac-200);

  /* ---------- Semantic: feedback ---------- */
  --jd-success: var(--jd-sage-300);
  --jd-warning: var(--jd-gold-300);
  --jd-danger: var(--jd-rose-300);
  --jd-info: var(--jd-lilac-300);

  /* ---------- Semantic: filled elements carrying light text ---------- */
  --jd-fill-twilight: var(--jd-twilight-600);
  --jd-on-fill-twilight: var(--jd-moon-100);

  /* ---------- Semantic: accents used by the theme system ---------- */
  --jd-kicker: var(--jd-io-400);   /* eyebrow labels; themes recolor this */
  --sky-glow: var(--jd-lilac-200); /* hero sky glow color per theme */

  /* ---------- Typography ---------- */
  --jd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --jd-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --jd-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  /* Scale (site css aliases these as --font-display / --font-body) */
  --jd-size-xs: 0.76rem;    /* kickers, fine print */
  --jd-size-sm: 0.88rem;    /* captions, metadata */
  --jd-size-base: 1rem;     /* body */
  --jd-size-md: 1.08rem;    /* ledes */
  --jd-size-lg: 1.3rem;     /* h3 */
  --jd-size-xl: 1.7rem;     /* h2 floor (clamps up to 2.3rem) */
  --jd-size-2xl: 2.3rem;    /* h2 ceiling */
  --jd-size-display: clamp(2.4rem, 5.6vw, 3.7rem); /* h1/hero */

  /* ---------- Paper variant (print & light collateral) ----------
     First used by collateral/capability-statement.html. AA-checked:
     ink 15.8:1, ink-2 10.8:1, muted 6.7:1, accent 5.1:1 on paper.
     NOTE: Io #EE7A33 FAILS as text on light grounds — paper uses
     the deepened --jd-paper-accent instead. */
  --jd-paper: #FAF8FC;
  --jd-paper-card: #F1EDF6;
  --jd-paper-line: #DED7E8;
  --jd-paper-ink: #221A33;
  --jd-paper-ink-2: #43315E;
  --jd-paper-muted: #5F5470;
  --jd-paper-accent: #B34A0F;

  /* ---------- Gradients ---------- */
  /* Twilight Veil — quiet section backgrounds, pure dusk */
  --jd-gradient-veil: linear-gradient(180deg, #1A1326 0%, #251B36 55%, #322647 100%);
  /* Horizon — hero skies; purple dusk warming to ember at the horizon line */
  --jd-gradient-horizon: linear-gradient(180deg, #1A1326 0%, #322647 42%, #5C4A80 68%, #8E5A79 85%, #C06A4E 100%);

  /* ---------- Motion (2026-09-29) ----
     Durations pair with
     easings: tap+e-in for presses, quick/move+e-out for hovers and
     slides, settle+e-spring for anything that lands. --press is the
     active-state scale. */
  --t-tap: .1s;
  --t-quick: .16s;
  --t-move: .22s;
  --t-settle: .34s;
  --e-out: cubic-bezier(.2, .8, .2, 1);
  --e-in: cubic-bezier(.4, 0, .7, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --press: .97;
}