/* ==========================================================================
   Censible design tokens
   Source: Censible Brand System (Colour). Twelve hues normalised in OKLCH to
   one shared lightness/chroma; 500 is the core tone (L 0.72, C 0.130).
   Rule: components use the SEMANTIC tokens further down, never raw ramps.
   ========================================================================== */

:root {
  /* ---- Core spectrum ramps (100 → 900) -------------------------------- */
  --ember-100:#FFEDE8; --ember-200:#FFD7CB; --ember-300:#FFBBA6; --ember-400:#F89C80; --ember-500:#E98667; --ember-600:#BD6347; --ember-700:#94472F; --ember-800:#6A2E1B; --ember-900:#40190D;
  --coral-100:#FFEDED; --coral-200:#FFD6D6; --coral-300:#FFB9BA; --coral-400:#F9989B; --coral-500:#EB8186; --coral-600:#BF5E64; --coral-700:#954348; --coral-800:#6A2B30; --coral-900:#41171A;
  --rose-100:#FFECF2; --rose-200:#FFD4E3; --rose-300:#FEB5D1; --rose-400:#F297BB; --rose-500:#E380A9; --rose-600:#B85E84; --rose-700:#8F4364; --rose-800:#662B45; --rose-900:#3E1728;
  --orchid-100:#FDEBFC; --orchid-200:#F8D4F5; --orchid-300:#EFB9EC; --orchid-400:#E09CDD; --orchid-500:#D086CE; --orchid-600:#A764A5; --orchid-700:#814780; --orchid-800:#5C2F5B; --orchid-900:#371A36;
  --violet-100:#F2EFFF; --violet-200:#E3DCFF; --violet-300:#D1C4FF; --violet-400:#BDA8FA; --violet-500:#AB93ED; --violet-600:#8670C2; --violet-700:#665298; --violet-800:#46376D; --violet-900:#291F42;
  --sky-100:#E9F3FF; --sky-200:#CEE3FF; --sky-300:#ADD1FF; --sky-400:#85BAFF; --sky-500:#6AA7F4; --sky-600:#4A82C8; --sky-700:#31619E; --sky-800:#1D4371; --sky-900:#0E2745;
  --cerulean-100:#E3F5FF; --cerulean-200:#BFE8FF; --cerulean-300:#8FD9FF; --cerulean-400:#5FC4F5; --cerulean-500:#37B2E8; --cerulean-600:#008CBC; --cerulean-700:#00698F; --cerulean-800:#004964; --cerulean-900:#002B3D;
  --teal-100:#DDF8F9; --teal-200:#B4EEF1; --teal-300:#80E0E5; --teal-400:#41CED5; --teal-500:#00BBC3; --teal-600:#009298; --teal-700:#006E73; --teal-800:#004C50; --teal-900:#002D2F;
  --jade-100:#E1F8ED; --jade-200:#BEEED8; --jade-300:#93E1BF; --jade-400:#65CFA5; --jade-500:#3FBE90; --jade-600:#0E976D; --jade-700:#007252; --jade-800:#004F38; --jade-900:#002F1F;
  --lime-100:#ECF6E2; --lime-200:#D6E9C0; --lime-300:#BDDA99; --lime-400:#A2C672; --lime-500:#8DB456; --lime-600:#6B8E35; --lime-700:#4E6C1D; --lime-800:#344B0B; --lime-900:#1D2C04;
  --saffron-100:#F6F3DD; --saffron-200:#EAE3B7; --saffron-300:#DBD089; --saffron-400:#C9B95B; --saffron-500:#B8A636; --saffron-600:#928105; --saffron-700:#6E6100; --saffron-800:#4C4300; --saffron-900:#2D2700;
  --gold-100:#FCF0DD; --gold-200:#F6DEB6; --gold-300:#EDC889; --gold-400:#DFAF5A; --gold-500:#CF9A35; --gold-600:#A67603; --gold-700:#7E5900; --gold-800:#583D00; --gold-900:#352300;

  /* ---- Neutrals ------------------------------------------------------- */
  --stone-100:#F9F0E5; --stone-200:#E9E0D4; --stone-300:#D5CCC1; --stone-400:#BEB6AB; --stone-500:#A59D92; --stone-600:#877F75; --stone-700:#675F55; --stone-800:#484138; --stone-900:#2C251D;
  --ink-100:#F9F4F3; --ink-200:#DBD6D6; --ink-300:#AEA9A9; --ink-400:#847F7F; --ink-500:#5E5959; --ink-600:#433E3E; --ink-700:#312D2C; --ink-800:#231F1F; --ink-900:#191515;

  /* ---- Type ----------------------------------------------------------- */
  --font-sans: 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Shape & spacing ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --gap: 16px;
  --sidebar-w: 232px;
}

/* ==========================================================================
   Semantic tokens — DARK (default, brand-first)
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-800);            /* page */
  --card: var(--ink-900);          /* cards, sidebar, top bar, inputs */
  --line: var(--ink-700);          /* borders, dividers, gridlines, quiet fills */
  --line-strong: var(--ink-600);   /* control borders */
  --axis: var(--ink-500);          /* chart baselines, dashed outlines */
  --text: var(--stone-100);
  --text-2: var(--stone-300);
  --muted: var(--stone-500);       /* labels, captions — 6:1+ on --card */

  --accent: var(--cerulean-500);       /* button fills */
  --accent-text: var(--cerulean-500);  /* links / accent text */
  --on-accent: var(--ink-900);         /* text on accent fills ("Ink on Cerulean") */
  --link-hover: var(--cerulean-400);

  /* Data: areas use the categorical order (01 cer, 02 emb, 03 lim) at 500 */
  --area-1: var(--cerulean-500);
  --area-2: var(--ember-500);
  --area-3: var(--lime-500);
  /* Bar and column fills fade in to the core brand tone (500) in both themes */
  --bar-1: var(--cerulean-500);
  --bar-2: var(--ember-500);
  --bar-3: var(--lime-500);
  /* 2016 beside 2021: a quiet grey, so it reads apart from every area's colour */
  --past: var(--stone-600);
  --baseline: var(--stone-100);     /* Australia reference line */

  /* Map: sequential Cerulean, brightest = highest on dark */
  --map-1: var(--cerulean-800);
  --map-2: var(--cerulean-700);
  --map-3: var(--cerulean-600);
  --map-4: var(--cerulean-500);
  --map-5: var(--cerulean-400);
  --map-pin: var(--stone-100);
}

/* ==========================================================================
   Semantic tokens — LIGHT
   Neutral greys for the chrome (no cream), 600 step for data marks so they
   clear 3:1 on white, 700 for accent text.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F2F1;
  --card: #FFFFFF;
  --line: #E4E4E2;
  --line-strong: #D4D4D1;
  --axis: #B5B5B1;
  --text: var(--ink-900);
  --text-2: var(--ink-600);
  --muted: var(--ink-500);

  --accent: var(--cerulean-500);
  --accent-text: var(--cerulean-700);
  --on-accent: var(--ink-900);
  --link-hover: var(--cerulean-700);

  --area-1: var(--cerulean-600);
  --area-2: var(--ember-600);
  --area-3: var(--lime-600);
  --bar-1: var(--cerulean-500);
  --bar-2: var(--ember-500);
  --bar-3: var(--lime-500);
  --past: var(--ink-400);
  --baseline: var(--ink-900);

  --map-1: var(--cerulean-200);
  --map-2: var(--cerulean-300);
  --map-3: var(--cerulean-500);
  --map-4: var(--cerulean-600);
  --map-5: var(--cerulean-700);
  --map-pin: var(--ink-900);
}