/* ═══════════════════════════════════════════════════════════
   LittleJohn PWA — Foundation Tokens & Fonts
   Abgeleitet von Robin. Brandfarbe: Nottingham-Orange #FF9100.
   Lade-Reihenfolge: foundation.css → phosphor.css → pwa.css
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Farben (Design System) ── */
  --cyan:        #FF9100;   /* Nottingham-Orange (statt Robin-Cyan) */
  --cyan-dk:     #E07000;   /* dunkler Ton für Hover / aktive States */
  --cyan-light:  #FFE0B2;   /* heller Ton für Badges / Tints         */
  --magenta:     #E91E8C;
  --navy:        #0d1117;
  --navy-2:      #1a2e4a;
  --bg:          #f3f5f7;
  --border:      #e2e6ea;
  --label:       #546e7a;
  --miss:        #9e9e9e;
  --white:       #ffffff;
  --green:       #2e7d32;
  --orange:      #FF6D00;

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

  /* ── Status ── */
  --color-success: #10b981;
  --color-info:    #2196f3;
  --color-warning: #f59e0b;
  --color-danger:  #e53935;

  /* ── Typography ── */
  --font-base:
    'Atkinson', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --font-mono:
    'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo,
    Consolas, 'Courier New', monospace;

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

  /* ── Abstände ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;

  /* ── Scrollbar (Hawkeye 4px-Design) ── */
  --scrollbar-w:            4px;
  --scrollbar-thumb:        rgba(0,0,0,.15);
  --scrollbar-thumb-hover:  rgba(255,145,0,.5);

  /* ── Schatten ── */
  --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 ── */
  --header-h: 52px;

  /* ── Legacy-Aliases (Abwärtskompatibilität) ── */
  --primary:          var(--cyan);
  --color-dark-700:   var(--navy);
  --surface:          var(--surface-card);
  --text:             #1a2230;
  --color-text-primary:   #1a2230;
  --color-text-secondary: var(--label);
  --font-family-base: var(--font-base);
}

/* ── Hawkeye Scrollbar utility ── */
/* Anwendbar via Klasse .hw-scrollbar auf jeden scrollbaren Container.
   Thumb erscheint nur wenn Inhalt überläuft → dient als Scroll-Indikator. */
.hw-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.hw-scrollbar::-webkit-scrollbar         { width: var(--scrollbar-w); height: var(--scrollbar-w); }
.hw-scrollbar::-webkit-scrollbar-track   { background: transparent; }
.hw-scrollbar::-webkit-scrollbar-thumb   { background: var(--scrollbar-thumb); border-radius: 2px; }
.hw-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

html.dark { --scrollbar-thumb: rgba(255,255,255,.12); }

/* ── Atkinson Hyperlegible Next — UI-Font ── */
@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/atkinson/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/atkinson/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/atkinson/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/atkinson/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Atkinson Hyperlegible Mono — tabular numerals for scores/tallies ── */
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('../assets/fonts/atkinson-mono/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('../assets/fonts/atkinson-mono/atkinson-hyperlegible-mono-v8-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}