/* ==========================================================================
   twenty seconds – Design Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700;900&display=swap');

:root {
  /* ── Colors ── */
  --color-dark:         #1a1a2e;
  --color-dark-soft:    #242440;
  --color-text:         #1c1b2a;
  --color-text-secondary: #5c5a6f;
  --color-text-muted:   #8e8ca0;
  
  --color-bg:           #f9fafb;
  --color-surface:      #f0f2f5;
  --color-surface-alt:  #e5e8ec;
  --color-border:       #d6dae0;
  
  --color-white:        #ffffff;
  
  /* Schmuckfarbe / Primary Brand Accent */
  --color-brand:        #00a0de;
  --color-brand-light:  #2cb5e8;
  --color-brand-dark:   #0080b3;
  --color-brand-subtle: #e5f5fc;
  
  /* Lead-Butler Accent (= Brand Blue) */
  --color-teal:         var(--color-brand);
  --color-teal-light:   var(--color-brand-light);
  --color-teal-dark:    var(--color-brand-dark);
  --color-teal-subtle:  var(--color-brand-subtle);
  
  /* Verlag Accent (Violet – YessYess-Branding) */
  --color-violet:       #6d3ac7;
  --color-violet-light: #7e52d0;
  --color-violet-dark:  #5a2daa;
  --color-violet-subtle:#f0ebfa;
  
  /* Primary accent = Brand Blue */
  --color-accent:       var(--color-brand);
  --color-accent-light: var(--color-brand-light);
  --color-accent-dark:  var(--color-brand-dark);
  
  /* ── Typography ── */
  --font-display:       'Titillium Web', sans-serif;
  --font-body:          'Titillium Web', sans-serif;
  
  --fs-hero:            clamp(2.75rem, 5vw + 1rem, 4.5rem);
  --fs-h1:              clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
  --fs-h2:              clamp(1.75rem, 3vw + 0.25rem, 2.5rem);
  --fs-h3:              clamp(1.25rem, 2vw + 0.25rem, 1.5rem);
  --fs-h4:              1.125rem;
  --fs-body:            1.0625rem;
  --fs-body-lg:         1.1875rem;
  --fs-small:           0.9375rem;
  --fs-xs:              0.8125rem;
  
  --lh-tight:           1.15;
  --lh-snug:            1.3;
  --lh-body:            1.65;
  
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;
  
  /* ── Spacing ── */
  --space-xs:           0.5rem;
  --space-sm:           0.75rem;
  --space-md:           1rem;
  --space-lg:           1.5rem;
  --space-xl:           2rem;
  --space-2xl:          3rem;
  --space-3xl:          4rem;
  --space-4xl:          6rem;
  --space-5xl:          8rem;
  --space-section:      clamp(4rem, 8vw, 8rem);
  
  /* ── Layout ── */
  --max-width:          1200px;
  --max-width-narrow:   800px;
  --max-width-wide:     1400px;
  --gutter:             clamp(1.25rem, 3vw, 2.5rem);
  
  /* ── Borders & Radius ── */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;
  
  /* ── Shadows ── */
  --shadow-sm:          0 1px 3px rgba(20, 18, 24, 0.06);
  --shadow-md:          0 4px 12px rgba(20, 18, 24, 0.08);
  --shadow-lg:          0 8px 30px rgba(20, 18, 24, 0.1);
  --shadow-xl:          0 16px 50px rgba(20, 18, 24, 0.12);
  
  /* ── Transitions ── */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:      150ms;
  --duration-normal:    300ms;
  --duration-slow:      500ms;
}