/* Slate & Plum design tokens. Mike Zehrer / Elephruit standard (2026-10).
   Canonical source for interface values: ~/DataPlugin/docs/design-library/components.css
   Canonical source for presentation values: ~/EOC Analyzer/social/zero-premium-2027/slides.html
   Copy this file into a project (do not hot-link) and use the role tokens, not raw hex. */

:root {
  color-scheme: light;

  /* ---------- scales ---------- */
  --slate-50: #F1F3F5;  --slate-100: #E3E8EC; --slate-150: #D5DBE0; --slate-200: #C9D0D6;
  --slate-300: #A7B2BC; --slate-400: #8593A0; --slate-500: #5B6670; --slate-600: #43515C;
  --slate-700: #303A42; --slate-900: #1F262B;
  --plum-50: #F8F1F8;  --plum-100: #F1E4F1; --plum-200: #E4CCE5; --plum-300: #CFA6D1;
  --plum-400: #B57DB8; --plum-500: #9B5BA0; --plum-600: #84468A; --plum-700: #6E3570;
  --plum-800: #5A2A5C; --plum-900: #43203F; --aubergine: #301A33;
  --copper-500: #D9793A; --copper-700: #A5531F;

  /* ---------- interface mode (light) ---------- */
  --canvas: #FCFBF8;            /* page background, warm off-white */
  --surface: #FFFFFF;           /* cards, tables, chart panels */
  --surface-raised: #F3F4F5;    /* KPI tiles, raised panels */
  --border: #D9DEE2;
  --text: #303A42;              /* ink */
  --text-muted: #5B6670;

  --accent: var(--plum-700);    /* primary buttons, links, eyebrows, focus, focal data */
  --accent-hover: var(--plum-800);
  --accent-active: var(--plum-900);
  --accent-tint: var(--plum-100);         /* selected chip / tab / filter */
  --accent-tint-border: var(--plum-200);
  --accent-on-tint: var(--plum-800);
  --secondary: var(--slate-600);          /* tags, secondary labels */
  --focus-ring: var(--plum-700);
  --focus-ring-on-dark: var(--plum-300);

  /* sidebar / navigation: dark aubergine */
  --nav-bg: var(--aubergine);
  --nav-hover: #4A2D4D;
  --nav-text: #FCFBF8;
  --nav-muted: #D7BFD9;
  --nav-accent: var(--plum-300);
  --nav-divider: #6E4D72;

  /* status: never used as data-series colors */
  --success: #17705F; --success-tint: #E3F2EE; --success-border: #B5DCD1;
  --danger: #B3261E;  --danger-tint: #FBE7E5;  --danger-border: #F0BDB8;
  --warning: #8A6100; --warning-tint: #FBF1D6; --warning-border: #EBD59A;
  --info: #2D6AA6;    --info-tint: #E4EEF8;    --info-border: #BCD3EB;

  /* data series: always assign in this order; max four colored series */
  --data-1: var(--plum-700);    /* current period / focal entity */
  --data-2: var(--slate-400);   /* prior period / main comparison */
  --data-3: var(--slate-150);   /* older period / "All others" (bars, areas) */
  --data-3-line: var(--slate-300);
  --data-4: var(--copper-500);  /* benchmark / second named entity */
  --data-1-label: var(--plum-700);
  --data-2-label: var(--slate-600);
  --data-3-label: var(--slate-500);
  --data-4-label: var(--copper-700);
  --data-pos: #17705F;          /* signed change only, with ▲ and + */
  --data-neg: #B3261E;          /* signed change only, with ▼ and − */
  --chart-grid: var(--slate-100);
  --chart-axis: var(--slate-500);
  --chart-zero: var(--slate-400);

  /* sequential map ramp (muted plum to deep aubergine); neutral for no value */
  --map-1: #F0E4F0; --map-2: #DCC3DD; --map-3: #C3A0C5; --map-4: #A67CA9;
  --map-5: #875A8A; --map-6: #613C64; --map-7: #301A33;
  --map-none: #D8DADD; --map-boundary: #FFFFFF;

  /* type, shape, space */
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-display: Archivo, Inter, sans-serif;
  --radius-xs: 3px; --radius-sm: 5px; --radius-control: 6px; --radius-button: 8px;
  --radius: 10px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --control-size: 36px; --sidebar-width: 240px;
  --shadow-card: 0 15px 40px #303A4210;
  --shadow-float: 0 12px 32px #301A3324, 0 2px 6px #301A3314;

  /* ---------- presentation mode (dark): slides, social posts, cover pages ---------- */
  --deck-bg: #2E1730;           /* slide background */
  --deck-bg-alt: #43203F;       /* alternating slide background */
  --deck-card: #45213F;
  --deck-card-alt: #52284C;
  --deck-ink: #FFFFFF;
  --deck-lilac: #D6B3E2;        /* secondary text, labels, prior-period values */
  --deck-lilac-2: #B993C7;      /* connector lines */
  --deck-highlight: #F0A35E;    /* the focal number / current period: one idea per slide */
  --deck-bar: #8E5E8C;          /* non-focal bars */
  --deck-rule: #6A4466;         /* table rules, footer rule */
  --deck-pos: #7FD3B6;          /* signed change on dark (with ▲ +) */
  --deck-neg: #FF8A80;          /* signed change on dark (with ▼ −) */
  --deck-font-display: Archivo, sans-serif;           /* 800 headlines, big numbers */
  --deck-font-text: "IBM Plex Sans", sans-serif;      /* body */
  --deck-font-label: "IBM Plex Mono", monospace;      /* kickers, table heads, labels */
}