/*
  Design tokens for ESPMobileFlasher. Dark mode only — no light theme, no toggle.

  Every colour in the app resolves through these custom properties so components never
  hardcode a value. The accent is the existing brand teal already used in the favicon and
  the publish-token reveal box (#00D1B2), not a new colour introduced by this file.
*/

:root {
  --color-surface:          #0E1416;
  --color-surface-raised:   #161D20;
  --color-surface-hover:    #1D2528;
  --color-line:             #2A3437;

  --color-text:             #EDEFEE;
  --color-text-dim:         #AEB8B6;
  --color-text-mute:        #7C8886;
  --color-text-on-accent:   #06211A;

  --color-accent:           #00D1B2;
  --color-accent-soft:      #00D1B226;
  --color-danger:           #E4695C;
  --color-danger-soft:      #E4695C26;

  --shadow-raised:          0 6px 24px #00000066;

  color-scheme: dark;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Public Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shell-max: 1120px;
  --tap-target: 44px;
}