/**
 * GA IV Webseite — Design Tokens
 * Quelle: SGA Administration & Permission Dashboard (Corporate Design)
 * Version: 1.0
 * Datum: 2025-05-27
 *
 * Dieses File enthält die verbindlichen Design-Token für alle GA IV Web-Projekte.
 * Bitte keine eigenen Farben oder Abstände erfinden — immer diese Tokens verwenden.
 */

:root {
  /* ============================================
     HINTERGRÜNDE — Warm, hochwertig, "Papier & Sandstein"
     ============================================ */
  --bg: #F3E9D4;           /* Haupt-Hintergrund (sehr warmes Beige) */
  --bg-soft: #EDE1C8;      /* Etwas dunkleres Beige für Sub-Bereiche */
  --paper: #FBF6EC;        /* Karten, Panels, Inhaltsflächen (helles Creme) */
  --paper-2: #F7EED9;      /* Leicht dunklere Variante von Paper */

  /* ============================================
     TEXT & TINTENFARBEN — Dunkles Marine / Navy
     ============================================ */
  --ink: #14233B;          /* Primäre Textfarbe (sehr dunkelblau) — höchste Priorität */
  --ink-2: #2A3850;        /* Sekundäre Textfarbe */
  --ink-deep: #10243F;     /* Sehr dunkle Variante (z.B. Sidebar-Header) */

  /* ============================================
     AKZENTFARBEN — Metallisch, hochwertig, bewusst sparsam einsetzen
     ============================================ */
  --gold: #B48A3A;         /* PRIMÄRER AKZENT — Messing / Altgold (SGA-Brand-Signatur) */
  --blue: #3A6A9C;         /* Sekundär — Informativ / System / Technisch */
  --green: #4D7C4A;        /* Positiv / Erfolg / Bestätigung */
  --rust: #B25A3A;         /* Warnung / Achtung / Wichtiger Hinweis */
  --wine: #7A3A3A;         /* Schwere Warnung / Kritisch */
  --danger: #B04848;       /* Fehler / Destruktiv / Starke Ablehnung */

  /* ============================================
     GEDÄMPFTE FARBEN & LINIEN
     ============================================ */
  --muted: #6C6452;        /* Gedämpfter Text (sekundär, Hilfetexte) */
  --muted-2: #8A8270;      /* Noch gedämpfter */
  --line: #D9CDB1;         /* Primäre Linien- und Trennfarbe */
  --line-2: #C7B994;       /* Deutlichere Trennlinien */

  /* ============================================
     SCHATTEN
     ============================================ */
  --shadow: 0 1px 0 rgba(20, 35, 59, 0.04),
            0 12px 30px -18px rgba(20, 35, 59, 0.25);

  /* ============================================
     TYPOGRAFIE
     ============================================ */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Schriftgrößen (empfohlen) */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 44px;        /* Große Stat-Zahlen */
  --text-5xl: 56px;        /* Hero-Überschriften */

  /* Schriftgewichte */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* ============================================
     LAYOUT & ABSTÄNDE (8px-Raster)
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;        /* Standard für Karten */
  --radius-lg: 12px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Sidebar */
  --sidebar-width: 280px;

  /* Container */
  --content-max-width: 1280px;
}

/* ============================================
   BASIS-STYLES (empfohlen für neue GA IV Seiten)
   ============================================ */

html {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--font-medium);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p, li, label {
  font-family: var(--font-sans);
  font-weight: var(--font-normal);
}

/* Karten / Cards — verbindliches Muster */
.card,
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-6);
}

/* Akzent-Top-Bar für Stat-Cards (wie im Original) */
.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--space-5) var(--space-6) var(--space-4);
  position: relative;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gold); /* Standard: Gold. Bei Bedarf überschreiben mit --blue, --rust etc. */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Gold als primärer Akzent (Buttons, Links, Highlights) */
.gold-accent,
a {
  color: var(--gold);
}

a:hover {
  color: #9A7330; /* Etwas dunkleres Gold bei Hover */
}

/* Status-Badges — Farbcodierung beibehalten */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
}

.badge--success { background: rgba(77, 124, 74, 0.12); color: var(--green); border: 1px solid rgba(77, 124, 74, 0.25); }
.badge--warning { background: rgba(178, 90, 58, 0.12); color: var(--rust);  border: 1px solid rgba(178, 90, 58, 0.25); }
.badge--danger  { background: rgba(176, 72, 72, 0.12); color: var(--danger); border: 1px solid rgba(176, 72, 72, 0.25); }
.badge--info    { background: rgba(58, 106, 156, 0.12); color: var(--blue);  border: 1px solid rgba(58, 106, 156, 0.25); }
.badge--gold    { background: rgba(180, 138, 58, 0.12); color: var(--gold);  border: 1px solid rgba(180, 138, 58, 0.25); }

/* Monospace für technische Inhalte */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Hilfsklasse für "Prestige"-Überschriften (wie im Dashboard) */
.prestige {
  font-family: var(--font-serif);
  font-weight: var(--font-medium);
  letter-spacing: -0.02em;
}