/* tokens.css – Kopie aus /Users/marc/Claude/backlog/backup-v1/htdocs/assets/css/tokens.css.
   Stand: 2026-04-15. Während der Mockup-Iteration ENTSTEHENDE Änderungen
   werden nicht hier, sondern im Overrides-Block in base.css gesammelt und
   am Ende von Phase 3 hierher rückgespielt. */

:root {
  /* Surfaces */
  --bg-base:        #0B0D10;
  --surface-1:      #13171C;
  --surface-2:      #1B2026;
  --border:         #252B33;

  /* Text */
  --text-primary:   #F4F6F8;
  --text-secondary: #9BA3AE;
  --text-muted:     #7A8290;
  --text-disabled:  #636B76;

  /* Akzent + Status */
  --accent-sky:        #38BDF8;
  --accent-sky-hover:  #0EA5E9;
  --status-success:    #22C55E;
  --status-warning:    #F59E0B;
  --status-error:      #EF4444;

  /* Schriften */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Type Scale */
  --fs-display: 56px;
  --fs-h1:      40px;
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-body-l:  17px;
  --fs-body:    15px;
  --fs-small:   13px;
  --fs-label:   11px;

  /* Line-Heights */
  --lh-display: 1.05;
  --lh-h1:      1.10;
  --lh-h2:      1.15;
  --lh-h3:      1.20;
  --lh-body:    1.6;
  --lh-small:   1.5;

  /* Letter-Spacings */
  --ls-display: -0.03em;
  --ls-h1:      -0.025em;
  --ls-h2:      -0.02em;
  --ls-h3:      -0.015em;
  --ls-label:   0.12em;

  /* Gewichte */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

/* ── Light Theme ── */

[data-theme="light"] {
  --bg-base:        #F5F7FA;
  --surface-1:      #FFFFFF;
  --surface-2:      #EDF0F4;
  --border:         #D5DAE0;

  --text-primary:   #1A1D23;
  --text-secondary: #4B5563;
  --text-muted:     #6B7280;
  --text-disabled:  #9CA3AF;

  --accent-sky:        #0284C7;
  --accent-sky-hover:  #0369A1;
  --status-success:    #16A34A;
  --status-warning:    #D97706;
  --status-error:      #DC2626;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-base:        #F5F7FA;
    --surface-1:      #FFFFFF;
    --surface-2:      #EDF0F4;
    --border:         #D5DAE0;

    --text-primary:   #1A1D23;
    --text-secondary: #4B5563;
    --text-muted:     #6B7280;
    --text-disabled:  #9CA3AF;

    --accent-sky:        #0284C7;
    --accent-sky-hover:  #0369A1;
    --status-success:    #16A34A;
    --status-warning:    #D97706;
    --status-error:      #DC2626;
  }
}