/* Barem v2 theme bridge.
   Remaps the v1 semantic tokens onto the v2 palette, type and radii, so every
   existing component and screen adopts the redesigned visual language without a
   single change to component source or product behaviour.
   Activate with data-barem="v2" on <html>; remove the attribute and the
   shipping system returns untouched. Load after styles.css and styles-v2.css. */

:root[data-barem="v2"] {
  /* --- type: two families. Serif display (400 only) + Instrument Sans for UI and every
     numeral. --font-mono-value keeps its name but resolves to Instrument Sans. --- */
  --font-serif-display: var(--v2-font-display);
  --font-sans-ui: var(--v2-font-ui);
  --font-mono-value: var(--v2-font-mono);

  /* display type gets louder and more confident; UI sizes hold their ground */
  --size-display-1: 52px;
  --size-display-2: 40px;
  --size-display-3: 32px;
  --size-title: 23px;
  --size-lead: 17px;
  --size-subtitle: 17px;
  --size-body: 14px;
  --size-body-sm: 13.5px;
  --size-label: 13px;
  --size-caption: 12.5px;
  --size-micro: 11.5px;
  --size-score-hero: 42px;
  --size-score: 30px;
  --size-score-sm: 17px;
  --tracking-display: -0.025em;
  --tracking-label: 0;
  --tracking-eyebrow: 0.1em;
  --leading-tight: 1.04;
  --leading-snug: 1.3;
  --leading-normal: 1.57;
  --type-display-1: 400 var(--size-display-1) / var(--leading-tight) var(--font-serif-display);
  --type-title: 400 var(--size-title) / 1.13 var(--font-serif-display);
  --type-body: 400 var(--size-body) / 22px var(--font-sans-ui);
  --type-label: 500 var(--size-label) / 18px var(--font-sans-ui);
  --type-mono: 500 var(--size-body-sm) / 20px var(--font-mono-value);

  /* --- neutrals: warm paper --- */
  --paper-50: var(--v2-neutral-25);
  --paper-100: var(--v2-neutral-50);
  --paper-200: var(--v2-neutral-100);
  --paper-300: var(--v2-neutral-300);
  --paper-400: var(--v2-neutral-400);
  --paper-500: var(--v2-neutral-500);
  --paper-600: var(--v2-neutral-600);
  --paper-700: var(--v2-neutral-700);
  --paper-800: var(--v2-neutral-800);
  --paper-900: var(--v2-neutral-900);
  --paper-950: var(--v2-neutral-950);

  /* --- accent: the brand green replaces the teal outright --- */
  --accent-50: var(--v2-green-50);
  --accent-100: var(--v2-green-100);
  --accent-200: var(--v2-green-200);
  --accent-300: var(--v2-green-300);
  --accent-400: var(--v2-green-400);
  --accent-500: var(--v2-green-500);
  --accent-600: var(--v2-green-600);
  --accent-700: var(--v2-green-700);
  --accent-800: var(--v2-green-900);
  --accent-900: var(--v2-green-950);

  /* ledger ochre becomes the warm cream family */
  --ochre-100: var(--v2-cream);
  --ochre-300: var(--v2-cream-line);
  --ochre-500: var(--v2-cream-ink);
  --ochre-700: var(--v2-cream-ink-secondary);

  /* --- outcomes, remapped onto the logo palette --- */
  --complete-ink: var(--v2-complete-ink);
  --complete-mid: var(--v2-complete-ink);
  --complete-bg: var(--v2-complete-bg);
  --complete-line: var(--v2-complete-line);

  --incomplete-ink: var(--v2-incomplete-ink);
  --incomplete-mid: var(--v2-incomplete-ink);
  --incomplete-bg: var(--v2-incomplete-bg);
  --incomplete-line: var(--v2-incomplete-line);

  --below-ink: var(--v2-below-ink);
  --below-mid: var(--v2-below-ink);
  --below-bg: var(--v2-below-bg);
  --below-line: var(--v2-below-line);

  --refer-ink: var(--v2-refer-ink);
  --refer-mid: var(--v2-refer-ink);
  --refer-bg: var(--v2-refer-bg);
  --refer-line: var(--v2-refer-line);

  /* --- surfaces, ink, lines --- */
  --surface-ground: var(--v2-bg);
  --surface-card: var(--v2-surface);
  --surface-sunken: var(--v2-surface-sunken);
  --surface-raised: var(--v2-surface);
  --surface-inverse: var(--v2-green-900);
  --surface-accent: var(--v2-green-600);
  --surface-accent-soft: var(--v2-mint-pale);
  --surface-hover: var(--v2-hover);
  --surface-active: var(--v2-active);
  --surface-selected: var(--v2-selected);
  --surface-scrim: var(--v2-scrim);

  --text-display: var(--v2-text-display);
  --text-body: var(--v2-text-body);
  --text-muted: var(--v2-text-muted);
  --text-quiet: var(--v2-text-quiet);
  --text-accent: var(--v2-text-brand);
  --text-on-accent: #ffffff;
  --text-on-inverse: var(--v2-mint-pale);
  --text-link: var(--v2-link);
  --text-link-hover: var(--v2-link-hover);

  --line-hairline: var(--v2-border-soft);
  --line-rule: var(--v2-border);
  --line-strong: var(--v2-border-strong);
  --line-accent: var(--v2-green-600);
  --focus-ring: var(--v2-focus);

  /* --- radius: 6 badges · 10 controls · 16 inner blocks · 24 cards/panels --- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-panel: 24px;
  --radius-card: 24px;
  --radius-badge: 6px;

  /* --- space: the top of the scale grows, rows and gutters breathe --- */
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 64px;
  --space-11: 80px;
  --layout-gutter: 40px;
  --rail-width: 250px;
  --decision-col: 316px;
  --density-row-h: 52px;
  --embedded-row-h: 40px;

  /* --- elevation: none. Names kept; overlays get only a 1px hairline --- */
  --shadow-hairline: 0 0 0 1px var(--v2-border);
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-overlay: 0 0 0 1px var(--v2-border);
  --dur-quick: 140ms;
  --ease-out: ease-out;

  /* --- data visualisation --- */
  --viz-1: var(--v2-viz-1);
  --viz-2: var(--v2-viz-2);
  --viz-3: var(--v2-viz-3);
  --viz-4: var(--v2-viz-4);
  --viz-grid: var(--v2-viz-grid);
  --viz-axis: var(--v2-viz-axis);
  --viz-ink: var(--v2-text-display);
  --chart-track: var(--v2-viz-track);

  --status-complete: var(--v2-complete-ink);
  --status-incomplete: var(--v2-incomplete-ink);
  --status-refer: var(--v2-refer-ink);
  --status-below: var(--v2-below-ink);
  --status-complete-soft: var(--v2-complete-bg);
  --status-incomplete-soft: var(--v2-incomplete-bg);
  --status-refer-soft: var(--v2-refer-bg);
  --status-below-soft: var(--v2-below-bg);
}

/* Dark theme, same identity: the ground becomes deep forest rather than grey,
   and the accent lifts so it still carries on a dark surface. */
:root[data-barem="v2"][data-theme="dark"] {
  --paper-50:#0a1712; --paper-100:#0e1d17; --paper-200:#14271f; --paper-300:#1d332a;
  --paper-400:#2b453a; --paper-500:#4a6155; --paper-600:#7b8f85; --paper-700:#a3b3aa;
  --paper-800:#c7d4cc; --paper-900:#e2ebe5; --paper-950:#f3f8f5;

  --accent-50:#07281c; --accent-100:#0a3626; --accent-200:#12603b; --accent-300:#2a7a53;
  --accent-400:#4b9a72; --accent-500:#6fb894; --accent-600:#94cfb1; --accent-700:#b7e0c9;
  --accent-800:#d3ecdf; --accent-900:#e9f6ef;

  --ochre-100:#2c2412; --ochre-300:#7a5a12; --ochre-500:#dcbc72; --ochre-700:#efdcb4;

  --complete-ink:#8ed9b0; --complete-mid:#63c392; --complete-bg:#0c2a1d; --complete-line:#1f4d36;
  --incomplete-ink:#edb4a1; --incomplete-mid:#d8907a; --incomplete-bg:#2d1a14; --incomplete-line:#4f3126;
  --below-ink:#e7cd97; --below-mid:#cfae6d; --below-bg:#2a2313; --below-line:#4a3c1e;
  --refer-ink:#a9cdbb; --refer-mid:#7fb39a; --refer-bg:#152720; --refer-line:#2c463a;

  --surface-ground:#081410; --surface-card:#0e1d17; --surface-sunken:#0a1712; --surface-raised:#14271f;
  --surface-inverse:#f3f8f5; --surface-accent:#12603b; --surface-accent-soft:#0a3626;
  --surface-hover:rgb(148 207 177 / 0.08); --surface-active:rgb(148 207 177 / 0.14);
  --surface-selected:#0a3626; --surface-scrim:rgb(3 10 8 / 0.62);

  --text-display:#f3f8f5; --text-body:#e2ebe5; --text-muted:#a3b3aa; --text-quiet:#96AAA0;
  --text-accent:#94cfb1; --text-on-accent:#EEF7F2; --text-on-inverse:#0e1d17;
  --text-link:#94cfb1; --text-link-hover:#b7e0c9;

  /* line-rule stays #2b453a because it also draws decorative card/section rules;
     control borders get their own token at 3:1. */
  --line-hairline:#1d332a; --line-rule:#2b453a; --line-control:#587566; --line-strong:#67866F; --focus-ring:#6fb894;
  --chart-track:#1d332a;
  /* the ramp inverts in dark: the lead bar is the lightest */
  /* bar charts: lead + inactive; categorical series: viz-1..4 */
  --v2-viz-lead:#EEF7F2; --v2-viz-bar:#5C8A71;
  --viz-1:#A8E0C0; --viz-2:#4E7A63; --viz-3:#78B093; --viz-4:#D6EFE0;
  --v2-viz-1:#A8E0C0; --v2-viz-2:#4E7A63; --v2-viz-3:#78B093; --v2-viz-4:#D6EFE0;
  --v2-text-on-brand:#EEF7F2; --v2-text-quiet:#96AAA0;
  --v2-border-strong:#67866F;
  --v2-refer-bg:#1d332a; --v2-refer-ink:#A6BAB0;
  /* text: the v2 names were light-only, so anything inheriting them painted #071f17 on dark */
  --v2-text-display:#f3f8f5; --v2-text-body:#e2ebe5; --v2-text-muted:#a3b3aa; --v2-neutral-700:#c7d4cc;
  /* logo-accent surfaces take the same dark values as the status they mean:
     mint = complete, cream = below threshold, blush = incomplete */
  --v2-mint:#0f3323; --v2-mint-pale:#0c2a1d; --v2-mint-line:#1f4d36; --v2-mint-ink:#8ed9b0;
  --v2-cream:#2a2313; --v2-cream-pale:#2a2313; --v2-cream-line:#4a3c1e; --v2-cream-ink:#e7cd97; --v2-cream-ink-secondary:#d9c291;
  --v2-blush:#2d1a14; --v2-blush-pale:#2d1a14; --v2-blush-line:#4f3126; --v2-blush-ink:#edb4a1;
  /* surfaces, lines and states behind every .bx-* recipe, matched to the bridge's dark values */
  --v2-bg:#081410; --v2-surface:#0e1d17; --v2-surface-sunken:#0a1712;
  --v2-hover:#14271f; --v2-active:#1d332a;
  --v2-neutral-100:#14271f; --v2-neutral-200:#1d332a; --v2-neutral-300:#2b453a;
  --v2-border:#2b453a; --v2-border-soft:#1d332a; --v2-border-dashed:#4a6155;
  --v2-text-disabled:#587566; --v2-badge-neutral-ink:#c7d4cc;
  --v2-focus:#6fb894; --v2-link:#94cfb1; --v2-link-hover:#b7e0c9; --v2-text-brand:#94cfb1;
  /* the deep-green band lifts to brand green so it still separates from the dark ground */
  --v2-surface-inverse:#12603b;
  --shadow-1:none; --shadow-2:none; --shadow-3:none; --shadow-overlay:0 0 0 1px #2b453a;
  --viz-grid:#1d332a; --viz-axis:#7b8f85; --viz-ink:#e2ebe5;
}