/* ════════════════════════════════════════════════════════════
   HAWKEYE DESIGN SYSTEM — TOKENS
   hawkeye-tokens.css · v1.0 · Mai 2026

   Einbinden:
     <link rel="stylesheet" href="/assets/css/hawkeye-tokens.css">

   Enthält:
   • @font-face Deklarationen (AtkinsonNext + AtkinsonMono)
   • CSS Custom Properties (:root)
   • Box-sizing Reset
   • Basis-Body-Stile

   Phosphor Icons werden separat geladen:
     <link rel="stylesheet" href="/assets/fonts/phosphor/light/style.css">
════════════════════════════════════════════════════════════ */

/* ── Atkinson Hyperlegible Next ── */
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; }
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'); font-weight:400; font-style:italic; }
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; }
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; }
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; }
@font-face { font-family:'AtkinsonNext'; src:url('../../../fonts/AtkinsonHyperlegibleNext-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; }

/* ── Atkinson Hyperlegible Mono ── */
@font-face { font-family:'AtkinsonMono'; src:url('../../../fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); font-weight:400; font-style:normal; }
@font-face { font-family:'AtkinsonMono'; src:url('../../../fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); font-weight:300; font-style:normal; }
@font-face { font-family:'AtkinsonMono'; src:url('../../../fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); font-weight:500; font-style:normal; }
@font-face { font-family:'AtkinsonMono'; src:url('../../../fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); font-weight:600; font-style:normal; }
@font-face { font-family:'AtkinsonMono'; src:url('../../../fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); font-weight:700; font-style:normal; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {
  /* ── Colour Palette ── */
  --cyan:        #00BCD4;
  --cyan-dk:     #0097A7;
  --cyan-light:  #B2EBF2;
  --magenta:     #E91E8C;
  --navy:        #0d1117;
  --navy-2:      #1a2e4a;
  --bg:          #f3f5f7;
  --bg-desktop:  #eef0f3;
  --white:       #ffffff;
  --border:      #e2e6ea;
  --label:       #546e7a;
  --miss:        #9e9e9e;
  --green:       #2e7d32;
  --orange:      #FF6D00;
  --highlight:   #B4FF2E;

  /* ── Semantic Aliases ── */
  --hit-kill:        var(--cyan);
  --hit-wound:       var(--magenta);
  --hit-miss:        var(--miss);
  --surface-app-bar: var(--navy);
  --surface-card:    var(--white);
  --surface-page:    var(--bg);

  /* ── Dark Mode Tokens ──────────────────────────────────────
     Verwendet in: Target Input · Walking · Session Summary
     (Outdoor-Screens mit direkter Sonneneinstrahlung)
  ─────────────────────────────────────────────────────────── */
  --dm-bg:          #0d1117;               /* Screen-Hintergrund = --navy      */
  --dm-surface:     #141b27;               /* Zellen, Karten, Footer, Tally    */
  --dm-surface-2:   #1e2a3e;               /* Archer-Tabs, weitere Hervorhebung*/
  --dm-border:      rgba(255,255,255,.08); /* Trennlinien zwischen Bereichen   */
  --dm-border-cell: rgba(255,255,255,.14); /* Zell-Rahmen (Outdoor-Kontrast)   */
  --dm-text:        #ffffff;               /* Primärtext, Score-Zahlen         */
  --dm-text-2:      rgba(255,255,255,.60); /* Sekundärtext, Chip-Inhalte       */
  --dm-text-3:      rgba(255,255,255,.36); /* Zeilen-Labels, Spalten-Header    */

  /* ── Typography ── */
  --font-base: 'AtkinsonNext', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono: 'AtkinsonMono', ui-monospace, 'SF Mono', monospace;
  --size-xs:   9px;
  --size-sm:   11px;
  --size-base: 13px;
  --size-md:   15px;
  --size-lg:   18px;
  --size-xl:   22px;
  --size-2xl:  26px;

  /* ── Border Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-full: 9999px;

  /* ── Spacing ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;
  --sp-3xl: 48px;

  /* ── Scrollbar ── */
  --scrollbar-w:           4px;               /* Breite der Scrollbar (vertikal) */
  --scrollbar-thumb:       rgba(0,0,0,.28);   /* Light Mode: ruhender Zustand    */
  --scrollbar-thumb-hover: rgba(0,188,212,.7);/* Hover: Cyan-Akzent (beide Modi) */

  /* ── Shadows ── */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-panel: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-popup: 0 4px 16px rgba(0,0,0,0.18);

  /* ── Layout ── */
  --sidebar-w: 220px;
  --header-h:  52px;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — html.dark Override
   Gilt für PWA (html.dark via class) und Desktop (html.dark via class)
   Überschreibt nur die semantischen Aliase → alle Komponenten folgen automatisch
════════════════════════════════════════════════════════════ */
html.dark {
  /* ── Semantische Aliase überschreiben ── */
  --bg:          var(--dm-bg);
  --bg-desktop:  #111827;
  --white:       var(--dm-surface);
  --border:      var(--dm-border);
  --label:       var(--dm-text-2);
  --miss:        rgba(158,158,158,.7);

  /* ── Surface Aliase ── */
  --surface-card:    var(--dm-surface);
  --surface-page:    var(--dm-bg);
  --surface-app-bar: var(--navy);

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(255,255,255,.28);   /* Dark Mode: heller Thumb          */

  /* ── Schatten dunkler ── */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-panel: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-popup: 0 4px 16px rgba(0,0,0,0.65);
}
html.dark body {
  background: var(--dm-bg);
  color: var(--dm-text);
}

/* ── Basis-Body ── */
html, body { height: 100%; }
body {
  font-family: var(--font-base);
  font-size: var(--size-base);
  background: var(--bg);
  color: #1a2230;
}