/* =============================================================================
   Inuveta Design-Tokens — 1:1 aus Frontend/src/theme/ übernommen.
   Diese Datei ist die gemeinsame Basis aller Dashboard-Varianten. Wer eine
   Variante baut, überschreibt Tokens in der eigenen CSS — nicht hier.

   Quellen:
     tokens/colors.ts        → --c-*
     themes/light-theme.ts   → --bg-*, --content-*, --border-*
     tokens/glass.ts         → --glass-*
     tokens/typography.ts    → --t-* (Web-Skala)
     tokens/radius.ts        → --r-*
   ========================================================================== */

:root {
  /* --- Neutrals (solid.neutral) ----------------------------------------- */
  --c-neutral-0:    #FFFFFF;
  --c-neutral-25:   #F6F6F6;
  --c-neutral-50:   #F0F0F0;
  --c-neutral-100:  #E5E5E5;
  --c-neutral-200:  #CCCCCC;
  --c-neutral-300:  #B2B2B2;
  --c-neutral-400:  #999999;
  --c-neutral-500:  #808080;
  --c-neutral-600:  #666666;
  --c-neutral-700:  #4D4D4D;
  --c-neutral-800:  #333333;
  --c-neutral-900:  #212121;
  --c-neutral-1000: #0D0D0D;

  /* --- Brand ------------------------------------------------------------ */
  --c-brand-purple-200: #BBB2E6;
  --c-brand-purple-400: #7865CD;
  --c-brand-purple-500: #563FC0;
  --c-brand-purple-600: #45329A;
  --c-brand-cyan-400:   #44DFEE;
  --c-brand-cyan-600:   #11AEBD;
  --c-brand-cyan-700:   #0D818C;
  --c-brand-blue-400:   #6187CB;
  --c-yellow-600:       #B87614;
  --c-yellow-700:       #8A590F;
  --c-green-700:        #0D8C42;

  /* --- Tailwind-Defaults, die in den Dashboard-Klassen auftauchen -------- */
  /* Akzentfarben der Gamification: teal (Level/Stats), cyan (Talente),
     yellow (Passion). Kommen aus der Standard-Tailwind-Palette. */
  --c-teal-300: #5EEAD4;
  --c-teal-400: #2DD4BF;
  --c-teal-500: #14B8A6;
  --c-cyan-400: #22D3EE;
  --c-cyan-500: #06B6D4;
  --c-yellow-400: #FACC15;
  --c-yellow-500: #EAB308;
  --c-purple-500: #A855F7;
  --c-tw-neutral-600: #525252;
  --c-tw-neutral-700: #404040;
  --c-tw-neutral-800: #262626;
  --c-tw-neutral-900: #171717;

  /* --- Semantische Rollen · Light Theme --------------------------------- */
  --bg-base-primary:       var(--c-neutral-50);
  --bg-base-secondary:     var(--c-neutral-100);
  --bg-component-primary:  var(--c-neutral-0);
  --bg-component-secondary: var(--c-neutral-50);
  --bg-component-hover:    var(--c-neutral-100);
  --bg-component-pressed:  var(--c-neutral-200);
  --bg-action-primary:     var(--c-neutral-900);
  --bg-action-hover:       var(--c-neutral-800);
  --bg-action-pressed:     var(--c-neutral-1000);

  --content-base-primary:   var(--c-neutral-900);
  --content-base-secondary:  var(--c-neutral-700);
  --content-base-tertiary:   var(--c-neutral-600);
  --content-action-primary:  var(--c-brand-purple-500);
  --content-action-hover:    var(--c-brand-purple-600);
  --content-on-action:       var(--c-neutral-25);
  --content-positive:        #1E7A4C;

  --border-base-primary:   var(--c-neutral-100);
  --border-base-secondary: var(--c-neutral-200);

  /* --- Liquid Glass (tokens/glass.ts) ----------------------------------- */
  --glass-tint:        rgba(255, 255, 255, 0.60);
  --glass-tint-clear:  rgba(255, 255, 255, 0.35);
  --glass-tint-thick:  rgba(255, 255, 255, 0.78);
  --glass-blur-soft:    blur(20px) saturate(160%);
  --glass-blur-regular: blur(40px) saturate(180%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                     inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                  0 2px 8px rgba(0, 0, 0, 0.04);
  --glass-accent-start: var(--c-brand-purple-400);
  --glass-accent-end:   var(--c-brand-cyan-400);
  --glass-accent-opacity: 0.06;

  /* --- Radius (glass lg = 28, Tailwind rounded-xl = 12) ------------------ */
  --r-glass: 28px;
  --r-card:  12px;
  --r-inner: 8px;
  --r-pill:  9999px;

  /* --- Typografie · Web-Skala (tokens/typography.ts) --------------------- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --track: -0.02em;                 /* letterSpacingRatio aus den Tokens */

  /* --- Raster (Tailwind-Defaults, die im Dashboard benutzt werden) ------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* --- Breakpoints (tokens/layout.ts) ----------------------------------- */
  /* tablet 600 · laptop 1024 · web 1240 — als Kommentar, CSS braucht Zahlen */

  --max-width-desktop: 1440px;
}