/* ==========================================================================
   Unicorn Store — Design tokens
   ACTIVE THEME: Comic Pop

   Colour tokens are named by ROLE, not by hue, so swapping the theme is a
   change to this file alone — no section stylesheet mentions a colour name.
   The alternate Midnight Arcade token set is in THEMES.md, ready to paste
   over the palette block below.
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --u-paper:    #FFF8EC;   /* page background — warm newsprint, never white  */
  --u-paper-2:  #F6ECD9;   /* recessed panels, image wells                   */
  --u-white:    #FFFFFF;   /* cards                                          */
  --u-ink:      #12151C;   /* outlines, hard shadows, body text              */
  --u-ink-soft: #4A5260;   /* muted copy                                     */

  /* --- Accents -----------------------------------------------------------
     Six swatches. Every one is paired below with the only text colour that
     clears WCAG AA against it — that pairing is not a preference, it's a
     measurement, so use the --on-* token rather than guessing. */
  --u-primary:   #2563EB;  /* cobalt   — primary CTA, links                  */
  --u-secondary: #6941F0;  /* violet   — secondary accent, hover             */
  --u-info:      #38BDF8;  /* sky      — Bluey/Stitch, info badges           */
  --u-success:   #22B573;  /* grass    — in stock, category tags             */
  --u-accent:    #FFC531;  /* sunflower— highlights, stars, cart count       */
  --u-danger:    #D92D20;  /* red      — sale badges                         */
  --u-fresh:     #A3E635;  /* lime     — Minecraft, "new" flags              */
  --u-gold:      #E0B14A;  /* premium badges only (design.md §2)             */

  /* --- Text on accent ----------------------------------------------------
     Measured contrast against each swatch:
       primary 4.97:1 white · secondary 5.81:1 white · danger 4.83:1 white
       info, success, accent, fresh, gold — white fails, ink passes          */
  --on-primary:   var(--u-white);
  --on-secondary: var(--u-white);
  --on-danger:    var(--u-white);
  --on-info:      var(--u-ink);
  --on-success:   var(--u-ink);
  --on-accent:    var(--u-ink);
  --on-fresh:     var(--u-ink);
  --on-gold:      var(--u-ink);

  /* --- Shape --------------------------------------------------------------
     Comic Pop keeps design.md's "rounded everything" but pairs it with a
     heavy ink keyline and a hard, zero-blur offset shadow — the sticker /
     comic-panel language. */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  --ink-w: 3px;
  --ink-border: var(--ink-w) solid var(--u-ink);

  --shadow-sticker:    5px 5px 0 var(--u-ink);
  --shadow-sticker-lg: 8px 8px 0 var(--u-ink);
  --shadow-sticker-sm: 3px 3px 0 var(--u-ink);
  --shadow-lift:       10px 12px 0 var(--u-ink);
  --shadow-soft:       0 12px 32px rgba(18, 21, 28, 0.16);

  /* --- Type ---------------------------------------------------------------
     Archivo Black for display: wide, heavy, confident — reads as comic-cover
     lettering rather than as a children's rounded face. Archivo (its variable
     sibling) for everything else, so the page uses one type family with two
     voices. */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Display type is set uppercase with negative tracking; Archivo Black is
     already very wide, so it needs pulling in rather than letting out. */
  --track-display: -0.02em;

  --fs-h1:      clamp(1.95rem, 4.5vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 3.6vw, 2.6rem);
  --fs-h3:      clamp(1.15rem, 2.2vw, 1.5rem);
  --fs-body:    1rem;
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-small:   0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-ghost:   clamp(5rem, 20vh, 13rem);

  --lh-tight: 0.98;
  --lh-head:  1.1;
  --lh-body:  1.6;
  --tracking-eyebrow: 0.22em;

  /* --- Layout ------------------------------------------------------------- */
  --wrap:      1360px;
  --wrap-wide: 1600px;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --header-h:  72px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    160ms;
  --t-mid:     250ms;
  --t-slow:    450ms;

  /* --- Stacking ------------------------------------------------------------ */
  --z-header:    60;
  --z-menu:      70;
  --z-cursor:    80;
  --z-preloader: 90;
}