/* ChainPlot design tokens
   One neutral family (warm stone), one accent (oxide red), one muted secondary (moss).
   Everything in the interface is built from these variables. */

:root {
  /* ---- neutrals: warm stone paper ---- */
  --stone-0: #F7F5F0;   /* sheet: paper white, never pure white */
  --stone-1: #EFECE5;   /* page background */
  --stone-2: #E6E2D9;   /* raised surface, chip background */
  --stone-3: #D5D0C5;   /* borders */
  --stone-4: #B9B3A6;   /* strong borders, disabled text */
  --stone-5: #8A8478;   /* tertiary text, axis ticks */
  --stone-6: #5A564E;   /* secondary text */
  --stone-7: #2D2B27;   /* primary text */
  --stone-8: #1C1B19;   /* ink: headings, primary buttons */

  /* ---- accent and secondary ---- */
  --oxide: #B6412B;     /* accent: data date, critical, primary action, focus */
  --oxide-ink: #8E3221; /* accent pressed */
  --oxide-wash: #F3DDD7;/* accent background for alerts */
  --moss: #5E7260;      /* muted secondary: success, calm emphasis */
  --moss-wash: #E1E7E0;

  /* ---- semantic aliases used by components ---- */
  --bg: var(--stone-1);
  --sheet: var(--stone-0);
  --panel: var(--stone-1);
  --surface-2: var(--stone-2);
  --ink: var(--stone-8);
  --ink-2: var(--stone-6);
  --ink-3: var(--stone-5);
  --border: var(--stone-3);
  --border-strong: var(--stone-4);
  --rule: var(--border);
  --grid: #E8E4DC;
  --grid-strong: #D1CCC1;
  --accent: var(--oxide);
  --accent-ink: var(--oxide-ink);
  --accent-wash: var(--oxide-wash);
  --secondary: var(--moss);
  --secondary-wash: var(--moss-wash);
  --chip: var(--stone-2);
  --focus: var(--oxide);
  --selection: #E9CFC8;

  /* ---- typography ---- */
  --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  /* fluid scale, minor third at the small end opening to a major third on wide screens */
  --fs--1: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-0:  clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --fs-1:  clamp(0.95rem, 0.90rem + 0.22vw, 1.08rem);
  --fs-2:  clamp(1.15rem, 1.06rem + 0.42vw, 1.40rem);
  --fs-3:  clamp(1.45rem, 1.28rem + 0.80vw, 1.95rem);
  --fs-4:  clamp(1.90rem, 1.55rem + 1.60vw, 2.90rem);
  --fs-5:  clamp(2.50rem, 1.90rem + 2.80vw, 4.20rem);
  --lh-tight: 1.15;
  --lh-ui: 1.3;
  --lh-body: 1.65;
  --track-tight: -0.012em;
  --track-caps: 0.08em;

  /* ---- spacing (4px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- shape ---- */
  --radius: 2px;              /* one radius everywhere; sharp, drawn, technical */
  --bw: 1px;                  /* standard border */
  --bw-strong: 1.5px;         /* emphasised border */

  /* ---- depth: layered, short shadows, never a glow ---- */
  --shadow-1: 0 1px 0 rgba(28, 27, 25, 0.05), 0 1px 2px rgba(28, 27, 25, 0.08);
  --shadow-2: 0 1px 1px rgba(28, 27, 25, 0.06), 0 3px 6px -1px rgba(28, 27, 25, 0.10), 0 10px 20px -8px rgba(28, 27, 25, 0.16);
  --shadow-3: 0 1px 2px rgba(28, 27, 25, 0.08), 0 8px 16px -4px rgba(28, 27, 25, 0.14), 0 28px 48px -16px rgba(28, 27, 25, 0.24);
  --shadow-inset: inset 0 1px 2px rgba(28, 27, 25, 0.12);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;

  /* ---- chart data palette (categorical, muted, distinguishable on stone) ---- */
  --cat-1: #2F5D7C; --cat-2: #B07D2E; --cat-3: #4F7A5B; --cat-4: #7B5B8E; --cat-5: #3C8C8A; --cat-6: #8A6A4B;
  --cat-7: #5B6EAE; --cat-8: #A05A7A; --cat-9: #6B8E23; --cat-10: #C8853E; --cat-11: #2A6F97; --cat-12: #3E9B9B;
  --cat-other: #9A968E;
}

/* ---- dark theme: deep slate, same accent lifted for contrast ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121416; --sheet: #1A1D20; --panel: #15181B; --surface-2: #22262A;
    --ink: #ECE8E0; --ink-2: #B5B0A6; --ink-3: #7E796F;
    --border: #353A40; --border-strong: #4A5057; --rule: var(--border);
    --grid: #24292E; --grid-strong: #343B42;
    --accent: #E0674F; --accent-ink: #C8523A; --accent-wash: #3A241F;
    --secondary: #86A08A; --secondary-wash: #243027;
    --chip: #22262A; --focus: #E0674F; --selection: #4A2C26;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 1px rgba(0, 0, 0, 0.3), 0 3px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 20px -8px rgba(0, 0, 0, 0.6);
    --shadow-3: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 28px 48px -16px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121416; --sheet: #1A1D20; --panel: #15181B; --surface-2: #22262A;
  --ink: #ECE8E0; --ink-2: #B5B0A6; --ink-3: #7E796F;
  --border: #353A40; --border-strong: #4A5057; --rule: var(--border);
  --grid: #24292E; --grid-strong: #343B42;
  --accent: #E0674F; --accent-ink: #C8523A; --accent-wash: #3A241F;
  --secondary: #86A08A; --secondary-wash: #243027;
  --chip: #22262A; --focus: #E0674F; --selection: #4A2C26;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 1px rgba(0, 0, 0, 0.3), 0 3px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 20px -8px rgba(0, 0, 0, 0.6);
  --shadow-3: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 28px 48px -16px rgba(0, 0, 0, 0.7);
}