/* Hallmark · tokens · Tomorin WEB
 * theme: custom (tuned) · vibe: "late-night rehearsal room, blue and magenta, rounded"
 * axes: dark / rounded-sans / chromatic-magenta (~2deg)
 *
 * The palette is built from the three series' own colours:
 *   #3388BB  ->  oklch(60% 0.112 239)   MyGO!!!!!
 *   #881144  ->  oklch(41% 0.155 2)     Ave Mujica
 *   #FF7788  ->  oklch(73% 0.166 14)    Mewtype
 * Each literal value ships as its `-deep` token (button edges, dark fills).
 * The blue and the magenta are also the system's two accents, lifted for
 * contrast on dark paper. #FF7788 is already bright enough to use as-is.
 */

:root {
  /* ---- Paper · cool near-black, tinted toward the MyGO blue (239deg) ---- */
  --color-paper:        oklch(15% 0.012 239);
  --color-paper-2:      oklch(19% 0.014 239);
  --color-paper-3:      oklch(24% 0.016 239);
  --color-paper-sunk:   oklch(11% 0.012 239);

  /* ---- Ink ---- */
  --color-ink:          oklch(95% 0.008 239);
  --color-ink-2:        oklch(77% 0.010 239);
  --color-muted:        oklch(58% 0.012 239);
  --color-rule:         oklch(29% 0.014 239);
  --color-rule-2:       oklch(23% 0.014 239);

  /* ---- Primary accent = Ave Mujica's #881144 ---- */
  --color-accent:       oklch(66% 0.17 2);
  --color-accent-deep:  oklch(41% 0.155 2);   /* #881144, verbatim */
  --color-accent-ink:   oklch(15% 0.012 239);
  --color-focus:        oklch(72% 0.20 2);

  /* ---- Secondary accent = MyGO!!!!!'s #3388BB ---- */
  --color-accent-2:      oklch(70% 0.13 239);
  --color-accent-2-deep: oklch(60% 0.112 239); /* #3388BB, verbatim */

  /* ---- One hue per series.
     #FF7788 (hue 14) sits only 12deg from the lifted #881144 (hue 2), so as a
     *series marker* Ave Mujica runs deeper and more saturated than the CTA
     accent does. That keeps the two pinks 12 L-points and 18deg apart on a
     chip, while the CTA above stays the lifted #881144. ---- */
  --color-mygo:      oklch(70% 0.13 239);
  --color-mygo-deep: oklch(60% 0.112 239);   /* #3388BB, verbatim */
  --color-ave:       oklch(61% 0.195 356);
  --color-ave-deep:  oklch(41% 0.155 2);     /* #881144, verbatim */
  --color-mew:       oklch(73% 0.166 14);    /* #FF7788, verbatim */
  --color-mew-deep:  oklch(55% 0.17 14);

  /* ---- Translucent surfaces ---- */
  --color-hl:           oklch(66% 0.17 2 / 0.45);      /* highlighter band */
  --color-scrim:        oklch(11% 0.012 239 / 0.86);   /* caption over an image */
  --color-backdrop:     oklch(8% 0.012 239 / 0.82);    /* dialog backdrop */
  --color-cast-accent:  oklch(41% 0.155 2 / 0.55);     /* push-button ground shadow */
  --color-cast-neutral: oklch(0% 0 239 / 0.6);

  /* ---- Status ---- */
  --color-ok:    oklch(76% 0.15 160);
  --color-warn:  oklch(80% 0.15 85);
  --color-fail:  oklch(70% 0.18 25);

  /* ---- Type ---- */
  --font-display: "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-display-s: clamp(2rem, 4.5vw, 3rem);
  --text-display:   clamp(2.6rem, 6.5vw, 4.75rem);
  --text-counter:   clamp(2.4rem, 4.5vw + 1rem, 3.9rem);

  --tracking-display: -0.025em;
  --tracking-label:    0.11em;

  /* ---- Space · 4pt scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* ---- Shape ---- */
  --radius-card:  20px;
  --radius-panel: 24px;
  --radius-input: 12px;
  --radius-chip:  12px;
  --radius-sm:    8px;
  --radius-pill:  999px;
  --rule:         1px;

  /* ---- Elevation · two layers, contact + ambient ---- */
  --shadow-contact: 0 1px 2px oklch(0% 0 239 / 0.5);
  --shadow-card:    0 1px 2px oklch(0% 0 239 / 0.5), 0 14px 32px -18px oklch(0% 0 239 / 0.8);
  --shadow-lift:    0 2px 4px oklch(0% 0 239 / 0.5), 0 24px 48px -20px oklch(0% 0 239 / 0.85);
  --shadow-panel:   0 20px 60px -32px oklch(0% 0 239 / 0.9);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press:  cubic-bezier(0.2, 0.7, 0.3, 1);

  --dur-2xs: 70ms;
  --dur-xs:  140ms;
  --dur-sm:  220ms;
  --dur-md:  320ms;
  --dur-lg:  420ms;
  --dur-xl:  1200ms;

  /* ---- Layout ---- */
  --shell:        1180px;
  --shell-narrow: 860px;
  --page-gutter:  clamp(1.25rem, 4vw, 2.5rem);
}