/* PromoIQ design tokens (brand A2). The one place the brand lives.
   Theme: follows the system setting; <html data-theme="light|dark"> overrides it.
   Any element can also carry data-theme to force a theme on that subtree.
   Every text color below passes WCAG AA (4.5:1) on paper, surface, sunken and its own soft background,
   in both themes. Run kit/_build/check-contrast.py after changing a value.
   Fonts: link fonts/fonts.css before this file (self-hosted, no Google Fonts). */

:root,
[data-theme="light"] {
  /* ---- surfaces ---- */
  --color-paper: #ffffff;        /* page background */
  --color-surface: #ffffff;      /* cards, header, footer bars */
  --color-sunken: #f5f6f8;       /* panel background behind cards, alternate sections */
  --color-well: #eceef1;         /* hover fill, tags, inline wells */
  --color-line: #dde1e6;         /* hairlines and card borders */
  --color-line-strong: #c5cbd3;  /* control outlines, dashed "untested" outline */

  /* ---- text levels ---- */
  --color-text: #14161a;         /* primary text  18.1:1 on paper */
  --color-text-2: #5b6370;       /* secondary     6.1:1 */
  --color-text-3: #687080;       /* meta, counts  5.0:1 (4.6:1 on sunken) */
  --color-ink: #14161a;          /* brand ink, same in both themes (footer band, toasts) */
  --color-on-ink: #ffffff;

  /* ---- brand: Stamp Red. Primary buttons, the stamp, brand bands. Never for errors. ---- */
  --color-brand: #d7261e;        /* fill. White text on it 5.0:1 */
  --color-brand-hover: #b81e17;
  --color-brand-press: #9e1a14;
  --color-on-brand: #ffffff;
  --color-brand-text: #c32019;   /* red used as text on paper 5.9:1 */
  --color-brand-soft: #fdecea;

  /* ---- secondary: Harbor Blue. Shopper reports, focus, switches, info. ---- */
  --color-secondary: #1e4d78;
  --color-secondary-hover: #173d60;
  --color-on-secondary: #ffffff;
  --color-secondary-text: #1e4d78; /* 8.8:1 */
  --color-secondary-soft: #e8eff6;

  /* ---- status ---- */
  --color-success: #137346;      /* money saved, exact match  5.9:1 */
  --color-success-soft: #e6f3ec;
  --color-success-line: #b5dcc6;
  --color-caution: #8f5600;      /* conditions, minimum spend, notices  6.0:1 */
  --color-caution-soft: #fbf1e1;
  --color-caution-line: #ebcf9e;
  --color-danger: #a3123a;       /* real errors only. Distinct from Stamp Red  7.8:1 */
  --color-danger-soft: #fcebf0;
  --color-danger-line: #f2b8c8;

  /* ---- focus ring ---- */
  --color-focus: #1e4d78;

  --shadow-1: 0 1px 2px rgba(20, 22, 26, 0.06), 0 1px 1px rgba(20, 22, 26, 0.04);
  --shadow-2: 0 2px 6px rgba(20, 22, 26, 0.06), 0 12px 32px rgba(20, 22, 26, 0.10);
  --shadow-toast: 0 6px 24px rgba(20, 22, 26, 0.22);
  color-scheme: light;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  --color-paper: #0f1115;
  --color-surface: #171a20;
  --color-sunken: #0b0d10;
  --color-well: #1f232b;
  --color-line: #2a2f38;
  --color-line-strong: #3a404b;
  --color-text: #eef0f3;
  --color-text-2: #a9b0bb;
  --color-text-3: #8a919c;
  --color-ink: #14161a;
  --color-on-ink: #ffffff;
  --color-brand: #d92d24;
  --color-brand-hover: #e8392f;
  --color-brand-press: #bf241c;
  --color-on-brand: #ffffff;
  --color-brand-text: #ff6b61;
  --color-brand-soft: #3a1715;
  --color-secondary: #8dbdec;
  --color-secondary-hover: #a9cdf1;
  --color-on-secondary: #0b1a2a;
  --color-secondary-text: #8dbdec;
  --color-secondary-soft: #16263a;
  --color-success: #4cc38a;
  --color-success-soft: #10291d;
  --color-success-line: #1e5a3c;
  --color-caution: #f0b44c;
  --color-caution-soft: #2e2210;
  --color-caution-line: #5c4417;
  --color-danger: #ff8aa8;
  --color-danger-soft: #3a1420;
  --color-danger-line: #6b2338;
  --color-focus: #8dbdec;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-toast: 0 6px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #0f1115;
    --color-surface: #171a20;
    --color-sunken: #0b0d10;
    --color-well: #1f232b;
    --color-line: #2a2f38;
    --color-line-strong: #3a404b;
    --color-text: #eef0f3;
    --color-text-2: #a9b0bb;
    --color-text-3: #8a919c;
    --color-ink: #14161a;
    --color-on-ink: #ffffff;
    --color-brand: #d92d24;
    --color-brand-hover: #e8392f;
    --color-brand-press: #bf241c;
    --color-on-brand: #ffffff;
    --color-brand-text: #ff6b61;
    --color-brand-soft: #3a1715;
    --color-secondary: #8dbdec;
    --color-secondary-hover: #a9cdf1;
    --color-on-secondary: #0b1a2a;
    --color-secondary-text: #8dbdec;
    --color-secondary-soft: #16263a;
    --color-success: #4cc38a;
    --color-success-soft: #10291d;
    --color-success-line: #1e5a3c;
    --color-caution: #f0b44c;
    --color-caution-soft: #2e2210;
    --color-caution-line: #5c4417;
    --color-danger: #ff8aa8;
    --color-danger-soft: #3a1420;
    --color-danger-line: #6b2338;
    --color-focus: #8dbdec;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
    --shadow-toast: 0 6px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root {
  /* ---- type ---- */
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-code: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* codes only */

  --text-xs: 12px;     /* fine print */
  --text-sm: 13px;     /* meta lines, footer */
  --text-base: 14px;   /* panel body */
  --text-md: 15px;     /* panel emphasis, labels */
  --text-lg: 17px;     /* site body, panel titles */
  --text-xl: 22px;     /* panel store name, site card titles */
  --text-2xl: 28px;    /* page titles in the extension */
  --text-3xl: 36px;    /* site section headings, mobile */
  --text-4xl: 52px;    /* site section headings, desktop */
  --text-display: 76px;/* site hero */

  --weight-regular: 400;
  --weight-strong: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --leading-tight: 1.05;  /* display */
  --leading-snug: 1.25;   /* titles */
  --leading: 1.45;        /* panel */
  --leading-body: 1.55;   /* site paragraphs */
  --tracking-display: -0.03em;
  --tracking-title: -0.015em;
  --tracking-caps: 0.06em; /* the stamp verdict only */

  /* ---- spacing: 4px base ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- radii: small and consistent; the scoop is the only ornament ---- */
  --radius-xs: 4px;    /* tags */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius-md: 10px;   /* cards */
  --radius-lg: 16px;   /* large panels */
  --radius-tile: 14px; /* app tile, on a 64 grid */
  --radius-round: 999px; /* switches only */
  --scoop-code: 5px;   /* code chip corners */
  --scoop-stamp: 7px;  /* stamp corners */
  --scoop-ticket: 28px;/* closing ticket on the site */

  /* ---- line weights ---- */
  --line-thin: 1px;
  --line-strong: 1.5px;
  --line-focus: 2px;
  --line-accent: 3px;  /* left bar on the worked card */
  --focus-offset: 2px;

  /* ---- motion ---- */
  --dur-fast: 120ms;   /* hover, press */
  --dur-base: 160ms;   /* expand, chevrons */
  --dur-stamp: 220ms;  /* the stamp press, once per cart */
  --dur-toast: 3200ms; /* how long a toast stays */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- layout ---- */
  --panel-width: 400px;
  --wrap: 1240px;
  --measure: 42rem;
  --gutter: 24px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-stamp: 0ms; }
}

/* ---- Compatibility aliases for the extension's current ui/tokens.css names ----
   Lets older rules keep working while components.css takes over. Do not use these in new code. */
:root, [data-theme] {
  --ink: var(--color-text);
  --ink-muted: var(--color-text-2);
  --paper: var(--color-paper);
  --paper-raised: var(--color-sunken);
  --line: var(--color-line);
  --signal: var(--color-brand);
  --signal-hover: var(--color-brand-hover);
  --on-signal: var(--color-on-brand);
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --success-line: var(--color-success-line);
  --caution: var(--color-caution);
  --caution-soft: var(--color-caution-soft);
  --caution-line: var(--color-caution-line);
  --font-ui: var(--font-sans);
  --radius-xl: var(--radius-md);
}