/* ============================================================================
 * TCL Langenfeld – Design-Tokens
 * Einzige Quelle für Farben, Typografie, Abstände, Radien, Schatten.
 * Änderungen hier wirken sich automatisch auf das gesamte Design aus.
 * ========================================================================== */

/* Zentrale Layer-Reihenfolge: spätere Layer überschreiben frühere */
@layer reset, tokens, base, components, utilities, pages;

@layer tokens {
  :root {
    /* ---------- Markenfarben (aus dem bestehenden Logo) ---------- */
    --tcl-indigo:        #1E1A6B;
    --tcl-indigo-700:    #16134F;
    --tcl-indigo-500:    #3A349C;
    --tcl-indigo-300:    #8F8AD2;
    --tcl-indigo-100:    #E8E7F4;
    --tcl-indigo-50:     #F3F2FA;

    --tcl-red:           #C8241A;
    --tcl-red-700:       #9E1A12;
    --tcl-red-500:       #E04339;
    --tcl-red-100:       #FBE6E4;

    /* ---------- Neutrale Skala ---------- */
    --ink-900: #0E0F14;
    --ink-800: #1A1C24;
    --ink-700: #2B2D38;
    --ink-500: #5A5E6E;
    --ink-400: #8287A0;
    --ink-300: #B6BAC8;
    --ink-200: #D7DAE4;
    --ink-100: #EEF0F6;
    --ink-50:  #F7F8FC;
    --white:   #FFFFFF;

    /* ---------- Semantik ---------- */
    --success:      #0E8A4D;
    --success-100:  #E2F4EB;
    --warning:      #B8860B;
    --warning-100:  #FDF2D6;
    --danger:       var(--tcl-red);
    --danger-100:   var(--tcl-red-100);

    /* ---------- Radien ---------- */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-full: 9999px;

    /* ---------- Schatten ---------- */
    --shadow-xs: 0 1px 2px rgba(14, 15, 20, .05);
    --shadow-sm: 0 1px 2px rgba(14, 15, 20, .06), 0 1px 3px rgba(14, 15, 20, .04);
    --shadow-md: 0 4px 12px rgba(14, 15, 20, .08), 0 2px 4px rgba(14, 15, 20, .04);
    --shadow-lg: 0 20px 40px rgba(30, 26, 107, .12), 0 8px 16px rgba(14, 15, 20, .06);
    --shadow-xl: 0 32px 64px rgba(30, 26, 107, .18), 0 12px 24px rgba(14, 15, 20, .08);
    --ring-focus: 0 0 0 3px rgba(30, 26, 107, .35);

    /* ---------- Abstände (8er-Raster) ---------- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* ---------- Typografie ---------- */
    --font-sans:    "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-body:  1.6;
    --lh-loose: 1.75;

    /* Fluid-Type-Skala: clamp(min, preferred, max) */
    --fs-xs:   clamp(0.75rem, 0.2vw + 0.7rem, 0.8125rem);
    --fs-sm:   clamp(0.8125rem, 0.2vw + 0.78rem, 0.875rem);
    --fs-base: clamp(1rem, 0.25vw + 0.9rem, 1.0625rem);
    --fs-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    --fs-xl:   clamp(1.25rem, 0.8vw + 1.1rem, 1.5rem);
    --fs-2xl:  clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
    --fs-3xl:  clamp(1.75rem, 2vw + 1rem, 2.75rem);
    --fs-4xl:  clamp(2.25rem, 4vw + 1rem, 4rem);
    --fs-display: clamp(2.75rem, 5vw + 1rem, 5rem);

    /* ---------- Container-Breiten ---------- */
    --container:        min(1200px, 92vw);
    --container-narrow: min(880px, 92vw);
    --container-wide:   min(1440px, 94vw);

    /* ---------- Layout-Maße ---------- */
    --header-h: 88px;

    /* ---------- Motion ---------- */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:     120ms;
    --dur-normal:   200ms;
    --dur-slow:     400ms;

    /* ---------- Z-Layers ---------- */
    --z-nav:      50;
    --z-sticky:   60;
    --z-overlay:  90;
    --z-modal:   100;
    --z-toast:   110;

    /* ---------- Gradienten ---------- */
    --grad-indigo: linear-gradient(135deg, var(--tcl-indigo) 0%, var(--tcl-indigo-500) 100%);
    --grad-indigo-soft: linear-gradient(180deg, var(--tcl-indigo-50) 0%, var(--white) 100%);
    --grad-hero-overlay: linear-gradient(180deg, rgba(14,15,20,0) 0%, rgba(14,15,20,0.55) 100%);
  }

  /* Dark-Mode-Haken (noch nicht aktiv, aber vorbereitet) */
  /*
  @media (prefers-color-scheme: dark) {
    :root {
      --ink-900: #F7F8FC;
      --ink-700: #D7DAE4;
      ...
    }
  }
  */
}