/* ==========================================================================
   die-pro — Design Tokens
   Einziger Ort im gesamten Theme, an dem Farbwerte, Größen und Zeiten
   als Literale stehen. Überall sonst ausschließlich var(--…).
   Palette rekonstruiert aus dem Webflow-Stylesheet der Altsite.
   ========================================================================== */

:root {
  /* --- Markenfarben, Rohwerte --------------------------------------------
     Bewusst auf drei Werte reduziert: Weiß, Dunkelgrau, Orange. Beige kommt
     als warme Fläche dazu, wo früher kaltes Grau stand — das nimmt dem
     Orange die Härte, ohne eine vierte Farbe einzuführen.
     Zwei Orangetöne, weil ein einziger nicht beides kann: das helle leuchtet
     auf Flächen, das dunkle erreicht auf Weiß den nötigen Textkontrast. */
  --dp-ink:            #1c1b1a;  /* Dunkelgrau, minimal warm — Text, Flächen */
  --dp-orange:         #ff5500;  /* Markenorange: Flächen, große Elemente    */
  --dp-orange-deep:    #c33f00;  /* Textorange: 5.4:1 auf Weiß, barrierefrei */
  --dp-beige:          #f3ede5;  /* Warme Fläche statt kaltem Grau           */
  --dp-beige-deep:     #e3d9cc;  /* Trennlinien, ruhige Abgrenzung           */
  --dp-white:          #ffffff;

  /* --- Semantische Farbrollen (hier greift das Theme zu) ------------------ */
  --color-bg:              var(--dp-beige);   /* Grundton der Seite */
  --color-bg-alt:          var(--dp-white);   /* abgesetzte Abschnitte */
  --color-bg-invert:       var(--dp-ink);
  --color-bg-accent:       var(--dp-beige-deep);
  --color-surface:         var(--dp-white);   /* Karten heben sich ab */
  --color-surface-raised:  var(--dp-beige-deep);

  --color-text:            var(--dp-ink);
  --color-text-muted:      color-mix(in srgb, var(--dp-ink) 66%, transparent);
  --color-text-faint:      color-mix(in srgb, var(--dp-ink) 40%, transparent);
  --color-text-invert:     var(--dp-white);
  --color-text-invert-muted: color-mix(in srgb, var(--dp-white) 70%, transparent);

  /* Links und Fließtext nehmen das dunkle Orange (Kontrast), Flächen und
     große Elemente das leuchtende. */
  --color-accent:          var(--dp-orange-deep);
  --color-accent-hover:    var(--dp-orange);
  --color-accent-contrast: var(--dp-white);
  --color-accent-surface:  var(--dp-orange);
  --color-signal:          var(--dp-orange);

  --color-border:          color-mix(in srgb, var(--dp-ink) 12%, transparent);
  --color-border-strong:   color-mix(in srgb, var(--dp-ink) 28%, transparent);
  --color-focus:           var(--dp-orange-deep);

  /* Overlays über Video/Bild — Text muss lesbar bleiben */
  --color-scrim:           color-mix(in srgb, var(--dp-ink) 55%, transparent);
  --color-scrim-strong:    color-mix(in srgb, var(--dp-ink) 78%, transparent);
  --gradient-scrim-bottom: linear-gradient(
                             to top,
                             color-mix(in srgb, var(--dp-ink) 92%, transparent) 0%,
                             color-mix(in srgb, var(--dp-ink) 55%, transparent) 38%,
                             transparent 100%);

  /* --- Typografie --------------------------------------------------------- */
  --font-sans: "Figtree", "Avenir Next", Avenir,
               ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --weight-regular: 400;
  --weight-demi:    600;
  --weight-bold:    700;

  /* Fluide Skala, Basis 1rem = 16px. clamp(min, fluid, max) in rem. */
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
  --text-xl:   clamp(1.375rem, 0.7vw + 1.2rem, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.4vw + 1.4rem, 2.5rem);
  --text-3xl:  clamp(2.25rem, 2.6vw + 1.6rem, 3.75rem);
  --text-4xl:  clamp(2.75rem, 4.6vw + 1.6rem, 5.5rem);
  --text-hero: clamp(2.5rem, 5.2vw + 0.6rem, 5.75rem);

  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-hero:   -0.035em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  --measure: 68ch;  /* Optimale Zeilenlänge für Fließtext */

  /* --- Abstände, 4er-Raster in rem ---------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --section-y: clamp(3.5rem, 7vw, 8rem);

  /* --- Layout -------------------------------------------------------------- */
  --width-full: 100%;
  --width-wide: 100rem;
  --width-page: 82.5rem;
  --width-text: 48rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --masonry-gap: clamp(0.5rem, 1.2vw, 1.25rem);
  --masonry-cols: 3;

  /* --- Radius, Rahmen, Schatten -------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-pill: 62.5rem;

  --border-hairline: 0.0625rem;
  --border-thick:    0.125rem;

  --shadow-sm: 0 0.0625rem 0.125rem color-mix(in srgb, var(--dp-ink) 10%, transparent);
  --shadow-md: 0 0.5rem 1.5rem color-mix(in srgb, var(--dp-ink) 12%, transparent);
  --shadow-lg: 0 1.5rem 4rem color-mix(in srgb, var(--dp-ink) 22%, transparent);

  /* --- Bewegung ------------------------------------------------------------ */
  --duration-fast:   0.18s;
  --duration-base:   0.32s;
  --duration-slow:   0.6s;
  --duration-reveal: 1.1s;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Ebenen -------------------------------------------------------------- */
  --z-base:    0;
  --z-media:   1;
  --z-scrim:   2;
  --z-content: 3;
  --z-header:  50;
  --z-overlay: 100;
  --z-modal:   200;

  --header-height: 4.5rem;
}

/* --------------------------------------------------------------------------
   Bereichsthemen: setzen nur die semantischen Rollen um. Auf einen Abschnitt
   oder eine Seite gelegt, färbt sich alles darin mit — ohne neue Regeln.
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --color-bg:        var(--dp-ink);
  --color-bg-alt:    color-mix(in srgb, var(--dp-ink) 88%, var(--dp-white));
  --color-bg-invert: var(--dp-white);
  --color-bg-accent: color-mix(in srgb, var(--dp-ink) 88%, var(--dp-white));
  --color-surface:   color-mix(in srgb, var(--dp-ink) 90%, var(--dp-white));
  --color-surface-raised: color-mix(in srgb, var(--dp-ink) 84%, var(--dp-white));
  --color-text:         var(--dp-white);
  --color-text-muted:   color-mix(in srgb, var(--dp-white) 68%, transparent);
  --color-text-faint:   color-mix(in srgb, var(--dp-white) 42%, transparent);
  --color-text-invert:  var(--dp-ink);
  /* Auf Dunkelgrau leuchtet das helle Orange und hat genug Kontrast — hier
     braucht es die abgedunkelte Variante nicht. */
  --color-accent:          var(--dp-orange);
  --color-accent-hover:    color-mix(in srgb, var(--dp-orange) 78%, var(--dp-white));
  --color-accent-contrast: var(--dp-ink);
  --color-border:        color-mix(in srgb, var(--dp-white) 16%, transparent);
  --color-border-strong: color-mix(in srgb, var(--dp-white) 34%, transparent);
  --color-focus:         var(--dp-orange);
}

/* Warme Flaeche: fuer Abschnitte, die sich vom Weiss absetzen sollen,
   ohne dass ein Farbwechsel stattfindet. */
/* Weisse Flaeche als Gegenstueck zum beigen Grundton */
[data-theme="weiss"] {
  --color-bg:      var(--dp-white);
  --color-bg-alt:  var(--dp-beige);
  --color-surface: var(--dp-beige);
  --color-surface-raised: var(--dp-beige-deep);
}

/* Vollflaechig Orange — sparsam einsetzen, etwa fuer einen Kontaktabschnitt. */
[data-theme="orange"] {
  --color-bg:        var(--dp-orange);
  --color-bg-alt:    color-mix(in srgb, var(--dp-orange) 88%, var(--dp-ink));
  --color-bg-accent: color-mix(in srgb, var(--dp-orange) 88%, var(--dp-white));
  --color-surface:   color-mix(in srgb, var(--dp-orange) 92%, var(--dp-white));
  --color-surface-raised: color-mix(in srgb, var(--dp-orange) 84%, var(--dp-ink));
  --color-text:         var(--dp-ink);
  --color-text-muted:   color-mix(in srgb, var(--dp-ink) 72%, transparent);
  --color-text-invert:  var(--dp-orange);
  --color-accent:          var(--dp-ink);
  --color-accent-hover:    color-mix(in srgb, var(--dp-ink) 80%, var(--dp-white));
  --color-accent-contrast: var(--dp-orange);
  --color-border:        color-mix(in srgb, var(--dp-ink) 22%, transparent);
  --color-focus:         var(--dp-ink);
}

/* Bewegungsreduktion: Dauern auf ~0, damit GSAP und CSS gleichermaßen ruhig
   werden. Die Reveal-Klassen setzen ihre Endzustände dann sofort. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0.01ms;
    --duration-base:   0.01ms;
    --duration-slow:   0.01ms;
    --duration-reveal: 0.01ms;
  }
}