/*
 * tokens.css — the design token layer for Notiflog.
 *
 * Two layers, on purpose:
 *   1. Raw Radix Colors dark scales (--slate-1..12, --teal-1..12, plus
 *      red/amber/green for danger/warn/ok) — exact published dark-theme
 *      hex values, step-for-step. Never reference these directly outside
 *      this file.
 *   2. Semantic aliases (--bg-app, --text, --accent, ...) that the rest of
 *      the CSS (app.css) actually uses. Rename a semantic alias's mapping
 *      here and the whole UI follows — no hunting through app.css.
 *
 * Source: @radix-ui/colors 3.0.0, slate-dark.css / teal-dark.css /
 * red-dark.css / amber-dark.css / green-dark.css, fetched 2026-08-04.
 * https://www.radix-ui.com/colors — steps 1-12 per scale:
 *   1-2   app / subtle backgrounds
 *   3-5   component backgrounds (normal / hover / active)
 *   6-8   borders (subtle -> strong -> interactive-ready)
 *   9-10  solid backgrounds (accent fills)
 *   11-12 low-contrast / high-contrast text
 *
 * This app is dark-only by product decision (see STYLEGUIDE.md), so only
 * the dark scales are vendored. If a light mode is ever wanted, add the
 * light scales here and gate the semantic layer on
 * `:root[data-theme="light"]` / `prefers-color-scheme: light`.
 */

:root {
  /* ---- Radix Slate (neutral), dark scale ------------------------------ */
  --slate-1: #111113;
  --slate-2: #18191b;
  --slate-3: #212225;
  --slate-4: #272a2d;
  --slate-5: #2e3135;
  --slate-6: #363a3f;
  --slate-7: #43484e;
  --slate-8: #5a6169;
  --slate-9: #696e77;
  --slate-10: #777b84;
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;

  /* ---- Radix Teal (accent), dark scale --------------------------------- */
  --teal-1: #0d1514;
  --teal-2: #111c1b;
  --teal-3: #0d2d2a;
  --teal-4: #023b37;
  --teal-5: #084843;
  --teal-6: #145750;
  --teal-7: #1c6961;
  --teal-8: #207e73;
  --teal-9: #12a594;
  --teal-10: #0eb39e;
  --teal-11: #0bd8b6;
  --teal-12: #adf0dd;

  /* ---- Radix Red (danger), dark scale ----------------------------------- */
  --red-1: #191111;
  --red-2: #201314;
  --red-3: #3b1219;
  --red-4: #500f1c;
  --red-5: #611623;
  --red-6: #72232d;
  --red-7: #8c333a;
  --red-8: #b54548;
  --red-9: #e5484d;
  --red-10: #ec5d5e;
  --red-11: #ff9592;
  --red-12: #ffd1d9;

  /* ---- Radix Amber (warn), dark scale ----------------------------------- */
  --amber-1: #16120c;
  --amber-2: #1d180f;
  --amber-3: #302008;
  --amber-4: #3f2700;
  --amber-5: #4d3000;
  --amber-6: #5c3d05;
  --amber-7: #714f19;
  --amber-8: #8f6424;
  --amber-9: #ffc53d;
  --amber-10: #ffd60a;
  --amber-11: #ffca16;
  --amber-12: #ffe7b3;

  /* ---- Radix Green (ok), dark scale -------------------------------------- */
  --green-1: #0e1512;
  --green-2: #121b17;
  --green-3: #132d21;
  --green-4: #113b29;
  --green-5: #174933;
  --green-6: #20573e;
  --green-7: #28684a;
  --green-8: #2f7c57;
  --green-9: #30a46c;
  --green-10: #33b074;
  --green-11: #3dd68c;
  --green-12: #b1f1cb;

  /* =======================================================================
   * Semantic aliases — use these in app.css, never the raw scale above.
   * ===================================================================== */

  /* Backgrounds, darkest to lightest */
  --bg-app: var(--slate-1);       /* page background */
  --bg-subtle: var(--slate-2);    /* topbar, footer, subtly-lifted regions */
  --bg-raised: var(--slate-3);    /* cards, panels, table header */
  --bg-hover: var(--slate-4);     /* row/item hover, active component fill */
  --bg-sunken: var(--slate-1);    /* inputs, code/raw blocks — recessed */

  /* Borders */
  --border: var(--slate-6);       /* default hairline */
  --border-strong: var(--slate-7);/* emphasised / interactive-ready border */

  /* Text */
  --text: var(--slate-12);        /* primary reading text */
  --text-dim: var(--slate-11);    /* secondary text, labels */
  --text-faint: var(--slate-9);   /* tertiary / disabled / placeholder */

  /* Accent (teal) */
  --accent: var(--teal-9);        /* solid accent fill (buttons, focus) */
  --accent-hover: var(--teal-10); /* accent fill hover/active */
  --accent-text: var(--teal-11);  /* accent used as text/link colour */
  --accent-bg: var(--teal-3);     /* accent-tinted background (chips) */
  --accent-border: var(--teal-7); /* accent border */

  /* Status */
  --danger: var(--red-11);
  --danger-bg: var(--red-3);
  --danger-border: var(--red-7);
  --danger-solid: var(--red-9);

  --warn: var(--amber-11);
  --warn-bg: var(--amber-3);
  --warn-border: var(--amber-7);
  --warn-solid: var(--amber-9);

  --ok: var(--green-11);
  --ok-bg: var(--green-3);
  --ok-border: var(--green-7);
  --ok-solid: var(--green-9);

  /* ---- Type scale --------------------------------------------------- */
  --text-xs: 0.75rem;    /* 12px — meta, chip labels, mono captions */
  --text-sm: 0.8125rem;  /* 13px — table body, dense UI */
  --text-base: 0.9375rem;/* 15px — body copy */
  --text-md: 1.0625rem;  /* 17px — section headings, h2 */
  --text-lg: 1.375rem;   /* 22px — page heading, h1 */
  --text-xl: 1.75rem;    /* 28px — stat tiles, big numbers */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ---- Font stacks ---------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Spacing scale (4px base) ---------------------------------------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* ---- Radius scale ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---- Elevation ---------------------------------------------------------- */
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.28);
  --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.5);

  /* ---- Focus ring --------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent-text);
}