/* ============================================================
   Piazza Studio Components — Software Design Tokens (--ps--*)
   ============================================================
   Dies ist das Design-System der STUDIO-SOFTWARE selbst
   (Sidebar, Toolbars, Panels, Dashboard, Vorschau-Chrome …).

   Bewusst GETRENNT vom Theming der gebauten Websites:
     • Theming der Websites  →  --mp-* (design-system/colors_and_type.css)
       Diese Tokens verändert der Nutzer über „Tweaks"/Export.
     • Software-Gestaltung    →  --ps-* (diese Datei)
       Fix, vom Website-Theming unabhängig.

   NAMENS-KONVENTION: keine Farbnamen in den Variablen. Die Rollen
   (brand / neutral / bg / fg / accent …) bleiben gleich, egal welcher
   Farbton dahinterliegt — ein Marken-Hue-Wechsel ist ein reiner
   Wert-Tausch unten in der Raw-Schicht, ohne Umbenennen.

   Look (aktuell): hell, freundlich, grün.
     brand        #00815D   (Buttons, Links, aktive Akzente)
     brand-dark   #1F473C   (dunkle Flächen, aktiver Menüpunkt, Text)
     highlight    #FFFF00   (Highlight auf der Markenfarbe — sparsam)
     neutral-100  #F1F3F3   (dezente Flächen)
   ============================================================ */

:root {
  /* ---- Marke (Raw — die EINZIGE Stelle mit Marken-Hex-Literalen) ---- */
  --ps--brand:        #00815d;   /* Primärton */
  --ps--brand-hover:  #006e4f;   /* dunkler für Hover */
  --ps--brand-dark:   #1f473c;   /* tiefer Ton — dunkle Flächen / aktiv / Text */
  --ps--brand-soft:   #e4f0eb;   /* heller Marken-Tint (Tint-Fläche) */
  --ps--highlight:    #ffff00;   /* Highlight auf der Markenfarbe */

  /* ---- Neutral-Rampe (0 = hellst, 900 = dunkelst; leicht marken-getönt) ---- */
  --ps--neutral-0:   #ffffff;
  --ps--neutral-50:  #f6f9f8;
  --ps--neutral-100: #f1f3f3;   /* dezente Flächenfarbe */
  --ps--neutral-200: #e3e8e6;
  --ps--neutral-300: #ccd4cf;
  --ps--neutral-400: #97a59d;
  --ps--neutral-500: #67756d;
  --ps--neutral-600: #44524b;
  --ps--neutral-700: #25332d;
  --ps--neutral-800: #18241f;
  --ps--neutral-900: #0d1712;

  /* ---- Semantische Farben ---- */
  --ps--bg:            var(--ps--neutral-0);
  --ps--bg-soft:       var(--ps--neutral-100);
  --ps--bg-inverse:    var(--ps--brand-dark);   /* dunkle SOFTWARE-Flächen (Hero, aktiver Menüpunkt) */
  --ps--surface-dark:  #373737;                 /* NEUTRALER Dunkel-Canvas für Komponenten-Vorschau (keine Marke) */
  --ps--workspace:     #d9dbda;                 /* Arbeitsfläche im Vorschau Builder (Stage-Hintergrund um die Preview-Box) */
  --ps--fg:            var(--ps--brand-dark);    /* Text & aktive Punkte */
  --ps--fg-muted:      var(--ps--neutral-500);
  --ps--fg-subtle:     var(--ps--neutral-400);
  --ps--fg-inverse:    var(--ps--neutral-0);
  --ps--border:        var(--ps--neutral-200);
  --ps--border-strong: var(--ps--neutral-300);

  --ps--primary:       var(--ps--brand);
  --ps--primary-hover: var(--ps--brand-hover);
  --ps--primary-press: var(--ps--brand-dark);
  --ps--primary-fg:    var(--ps--neutral-0);
  --ps--primary-soft:  var(--ps--brand-soft);

  --ps--accent:        var(--ps--highlight);     /* Highlight auf der Markenfarbe */
  --ps--accent-fg:     var(--ps--brand-dark);    /* Text auf Highlight */

  --ps--focus-ring:    color-mix(in srgb, var(--ps--brand) 40%, transparent);

  --ps--success:       #1f9d55;
  --ps--warning:       #d97706;
  --ps--danger:        #dc2626;

  /* ---- Typografie ---- */
  --ps--font-sans:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ps--font-display: "PP Monument Extended", "Lato", Impact, sans-serif;
  --ps--font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ps--tracking-tight:  -0.01em;
  --ps--tracking-normal: 0;
  --ps--tracking-wide:   0.04em;
  --ps--tracking-caps:   0.08em;

  /* ---- Spacing (4px-Skala) ---- */
  --ps--space-0:  0;
  --ps--space-1:  0.25rem;  /* 4  */
  --ps--space-2:  0.5rem;   /* 8  */
  --ps--space-3:  0.75rem;  /* 12 */
  --ps--space-4:  1rem;     /* 16 */
  --ps--space-5:  1.5rem;   /* 24 */
  --ps--space-6:  2rem;     /* 32 */
  --ps--space-7:  3rem;     /* 48 */
  --ps--space-8:  4rem;     /* 64 */
  --ps--space-9:  6rem;     /* 96 */
  --ps--space-10: 8rem;     /* 128 */

  /* ---- Radien ---- */
  --ps--radius-none: 0;
  --ps--radius-sm:   4px;
  --ps--radius-md:   8px;
  --ps--radius-lg:   12px;
  --ps--radius-xl:   20px;
  --ps--radius-pill: 999px;

  /* ---- Elevation / Schatten (marken-getönt, zurückhaltend) ---- */
  --ps--shadow-xs: 0 1px 2px rgba(31, 71, 60, 0.06);
  --ps--shadow-sm: 0 1px 3px rgba(31, 71, 60, 0.08), 0 1px 2px rgba(31, 71, 60, 0.04);
  --ps--shadow-md: 0 4px 12px rgba(31, 71, 60, 0.08), 0 2px 4px rgba(31, 71, 60, 0.04);
  --ps--shadow-lg: 0 12px 32px rgba(31, 71, 60, 0.12), 0 4px 8px rgba(31, 71, 60, 0.06);
  --ps--shadow-xl: 0 24px 64px rgba(31, 71, 60, 0.18);

  /* ---- Motion ---- */
  --ps--ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ps--ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ps--duration-fast: 120ms;
  --ps--duration-base: 200ms;
  --ps--duration-slow: 320ms;
}