/* ============================================================
   bemermatreview.com - site-wide design tokens  (tokens.css v2)
   ============================================================
   Source of truth: design/handoff/design-tokens.md (read-only).
   Every page loads this file FIRST, then /css/chrome.css, then
   /css/site.css (editorial) or /used/marketplace.css (marketplace).

   PALETTE CONTRACT (owner-locked, redesign, September 2026):
   - Navy #1F3346 is the brand dark: wordmark, dark panels, menu
     header, CTA band base. Steel #33658A is the secondary accent:
     number circles, card top-borders, kickers, the gradient bar
     start. Blue #0B72AD is the function: links, primary buttons,
     active chips, sparklines.
   - Orange is #E8762C everywhere (replaces the old #F07D1A and the
     darkened #b3400f as an accent). It is used for: eyebrows,
     prices where the price is the point, the logo rule + REVIEW,
     hover borders, small badges and bars, the "Our pick" ribbon.
     Never large fills. #d5661f is its only dark stop (ribbon
     gradient). The text-safe orange for small body text on a
     tinted background remains --umb-hot #b3400f (AA), see below.
   - ONE DARK MOMENT PER PAGE MAXIMUM: a page gets either the dark
     hero band OR the navy CTA band, never both. Everything else
     stays light (page #F6F8FA, white cards, tinted panels).
   - Green (#2f7a44 on #f0f7f1, LIVE pill #19391d/#86CB92 on
     #e6f4e9) means LIVE DATA and GOOD STATUS only. Never
     decoration, never a CTA.
   - Montserrat 600 italic is used ONLY for the small annotation
     notes (peach #ffcf9e on dark, steel #33658A on light, rotated
     -2deg). Roboto Slab = headlines, numbers, wordmark. Roboto = UI
     and body.
   - Fonts are SELF-HOSTED: Roboto / Roboto Slab under
     /fonts/roboto/, Montserrat under
     /fonts/montserrat/ via /css/fonts.css. Never link Google Fonts.
   Any new color must be argued into this file, not added ad hoc.
   ============================================================ */

:root {
  /* ================= BRAND ================= */
  --color-navy: #1F3346;          /* brand dark: wordmark, dark panels, compare tray */
  --color-blue: #0B72AD;          /* primary actions, links, active chips */
  --color-blue-light: #0d83c6;    /* button gradient top stop */
  --color-blue-dark: #0a68a0;     /* button gradient bottom stop, link hover */
  --color-steel: #33658A;         /* secondary accent, number circles, gradient bar start */
  --color-orange: #E8762C;        /* accent only, see contract */
  --color-orange-dark: #d5661f;   /* only dark stop of orange (ribbon gradient) */
  /* Orange as small TEXT (eyebrows, kickers, verdict label) on light surfaces: #E8762C is 2.7-3.0:1
     on white/page tints, below AA for 11-13.5px bold. Text-safe orange = --umb-hot (5.4:1 on #F6F8FA);
     the rule/decoration beside the eyebrow keeps the accent #E8762C. On dark surfaces (hero) the
     same eyebrow uses the light tint below (4.9:1 on the hero's #2b4d78 top stop). */
  --color-orange-text: #b3400f;
  --color-orange-text-dark: #ffb26b;

  /* ================= TEXT (light surfaces) ================= */
  --ink-1: #17222C;               /* headings on light */
  --ink-2: #37485A;               /* body (editorial) */
  --ink-2-market: #33485a;        /* body (marketplace) */
  --ink-mid: #45596b;             /* comparison-card labels, marketplace lede */
  /* Muted greys were darkened one step (review fixes): the design's #64758A / #64788a / #7b8a99 are
     4.2-4.4:1 / 3.3:1 on the tinted page backgrounds, below AA for normal text. Values below clear
     4.5:1 on white, #F6F8FA, #f4f6f8, #f8fafb and #EAF4FA while staying visibly muted. */
  --ink-3: #5b6c80;               /* muted (editorial), was #64758A */
  --ink-3-market: #5c6e82;        /* muted (marketplace), was #64788a */
  --ink-4: #97A5B6;               /* faint: placeholders, decorative rules, disabled states ONLY, never readable text */
  --ink-4-market: #8a939c;        /* faint (marketplace), same rule */
  --ink-4-alt: #5f7084;           /* breadcrumb / panel meta / affiliate line (marketplace), was #7b8a99 */

  /* ================= TEXT (dark surfaces) ================= */
  --on-dark-heading: #ffffff;
  --on-dark-body: #b9c7d2;
  --on-dark-muted: #9db0c0;
  --on-dark-link: #c8d4de;        /* footer link columns */
  --on-dark-label: #7d93a6;       /* footer column headings, legal line */
  --on-dark-rule: #2c4257;        /* footer divider, compare-tray chips */
  --on-dark-annotation: #ffcf9e;  /* Montserrat notes on dark */

  /* ================= SURFACES ================= */
  --surface-page: #F6F8FA;        /* page background (editorial) */
  --surface-page-market: #f4f6f8; /* page background (marketplace) */
  --surface-card: #ffffff;
  --surface-tint: #F4F8FB;        /* tinted panels, active menu row */
  --surface-tint-2: #f8fafb;      /* compliance footnote rows */
  --surface-tint-3: #f4f8fa;      /* AI summary strip (marketplace) */
  --surface-hover: #F1F5F8;
  --surface-pill: #EFF4F9;        /* nav active pill + hover */
  --surface-blue: #EAF4FA;        /* light-blue tint: icons, number circles, band bg */
  --surface-blue-2: #dcebf5;      /* light-blue gradient end */
  --surface-blue-market: #eef4f8; /* marketplace number circles, saved pill */
  --surface-blue-row: #f4f9fc;    /* highlighted table row */
  --surface-media: #eef2f5;       /* image wells */

  /* ================= BORDERS ================= */
  --color-border: #E3E9EF;        /* homepage / editorial */
  --color-border-market: #dde4ea; /* marketplace cards */
  --color-border-soft: #eaeff3;   /* marketplace inner dividers */
  --color-border-strong: #cdd7e0; /* chips, popovers */
  --color-border-frame: #d5dde4;  /* frames */
  --color-border-ring: #dde7ef;   /* nav pill inset ring */
  --color-border-menu: #EEF2F6;   /* mobile menu row dividers */
  --color-border-blue: #d9e5ee;   /* blue band bottom border */
  --color-border-blue-2: #d3e6f2; /* chart legend swatch */
  --color-border-faq: #cfdce6;    /* FAQ +/- circle */
  --color-border-chip-hover: #9fb0bd;
  --color-rule-eyebrow: #93a7b6;  /* short rule beside eyebrows */

  /* ================= STATUS ================= */
  --color-good: #2f7a44;          /* good / lowest-priced text and badge fill */
  --color-good-bg: #f0f7f1;
  --color-good-dot: #3f8f52;      /* live-listings dot on stat tile (marketplace) */
  --color-live-ink: #19391d;      /* LIVE pill text */
  --color-live-dot: #86CB92;      /* LIVE pill dot */
  --color-live-bg: #e6f4e9;       /* LIVE pill bg */
  --color-caution-bg: #fdf3d9;    /* "Heads up" note */
  --color-caution-ink: #7a5200;
  --color-claimed: #b45309;       /* amber "claimed by the seller, not confirmed" check (Comparison Cart) */
  --color-border-caution: #e2c26b;/* amber border: cart heads-up rule, sample-data banner */
  --color-heart: #e64c5e;         /* saved / favorite heart */

  /* ================= GRADIENTS ================= */
  --grad-hero: radial-gradient(55% 95% at 80% -20%, rgba(99,160,206,.5) 0%, rgba(99,160,206,0) 62%),
               linear-gradient(150deg, #2b4d78 0%, #24405f 30%, #0c1522 58%, #020409 100%);
  --grad-hero-mobile: radial-gradient(95% 55% at 88% -8%, rgba(99,160,206,.5) 0%, rgba(99,160,206,0) 60%),
               linear-gradient(150deg, #2b4d78 0%, #24405f 28%, #0c1522 56%, #020409 100%);
  --shadow-hero-edge: inset 0 1px 0 rgba(148,190,224,.28);   /* 1px top highlight on the hero */
  --grad-footer: linear-gradient(135deg, #16283d 0%, #101e2d 40%, #04070c 78%, #000 100%);
  --grad-bar: linear-gradient(90deg, #33658A 0%, #0B72AD 62%, #E8762C 100%);   /* tri-color 3px bar */
  --grad-cta: linear-gradient(160deg, #1F3346 0%, #26415a 55%, #2c4257 100%);  /* navy CTA band */
  --grad-menu-head: linear-gradient(160deg, #1F3346 0%, #26415a 100%);          /* mobile menu header */
  --grad-button: linear-gradient(180deg, #0d83c6 0%, #0B72AD 55%, #0a68a0 100%);
  --grad-compare: linear-gradient(160deg, #EAF4FA 0%, #dcebf5 100%);           /* comparison cards, tokens.md */
  --grad-compare-home: linear-gradient(170deg, #f2f8fc 0%, #d8e8f2 100%);      /* homepage 7a comparison cards */
  --grad-compare-pick: linear-gradient(170deg, #eaf4fa 0%, #cfe3f0 100%);      /* "Our pick" card body */
  --grad-icon: linear-gradient(160deg, #EAF4FA 0%, #dcebf5 100%);              /* 42-44px tinted icon square */
  --grad-media: linear-gradient(180deg, #ffffff 0%, #eef4f8 100%);             /* product image well */
  --grad-ribbon: linear-gradient(100deg, #E8762C 0%, #d5661f 100%);            /* "Our pick" ribbon (small fill) */

  /* ================= RADII ================= */
  --r-badge: 4px;
  --r-btn: 6px;
  --r-input: 8px;                 /* inputs, small cards, chips with corners */
  --r-card: 10px;
  --r-card-lg: 12px;
  --r-band: 18px;                 /* feature / CTA bands */
  --r-pill: 999px;

  /* ================= SHADOWS ================= */
  --shadow-card: 0 1px 3px rgba(31,51,70,.08);
  --shadow-card-soft: 0 1px 3px rgba(31,51,70,.05);
  --shadow-card-hover: 0 14px 28px rgba(31,51,70,.14);         /* link-card lift */
  --shadow-card-hover-lg: 0 18px 38px rgba(31,51,70,.18);      /* comparison-card lift */
  --shadow-strip: 0 10px 30px rgba(31,51,70,.12);              /* 1-2-3 strip under the hero */
  --shadow-panel: 0 16px 40px rgba(31,51,70,.22);              /* popovers */
  --shadow-float: 0 20px 46px rgba(0,0,0,.42);                 /* floating hero cards */
  --shadow-float-lg: 0 30px 64px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.38);
  --shadow-cta: 0 26px 60px rgba(31,51,70,.35);                /* CTA band */
  --shadow-tray: 0 12px 32px rgba(15,25,36,.5);                /* compare tray */
  --shadow-menu: -24px 0 60px rgba(23,34,44,.35);              /* mobile slide-in menu */
  --shadow-button: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 10px rgba(11,114,173,.3);
  --shadow-button-hover: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 20px rgba(11,114,173,.45);
  --shadow-outline-hover: 0 8px 18px rgba(11,114,173,.22);
  --shadow-icon-inset: inset 0 0 0 1px rgba(51,101,138,.16), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-chip-active: 0 0 0 3px rgba(11,114,173,.18);

  /* ================= TYPE ================= */
  --font-ui: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Roboto Slab", "Roboto", Georgia, serif;
  --font-note: "Montserrat", "Roboto", Arial, sans-serif;     /* 600 italic annotations ONLY */

  --fs-hero-h1: clamp(36px, 4.5vw, 54px);   /* 36 mobile, ~54 desktop (7a uses 58 at 1280) */
  --fs-h1: clamp(34px, 3.6vw, 44px);        /* article title */
  --fs-h2: clamp(31px, 3.4vw, 42px);        /* section H2 (34-42 desktop) */
  --fs-h2-article: clamp(24px, 2.4vw, 28px);
  --fs-h3: 20px;
  --fs-card-title: 18px;                    /* 17-20 */
  --fs-price: 26px;                         /* big numbers 21-27 */
  --fs-lede: 16.5px;
  --fs-body: 16px;
  --fs-body-sm: 14.5px;
  --fs-eyebrow: 12.5px;                     /* 11-12.5, Roboto Slab 800, .18-.22em */
  --fs-micro: 11.5px;                       /* 10.5-11.5, Roboto 500, .08-.18em */
  --lh-body: 1.7;
  --tracking-display: -0.02em;              /* 28px+ headlines */
  --tracking-eyebrow: .2em;
  --tracking-micro: .08em;

  /* ================= SPACING ================= */
  /* The page frame. 1280px outer minus the 36px gutter on each side, which is the same box
     the header and footer already use, so content, logo, nav and footer all share a left edge.
     Change this one number to rescale every wide block on the site. */
  --wide-column: 1208px;
  --ed-column: 800px;             /* editorial reading column (owner: 800, overrides handoff 720-760) */
  --ed-wide: 1000px;              /* wide editorial blocks: tables, comparison grids */
  --col-pad: 36px;                /* desktop side padding (content columns; marketplace overrides to 28px) */
  --col-pad-mobile: 16px;
  /* Shared header/footer side padding. Deliberately NOT --col-pad: the marketplace theme narrows
     --col-pad to 28px, which used to shift the logo 8px left on /used/ and /used/price-guide/
     versus every other page. Chrome padding is fixed so the lockup never moves between pages. */
  --chrome-pad: 36px;
  /* Reserved width of the header's right-hand actions slot. Sized for the widest state of
     the marketplace "Saved 12 v" pill (126px measured) plus a little air. Held on every page
     so the nav never shifts between pages or when the pill appears. */
  --header-actions-w: 132px;
  --section-gap: 90px;            /* desktop rhythm */
  --section-gap-mobile: 88px;
  --card-pad: 20px;               /* 18-22 */
  --header-h: 72px;
  --header-h-mobile: 62px;

  /* ================= MOTION ================= */
  --ease-fast: .15s ease;
  --ease-card: .18s ease;

  /* ============================================================
     LEGACY ALIASES (--umb-*): keep /used/marketplace.css and
     /used/app.js working until the marketplace is re-skinned.
     Values point at the v2 palette above; names are unchanged.
     ============================================================ */
  --umb-bg: var(--surface-page);
  --umb-surface: var(--surface-card);
  --umb-border: var(--color-border);
  --umb-heading: var(--color-navy);          /* was steel #33658a; navy per 4a headings */
  --umb-accent: var(--color-blue);
  --umb-accent-strong: var(--color-blue-dark);
  --umb-accent-tint: var(--surface-blue);
  --umb-accent-ink: #ffffff;
  --umb-ink-1: var(--ink-1);
  --umb-ink-2: var(--ink-2);
  --umb-ink-3: var(--ink-3);
  --umb-ink-4: var(--ink-4);

  /* Status pairs (tinted bg + full-strength text). Green = live data / good only. */
  --umb-good: var(--color-live-ink);         /* #19391d, LIVE pill text (AA on #e6f4e9) */
  --umb-good-mid: var(--color-live-dot);     /* #86CB92, dots */
  --umb-good-bg: var(--color-live-bg);
  --umb-fair: #46617a;
  --umb-fair-bg: #edf2f7;
  --umb-warn: #8a5c00;                       /* amber text */
  --umb-warn-bg: var(--color-caution-bg);
  --umb-hot: #b3400f;                        /* AA text-safe orange for heads-up copy; accent orange is --color-orange */
  --umb-hot-bg: #fdeee4;
  --umb-heart: var(--color-heart);
  --umb-heart-bg: #fdeaec;
  --umb-danger: #c0341d;
  --umb-danger-bg: #fbe4e0;

  --umb-font: var(--font-ui);
  --umb-font-display: var(--font-display);
  --umb-fs-title: 1.05rem;
  --umb-fs-price: 1.5rem;
  --umb-fs-stat: 1.5rem;
  --umb-fs-meta: 0.9rem;

  /* Editorial legacy scale (older pages; new pages use --fs-*) */
  --ed-fs-body: 1.0625rem;
  --ed-lh-body: 1.65;
  --ed-fs-h1: 2rem;
  --ed-fs-h2: 1.5rem;
  --ed-fs-h3: 1.2rem;
  --ed-fs-small: 0.9375rem;

  --umb-radius: var(--r-card-lg);
  --umb-radius-sm: var(--r-input);
  --umb-radius-pill: var(--r-pill);
  --umb-shadow: var(--shadow-card);
  --umb-shadow-hover: 0 6px 16px rgba(23,34,44,.10);
  --umb-shadow-sheet: 0 -8px 32px rgba(23,34,44,.18);
  --umb-gap: 20px;
  --umb-pad: 16px;
  --umb-ease: 150ms ease;
}