/* ============================================================
   7COMPARE — DESIGN TOKENS
   One source of truth for the whole site.

   Every page links this file first: the browse catalogue, the
   server-rendered coupon and SEO templates, cashback, reels, the
   blog, 404, the admin pages — and the Ask Vik homepage. Change a
   value here and the whole site moves together. Nothing visual
   should be hard-coded at the point of use; that is how the old
   stylesheet drifted page by page.

   ------------------------------------------------------------
   2026-08-27 — VIOLET

   The palette moved from a single blue to violet, on a reference
   the owner supplied. What did NOT move is the discipline: violet
   carries the product, and the only other saturated colours in the
   interface are the ones reporting a measured fact — green for a
   saving, red for a rise, amber for a warning. Nothing else gets
   to be colourful, so those three always mean something.

   The logo's original blue survives inside --grad, so the mark and
   the interface still belong to each other.

   Every ink and status colour here was re-measured against the new
   page ground rather than picked by eye, and each one meets or
   beats the contrast of the blue value it replaced. The ratios are
   noted where they are load-bearing.

   LEGACY ALIASES
   Eighteen older names (--cyan, --magenta, --surface2 …) are still
   referenced by pages this redesign does not rewrite. They are kept
   at the bottom, pointing at the new tokens, so nothing breaks
   while the vocabulary moves on. New work should not use them.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- BRAND ---- */
  --brand-50:  #F4F1FF;
  --brand-100: #EAE3FF;
  --brand-200: #D8CCFF;
  --brand-400: #9B7BFF;
  --brand:     #6D3EF5;   /* 5.74:1 for white text on it */
  --brand-600: #5B2EDB;   /* 7.35:1 on white — this is the link colour */
  --brand-700: #4A24B8;
  --brand-ink: #FFFFFF;

  /* The mark's blue lives on in here. Used for the logo tile, the
     primary button and the hero wash — never for text. */
  --grad:      linear-gradient(135deg, #7C4DFF 0%, #5B7CFA 100%);
  --grad-soft: linear-gradient(160deg, #EFE9FF 0%, #F4F1FE 45%, #FBFAFF 100%);

  /* ---- SEMANTIC: these three report measured facts only ---- */
  --save:      #0B7A45;   /* a saving we calculated — 5.41:1 on white */
  --save-bg:   #E7F8EF;
  --save-line: #B7E7CE;
  --rise:      #C8283A;   /* a price we watched go up — 5.50:1 on white */
  --rise-bg:   #FDECEE;
  --rise-line: #F6C9CE;
  --warn:      #B45309;   /* 4.57:1 on its own background */
  --warn-bg:   #FDF3E3;
  --warn-line: #F0DCB4;

  /* ---- GROUND ---- */
  --page:      #F8F7FD;
  --surface:   #FFFFFF;
  --raised:    #F4F3FA;   /* nested wells, thumbnails, skeletons */
  --sunken:    #EFEDF8;

  /* ---- INK ---- */
  --ink:       #14132B;   /* 17.0:1 */
  --ink-2:     #55536F;   /* secondary copy — 6.9:1 */
  --ink-3:     #726F8C;   /* metadata — 4.5:1 */
  /* 3.8:1 on the page ground, deliberately. The obvious lighter violet-grey
     measured 2.4:1, which fails even the 3:1 floor — and this token carries
     struck-through MRP, which people actually read to work out what they are
     saving. Do not lighten it to match a mockup. */
  --ink-4:     #7E7B97;   /* placeholder, disabled, struck price */

  /* ---- LINES ---- */
  --line:      #EAE8F4;
  --line-2:    #DCD9EC;
  --focus:     #6D3EF5;

  /* ---- RADIUS ----
     Rounder than the blue era, which kept these deliberately tight to
     read as "precise". The reference the owner chose is a soft, rounded,
     card-based interface, and half-rounded corners in a fully rounded
     layout read as an unfinished port rather than as restraint. Precision
     is now carried by the mono figures and the tight line work instead. */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- ELEVATION ----
     Borders still do the separating; shadow is reserved for things that
     genuinely float. Tinted violet rather than neutral so a raised card
     sits in the same light as the page under it. */
  --e0: none;
  --e1: 0 1px 2px rgba(48, 32, 110, .05);
  --e2: 0 4px 18px rgba(48, 32, 110, .07);
  --e3: 0 16px 44px rgba(48, 32, 110, .14);

  /* ---- SPACING (8px base) ---- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* ---- TYPE ----
     Outfit and JetBrains Mono are already loaded by every page, so the
     retheme adds no font weight to the network. Mono is used for every
     number that can be compared down a column — prices, counts,
     timestamps — because tabular figures are what make a price list
     scannable. */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-display: clamp(2.25rem, 1.2rem + 4.2vw, 4rem);
  --t-h1:      clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --t-h2:      clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --t-h3:      1.125rem;
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-xs:      .8125rem;
  --t-label:   .6875rem;

  --lh-tight: 1.12;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  /* ---- MOTION ----
     Fast enough to feel instant, never long enough to wait for.
     Every duration here is overridden to 0 under reduced motion. */
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 260ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* ---- LAYOUT ---- */
  --shell: 1240px;
  --shell-wide: 1440px;
  --nav-h: 60px;
  --tabbar-h: 66px;   /* mobile bottom navigation */
}

[data-theme="dark"] {
  color-scheme: dark;

  --brand-50:  #171233;
  --brand-100: #1E1743;
  --brand-200: #2A1F5E;
  --brand-400: #7A5BF0;
  --brand:     #9B7BFF;
  --brand-600: #B49AFF;
  --brand-700: #D0BEFF;
  --brand-ink: #120B29;

  --grad:      linear-gradient(135deg, #8B63FF 0%, #6C8BFF 100%);
  --grad-soft: linear-gradient(160deg, #191233 0%, #14102A 45%, #0E0B1E 100%);

  /* Lightened until they carry on the dark ground the way the light
     values carry on the light one. Same rule, different arithmetic. */
  --save:      #3FD79B;
  --save-bg:   #0C2B22;
  --save-line: #1B4C3B;
  --rise:      #FF7079;
  --rise-bg:   #2E1418;
  --rise-line: #57242B;
  --warn:      #E9A13B;
  --warn-bg:   #2C2113;
  --warn-line: #4A3A1E;

  --page:      #0B0917;
  --surface:   #141122;
  --raised:    #1C182E;
  --sunken:    #100D1D;

  --ink:       #EDEBF7;
  --ink-2:     #B4B0CC;
  --ink-3:     #8B87A6;
  --ink-4:     #6E6A88;

  --line:      #262137;
  --line-2:    #342E48;
  --focus:     #9B7BFF;

  --e1: 0 1px 2px rgba(0, 0, 0, .4);
  --e2: 0 4px 18px rgba(0, 0, 0, .5);
  --e3: 0 16px 44px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------
   LEGACY ALIASES — pages not rewritten in this pass still ask for
   these names. Mapped, not deleted, so nothing regresses.
   ------------------------------------------------------------ */
:root,
[data-theme="dark"] {
  --bg:            var(--page);
  --surface2:      var(--raised);
  --text:          var(--ink);
  --muted:         var(--ink-2);
  --dim:           var(--ink-3);
  --border:        var(--line);
  --border-bright: var(--line-2);
  --cyan:          var(--brand);
  --magenta:       var(--rise);
  --green:         var(--save);
  --amber:         var(--warn);
  --shadow-sm: var(--e1);
  --shadow-md: var(--e2);
}