/*
 * mantine-tokens.css — Mantine 7+ dark-scheme design tokens.
 *
 * Source: Mantine v7 default theme (dark scheme palette + spacing +
 * radius + shadow scales). We pin the EXACT values here so the
 * stylesheet stays self-contained and reproducible — no @import,
 * no CDN, no npm. The single source of truth for every color, gap
 * and corner radius referenced by app.css.
 *
 * Architecture rules (CLAUDE.md §11):
 *   - Single embed.FS binary, no external assets.
 *   - Dark-theme-by-default; this file targets [data-theme="dark"]
 *     and :root for an early-render fallback before JS toggles.
 *   - require-trusted-types-for 'script' CSP — none of these
 *     custom properties touch script sinks.
 *
 * Adding a new token: append below in its semantic group, then
 * reference it from app.css via var(--mantine-...). Never inline a
 * raw color in app.css — it defeats the entire point of this file.
 */

:root,
[data-theme="dark"] {
  /* ---- Mantine dark gray scale ----------------------------------- */
  --mantine-color-dark-0: #c9c9c9;
  --mantine-color-dark-1: #b8b8b8;
  --mantine-color-dark-2: #828282;
  --mantine-color-dark-3: #696969;
  --mantine-color-dark-4: #424242;
  --mantine-color-dark-5: #3b3b3b;
  --mantine-color-dark-6: #2e2e2e;
  --mantine-color-dark-7: #242424;
  --mantine-color-dark-8: #1f1f1f;
  --mantine-color-dark-9: #141414;

  /* ---- Blue (primary) -------------------------------------------- */
  --mantine-color-blue-0: #e7f5ff;
  --mantine-color-blue-1: #d0ebff;
  --mantine-color-blue-2: #a5d8ff;
  --mantine-color-blue-3: #74c0fc;
  --mantine-color-blue-4: #4dabf7;
  --mantine-color-blue-5: #339af0;
  --mantine-color-blue-6: #228be6;
  --mantine-color-blue-7: #1c7ed6;
  --mantine-color-blue-8: #1971c2;
  --mantine-color-blue-9: #1864ab;

  /* ---- Green (success) ------------------------------------------- */
  --mantine-color-green-4: #51cf66;
  --mantine-color-green-6: #40c057;
  --mantine-color-green-8: #2f9e44;

  /* ---- Red (danger) ---------------------------------------------- */
  --mantine-color-red-4: #ff8787;
  --mantine-color-red-6: #fa5252;
  --mantine-color-red-8: #e03131;

  /* ---- Yellow (warning) ------------------------------------------ */
  --mantine-color-yellow-4: #ffd43b;
  --mantine-color-yellow-6: #fab005;
  --mantine-color-yellow-8: #f08c00;

  /* ---- Surface tones (deeper than stock Mantine) ----------------- */
  /* Stock Mantine body is dark-7 (#242424) — that reads as "gray".
   * Operators on this project want a near-black page background with
   * cards a notch lighter so they pop. We override the surface tokens
   * here without touching the dark-0..9 palette, so other consumers
   * (badge fills, hover states, etc.) keep their Mantine values. */
  --mantine-color-body:        #0d1117; /* page background        */
  --mantine-color-surface-1:   #161b22; /* cards, tables          */
  --mantine-color-surface-2:   #1c2129; /* hover / row-stripe     */
  --mantine-color-surface-3:   #21262d; /* input bg / chips       */
  --mantine-color-chrome:      #010409; /* topbar + sidebar       */

  /* ---- Semantic shortcuts ---------------------------------------- */
  --mantine-color-text: var(--mantine-color-dark-0);
  --mantine-color-dimmed: var(--mantine-color-dark-2);
  --mantine-color-bright: #ffffff;
  --mantine-primary-color-filled: var(--mantine-color-blue-8);
  --mantine-primary-color-filled-hover: var(--mantine-color-blue-9);
  --mantine-color-default-border: #30363d;
  --mantine-color-default: var(--mantine-color-surface-3);
  --mantine-color-default-hover: var(--mantine-color-surface-2);

  /* Light-ish translucent fills used by .notice tints. */
  --mantine-color-blue-light: rgba(12, 50, 86, 0.4);
  --mantine-color-yellow-light: rgba(102, 64, 0, 0.25);
  --mantine-color-red-light: rgba(102, 24, 24, 0.25);
  --mantine-color-green-light: rgba(15, 75, 36, 0.30);

  /* ---- Spacing scale --------------------------------------------- */
  --mantine-spacing-xs: 10px;
  --mantine-spacing-sm: 12px;
  --mantine-spacing-md: 16px;
  --mantine-spacing-lg: 20px;
  --mantine-spacing-xl: 32px;

  /* ---- Radius scale ---------------------------------------------- */
  --mantine-radius-xs: 2px;
  --mantine-radius-sm: 4px;
  --mantine-radius-md: 8px;
  --mantine-radius-lg: 16px;

  /* ---- Typography ------------------------------------------------ */
  --mantine-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mantine-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --mantine-font-size-xs: 12px;
  --mantine-font-size-sm: 14px;
  --mantine-font-size-md: 16px;
  --mantine-font-size-lg: 18px;

  /* ---- Shadows --------------------------------------------------- */
  --mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --mantine-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --mantine-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5);
}
