/* ==========================================================================
   CompareIt — design tokens v0.2
   Single source of truth. Imported first, before any component CSS.
   Components must reference the SEMANTIC layer, never the raw ramp, and must
   never redefine a hex value locally — with one documented exception: anything
   drawn on the app bar, which is ink in BOTH themes and therefore needs raw
   values that do not flip.

   Themes: the bootstrap script in index.html always stamps a RESOLVED
   data-theme ("light" or "dark"), resolving the user's System preference
   against prefers-color-scheme. That is why the light palette lives in one
   [data-theme="light"] block and is not duplicated under a media query.
   ========================================================================== */

:root {
  /* --- spectrum ---------------------------------------------------------
     Five hues, evenly stepped down the wheel so the signature band sweeps
     cleanly left to right. Every one clears 4.5:1 against the canvas.
     Swap these five values to re-skin the entire app. */
  --sp-violet: #6E4BF5;
  --sp-teal:   #22D8C6;
  --sp-lime:   #7CE83A;
  --sp-amber:  #FFC53D;
  --sp-coral:  #FF5C7A;

  /* pressed / hover variants */
  --sp-violet-700: #5636D4;
  --sp-teal-700:   #17A99B;
  --sp-lime-700:   #5EC324;

  /* --- neutral ramp (dark-first, cool-tinted) ---------------------------- */
  --n-000: #000000;   /* grid gutters, deepest */
  --n-050: #101218;   /* canvas */
  --n-100: #171A22;   /* surface */
  --n-200: #21242E;   /* raised */
  --n-300: #2C3040;   /* hairline */
  --n-500: #8C8E9E;   /* faint text   — 5.3:1 on canvas */
  --n-700: #A2A4B4;   /* muted text   — 7.0:1 on canvas */
  --n-900: #FFFFFF;   /* strong text */

  /* --- semantic ---------------------------------------------------------- */
  --bg-canvas: var(--n-050);
  --bg-surface: var(--n-100);
  --bg-raised: var(--n-200);
  --bg-gutter: var(--n-000);
  --bg-void: #05060A;   /* the ground beside the shell past --shell-max */
  --border-hair: var(--n-300);

  --text-strong: var(--n-900);
  --text-muted: var(--n-700);
  --text-faint: var(--n-500);
  --text-on-accent: #FFFFFF;   /* on --accent fills — 5.3:1 */
  --text-on-bright: #101218;   /* on teal/lime/amber/coral fills */

  --accent: var(--sp-violet);          /* primary action, active nav */
  --accent-pressed: var(--sp-violet-700);
  --axis-sort: var(--sp-violet);       /* control 1 — sort by */
  --axis-subject: var(--sp-lime);      /* control 2 — item measured */
  --axis-reference: var(--sp-teal);    /* control 3 — reference object */

  --safe: var(--sp-lime);
  --unsafe: var(--sp-coral);
  --like: var(--sp-coral);
  --award: var(--sp-amber);
  --focus-ring: var(--sp-teal);

  /* the signature band — all five hues, left to right */
  --spectrum: linear-gradient(90deg,
    var(--sp-violet) 0%, var(--sp-teal) 27%, var(--sp-lime) 52%,
    var(--sp-amber) 76%, var(--sp-coral) 100%);
  /* Violet into indigo, NOT into teal: the gradient carries white text on the post
     button and the promo CTA, and white on --sp-teal is 1.8:1. Ending in indigo keeps
     the whole ramp above 5:1. It is also more correct by the hue rule — teal means
     "reference object", and a Post button is not a reference object. */
  --accent-gradient: linear-gradient(120deg, var(--sp-violet), #4A2ECF);
  --scrim: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 58%);

  /* --- type -------------------------------------------------------------- */
  --ff-display: "Archivo Black", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --ff-ui: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-data: "DM Mono", ui-monospace, SFMono-Regular, "Roboto Mono", monospace;

  --fs-wordmark: 1.5rem;   /* 24 */
  --fs-title: 1.25rem;     /* 20 */
  --fs-body: 0.9375rem;    /* 15 */
  --fs-label: 0.8125rem;   /* 13 */
  --fs-data: 0.6875rem;    /* 11 */
  --fs-micro: 0.625rem;    /* 10 */

  /* --- space ------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --gutter: 16px;
  --grid-gap: 4px;

  /* --- widths -------------------------------------------------------------
     The shell grows with the viewport up to --shell-max, then centres. The
     dock keeps phone proportions at every width — it stays a floating pill,
     never a 1600px bar. --promo-max caps the sponsored card so its copy
     column keeps a readable line length on a wide screen. */
  --shell-max: 1600px;
  --dock-max: 520px;
  --promo-max: 900px;

  /* --- radius ------------------------------------------------------------ */
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  /* --- elevation --------------------------------------------------------- */
  --e-1: 0 1px 2px rgba(0,0,0,.6);
  --e-2: 0 10px 30px rgba(0,0,0,.65);
  --e-glow: 0 0 0 1px var(--accent), 0 6px 20px rgba(110,75,245,.35);

  /* --- motion ------------------------------------------------------------ */
  --t-fast: 120ms; --t-base: 220ms;
  --ease: cubic-bezier(.2,.8,.25,1);
}

/* --- light theme (alternate) ---------------------------------------------
   The spectrum hues are tuned for a dark canvas. On light they stay valid as
   FILLS with --text-on-bright over them, but four of them fail as text or as
   an icon colour, so those roles get darkened variants here. */
[data-theme="light"] {
  --bg-canvas: #F3F4F8;
  --bg-surface: #FFFFFF;
  --bg-raised: #E9EBF1;
  --bg-gutter: #DFE2EA;
  --bg-void: #DADDE6;
  --border-hair: #DCDFE8;

  --text-strong: #101218;
  --text-muted: #565B6B;   /* 6.8:1 on surface */
  --text-faint: #6E7386;   /* 4.7:1 on surface */

  /* text/icon-safe variants — fills keep the bright hues above */
  --like: #D42E52;
  --unsafe: #D42E52;
  --safe: #367C0F;
  --award: #A06A00;
  --axis-subject: #367C0F;
  --axis-reference: #0B7A71;
  --focus-ring: #0B7A71;

  --e-1: 0 1px 2px rgba(16,18,24,.10);
  --e-2: 0 10px 30px rgba(16,18,24,.16);
  --e-glow: 0 0 0 1px var(--accent), 0 6px 20px rgba(110,75,245,.22);
}

/* --- desktop tier ---------------------------------------------------------
   One step up, not a continuous ramp. The mobile scale is tuned for a 107px
   tile; past 900px a tile is 170px+ and the overlays start to read as lost.
   Stepping at a breakpoint keeps the mono readouts on whole pixels, which
   clamp() interpolation would not. Type and gutter only — nothing here
   touches colour, so it composes with either theme. */
@media (min-width: 900px) {
  :root {
    --fs-wordmark: 1.75rem;  /* 28 */
    --fs-title: 1.5rem;      /* 24 */
    --fs-body: 1rem;         /* 16 */
    --fs-label: 0.875rem;    /* 14 */
    --fs-data: 0.75rem;      /* 12 */
    --fs-micro: 0.6875rem;   /* 11 */

    --gutter: 24px;
  }
}