/* KAMRADEK/OS — Design-Tokens. Alle Module nutzen ausschließlich diese Variablen. */

@font-face {
  font-family: "VT323";
  src: url("/assets/fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Phosphor (P1-Grün, an das Kamradek-Logo angelehnt) */
  --phos: #4dff4d;
  --phos-bright: #baffba;
  --phos-mid: #2fca3f;
  --phos-dim: #239a2c;   /* dim, aber als Text ≥ WCAG-AA (4.5:1) */
  --phos-faint: #0c3a10;
  --phos-glow: rgba(77, 255, 77, 0.5);

  /* Akzente */
  --amber: #ffb000;
  --amber-dim: #8a6200;
  --red: #ff5040;

  /* Flächen */
  --bg-room: #000000;      /* Raum hinter dem Monitor */
  --bg: #050805;           /* Bildschirm-Grund */
  --bg-raise: #081108;     /* leicht erhellte Flächen (Titelbars, Taskbar) */
  --bezel: #141618;        /* Gehäuse-Plastik: sehr dunkles Anthrazit */
  --bezel-hi: #1e2224;     /* obere/linke Kante (Licht) */
  --bezel-lo: #0b0d0e;     /* untere/rechte Kante (Schatten) */

  /* Typografie */
  --font-term: "VT323", "Courier New", ui-monospace, monospace;
  --fs-base: 20px;
  --fs-small: 17px;
  --fs-h1: 34px;
  --fs-h2: 26px;

  /* Z-Skala */
  --z-window: 10;          /* Fenster: 10–89, vergeben vom WM */
  --z-sticker: 95;         /* Logo-Sticker klebt IMMER obenauf (wie auf dem Glas) */
  --z-fx: 100;             /* CRT-Overlays, pointer-events: none */
  --z-boot: 200;
}

/* Phosphor P3 (Bernstein) — umschaltbar per Taskbar-Knopf oder `theme amber` */
:root[data-theme="amber"] {
  --phos: #ffb000;
  --phos-bright: #ffe0b0;
  --phos-mid: #d98e00;
  --phos-dim: #a67a1a;   /* dim, aber als Text ≥ WCAG-AA */
  --phos-faint: #3a2a08;
  --phos-glow: rgba(255, 176, 0, 0.5);

  --amber: #ffe9c4; /* Akzent: helleres Bernstein statt Grün-Kontrast */
  --amber-dim: #a67a1a;

  --bg: #080502;
  --bg-raise: #120b03;
}

/* Wide-Gamut-Displays (MacBook, iPhone, moderne Monitore): sattere
   Phosphor-Farben aus dem Display-P3-Farbraum — mehr Brillanz, wie eine
   echte Röhre. sRGB-Displays bleiben unverändert. */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --phos: color(display-p3 0.22 1 0.28);
    --phos-bright: color(display-p3 0.72 1 0.71);
    --phos-glow: color(display-p3 0.28 1 0.3 / 0.55);
    --amber: color(display-p3 1 0.71 0.02);
  }

  :root[data-theme="amber"] {
    --phos: color(display-p3 1 0.7 0.02);
    --phos-bright: color(display-p3 1 0.89 0.68);
    --phos-glow: color(display-p3 1 0.72 0.08 / 0.5);
    --amber: color(display-p3 1 0.92 0.76);
  }
}

::selection {
  background: var(--phos);
  color: var(--bg);
}