/* Span design system tokens (from design-system/tokens.json).
   Day is the default theme. Night applies with .th-night, or with .th-auto when the OS is in dark mode.
   Tool colours: STM uses accent (roof-tile red), SpanWise uses frame (blue). */

.ds {
  /* Surfaces and text */
  --surface: #e4eed6;
  --surface-raised: #fcfcf4;
  --surface-sunken: #d6e2c4;
  --ink: #24262e;
  --ink-muted: #545862;
  --line: #bccaa6;
  --frame: #3a6e8c;
  --frame-outer: #24262e;

  /* Brand */
  --primary: #23743f;
  --on-primary: #ffffff;
  --primary-tint: #d2ecd8;
  --accent: #a83d1d;
  --on-accent: #ffffff;
  --on-frame: #ffffff;

  /* Status (always paired with a word) */
  --hp-high: #2f9e55;
  --hp-mid: #d9a21b;
  --ok: #1d6b42;
  --fail: #b42318;
  --warn: var(--hp-mid);
  --on-warn: #24262e;

  /* Map colours: large decorative fields only, never under small text */
  --grass: #8fd3a4;
  --grass-deep: #5fb47e;
  --path: #ecdcae;
  --roof: #d4683f;
  --wall: #f2ead6;
  --water: #5aa6dc;

  /* Portal tool mapping */
  --stm: var(--accent);
  --on-stm: var(--on-accent);
  --stm-tint: #f6dfd5;
  --sw: var(--frame);
  --on-sw: var(--on-frame);
  --sw-tint: #d9e6ef;
  --soon: #545862;
  --soon-tint: #d6e2c4;

  /* Type */
  --font-pixel: 'Pixelify Sans', 'Courier New', monospace;
  --font-sans: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-0: 0;
  --radius-sm: 4px;
  --radius-window: 10px;

  /* Hard pixel shadows, never blurred */
  --shadow-window: 0 4px 0 var(--frame-outer);
  --shadow-press: 0 2px 0 var(--frame-outer);

  color-scheme: light;
}

.ds.th-night {
  --surface: #161d33;
  --surface-raised: #232c4a;
  --surface-sunken: #0f1527;
  --ink: #f4f2e8;
  --ink-muted: #b8bdd0;
  --line: #3a4670;
  --frame: #8fb8e0;
  --frame-outer: #05070f;
  --primary: #7ed49a;
  --on-primary: #0f1527;
  --primary-tint: #1f3b37;
  --accent: #ff9a70;
  --on-accent: #0f1527;
  --on-frame: #0f1527;
  --hp-high: #5fd68a;
  --hp-mid: #f2c94c;
  --ok: #6fd69a;
  --fail: #ff8a7a;
  --on-warn: #0f1527;
  --grass: #2f5c4f;
  --grass-deep: #22463c;
  --path: #5c5848;
  --roof: #9c4c34;
  --wall: #8a8678;
  --water: #2b5a8a;
  --stm-tint: #3d2a33;
  --sw-tint: #22385a;
  --soon: #b8bdd0;
  --soon-tint: #0f1527;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .ds.th-auto {
    --surface: #161d33;
    --surface-raised: #232c4a;
    --surface-sunken: #0f1527;
    --ink: #f4f2e8;
    --ink-muted: #b8bdd0;
    --line: #3a4670;
    --frame: #8fb8e0;
    --frame-outer: #05070f;
    --primary: #7ed49a;
    --on-primary: #0f1527;
    --primary-tint: #1f3b37;
    --accent: #ff9a70;
    --on-accent: #0f1527;
    --on-frame: #0f1527;
    --hp-high: #5fd68a;
    --hp-mid: #f2c94c;
    --ok: #6fd69a;
    --fail: #ff8a7a;
    --on-warn: #0f1527;
    --grass: #2f5c4f;
    --grass-deep: #22463c;
    --path: #5c5848;
    --roof: #9c4c34;
    --wall: #8a8678;
    --water: #2b5a8a;
    --stm-tint: #3d2a33;
    --sw-tint: #22385a;
    --soon: #b8bdd0;
    --soon-tint: #0f1527;
    color-scheme: dark;
  }
  .ds.th-auto .night-only {
    display: inline;
  }
}