/*
 * zuhora/css/tokens.css
 * ----
 * Design tokens - single source of truth.
 *
 * WCAG 2.2 contrast ratios (AA = 4.5:1 normal text, 3:1 large/UI)
 * All text-on-background pairs verified below.
 *
 * On --bg-base (#0D0A1A):
 *   --color-gold          8.54:1  ✓ AA
 *   --color-solar        13.95:1  ✓ AA
 *   --text-primary       18.41:1  ✓ AA
 *   --text-secondary      7.27:1  ✓ AA
 *   --text-muted          4.97:1  ✓ AA
 *
 * On --bg-surface (#1A1528):
 *   --color-gold          7.78:1  ✓ AA
 *   --color-solar        12.69:1  ✓ AA
 *   --text-primary       16.75:1  ✓ AA
 *   --text-secondary      6.61:1  ✓ AA
 *   --text-muted          4.53:1  ✓ AA
 *
 * Button text:
 *   --bg-base on --color-gold    8.54:1  ✓ AA
 *   --bg-base on --color-solar  13.95:1  ✓ AA
 *
 * Decorative / non-text (borders, fills, glows) are exempt from contrast
 * requirements under WCAG 1.4.11 (UI components need 3:1 against adjacent
 * colour - verified where interactive).
 * ----
 */

:root {

  /* -- Palette ------------------------------------------------------ */
  --color-midnight:   #0D0A1A;   /* primary dark background             */
  --color-lapis:      #1A1528;   /* surface / card background           */
  --color-dusk:       #4A3F6B;   /* muted purple - borders, tracks      */
  --color-gold:       #C9A84C;   /* primary accent                      */
  --color-solar:      #F0D98A;   /* highlight / zenith                  */
  --color-parchment:  #FAF8F4;   /* light mode background / base text   */

  /* -- Semantic backgrounds ----------------------------------------- */
  --bg-base:          var(--color-midnight);
  --bg-surface:       var(--color-lapis);
  --bg-surface-hover: #1E1930;   /* slightly lighter than lapis         */

  /* -- Semantic text ------------------------------------------------ */
  /* All values chosen to achieve ≥4.5:1 on both --bg-base and --bg-surface */
  --text-primary:     var(--color-parchment);  /* 18.41 / 16.75 */
  --text-secondary:   #A09CA8;                 /* 7.27  / 6.61  - body copy, descriptions */
  --text-muted:       #808086;                 /* 4.97  / 4.53  - metadata, labels         */

  /* -- Semantic accent ---------------------------------------------- */
  --accent:           var(--color-gold);       /* 8.54 / 7.78  - interactive gold  */
  --accent-bright:    var(--color-solar);      /* 13.95 / 12.69 - hover, highlight */

  /* -- Border & decorative ------------------------------------------ */
  /* These are non-text decorative; exempt from 4.5:1 but kept visible */
  --border-subtle:    rgba(74, 63, 107, 0.30); /* dusk at 30% - card borders     */
  --border-mid:       rgba(74, 63, 107, 0.50); /* dusk at 50% - input borders    */
  --border-accent:    rgba(201, 168, 76, 0.35);/* gold at 35% - accent borders   */
  --border-accent-hi: rgba(201, 168, 76, 0.55);/* gold at 55% - focused borders  */

  /* -- Glow / decorative fills -------------------------------------- */
  --glow-gold:        rgba(201, 168, 76, 0.07);
  --fill-day:         rgba(201, 168, 76, 0.28);
  --fill-night:       rgba(74, 63, 107, 0.18);

  /* -- Typography --------------------------------------------------- */
  --font-serif:       'Cormorant', Georgia, serif;
  --font-body:        'Nunito', sans-serif;;

  --text-xs:   11px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   20px;
  --text-lg:   24px;
  --text-xl:   36px;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0.04em;
  --tracking-wide:    0.10em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.28em;

  /* -- Spacing ------------------------------------------------------ */
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   20px;
  --space-7:   24px;
  --space-8:   28px;
  --space-9:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-28: 112px;

  /* -- Motion ------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-mid:  0.25s;
  --duration-slow: 0.35s;

  /* -- Layout ------------------------------------------------------- */
  --content-max:  900px;
  --content-wide: 1100px;
  --gutter-mobile: 20px;
  --gutter-desk:   48px;
}