/*
 * Modernist — design tokens for DeepDiag / DeepWrench.
 *
 * Rebuilt from the app's only surviving copy of the design system,
 * src/vehicle_diagnostics/gui/theme.py (app commit 7224757 introduced it).
 * This file mirrors that module value-for-value and holds nothing site-only:
 * site choices live in site.css. tools/check_tokens.py diffs the two hex for
 * hex. Run it after any change to either side.
 *
 * The system: flat and architectural. Archivo throughout (800 for headings),
 * JetBrains Mono for codes and data. A near-mono palette of ink on paper with
 * one red accent. Zero corner radius, no shadows or elevation. Separation comes
 * from rules (2px between sections, 1px between cells) and the panel fill.
 *
 * Accent #ec3013 is the brand/ACTION colour: buttons, links, focus, kickers.
 * It is never the error/critical colour. In a diagnostics tool red already
 * means "fault", so severity has its own deeper scale (--color-critical).
 *
 * Contrast note: text on #ec3013 (either way) measures 3.76:1. For text-size
 * copy on a light ground use --accent-deep (#ae1800, 6.41:1 on paper).
 *
 * Not mirrored (app-only layout): dialog shell sizes, icon sizes, nav-rail
 * width, window chrome.
 */

/* ── Fonts (SIL Open Font License 1.1 — see ../fonts/OFL-*.txt) ─────────── */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.ttf") format("truetype");
  font-weight: 100 900;   /* variable: wght 100–900 */
  font-stretch: 62% 125%; /* variable: wdth 62–125 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 100 800;   /* variable: wght 100–800 */
  font-style: normal;
  font-display: swap;
}

/* ── Light theme (default) + theme-independent tokens ──────────────────── */

:root {
  /* Raw palette */
  --ink: #201e1d;            /* dark ground / light-theme text */
  --panel: #2d2b2b;          /* dark-theme raised surface */
  --paper: #f3f2f2;          /* light ground / dark-theme text */
  --surface-light: #eae9e9;  /* light-theme raised surface */

  --accent: #ec3013;         /* primary fill — actions only, never errors */
  --accent-lt: #ff563c;      /* accent on a dark ground (rules, links) */
  --accent-tnt: #ff9783;     /* accent tint — kickers, OK flags (dark) */
  --accent-deep: #ae1800;    /* accent on a light ground for text-size copy */
  --accent-hover: #dd2b0f;
  --accent-pressed: #ae1800;

  /* Tonal ramps (OKLCH, one shared lightness scale: the same step of any
     ramp carries the same visual weight). Prefer a step over an ad-hoc blend. */
  --neutral-100: #f8f4f4;
  --neutral-200: #eae7e7;
  --neutral-300: #d7d3d3;
  --neutral-400: #bab6b6;
  --neutral-500: #9b9797;
  --neutral-600: #7d7979;
  --neutral-700: #605d5d;
  --neutral-800: #444141;
  --neutral-900: #2d2b2b;

  --accent-100: #fff2ef;
  --accent-200: #ffe0d9;
  --accent-300: #ffc4b8;
  --accent-400: #ff9783;
  --accent-500: #ff563c;
  --accent-600: #dd2b0f;
  --accent-700: #ae1800;
  --accent-800: #7c1405;
  --accent-900: #4d170e;

  /* Rules — opacities over the TEXT colour, so they sit right on either
     ground. 2px separates sections, 1px separates cells within a section.
     --rule-strong / --rule-hair are those opacities composited to solid hex. */
  --rule-strong-width: 2px;
  --rule-hair-width: 1px;
  --rule-strong-opacity: 0.40;
  --rule-hair-opacity: 0.18;
  --rule-strong: #9f9d9d;
  --rule-hair: #cdcccc;

  /* Semantic palette — the app's 19 keys (LIGHT_COLORS) */
  --color-critical: #ae1800;   /* deep, deliberately not the brand red */
  --color-major: #8f5100;
  --color-minor: #7d7979;
  --color-success: #1f6b41;
  --color-normal: #1f6b41;
  --color-warning: #8f5100;
  --color-info: #444141;
  --color-primary: #ec3013;    /* actions only */
  --color-secondary: #605d5d;
  --color-background: #f3f2f2;
  --color-surface: #eae9e9;
  --color-on-surface: #201e1d;
  --color-muted: #605d5d;      /* 5.83:1 on paper */
  --color-border: #d7d3d3;
  --color-details-bg: #eae7e7;
  --color-critical-bg: #ecdcda;
  --color-warning-bg: #e9e2da;
  --color-success-bg: #dee4e0;
  --color-info-bg: #e6e5e5;

  /* Theme-aware accents (get_accent / get_accent_tint) */
  --color-accent: #ec3013;     /* rules, markers, focus — not text on paper */
  --color-accent-tint: #ae1800;/* kickers and text-size accent copy */

  /* Type */
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --size-display: 76px;  /* launch wordmark */
  --size-h1: 42px;
  --size-h2: 32px;
  --size-h3: 25px;
  --size-h4: 20px;
  --size-h5: 16px;
  --size-h6: 13px;       /* uppercase, tracked out */
  --size-body: 15px;
  --size-body-sm: 13px;
  --size-label: 12px;
  --size-caption: 11px;
  --size-micro: 10px;

  --heading-weight: 800;
  --heading-line-height: 1.12;
  --body-line-height: 1.55;
  --heading-letter-spacing: -0.015em; /* app value -0.015; em confirmed by the
                                         Claude Design handoff, _ds/…/styles.css */
  --kicker-letter-spacing: 1.8px;
  --label-letter-spacing: 1.5px;

  /* Spacing, radius */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-ms: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --radius: 0;           /* zero across the whole system, on purpose */
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --rule-strong-opacity: 0.35;
    --rule-hair-opacity: 0.16;
    --rule-strong: #6a6868;
    --rule-hair: #42403f;

    /* Semantic palette (DARK_COLORS) */
    --color-critical: #ff8a73;  /* lighter than accent-lt so links stay distinct */
    --color-major: #e5a14e;
    --color-minor: #bab6b6;
    --color-success: #5ec98d;
    --color-normal: #5ec98d;
    --color-warning: #e5a14e;
    --color-info: #d7d3d3;
    --color-primary: #ec3013;   /* the fill stays #ec3013 on both grounds */
    --color-secondary: #bab6b6;
    --color-background: #201e1d;
    --color-surface: #2d2b2b;
    --color-on-surface: #f3f2f2;
    --color-muted: #9b9797;     /* 5.75:1 on ink */
    --color-border: #4a4747;
    --color-details-bg: #2d2b2b;
    --color-critical-bg: #442f2b;
    --color-warning-bg: #403325;
    --color-success-bg: #2a392f;
    --color-info-bg: #312f2e;

    --color-accent: #ff563c;     /* 5.26:1 on ink; 4.46:1 on panel — not for text there */
    --color-accent-tint: #ff9783;
  }
}