/* Resolution OS – Design-Tokens. Farben, Abstände und Schriften nur hier ändern (SPEC §7).
   style.css benutzt ausschließlich diese Variablen. */

@font-face{font-family:"Montserrat";src:url("/fonts/Montserrat.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter.ttf") format("truetype");font-weight:100 900;font-display:swap}

:root{
  /* ---------- Farben */
  --c-bg:#FFFFFF;             /* Hintergrund */
  --c-surface:#FFFFFF;        /* Flächen, Sidebar, Karten, Dialoge */
  --c-line:#E6E6E6;           /* 1-px-Linien */
  --c-text:#171F20;           /* Text: 16,76:1 auf Weiß */
  --c-text-2:#5F6869;         /* Sekundärtext grau: 5,72:1 auf Weiß */
  --c-accent:#FF4144;         /* Resolution-Rot: nur Akzente (aktiver Menüpunkt, Linien, Fokus) */
  /* Dunkles Rot = #FF4144 mit 17 % #171F20 gemischt -> #D83B3E: 4,55:1 auf Weiß bzw. Weiß darauf (WCAG AA).
     #FF4144 selbst hat auf Weiß nur 3,45:1, zu wenig für Text. */
  --c-primary:#D83B3E;        /* Hintergrund primärer Knöpfe */
  --c-on-primary:#FFFFFF;     /* Schrift auf primären Knöpfen */
  --c-accent-text:#D83B3E;    /* Rot als Schrift (Warnungen) */
  --c-on-dark:#FFFFFF;        /* Text auf dunklen Flächen (z. B. aktiver Filter) */
  --c-overlay:rgba(23,31,32,.48); /* abgedunkelter Hintergrund hinter Dialogen */
  /* Pfeil in Auswahlfeldern (Lucide chevron-down). Bilder können keine Variablen lesen: Farbe = --c-text-2 */
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6869' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* ---------- Abstände: 8-px-Raster */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:48px; --s-8:64px;

  /* ---------- Formen */
  --radius:0;                 /* überall eckig */
  --line:1px;                 /* Linienstärke */
  --bar:4px;                  /* Balken links am aktiven Menüpunkt */
  --focus:2px;                /* Fokusrahmen */

  /* ---------- Schrift */
  --font-heading:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;  /* Überschriften, Bold */
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;          /* Text */
  --fw-heading:700; --fw-text:400; --fw-medium:500; --fw-strong:600;
  --fs-xs:12px; --fs-s:14px; --fs-m:16px; --fs-l:20px; --fs-xl:24px; --fs-xxl:32px;
  --lh-s:16px; --lh-m:24px; --lh-l:32px; --lh-xl:40px;

  /* ---------- Maße */
  --control:40px;             /* Höhe Knöpfe und Eingabefelder */
  --control-s:32px;           /* kleine Knöpfe */
  --badge:24px;               /* Höhe Badges */
  --icon:16px; --icon-l:20px;
  --sidebar:240px;
  --content:1024px;           /* maximale Inhaltsbreite */
  --dialog:480px; --dialog-wide:640px; --dialog-wizard:720px;
  --login:384px;
  --logo:40px;                /* Logo in der Sidebar */
  --logo-login:64px;          /* Logo auf der Login-Seite */
  /* Breakpoint Handy: 768px (steht in style.css, Media Queries können keine Variablen lesen) */
}