/* ============================================================================
   GENERATED FILE — DO NOT EDIT.

   Sources:     frontend/src/design-system/styles/asiniq.css   (base palette)
                frontend/src/design-system/styles/product.css  (overrides)
   Regenerate:  node scripts/sync-design-tokens.mjs
   Verify:      node scripts/sync-design-tokens.mjs --check

   Edit the palette in the design system, then regenerate. Hand-editing this
   file reintroduces exactly the drift it was created to eliminate.

   Consumed by the Chrome extension and by the admin console, both of which are
   built outside the frontend and so cannot import the design system directly.

   The dark block is mirrored verbatim rather than curated down to what either
   one happens to use — a curated subset is a place for drift to hide. Which of
   the two blocks applies is decided by the consumer: the extension's theme.js,
   or the admin console's main.jsx, which follows the machine's setting.

   The product blocks come last, matching the load order in the app: asiniq.css
   is byte-synced from Open Design and cannot hold product decisions, so any
   token the shipping product overrides is declared there and wins on cascade.
   ============================================================================ */

:root {
  /* ── THE ONE PLACE COLOUR IS DECIDED ───────────────────────────────────
     Every accent surface in the app derives from these three numbers.
     Cobalt (current):       222 82%  55%   ← reference-matched
     Warm ember:              24 62%  46%
     Other trials:  clay 14 55% 47% · moss 150 40% 34% · slate 215 25% 40% */
  --accent-h: 222;
  --accent-s: 82%;
  --accent-l: 55%;

  --accent:        hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-deep:   hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%));
  --accent-ink:    hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 14%));
  --accent-lift:   hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 9%));
  --accent-soft:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.10);
  --accent-line:   hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.28);
  --accent-on:     #ffffff;
  /* Label colour for accent text sitting on a WHITE chip. It cannot be
     --accent-ink, because that token lifts in dark mode (correct for a dark
     panel, 2:1 on white). This one is theme-independent by design — the chip
     it sits on is white in both themes. */
  --accent-onwhite: hsl(var(--accent-h) 72% 34%);

  /* the gradient header — the single largest brand surface in the app */
  --grad: linear-gradient(126deg,
            hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 1%)) 0%,
            hsl(var(--accent-h) var(--accent-s) var(--accent-l)) 46%,
            hsl(calc(var(--accent-h) + 8) var(--accent-s) calc(var(--accent-l) - 7%)) 100%);

  /* ── CHART RAMP · deliberately hue-locked to the accent ─────────────────
     The reference uses four unrelated hues per chart. Here the series ramp
     is a single-hue lightness ladder instead, because green and red are
     already spoken for by the verdict — a chart slice that happens to be
     green must never read as "buy". Ordered light -> deep so the largest
     slice can take the deepest tone and lead the eye. */
  --c1: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 16%));
  --c2: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --c3: hsl(var(--accent-h) 78% 68%);
  --c4: hsl(var(--accent-h) 72% 80%);
  --c5: hsl(var(--accent-h) 60% 90%);

  /* ── neutral surfaces · canvas carries a faint cool cast so white cards
        read as *floating* rather than as holes cut in a grey sheet */
  --bg:            #eef2f9;
  --bg-deep:       #e2e9f5;
  --surface:       #ffffff;
  --surface-soft:  #f6f8fd;
  --surface-sunk:  #eef2f9;

  /* ── rules · borders step back, elevation does the separating */
  --border:        #e6ebf4;
  --border-soft:   #f0f3f9;
  --border-strong: #ccd6e6;

  /* ── ink */
  /* The canvas is tinted (#eef2f9) and the deepest band is darker still
     (#e2e9f5), so a grey that clears 4.5:1 on white can still fail on the page
     it actually sits on. Every step below is measured against `--bg-deep`, the
     worst case. The old `--ink-faint` (#98a0ae) came in at 2.16:1 there, which
     is why eyebrows and the footer fine print looked washed out. */
  --ink:           #171a21;
  --ink-muted:     #353a44;   /* 9.4:1 on --bg-deep */
  --ink-soft:      #404551;   /* 7.9:1 on --bg-deep */
  --ink-faint:     #4b515e;   /* 6.5:1 on --bg-deep — well clear of the AA floor so small print stays readable */

  /* ── verdict scale · the only semantic colour in the product */
  --buy:           #10794f;
  --buy-soft:      rgba(16, 121, 79, 0.10);
  --buy-line:      rgba(16, 121, 79, 0.26);
  --buy-on:        #ffffff;

  --avoid:         #c02a3f;
  --avoid-soft:    rgba(192, 42, 63, 0.10);
  --avoid-line:    rgba(192, 42, 63, 0.26);
  --avoid-on:      #ffffff;

  /* caution = amber, the third traffic light. see header note 2.
     `--caution` is the fill and `--caution-on` the text that sits on it; a
     yellow dark enough to carry white text is not read as yellow, so the fill
     stays bright and the text goes dark. `--caution-ink` is the separate value
     for amber *on the page* — text and the dial arc — because the fill itself is
     only 1.7:1 against the canvas. */
  --caution:       #f0b429;
  --caution-on:    #1f1600;
  --caution-ink:   #8a5a00;   /* 5.3:1 on --bg-deep */
  --caution-soft:  rgba(240, 180, 41, 0.16);
  --caution-line:  rgba(138, 90, 0, 0.34);

  /* handling flags ONLY (hazmat / meltable) — never a verdict */
  --warn:          #9a6512;
  --warn-soft:     rgba(154, 101, 18, 0.10);
  --warn-line:     rgba(154, 101, 18, 0.26);

  /* ── type */
  --font-sans: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-price: 34px;
  --text-micro: 9px;
  --text-fine: 10px;
  --text-caption: 11px;
  --text-recovery: 20px;
  --text-heading-fluid-min: 28px;
  --text-display-sm: 30px;
  --text-display-md: 38px;
  --text-display-lg: 44px;
  --text-score: 46px;
  --text-display-max: 62px;
  --tap-min: 44px;
  --chart-seller-count: #818cf8;
  --avoid-ink: #b42318;

  --lh-tight: 1.12;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  --track-display: -0.025em;
  --track-head:   -0.015em;
  --track-caps:    0.07em;   /* caps floor — never below 0.06em */
  --track-label:   0.02em;

  --w-read: 400;
  --w-emph: 550;
  --w-ann:  650;

  /* ── shape · opened up to the reference's soft-card language.
     Two radii, not one: controls stay comparatively tight (--r-sm) so
     inputs and buttons still feel operable, while containers go generous
     (--r / --r-lg) so cards read as the floating tiles in the reference. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ── space (4pt) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  /* Room the floating "Ask AI" button needs at the foot of a page, so it never covers the last content. */
  --fab-clear: 72px;

  /* ── elevation · now the primary separator. Blue-tinted rather than grey,
        which is what stops a big soft shadow reading as smudge. */
  --sh-flat: 0 2px 6px -2px rgba(31, 56, 112, 0.08), 0 10px 26px -18px rgba(31, 56, 112, 0.22);
  --sh-card: 0 3px 10px -3px rgba(31, 56, 112, 0.10), 0 20px 44px -22px rgba(31, 56, 112, 0.32);
  --sh-pop:  0 6px 18px -4px rgba(31, 56, 112, 0.14), 0 32px 70px -26px rgba(31, 56, 112, 0.42);
  --sh-grad: 0 12px 30px -12px hsl(var(--accent-h) 70% 40% / 0.45);

  --focus: 0 0 0 3px var(--accent-line);

  --t-fast: 130ms;
  --t-med:  200ms;
  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);

  --nav-w: 232px;

  color-scheme: light;
}

:root.dark,
:root[data-theme="dark"] {
  --accent-l: 62%;
  --accent-s: 88%;
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.18);
  --accent-line: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.40);
  --accent-ink:  hsl(var(--accent-h) var(--accent-s) 76%);
  --accent-lift: hsl(var(--accent-h) var(--accent-s) 72%);
  --accent-on:   #ffffff;

  /* The gradient is the brand surface in both themes, but on a dark canvas
     a 55%-lightness blue glows. It's pulled down and desaturated at the
     tail so it still reads as a header, not a light leak. */
  --grad: linear-gradient(126deg,
            hsl(var(--accent-h) 74% 44%) 0%,
            hsl(var(--accent-h) 70% 36%) 52%,
            hsl(calc(var(--accent-h) + 10) 58% 27%) 100%);

  /* ramp re-derived: on dark, the ladder has to climb toward light or the
     deepest slices disappear into the panel */
  --c1: hsl(var(--accent-h) 88% 68%);
  --c2: hsl(var(--accent-h) 82% 58%);
  --c3: hsl(var(--accent-h) 70% 47%);
  --c4: hsl(var(--accent-h) 58% 37%);
  --c5: hsl(var(--accent-h) 42% 28%);

  --bg:            #0b0f18;
  --bg-deep:       #070a11;
  --surface:       #141a26;
  --surface-soft:  #1a2130;
  --surface-sunk:  #10161f;

  --border:        rgba(160, 190, 255, 0.10);
  --border-soft:   rgba(160, 190, 255, 0.055);
  --border-strong: rgba(160, 190, 255, 0.20);

  --ink:           #e8ecf5;
  /* Re-measured for dark rather than mirrored from light. In light mode the
     worst case is the *darkest* background (`--bg-deep`); in dark mode it is
     the *lightest* one (`--surface-soft`, #1a2130), and the old ladder was
     anchored to the wrong end. `--ink-faint` (#626d83) landed at 3.09:1 there,
     so every eyebrow, unit and caption in the product failed AA. The three
     steps now hit the same ratios their light counterparts do. */
  --ink-muted:     #bdc4d2;   /* 9.2:1 on --surface-soft */
  --ink-soft:      #adb5c5;   /* 7.8:1 on --surface-soft */
  --ink-faint:     #9da6b8;   /* 6.6:1 on --surface-soft — well clear of the AA floor so small print stays readable */

  --buy:           #3fc98c;
  --buy-soft:      rgba(63, 201, 140, 0.14);
  --buy-line:      rgba(63, 201, 140, 0.32);
  --buy-on:        #06231a;

  --avoid:         #ff7a86;
  --avoid-soft:    rgba(255, 122, 134, 0.14);
  --avoid-line:    rgba(255, 122, 134, 0.32);
  --avoid-on:      #2b0910;

  /* Lifted and desaturated the same way --buy and --avoid are for dark, so all
     three verdicts carry equal weight against the dark canvas. */
  --caution:       #f2c14e;
  --caution-on:    #2b1f00;
  --caution-ink:   #f2c14e;
  --caution-soft:  rgba(242, 193, 78, 0.14);
  --caution-line:  rgba(242, 193, 78, 0.32);

  --warn:          #e3a53a;
  --warn-soft:     rgba(227, 165, 58, 0.14);
  --warn-line:     rgba(227, 165, 58, 0.32);

  --sh-flat: 0 2px 6px -2px rgba(0, 0, 0, 0.45), 0 10px 26px -18px rgba(0, 0, 0, 0.60);
  --sh-card: 0 3px 10px -3px rgba(0, 0, 0, 0.50), 0 20px 44px -22px rgba(0, 0, 0, 0.70);
  --sh-pop:  0 6px 18px -4px rgba(0, 0, 0, 0.55), 0 32px 70px -26px rgba(0, 0, 0, 0.78);
  --sh-grad: 0 14px 34px -14px rgba(0, 0, 0, 0.70);

  color-scheme: dark;
}

:root {
  --k-buybox:  #d6336c;   /* Buy Box price  · pink */
  --k-new:     #2563eb;   /* New price      · blue */
  --k-rank:    #0e9f6e;   /* Sales rank     · green (see note above) */
  --k-sold:    #7c3aed;   /* Monthly sold   · violet */
  --k-sellers: #0891b2;   /* Seller count   · cyan */
}

:root.dark,
:root[data-theme="dark"] {
  --k-buybox:  #f472b6;
  --k-new:     #60a5fa;
  --k-rank:    #34d399;
  --k-sold:    #a78bfa;
  --k-sellers: #22d3ee;
}

/* ── product overrides (product.css) ─────────────────────────────────── */
:root {
  --font-mono: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:root {
  --series-1: var(--k-new);      /* blue */
  --series-2: var(--k-rank);     /* green */
  --series-3: var(--k-sold);     /* violet */
  --series-4: var(--k-buybox);   /* pink */
  --series-5: var(--k-sellers);  /* cyan */
}