/* DarkWarehouse — Hazard Line theme tokens.
   Dark-first. Light ("daylight") is opt-in via prefers-color-scheme: light or data-theme="light". */
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Martian+Mono:wght@400;500&display=swap");

:root {
  /* surfaces */
  --dw-bg: #121211;          /* asphalt */
  --dw-surface: #1D1D1B;     /* slab */
  --dw-raised: #262622;      /* pallet */
  --dw-line: #34332E;        /* tread */
  /* text */
  --dw-fg: #F5F1E6;          /* chalk */
  --dw-muted: #9A968A;       /* dust */
  /* brand */
  --dw-accent: #FFC400;      /* lane yellow: fills, stripes, focus */
  --dw-accent-ink: #FFC400;  /* yellow used as text/icon on bg */
  --dw-on-accent: #121211;   /* text on lane yellow */
  --dw-stripe-dark: #121211; /* the black half of the hazard stripe */
  --dw-mark-roof: #FFC400;   /* logomark: yellow roof on dark, ink roof on light */
  --dw-mark-door: #121211;
  /* semantic (never use lane yellow to mean "warning") */
  --dw-go: #4CC38A;
  --dw-stop: #FF5A47;
  --dw-caution: #FF9A1F;
  --dw-info: #7DB7FF;

  /* type */
  --dw-font-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --dw-font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dw-font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --dw-text-xs: 0.75rem;   /* 12 */
  --dw-text-sm: 0.875rem;  /* 14 */
  --dw-text-md: 1rem;      /* 16 */
  --dw-text-lg: 1.25rem;   /* 20 */
  --dw-text-xl: 1.75rem;   /* 28 */
  --dw-text-2xl: 2.5rem;   /* 40 */
  --dw-text-3xl: 3.5rem;   /* 56 */

  /* space (4px grid) */
  --dw-s1: 4px; --dw-s2: 8px; --dw-s3: 12px; --dw-s4: 16px;
  --dw-s5: 24px; --dw-s6: 32px; --dw-s7: 48px; --dw-s8: 64px;

  /* shape */
  --dw-radius: 2px;
  --dw-radius-pill: 999px;
  --dw-stripe-w: 10px;
  --dw-stripe: repeating-linear-gradient(-45deg, var(--dw-accent) 0 var(--dw-stripe-w), var(--dw-stripe-dark) var(--dw-stripe-w) calc(var(--dw-stripe-w) * 2));

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --dw-bg: #F2EEE3; --dw-surface: #FBF8F1; --dw-raised: #FFFFFF; --dw-line: #D9D3C3;
    --dw-fg: #161614; --dw-muted: #6B675C;
    --dw-accent-ink: #7A5C00; --dw-stripe-dark: #161614; --dw-mark-roof: #161614; --dw-mark-door: #FFC400;
    --dw-go: #1E8A57; --dw-stop: #C7352A; --dw-caution: #B35F00; --dw-info: #2F6FB8;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --dw-bg: #F2EEE3; --dw-surface: #FBF8F1; --dw-raised: #FFFFFF; --dw-line: #D9D3C3;
  --dw-fg: #161614; --dw-muted: #6B675C;
  --dw-accent-ink: #7A5C00; --dw-stripe-dark: #161614; --dw-mark-roof: #161614; --dw-mark-door: #FFC400;
  --dw-go: #1E8A57; --dw-stop: #C7352A; --dw-caution: #B35F00; --dw-info: #2F6FB8;
  color-scheme: light;
}