/**
 * Design tokens (ADR-007 v2.1, Phase 6a W-X2) — the app's design guide,
 * from the Designer pass's approved concept "Car + Automations"
 * (mockups/src/car-automations/tokens.css, prefix ca- → mt- here; the
 * brief is mockups/docs/README.md §Concept B). The marketing site
 * (ADR-012) consumes this set; it no longer originates here.
 *
 * Rules:
 * - This file is the ONLY place a colour literal lives. app.css and every
 *   template reference a token (tests/app/test_tokens_shape.py).
 * - Two full sets: dark is the base (`:root`), light is the whole set
 *   again under `prefers-color-scheme: light`. Every colour role is in
 *   both, so no role can fall through to the other theme's value.
 *   A manual switch (a `data-theme` attribute) is a later item; it would
 *   repeat the two sets under `:root[data-theme=…]` — not kept here unused.
 * - `mytesly/branding.py` duplicates the two page backgrounds as
 *   THEME_COLOR / THEME_COLOR_LIGHT (JSON and a <meta> attribute cannot
 *   read a custom property); the shape test pins them to this file.
 */

:root {
  /* ── Type — system stack; 15px body, 1.2-ish scale, two display steps ─── */
  --mt-font-sans:
    -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mt-text-2xs: 0.6875rem;  /* 11 — phone tab captions */
  --mt-text-xs: 0.75rem;     /* 12 — labels */
  --mt-text-sm: 0.8125rem;   /* 13 — status sentences, hints */
  --mt-text-base: 0.9375rem; /* 15 — body */
  --mt-text-lg: 1.0625rem;   /* 17 — card titles, row titles */
  --mt-text-xl: 1.25rem;     /* 20 — mobile page titles */
  --mt-text-2xl: 1.625rem;   /* 26 — hero name */
  --mt-text-3xl: 2.25rem;    /* 36 — desktop page titles */
  --mt-text-hero: 3.5rem;    /* 56 — the one big number */
  --mt-leading-base: 1.45;
  --mt-leading-tight: 1.05;

  /* ── Spacing — 4px base ───────────────────────────────────────────────── */
  --mt-space-1: 0.25rem;
  --mt-space-2: 0.5rem;
  --mt-space-3: 0.75rem;
  --mt-space-4: 1rem;
  --mt-space-5: 1.25rem;
  --mt-space-6: 1.5rem;
  --mt-space-8: 2rem;
  --mt-space-10: 2.5rem;
  --mt-space-12: 3rem;

  /* ── Radius — buttons are pills, cards are soft ───────────────────────── */
  --mt-radius-sm: 0.75rem;
  --mt-radius-md: 1rem;
  --mt-radius-lg: 1.5rem;
  --mt-radius-pill: 999px;

  /* ── Layout — the shell's fixed sizes (breakpoints are in app.css) ────── */
  --mt-rail-width: 232px;       /* desktop left rail */
  --mt-rail-width-narrow: 72px; /* 768–1279px: icons only */
  --mt-panel-width: 340px;      /* desktop right panel */
  --mt-row-height: 64px;        /* density rule: an automation row, two lines, never more */
  --mt-tap: 44px;               /* minimum tap target */
  --mt-tabbar-height: 64px;     /* mobile bottom tabs */
  --mt-icon-sm: 16px;           /* in buttons and pills */
  --mt-icon-md: 20px;           /* rail nav, row icons */
  --mt-icon-lg: 22px;           /* phone tabs */
  --mt-icon-tile: 40px;         /* the square behind a row icon */

  /* ── Colour — dark (base) ─────────────────────────────────────────────── */
  color-scheme: dark;
  --mt-color-bg: #101214;
  --mt-color-surface: #191c20;
  --mt-color-surface-2: #22262c;
  --mt-color-border: #2c3138;
  --mt-color-border-strong: #3a414a;
  --mt-color-text: #f2f3f5;
  --mt-color-text-muted: #aab0b9;
  --mt-color-text-faint: #737a85;
  --mt-color-accent: #4c8dff;
  --mt-color-accent-contrast: #ffffff;
  --mt-color-success-bg: rgba(52, 195, 143, 0.14);
  --mt-color-success-text: #34c38f;
  --mt-color-warning-bg: rgba(240, 160, 48, 0.14);
  --mt-color-warning-text: #f0a030;
  --mt-color-danger-bg: rgba(239, 90, 90, 0.14);
  --mt-color-danger-text: #ef5a5a;
  --mt-color-battery: #4c8dff;
  --mt-color-battery-track: #2a2f36;
  --mt-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
  --mt-gradient-hero: linear-gradient(180deg, #1c2026 0%, #15181c 100%);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --mt-color-bg: #f6f5f2;
    --mt-color-surface: #ffffff;
    --mt-color-surface-2: #efede8;
    --mt-color-border: #e3e0da;
    --mt-color-border-strong: #cfcbc3;
    --mt-color-text: #17191c;
    --mt-color-text-muted: #51565e;
    --mt-color-text-faint: #8a9099;
    --mt-color-accent: #2b6fe8;
    --mt-color-accent-contrast: #ffffff;
    --mt-color-success-bg: rgba(30, 158, 110, 0.12);
    --mt-color-success-text: #1e9e6e;
    --mt-color-warning-bg: rgba(194, 122, 18, 0.12);
    --mt-color-warning-text: #c27a12;
    --mt-color-danger-bg: rgba(217, 67, 63, 0.10);
    --mt-color-danger-text: #d9433f;
    --mt-color-battery: #2b6fe8;
    --mt-color-battery-track: #e6e3dc;
    --mt-shadow-card: 0 1px 2px rgba(23, 25, 28, 0.05), 0 10px 30px rgba(23, 25, 28, 0.06);
    --mt-gradient-hero: linear-gradient(180deg, #ffffff 0%, #f9f8f5 100%);
  }
}