/* WeKonvert / jonas.fnl: Design-Tokens, die eine Quelle für alles Eigene (Website, Apps, Mails, Reels).
   Erster Stand 2026-10-28 aus dem Schnitt-Studio (jonas-personalbrand/viraldrip/schnitt/app/studio.css), Namen bewusst gleich,
   damit das Studio diese Datei 1:1 einbinden kann. Regeln dazu: DESIGN.md. Werte nie in Projekte kopieren, immer einbinden
   (lokal per Pfad, hochgeladene Projekte per Sync beim Deploy). Maschinenlesbar: tokens.json (gleiche Werte).
   Wer diese Datei nutzt, trägt den Ort in VERWENDUNG.md ein. */
@font-face { font-family: 'Doto'; src: url('schriften/doto-variabel.ttf') format('truetype'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Geist'; src: url('schriften/geist-variabel.woff2') format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'Geist Mono'; src: url('schriften/geist-mono-variabel.woff2') format('woff2'); font-weight: 100 900; font-display: block; }

:root {
  color-scheme: dark;
  /* Schriften: Doto ist die Marke (Punktschrift), Geist liest sich, Geist Mono für Zahlen und Technik */
  --schrift-pixel: 'Doto', 'Geist Mono', ui-monospace, monospace;
  --schrift-text: 'Geist', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --schrift-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Flächen: Graphit, von hell (bg1) nach tief (bg3) */
  --bg1: #1C2029; --bg2: #13161C; --bg3: #0B0D11;
  /* Raster „Doto im Takt“ (Jonas, 2026-10-28): eckige 2-px-Punkte alle 12 px, jeder vierte (alle 48 px) heller.
     Einsatz: background-image var(--raster-bild), background-size var(--raster-takt); fertig als .ci-raster in basis.css */
  --raster: rgba(150,170,215,0.06); --raster2: rgba(150,170,215,0.12);
  --raster-bild: conic-gradient(from 270deg at 2px 2px, var(--raster2) 90deg, transparent 0), conic-gradient(from 270deg at 2px 2px, var(--raster) 90deg, transparent 0);
  --raster-takt: 48px 48px, 12px 12px;
  --fenster: #1F242D; --innen: #2A303A; --innen2: #323946;
  --rand: rgba(255,255,255,0.10); --trenn: rgba(236,239,245,0.09); --leise: rgba(236,239,245,0.24);

  /* Text */
  --tinte: #ECEFF5; --text2: rgba(236,239,245,0.64); --text3: rgba(236,239,245,0.46);

  /* Ein Blau, in Tönen. Knopf = Aktion, Pixel = Doto und Dotti, Akzent = Hervorhebung */
  --akzent: #5C84FF; --akzent-text: #8DA8FF; --akzent-weich: rgba(92,132,255,0.16); --knopf: #2B5BFF; --pixel: #7C9BFF;

  /* Zustände */
  --gut: #4CC38A; --gut-weich: rgba(76,195,138,0.16); --warn: #F0965C; --warn-weich: rgba(240,150,92,0.16);
  --kritisch: #F06A6A; --kritisch-weich: rgba(240,106,106,0.16);

  /* Dotti (gleiche Werte wie PIX_FARBE in dotti/pixel.js) */
  --dotti-koerper: #5C84FF; --dotti-schatten: #3E62D6; --dotti-tief: #2C4AAE; --dotti-licht: #9DB4FF;
  --dotti-weiss: #F4F6FA; --dotti-auge: #151821;

  /* Form */
  --r-fenster: 26px; --r-karte: 18px; --r-klein: 12px;
  --schatten: 0 2px 8px rgba(0,0,0,0.35), 0 34px 90px -30px rgba(0,0,0,0.7);
  --schatten-nah: 0 1px 3px rgba(0,0,0,0.35), 0 10px 24px -14px rgba(0,0,0,0.6);
  --kante: inset 0 1px 0 rgba(255,255,255,0.10);

  /* Scrollbalken: schmal, Daumen im CI-Blau, Spur durchsichtig, Abstand zum Rand (Regeln in scrollbar.css) */
  --scroll-breite: 10px; --scroll-abstand: 3px; --scroll-daumen: rgba(124,155,255,0.38); --scroll-daumen-aktiv: rgba(124,155,255,0.72);
}