/* 00-tokens.css — the CRM's design tokens. Loaded before every other stylesheet.
   Layer 1: brand and palette scales (fixed values; the same in light and dark).
   Layer 2: semantic roles (--color-*): what a colour is FOR. Dark mode swaps only these,
            in the one body.phi-dark block at the bottom.
   Layer 3: type, spacing, radius and shadow scales.
   Scale numbers follow lightness: 50 is nearly white, 950 nearly black, so --emerald-750
   is darker than --emerald-600. Every palette value was already in use in the CRM;
   see docs/review/decisions/0006-colour-tokens.md. */

:root {
  /* ── Layer 1: palette ── */
  /* white */
  --white: #ffffff;   /* 162 uses */
  /* emerald */
  --emerald-50: #c8ece3;   /* 3 uses */
  --emerald-100: #d4edda;   /* 8 uses */
  --emerald-110: #cfe3d8;   /* 2 uses */
  --emerald-125: #a8ecc4;   /* 4 uses */
  --emerald-150: #c4dccf;   /* 8 uses */
  --emerald-175: #a9dcc2;   /* 5 uses */
  --emerald-200: #a6c4b5;   /* 13 uses */
  --emerald-225: #8fd3a8;   /* 4 uses */
  --emerald-250: #9bbfb8;   /* 23 uses */
  --emerald-300: #8fae9f;   /* 2 uses */
  --emerald-325: #86afa5;   /* 1 use */
  --emerald-350: #8aa396;   /* 3 uses */
  --emerald-375: #7a9e8e;   /* 2 uses */
  --emerald-400: #6a9a85;   /* 2 uses */
  --emerald-425: #6f8a7c;   /* 2 uses */
  --emerald-450: #518b71;   /* 10 uses */
  --emerald-475: #6b7f76;   /* 3 uses */
  --emerald-500: #5a7870;   /* 25 uses */
  --emerald-525: #3e765b;   /* 6 uses */
  --emerald-540: #12795f;   /* 2 uses */
  --emerald-550: #1a846b;   /* 13 uses */
  --emerald-575: #3a705a;   /* 7 uses */
  --emerald-590: #366853;   /* 4 uses */
  --emerald-600: #2f6b52;   /* 23 uses */
  --emerald-625: #235f40;   /* 14 uses */
  --emerald-650: #35604f;   /* 35 uses */
  --emerald-660: #41544d;   /* 2 uses */
  --emerald-670: #2d5446;   /* 2 uses */
  --emerald-675: #2a5a45;   /* 3 uses */
  --emerald-700: #25493c;   /* 14 uses */
  --emerald-720: #1f4a35;   /* 1 use */
  --emerald-725: #33453d;   /* 2 uses */
  --emerald-750: #1a4530;   /* 41 uses */
  --emerald-775: #0b3d30;   /* 6 uses */
  --emerald-800: #1d3d33;   /* 14 uses */
  --emerald-825: #1a2e28;   /* 6 uses */
  --emerald-850: #16312a;   /* 10 uses */
  --emerald-900: #10291f;   /* 2 uses */
  /* grey */
  --grey-20: #fffaf0;   /* 2 uses */
  --grey-25: #fdf0f0;   /* 3 uses */
  --grey-30: #fdf6f5;   /* 2 uses */
  --grey-40: #eff4f7;   /* 1 use */
  --grey-50: #f2f7f4;   /* 8 uses */
  --grey-60: #f0f0f0;   /* 2 uses */
  --grey-75: #e3e9e6;   /* 6 uses */
  --grey-80: #ece5ee;   /* 3 uses */
  --grey-100: #fde8e8;   /* 7 uses */
  --grey-150: #d8e3ea;   /* 1 use */
  --grey-250: #bbbbbb;   /* 3 uses */
  --grey-300: #aaaaaa;   /* 2 uses */
  --grey-450: #888888;   /* 3 uses */
  --grey-700: #444444;   /* 2 uses */
  --grey-800: #333333;   /* 2 uses */
  --grey-850: #222222;   /* 2 uses */
  --grey-900: #1a1a19;   /* 2 uses */
  /* sage */
  --sage-20: #f0fdf4;   /* 2 uses */
  --sage-25: #e8f4e8;   /* 2 uses */
  --sage-50: #e6efe9;   /* 39 uses */
  --sage-75: #e8f2f0;   /* 7 uses */
  --sage-90: #d4e8e2;   /* 1 use */
  --sage-100: #d9e8df;   /* 7 uses */
  --sage-125: #d9e3df;   /* 2 uses */
  --sage-150: #cfd9d4;   /* 3 uses */
  --sage-300: #9aa8a2;   /* 2 uses */
  --sage-350: #8a9a94;   /* 5 uses */
  --sage-400: #8b9a9a;   /* 6 uses */
  --sage-450: #7b8a8a;   /* 2 uses */
  --sage-500: #6b7b76;   /* 7 uses */
  --sage-550: #5f7370;   /* 2 uses */
  --sage-650: #4a5a55;   /* 2 uses */
  --sage-700: #3c4a4a;   /* 2 uses */
  --sage-750: #2c3835;   /* 2 uses */
  --sage-800: #23332e;   /* 2 uses */
  --sage-850: #1d2b2b;   /* 13 uses */
  /* green */
  --green-250: #9bc49a;   /* 2 uses */
  --green-550: #2e7d32;   /* 4 uses */
  --green-600: #2d6a2d;   /* 2 uses */
  --green-700: #155724;   /* 7 uses */
  /* olive */
  --olive-100: #dde4c8;   /* 2 uses */
  --olive-500: #6b7a48;   /* 2 uses */
  --olive-750: #3a4220;   /* 2 uses */
  /* gold */
  --gold-20: #fff8e1;   /* 2 uses */
  --gold-25: #fff3e0;   /* 4 uses */
  --gold-50: #fff3cd;   /* 7 uses */
  --gold-100: #fff0c0;   /* 3 uses */
  --gold-200: #e6c96a;   /* 3 uses */
  --gold-225: #f0b04a;   /* 0 uses */
  --gold-250: #e6c26a;   /* 2 uses */
  --gold-300: #c8a951;   /* 2 uses */
  --gold-350: #c49a1a;   /* 5 uses */
  --gold-400: #c98a00;   /* 3 uses */
  --gold-550: #856404;   /* 6 uses */
  --gold-700: #5b4a0e;   /* 4 uses */
  --gold-725: #4f3e24;   /* 1 use */
  --gold-750: #4a3a1a;   /* 2 uses */
  --gold-800: #3d3210;   /* 2 uses */
  /* amber */
  --amber-300: #c9a394;   /* 2 uses */
  --amber-450: #c87000;   /* 4 uses */
  --amber-475: #b26a06;   /* 2 uses */
  --amber-490: #b5651d;   /* 1 use */
  --amber-500: #9a7b6b;   /* 2 uses */
  --amber-600: #b23b00;   /* 2 uses */
  --amber-700: #6b3c00;   /* 3 uses */
  --amber-800: #3a2b22;   /* 2 uses */
  /* red */
  --red-50: #fce4ec;   /* 2 uses */
  --red-100: #f8d7da;   /* 3 uses */
  --red-150: #f5c6c6;   /* 4 uses */
  --red-200: #e6c6c3;   /* 4 uses */
  --red-250: #f2b8ad;   /* 2 uses */
  --red-300: #ff9b85;   /* 2 uses */
  --red-450: #e74c3c;   /* 6 uses */
  --red-550: #c0392b;   /* 24 uses */
  --red-600: #b3261e;   /* 4 uses */
  --red-700: #721c24;   /* 3 uses */
  --red-750: #7a1a1a;   /* 6 uses */
  --red-800: #4a2f2a;   /* 1 use */
  /* plum */
  --plum-400: #9a8fa2;   /* 2 uses */
  --plum-500: #8a5f94;   /* 2 uses */
  --plum-550: #7f6680;   /* 10 uses */
  --plum-650: #63466a;   /* 46 uses */
  --plum-800: #3d2d40;   /* 1 use */
  --plum-850: #2a2130;   /* 2 uses */
  /* blue */
  --blue-350: #7f9ab0;   /* 1 use */
  --blue-400: #5b8fa8;   /* 1 use */
  --blue-450: #507d9f;   /* 1 use */
  --blue-475: #6d8296;   /* 1 use */
  --blue-500: #2a78d6;   /* 3 uses */
  --blue-600: #1a5f8a;   /* 2 uses */
  --blue-650: #335067;   /* 1 use */
  --blue-700: #3d4d5a;   /* 2 uses */
  --blue-850: #1c2b36;   /* 1 use */

  /* ── Layer 2: semantic roles (light) ── */
  --color-page-bg: var(--emerald-325);
  --color-surface: var(--white);
  --color-surface-raised: var(--white);
  --color-surface-subtle: var(--sage-75);
  --color-surface-muted: var(--sage-90);
  --color-nav-bg: var(--emerald-750);
  --color-text: var(--emerald-825);
  --color-text-muted: var(--emerald-500);
  --color-text-inverse: var(--white);
  --color-border: var(--emerald-250);
  --color-border-strong: var(--emerald-500);
  --color-accent: var(--emerald-625);
  --color-accent-strong: var(--emerald-750);
  --color-accent-soft: var(--emerald-50);
  --color-accent-text: var(--emerald-775);
  --color-secondary: var(--plum-650);
  --color-secondary-soft: var(--grey-80);
  --color-highlight: var(--amber-450);
  --color-danger: var(--red-550);
  --color-danger-soft: var(--grey-100);
  --color-warning: var(--gold-550);
  --color-warning-soft: var(--gold-50);
  --color-success: var(--green-700);
  --color-success-soft: var(--emerald-100);
  --color-focus: var(--amber-450);

  /* ── Layer 3: type, spacing, radius, shadow ── */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-card: 13px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .12);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .12);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, .22);
}

/* ── Dark mode: the same role names, dark values. Nothing else changes here. ── */
body.phi-dark {
  --color-page-bg: var(--emerald-850);
  --color-surface: var(--emerald-800);
  --color-surface-raised: var(--emerald-700);
  --color-surface-subtle: var(--emerald-800);
  --color-surface-muted: var(--emerald-700);
  --color-nav-bg: var(--emerald-750);
  --color-text: var(--sage-50);
  --color-text-muted: var(--emerald-200);
  --color-text-inverse: var(--white);
  --color-border: var(--emerald-650);
  --color-border-strong: var(--emerald-450);
  --color-accent: var(--emerald-600);
  --color-accent-strong: var(--emerald-525);
  --color-accent-soft: var(--emerald-590);
  --color-accent-text: var(--emerald-125);
  --color-secondary: var(--plum-650);
  --color-secondary-soft: var(--plum-800);
  --color-highlight: var(--gold-250);
  --color-danger: var(--red-300);
  --color-danger-soft: var(--red-800);
  --color-warning: var(--gold-250);
  --color-warning-soft: var(--gold-750);
  --color-success: var(--emerald-225);
  --color-success-soft: var(--emerald-720);
  --color-focus: var(--gold-225);
}