/* =========================================================================
   Design Tokens — Klartext Digital
   Alle markenrelevanten Werte zentral. Austausch bei Brand-Fix in ~30 min.
   Detailbegründungen: research/01-client-brand.md
   ========================================================================= */

:root {
  /* Farbsystem — Rollen ------------------------------------------------- */
  --color-bg-base:     #0A0A0A;   /* Primary Surface */
  --color-bg-elevated: #111113;   /* Cards, Modals */
  --color-bg-overlay:  #1A1A1D;   /* Dropdowns, Tooltips */
  --color-bg-subtle:   #08080A;   /* Darker sections */

  --color-text:        #FAFAFA;
  --color-text-muted:  #B8BCC8;
  --color-text-soft:   #7A8599;
  --color-text-invert: #0A0A0A;

  --color-accent:                 #00D48A;
  --color-accent-pressed:         #00B375;
  --color-accent-subtle:          rgba(0, 212, 138, 0.12);
  --color-accent-glow:            rgba(0, 212, 138, 0.24);
  --color-accent-glow-strong:     rgba(0, 212, 138, 0.40);
  --color-accent-glow-soft:       rgba(0, 212, 138, 0.06);
  --color-accent-tint-04:         rgba(0, 212, 138, 0.04);
  --color-accent-tint-08:         rgba(0, 212, 138, 0.08);
  --color-accent-tint-18:         rgba(0, 212, 138, 0.18);
  --color-accent-ink:             #001A10;  /* Text auf Accent-Button */
  --color-warning-glow:           rgba(245, 158, 11, 0.40);
  --color-danger-glow:            rgba(239,  68, 68, 0.40);
  /* Aliases für Legacy-Selektoren (Mockup-Form etc.) */
  --color-bg:                     var(--color-bg-base);
  --color-surface:                var(--color-bg-elevated);
  /* Surface-Strokes für subtile Trennlinien (statt rgba(255,255,255,..)) */
  --color-stroke-soft:            rgba(255, 255, 255, 0.06);
  --color-stroke-medium:          rgba(255, 255, 255, 0.10);

  --color-border:          #22252A;
  --color-border-strong:   #3A3E46;
  --color-border-focus:    var(--color-accent);

  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  /* Typografie ---------------------------------------------------------- */
  --font-heading: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;  /* nur für Italic-Akzente */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;

  /* Fluid Type-Scale */
  --fs-display:  clamp(3rem, 8vw, 7rem);
  --fs-h1:       clamp(2.5rem, 6vw, 5rem);
  --fs-h2:       clamp(2rem, 4vw, 3.5rem);
  --fs-h3:       clamp(1.5rem, 2.5vw, 2rem);
  --fs-h4:       clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-lead:     clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-label:    0.75rem;
  --fs-tiny:     0.6875rem;

  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-body:    1.7;
  --lh-tight:   1.3;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-label:  0.14em;

  /* Spacing-Scale (8-pt base) ------------------------------------------ */
  --space-0:   0;
  --space-1:   0.25rem;  /*   4 */
  --space-2:   0.5rem;   /*   8 */
  --space-3:   0.75rem;  /*  12 */
  --space-4:   1rem;     /*  16 */
  --space-5:   1.25rem;  /*  20 */
  --space-6:   1.5rem;   /*  24 */
  --space-7:   1.75rem;  /*  28 */
  --space-8:   2rem;     /*  32 */
  --space-9:   2.25rem;  /*  36 */
  --space-10:  2.5rem;   /*  40 */
  --space-12:  3rem;     /*  48 */
  --space-16:  4rem;     /*  64 */
  --space-24:  6rem;     /*  96 */
  --space-32:  8rem;     /* 128 */
  --space-48:  12rem;    /* 192 */

  /* Radii --------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Shadows — Layered + Color-Tinted (house rule) ----------------------- */
  --shadow-xs:  0 0 0 1px rgba(0, 212, 138, 0.08);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 212, 138, 0.08);
  --shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 212, 138, 0.12);
  --shadow-glow: 0 0 0 1px rgba(0, 212, 138, 0.4), 0 0 40px rgba(0, 212, 138, 0.25);

  /* Motion -------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-slower:  680ms;

  /* Layout -------------------------------------------------------------- */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 3vw, 2rem);
  --content-max:    68ch;

  --nav-height:     72px;
  --section-pad-y:  clamp(4rem, 10vh, 8rem);

  /* Z-Index ------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Reduced-Motion Opt-out --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}