/*
  Paideia Design-System "Werkstatt" — Design-Tokens (Single Source of Truth)
  Einmal definiert, ueberall importiert: Website, Portal, Cockpit, Slides.
  Quelle: software_architektur.md §6. Nicht ad hoc abweichen.

  Dosierungsregel: Fantasy feiert (Meilensteine, Urkunden, Stufenleiter),
  Renaissance traegt (Grundierung ueberall), Zukunft bedient (UI, Daten).
*/

:root {
  /* --- Farben (Kern-Palette, nie abweichen) --- */
  --pa-papier: #faf8f3;   /* Grundierung, Flaechen */
  --pa-tinte:  #16323b;   /* Text, Linien */
  --pa-petrol: #0e6e73;   /* Interaktion, Zukunft-Schicht */
  --pa-gold:   #b08d3e;   /* Meilensteine, Fantasy-Akzent */
  --pa-sepia:  #8a6d2f;   /* Linienzeichnungen, Renaissance */
  --pa-nacht:  #101f26;   /* Tiefe, Nacht-Modus, Slides-Grund */

  /* --- Abgeleitete Toene (aus der Kern-Palette, konsistent) --- */
  --pa-papier-warm:   #f4efe4;  /* leicht dunkleres Papier fuer Karten */
  --pa-papier-linie:  #e7dfcf;  /* Haarlinien, Trennstriche auf Papier */
  --pa-tinte-weich:   #3a5560;  /* Sekundaertext */
  --pa-tinte-leise:   #6b8089;  /* Tertiaertext, Metadaten */
  --pa-petrol-tief:   #0a5257;  /* Hover/aktiv */
  --pa-petrol-hell:   #d3e5e4;  /* Petrol-Fond, Chips */
  --pa-gold-tief:     #8f6f28;  /* Gold-Hover */
  --pa-nacht-tief:    #0a151a;  /* tiefster Grund (Slides) */
  --pa-nacht-linie:   #223540;  /* Linien auf Nacht */

  /* Zustandsfarben (sparsam, im Ton der Palette) */
  --pa-erfolg:  #3f7d5a;
  --pa-warnung: #b0743e;
  --pa-fehler:  #a5453b;

  /* --- Typografie (selbst gehostet) --- */
  --pa-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --pa-font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pa-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type-Scale (modular, ~1.25) */
  --pa-text-xs:   0.78rem;
  --pa-text-sm:   0.875rem;
  --pa-text-base: 1rem;
  --pa-text-md:   1.15rem;
  --pa-text-lg:   1.4rem;
  --pa-text-xl:   1.85rem;
  --pa-text-2xl:  2.45rem;
  --pa-text-3xl:  3.3rem;
  --pa-text-4xl:  4.6rem;   /* Slides-Display */
  --pa-text-hero: 6.5rem;   /* Cover */

  --pa-leading-tight: 1.12;
  --pa-leading-snug:  1.3;
  --pa-leading-body:  1.6;

  --pa-weight-normal:   400;
  --pa-weight-medium:   500;
  --pa-weight-semibold: 600;
  --pa-tracking-wide:   0.04em;   /* Kapitaelchen-Label */

  /* --- Abstaende (8-Punkt-Raster) --- */
  --pa-space-1:  0.25rem;
  --pa-space-2:  0.5rem;
  --pa-space-3:  0.75rem;
  --pa-space-4:  1rem;
  --pa-space-5:  1.5rem;
  --pa-space-6:  2rem;
  --pa-space-8:  3rem;
  --pa-space-10: 4rem;
  --pa-space-12: 6rem;
  --pa-space-16: 8rem;

  /* --- Radius (fast keiner: papierhaft, praezise) --- */
  --pa-radius-none: 0;
  --pa-radius-sm:   2px;
  --pa-radius-md:   3px;
  --pa-radius-pill: 999px;  /* nur für Chips/Marker, sparsam */

  /* --- Schatten (papierhaft flach, keine Bubble-Optik) --- */
  --pa-shadow-flat:  0 1px 0 rgba(22,50,59,0.06);
  --pa-shadow-card:  0 1px 3px rgba(22,50,59,0.08), 0 1px 1px rgba(22,50,59,0.04);
  --pa-shadow-lift:  0 8px 24px rgba(16,31,38,0.12);
  --pa-shadow-slide: 0 30px 80px rgba(10,21,26,0.45);

  /* --- Linien --- */
  --pa-line-hair:  1px solid var(--pa-papier-linie);
  --pa-line-ink:   1.5px solid var(--pa-tinte);
  --pa-line-strich: 2px;   /* eine Strichstaerke fuer alle Sepia-Zeichnungen */

  /* --- Bewegung (ruhig, prefers-reduced-motion respektiert) --- */
  --pa-motion-fast:  160ms;
  --pa-motion-base:  260ms;
  --pa-motion-slow:  400ms;
  --pa-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);  /* ruhig, kein Bounce */
  --pa-ease-in:      cubic-bezier(0.4, 0, 1, 1);

  /* --- Layout --- */
  --pa-maxw-prose:   68ch;
  --pa-maxw-content: 1120px;
  --pa-touch-min:    48px;   /* Mobile-Native-Regel: Daumenzone */
  --pa-z-nav: 100; --pa-z-overlay: 200; --pa-z-toast: 300;
}

/* Nacht-Modus (Slides, Cockpit-Naturtag): dieselben Tokens, invertierte Grundierung */
[data-theme="nacht"] {
  --pa-papier: var(--pa-nacht);
  --pa-papier-warm: #17282f;
  --pa-papier-linie: var(--pa-nacht-linie);
  --pa-tinte: #eaf1f0;
  --pa-tinte-weich: #b6c7cc;
  --pa-tinte-leise: #7f969d;
  --pa-petrol: #4fb3b3;
  --pa-petrol-hell: #123037;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pa-motion-fast: 1ms;
    --pa-motion-base: 1ms;
    --pa-motion-slow: 1ms;
  }
}