/* ==========================================================================
   VIGIL — Design Tokens
   Einzige Quelle für Farbe, Typografie, Maß, Form, Tiefe und Bewegung.
   Regel: Komponenten verwenden NUR semantische Tokens (--vg-*), niemals
   Primitive (--ink-*, --jade-* …) oder Hex-Werte direkt.
   Kontraste prüfen: node tools/contrast.mjs
   ========================================================================== */

@import url("/fonts/fonts.css"); /* selbst gehostet statt Google Fonts */

:root {
  /* ------------------------------------------------------------------------
     1. PRIMITIVE FARBEN — nicht direkt in Komponenten verwenden
     ------------------------------------------------------------------------ */

  /* Anthrazit: kühl-neutral mit Hauch Grün, damit Jade harmonisch sitzt */
  --ink-950: #0E1012;
  --ink-900: #14171A;
  --ink-850: #1A1E21;
  --ink-800: #20252A;
  --ink-750: #282E33;
  --ink-700: #343B42;
  --ink-600: #66717A;
  --ink-500: #7E888F;
  --ink-400: #9AA3A9;
  --ink-300: #BCC3C7;
  --ink-200: #D9DEE0;
  --ink-100: #E1E6E7;
  --ink-50:  #EEF2F1;

  /* Jade: satt, leicht bläulich (Hue ≈ 172°) — aus dem Logo abgeleitet */
  --jade-50:  #E6F8F5;
  --jade-100: #C3EFE8;
  --jade-200: #93E3D5;
  --jade-300: #55D6C0;   /* = Logo-Lichtkante */
  --jade-400: #36BCAA;   /* = Logo-Mitte, Markenfarbe */
  --jade-500: #2CA597;   /* = Logo-Schattenseite */
  --jade-600: #1F8579;
  --jade-700: #176B62;
  --jade-800: #12534C;
  --jade-900: #0E3C38;
  --jade-950: #082623;

  /* Paper: warmes Off-White für bewusste helle Kontrastsektionen (Website) */
  --paper-50:  #F3F1EC;
  --paper-100: #E7E4DC;
  --paper-200: #D6D2C7;
  --paper-500: #8A857A;   /* Input-Rahmen auf Paper */
  --paper-600: #5E6266;   /* gedämpfter Text auf Paper */

  /* Sand: kleine warme Highlights (Sticker, „Platzhalter“-Stempel) */
  --sand-300: #EBCB94;
  --sand-700: #6B5530;

  /* Status — bewusst NICHT jade, damit Marke ≠ Status */
  --leaf-400:  #8BCB5E;   /* Erfolg: gelbgrün, klar von Jade getrennt */
  --leaf-900:  #24361A;
  --amber-400: #F0B44C;   /* Warnung */
  --amber-900: #3D2C0E;
  --coral-400: #F27A6B;   /* Fehler */
  --coral-500: #E05A4A;
  --coral-900: #40201C;
  --sky-400:   #6FB2F2;   /* Information */
  --sky-900:   #17304A;

  /* ------------------------------------------------------------------------
     2. SEMANTISCHE FARBEN
     ------------------------------------------------------------------------ */

  /* Flächen — von tief nach hoch. Höhe = heller, nicht = mehr Schatten */
  --vg-bg-sunken:      var(--ink-950);   /* Code-Blöcke, Wells, Marketing-Hero */
  --vg-bg:             var(--ink-900);   /* Seiten-/App-Hintergrund */
  --vg-surface:        var(--ink-850);   /* Sidebar, Sektionen */
  --vg-surface-raised: var(--ink-800);   /* Karten, Dialoge, Menüs */
  --vg-surface-hover:  var(--ink-750);   /* Hover auf Zeilen, Ghost-Buttons */
  --vg-scrim:          rgba(8, 10, 11, 0.72);

  /* Rahmen */
  --vg-border-subtle:  var(--ink-750);   /* Trennlinien innerhalb von Karten */
  --vg-border:         var(--ink-700);   /* Karten, Tabellen */
  --vg-border-strong:  var(--ink-600);   /* Eingabefelder (≥ 3:1) */

  /* Text */
  --vg-text:           var(--ink-50);    /* Überschriften, Fließtext */
  --vg-text-secondary: var(--ink-300);   /* Beschreibungen */
  --vg-text-muted:     var(--ink-400);   /* Meta, Hilfetexte, Platzhalter */
  --vg-text-disabled:  var(--ink-600);

  /* Marke */
  --vg-accent:           var(--jade-400);  /* Primärbuttons, aktive Zustände */
  --vg-accent-hover:     var(--jade-300);
  --vg-accent-pressed:   var(--jade-500);
  --vg-accent-text:      var(--jade-400);  /* Links, Jade-Text auf Dunkel */
  --vg-on-accent:        var(--jade-950);  /* Text AUF Jade — nie Weiß! */
  --vg-accent-tint:      color-mix(in srgb, var(--jade-400) 14%, transparent);
  --vg-accent-tint-strong: var(--jade-900);
  --vg-accent-tint-text: var(--jade-200);

  /* Sekundär / Highlight */
  --vg-highlight:        var(--sand-300);
  --vg-on-highlight:     var(--ink-950);

  /* Status: immer mit Icon + Text kombinieren, nie nur Farbe */
  --vg-success:      var(--leaf-400);
  --vg-success-tint: color-mix(in srgb, var(--leaf-400) 14%, transparent);
  --vg-warning:      var(--amber-400);
  --vg-warning-tint: color-mix(in srgb, var(--amber-400) 14%, transparent);
  --vg-danger:       var(--coral-400);
  --vg-danger-hover: #F59588;
  --vg-danger-tint:  color-mix(in srgb, var(--coral-400) 14%, transparent);
  --vg-info:         var(--sky-400);
  --vg-info-tint:    color-mix(in srgb, var(--sky-400) 14%, transparent);
  --vg-on-status:    var(--ink-950);

  /* Fokus — doppelter Ring: dunkler Abstand + Jade, funktioniert auf jeder Fläche */
  --vg-focus-ring: 0 0 0 2px var(--vg-bg), 0 0 0 4px var(--jade-400);

  /* ------------------------------------------------------------------------
     3. TYPOGRAFIE
     ------------------------------------------------------------------------ */
  --vg-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --vg-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vg-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* UI-/Textgrößen */
  --vg-text-2xs:  0.6875rem; /* 11 — nur Großbuchstaben-Labels */
  --vg-text-xs:   0.75rem;   /* 12 — Meta, Badges */
  --vg-text-sm:   0.8125rem; /* 13 — Tabellen, dichte UI */
  --vg-text-md:   0.875rem;  /* 14 — Dashboard-Standard */
  --vg-text-base: 1rem;      /* 16 — Website-Fließtext, mobile Inputs */
  --vg-text-lg:   1.125rem;  /* 18 — Lead-Text */
  --vg-text-xl:   1.375rem;  /* 22 — H3 */
  --vg-text-2xl:  1.75rem;   /* 28 — H2 Dashboard */
  --vg-text-3xl:  2.25rem;   /* 36 — H1 Dashboard / H3 Website */

  /* Display — nur Website. Fluid zwischen Smartphone und Desktop */
  --vg-display-sm: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* @kind other */       /* 32 → 48 */
  --vg-display-md: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem); /* @kind other */   /* 40 → 72 */
  --vg-display-lg: clamp(3rem, 1.4rem + 7.6vw, 7.5rem); /* @kind other */     /* 48 → 120 */

  --vg-leading-none:   1; /* @kind other */
  --vg-leading-tight:  1.08; /* @kind other */  /* Display */
  --vg-leading-snug:   1.3; /* @kind other */   /* Überschriften, UI */
  --vg-leading-normal: 1.5; /* @kind other */   /* Dashboard-Text */
  --vg-leading-relaxed: 1.65; /* @kind other */ /* Website-Fließtext */

  --vg-weight-regular:  400; /* @kind other */
  --vg-weight-medium:   500; /* @kind other */
  --vg-weight-semibold: 600; /* @kind other */
  --vg-weight-bold:     700; /* @kind other */
  --vg-weight-black:    800; /* @kind other */  /* nur Display */

  --vg-tracking-display: -0.035em; /* @kind other */
  --vg-tracking-tight:   -0.015em; /* @kind other */
  --vg-tracking-label:    0.08em; /* @kind other */

  --vg-measure: 64ch; /* @kind other */  /* maximale Zeilenlänge Fließtext */

  /* ------------------------------------------------------------------------
     4. ABSTÄNDE — 4px-Raster
     ------------------------------------------------------------------------ */
  --vg-space-0:   0;
  --vg-space-px:  1px;
  --vg-space-0-5: 0.125rem; /* 2 */
  --vg-space-1:   0.25rem;  /* 4 */
  --vg-space-1-5: 0.375rem; /* 6 */
  --vg-space-2:   0.5rem;   /* 8 */
  --vg-space-3:   0.75rem;  /* 12 */
  --vg-space-4:   1rem;     /* 16 */
  --vg-space-5:   1.25rem;  /* 20 */
  --vg-space-6:   1.5rem;   /* 24 */
  --vg-space-8:   2rem;     /* 32 */
  --vg-space-10:  2.5rem;   /* 40 */
  --vg-space-12:  3rem;     /* 48 */
  --vg-space-16:  4rem;     /* 64 */
  --vg-space-20:  5rem;     /* 80 */
  --vg-space-24:  6rem;     /* 96 */
  --vg-space-32:  8rem;     /* 128 */

  /* Sektionsabstand Website: fluid */
  --vg-section-y: clamp(4rem, 2rem + 8vw, 9rem); /* @kind spacing */

  /* ------------------------------------------------------------------------
     5. GRÖSSEN
     ------------------------------------------------------------------------ */
  --vg-control-sm: 2rem;    /* 32 — nur Desktop, dichte Tabellen */
  --vg-control-md: 2.5rem;  /* 40 — Dashboard-Standard */
  --vg-control-lg: 3rem;    /* 48 — Website-Standard */
  --vg-control-xl: 3.5rem;  /* 56 — Hero-CTA */
  --vg-touch-min:  2.75rem; /* 44 — Mindest-Trefferfläche auf Touch */

  --vg-icon-sm: 1rem;
  --vg-icon-md: 1.25rem;
  --vg-icon-lg: 1.5rem;

  --vg-sidebar-w:  15.5rem;  /* 248 */
  --vg-sidebar-rail: 4.25rem; /* 68 — Tablet */
  --vg-topbar-h:   3.5rem;   /* 56 */

  --vg-container-sm: 40rem;   /* 640 — Formulare, Lesetext */
  --vg-container-md: 56rem;   /* 896 — Einstellungsseiten */
  --vg-container-lg: 76rem;   /* 1216 — Website */
  --vg-container-xl: 90rem;   /* 1440 — Dashboard-Maximalbreite */

  /* ------------------------------------------------------------------------
     6. RADIEN — „ausgewogen, nicht überall riesig“
     ------------------------------------------------------------------------ */
  --vg-radius-xs:   4px;   /* Checkbox, Code-Inline, kleine Tags */
  --vg-radius-sm:   6px;   /* Tooltips, Menüeinträge */
  --vg-radius-md:   10px;  /* Buttons, Inputs, Tabellenrahmen */
  --vg-radius-lg:   16px;  /* Karten, Dialoge */
  --vg-radius-xl:   24px;  /* Große Website-Flächen */
  --vg-radius-pill: 999px; /* NUR Badges, Switches, Avatare, Status-Dots */

  /* Signatur: Sprechblasen-Ecke — eine Ecke klein. Verweist auf Chat,
     ohne Discord zu kopieren. Für Toasts, Tooltips, Leerzustände,
     Produkt-Showcases. Nicht für Buttons/Inputs/Tabellen. */
  --vg-radius-bubble:    16px 16px 16px 4px;
  --vg-radius-bubble-sm: 10px 10px 10px 3px;

  /* ------------------------------------------------------------------------
     7. RAHMEN
     ------------------------------------------------------------------------ */
  --vg-border-width:      1px;
  --vg-border-width-thick: 2px;   /* Auswahl, aktive Tabs */

  /* ------------------------------------------------------------------------
     8. SCHATTEN — im Dunkeln sparsam; Tiefe kommt primär aus Flächenhelligkeit
     ------------------------------------------------------------------------ */
  --vg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --vg-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --vg-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.35);
  /* Tastenkappe: leichte Unterkante, macht Buttons „drückbar“ */
  --vg-shadow-key: inset 0 -2px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --vg-shadow-key-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Innere Hervorhebung oberer Kante für erhöhte Flächen */
  --vg-shadow-rim: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ------------------------------------------------------------------------
     9. EBENEN
     ------------------------------------------------------------------------ */
  --vg-z-base:     0; /* @kind other */
  --vg-z-raised:   10; /* @kind other */
  --vg-z-sticky:   100; /* @kind other */  /* Topbar, Tabellenkopf */
  --vg-z-dropdown: 200; /* @kind other */
  --vg-z-overlay:  300; /* @kind other */  /* Mobile-Navigation, Scrim */
  --vg-z-modal:    400; /* @kind other */
  --vg-z-toast:    500; /* @kind other */
  --vg-z-tooltip:  600; /* @kind other */

  /* ------------------------------------------------------------------------
     10. BEWEGUNG
     ------------------------------------------------------------------------ */
  --vg-dur-instant: 80ms; /* @kind other */   /* Farbwechsel bei Hover */
  --vg-dur-fast:    140ms; /* @kind other */  /* Buttons, Switches */
  --vg-dur-base:    220ms; /* @kind other */  /* Menüs, Tooltips, Tabs */
  --vg-dur-slow:    360ms; /* @kind other */  /* Dialoge, Toasts, Sektionen */

  --vg-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --vg-ease-exit:     cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  /* Spielerisch, minimaler Überschwinger — nur für gezielte Momente:
     Switch-Knopf, Checkbox-Haken, Toast-Eintritt, Erfolgs-Bestätigung */
  --vg-ease-bounce:   cubic-bezier(0.34, 1.5, 0.64, 1); /* @kind other */

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Helle Kontrastsektion (nur Website): semantische Tokens neu belegt.
   Anwendung: <section class="vg-paper"> … </section>
   -------------------------------------------------------------------------- */
.vg-paper {
  --vg-bg:             var(--paper-50);
  --vg-bg-sunken:      var(--paper-100);
  --vg-surface:        var(--paper-50);
  --vg-surface-raised: #FFFFFF;
  --vg-surface-hover:  var(--paper-100);
  --vg-border-subtle:  var(--paper-100);
  --vg-border:         var(--paper-200);
  --vg-border-strong:  var(--paper-500);
  --vg-text:           var(--ink-900);
  --vg-text-secondary: var(--ink-700);
  --vg-text-muted:     var(--paper-600);
  --vg-accent:         var(--jade-700);
  --vg-accent-hover:   var(--jade-800);
  --vg-accent-pressed: var(--jade-900);
  --vg-accent-text:    var(--jade-700);
  --vg-on-accent:      var(--paper-50);
  --vg-accent-tint:    color-mix(in srgb, var(--jade-500) 14%, transparent);
  --vg-focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--jade-700);
  background: var(--vg-bg);
  color: var(--vg-text);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reduzierte Bewegung: Dauern auf nahezu 0, Bounce wird linear
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vg-dur-instant: 1ms; /* @kind other */
    --vg-dur-fast:    1ms; /* @kind other */
    --vg-dur-base:    1ms; /* @kind other */
    --vg-dur-slow:    1ms; /* @kind other */
    --vg-ease-bounce: linear; /* @kind other */
  }
}