/* ============================================================
 * DESIGN TOKENS — Kanzlei Devletli
 * Single Source of Truth. Helle, ruhige Palette mit Karmin
 * und Anthrazit als sparsame Akzente.
 * ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
   * FARBEN — HELLE PALETTE
   * Warm-neutrales gebrochenes Weiß als Basis. Schwarz und
   * Karmin treten ausschließlich als Akzente auf.
   * ────────────────────────────────────────────────────────── */

  /* Flächen */
  --c-bg-canvas:     #faf9f7;   /* Seiten-Hintergrund (warm-neutral) */
  --c-bg-elevated:   #ffffff;   /* Cards, leichte Erhebung */
  --c-bg-overlay:    #f3f1ee;   /* Hover-Flächen, sanfte Tiefe */
  --c-bg-sunken:     #ecebe8;   /* Footer, eingedrückte Bereiche */
  --c-pure-white:    #ffffff;   /* Max-Kontrast, harte Flächen */

  /* Akzent — Karmin, der eine Farbgriff */
  --c-accent:        #ae1615;
  --c-accent-hover:  #8e1110;
  --c-accent-dim:    rgba(174, 22, 21, 0.08);   /* leichte Hintergrund-Tints */
  --c-accent-glow:   rgba(174, 22, 21, 0.22);   /* Border/Hover */

  /* Text — Anthrazit-Skala für dunklen Text auf hellem Grund */
  --c-text-high:     #14141a;   /* Headlines, Body — fast schwarz */
  --c-text-mid:      #4e4e54;   /* Sekundärtext */
  --c-text-low:      #7e7e84;   /* Tertiär, Captions */
  --c-text-faint:    #b0b0b4;   /* Disabled */
  --c-text-on-accent:#ffffff;   /* Weiß auf Karmin-Flächen */

  /* Hairlines — sehr feine Anthrazit-Tints */
  --c-border-faint:  rgba(20, 20, 26, 0.06);
  --c-border-soft:   rgba(20, 20, 26, 0.10);
  --c-border-strong: rgba(20, 20, 26, 0.18);

  /* Fokus */
  --c-focus-ring:    rgba(174, 22, 21, 0.50);


  /* ──────────────────────────────────────────────────────────
   * GLASSMORPHISM (auf hellem Grund — weißlich getönt)
   * Sehr dezent. Tönung + Blur + feine Anthrazit-Border.
   * ────────────────────────────────────────────────────────── */

  --glass-tint-header:  rgba(250, 249, 247, 0.78);   /* frosted nav nach Scroll */
  --glass-tint-card:    rgba(255, 255, 255, 0.62);   /* Cards */
  --glass-tint-cta:     rgba(255, 255, 255, 0.72);   /* Sticky-Mobile-CTA-Hülle */

  --glass-blur:         16px;
  --glass-saturation:   1.4;

  --glass-border:       1px solid rgba(20, 20, 26, 0.08);
  --glass-border-hover: 1px solid rgba(174, 22, 21, 0.35);

  --glass-highlight:    inset 0 1px 0 rgba(255, 255, 255, 0.60);   /* obere Lichtkante */


  /* ──────────────────────────────────────────────────────────
   * TYPOGRAFIE
   * Inter, self-hosted. Skala ruhig & lesbar.
   * ────────────────────────────────────────────────────────── */

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-mega:      clamp(3.5rem,  10vw,   8.5rem);     /* 56 → 136 — Display-Statement */
  --fs-display:   clamp(2.5rem,  5vw,    4rem);       /* 40 → 64 — Hero */
  --fs-h1:        clamp(2rem,    3.5vw,  2.75rem);    /* 32 → 44 */
  --fs-h2:        clamp(1.625rem,2.5vw,  2.125rem);   /* 26 → 34 */
  --fs-h3:        clamp(1.25rem, 1.75vw, 1.5rem);     /* 20 → 24 */
  --fs-h4:        1.125rem;                            /* 18 */
  --fs-body:      1.0625rem;                           /* 17 */
  --fs-small:     0.9375rem;                           /* 15 */
  --fs-caption:   0.8125rem;                           /* 13 */
  --fs-label:     0.75rem;                             /* 12 — caps labels */

  --lh-tight:     1.1;
  --lh-snug:      1.3;
  --lh-normal:    1.55;
  --lh-relaxed:   1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;


  /* ──────────────────────────────────────────────────────────
   * SPACING (4px-Basis)
   * ────────────────────────────────────────────────────────── */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;
  --space-11: 10rem;

  --section-y:     clamp(4rem,   10vw, 8rem);
  --section-y-sm:  clamp(2.5rem,  6vw, 4.5rem);


  /* ──────────────────────────────────────────────────────────
   * LAYOUT
   * ────────────────────────────────────────────────────────── */

  --container-max:     1240px;
  --container-narrow:   760px;
  --container-px:      clamp(1.25rem, 4vw, 2.5rem);

  --header-h:          72px;
  --header-h-mobile:   60px;

  --mobile-cta-h:      52px;
  --mobile-cta-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  --mobile-cta-clear:  calc(var(--mobile-cta-h) + var(--mobile-cta-bottom) + 1rem);


  /* ──────────────────────────────────────────────────────────
   * RADII
   * ────────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;


  /* ──────────────────────────────────────────────────────────
   * SCHATTEN
   * Dezent auf hellem Grund — niedrige Opazität, weiche Streuung.
   * ────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 2px rgba(20, 20, 26, 0.06);
  --shadow-md:  0 4px 12px rgba(20, 20, 26, 0.08);
  --shadow-lg:  0 10px 30px rgba(20, 20, 26, 0.10);
  --shadow-xl:  0 20px 50px rgba(20, 20, 26, 0.14);
  --shadow-cta: 0 8px 24px rgba(174, 22, 21, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.10);


  /* ──────────────────────────────────────────────────────────
   * TRANSITIONS
   * ────────────────────────────────────────────────────────── */

  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   360ms;
  --t-glide:  500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);


  /* ──────────────────────────────────────────────────────────
   * Z-INDEX
   * ────────────────────────────────────────────────────────── */

  --z-base:        1;
  --z-elevated:   10;
  --z-sticky:    100;
  --z-overlay:   500;
  --z-cta-mobile:900;
  --z-modal:    1000;
  --z-toast:    1100;
}


/* ============================================================
 * REDUCED MOTION
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:  1ms;
    --t-base:  1ms;
    --t-slow:  1ms;
    --t-glide: 1ms;
  }
}