/* tokens.css — Design-Tokens v2 der ROSE-College-Zertifikats-App: Website-Stil rose-college.com (Navy #152E58, Rot-Pills, 24px-Karten, warme Flächen), verifiziert 2026-07-03. */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-300.558eb532c92a.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-400.34fdf7e852ee.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-500.c7f6683032a0.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-600.7ad8a04a3bf2.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-700.c6a7190c8cf4.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Marke (Website-verifiziert) */
  --navy: #152E58;          /* Text, Headlines, sekundäre Aktionen — Website-Navy */
  --red: #BE202D;           /* genau EINE Primäraktion pro Ansicht, aktive Nav, Headline-Akzent */
  --paper: #FFFFFF;
  --linen: #F6F4F0;         /* warmer Seitenhintergrund und Bühnen-Flächen */
  --line: #E7E2DA;          /* warme Trennlinien und Rahmen */
  --ink-soft: #5D6B85;      /* Meta-Text auf Weiß und Linen, >=4.5:1 ab 13 px */
  --sidebar-ink: #C6D0E2;   /* inaktive Nav-Einträge auf Navy */
  --text-on-dark: #FFFFFF;  /* Text auf Navy- und Rot-Flächen (TASK-274: Badge auf --navy) */

  /* Semantik */
  --ok: #2E7D32;      --ok-soft: #EDF5EC;   --ok-hover: #256328;  /* abgedunkeltes --ok für Hover auf grünen Flächen */
  --pend: #92400E;    --pend-soft: #FDF0DE;
  --warn: #C62828;    --warn-soft: #FBEFEF;
  --info-soft: #EEF2F9;
  /* eigenes Token statt --warn/--red (TASK-222): --red ist für genau EINE
     Primäraktion reserviert, --warn liegt farblich fast auf --red, beide
     wären für den Kurs-Löschbutton kaum von der Primäraktion unterscheidbar.
     --danger ist deutlich dunkler/tiefer, bleibt aber >=4,5:1 (WCAG AA)
     gegen weißen Buttontext. */
  --danger: #8E1B14;

  /* Zertifikat-Eigenfarben (Bestandsvorlage, NICHT App-Tokens) */
  --cert-red: #C00000;
  --cert-indigo: #281E64;

  /* Geometrie (Website: Karten 24px, Buttons Pill) */
  --r-card: 24px;
  --r-field: 12px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21, 46, 88, .04), 0 10px 30px rgba(21, 46, 88, .06);
  --shadow-cert: 0 2px 6px rgba(21, 46, 88, .08), 0 24px 60px rgba(21, 46, 88, .14);

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --page-x: 48px;           /* horizontales Seiten-Padding, Desktop-first */
  --page-y: 36px;

  /* Sticky Zertifikat-Bühne der Freigabe-Seite (TASK-434, nur >=1100px). Gap orientiert
     sich an der Sidebar-Innenpolsterung (.sidebar padding: 20px 14px), damit die Bühne
     denselben Abstand zur Topbar hat wie die Sidebar darunter. --cert-sticky-top ist die
     sticky-top-Position (Topbar-Höhe + Gap), --cert-sticky-gap dient zusätzlich als
     unterer Sicherheitsabstand bei der max-height-Berechnung. */
  --cert-sticky-gap: 20px;
  --cert-sticky-top: calc(var(--topbar-h) + var(--cert-sticky-gap));
}