/* ==========================================================================
   OPOHL GmbH – Design Tokens
   Eine Quelle für Farbe, Typografie, Abstand, Radius, Schatten und Motion.
   Keine Komponente definiert eigene Rohwerte.
   ========================================================================== */

:root {
  /* --- Farbe: Text und Linien ------------------------------------------- */
  --c-ink: #0b0d0e;           /* Überschriften, Primärtext                  */
  --c-ink-2: #4a5257;         /* Lauftext            – 7.9:1 auf Weiß       */
  --c-ink-3: #666e73;         /* Meta, Captions – 4.8:1 auch auf --c-bg-alt */
  --c-line: #e3e6e8;          /* dezente Trennlinien                        */
  --c-line-strong: #cfd4d7;   /* Border auf Flächen                        */
  --c-numeral: #868d92;       /* große Ziffern – 3.1:1 auch auf --c-bg-alt  */

  /* --- Farbe: Flächen --------------------------------------------------- */
  --c-bg: #ffffff;
  --c-bg-alt: #f5f6f7;        /* abgesetzte Section                        */
  --c-bg-sunk: #edeff0;       /* Bildbühne, Platzhalter                    */

  /* --- Farbe: dunkle Kontrastbereiche ----------------------------------- */
  /* Graphit mit leichtem Teal-Anteil, nicht Schwarz: die dunklen Bänder
     sollen als Materialfläche wirken, nicht als Loch in der Seite. */
  --c-dark: #223033;
  --c-dark-2: #2b3b3f;        /* Card auf dunkel                           */
  --c-dark-line: #3a4a4e;     /* Trennlinien auf dunkel                    */
  --c-on-dark: #f7f8f8;       /* 12.8:1 auf --c-dark                       */
  --c-on-dark-2: #a8b0b4;     /* 6.2:1 auf --c-dark                        */
  --c-numeral-dark: #6b7f83;  /* große Ziffern auf dunkel – 3.2:1          */

  /* --- Farbe: Akzent (genau einer) -------------------------------------- */
  --c-accent: #2f6b6b;        /* 6.1:1 auf Weiß                            */
  --c-accent-hover: #245656;
  --c-accent-soft: #eaf1f1;   /* Fläche für Icons, Tags                    */
  --c-accent-on-dark: #6fb3b3;/* 7.8:1 auf --c-dark                        */

  /* --- Farbe: Zustände -------------------------------------------------- */
  --c-error: #b3261e;
  --c-error-soft: #fdecea;
  --c-success: #1f6b3a;
  --c-success-soft: #eaf4ee;
  --c-focus: #2f6b6b;

  /* --- Typografie ------------------------------------------------------- */
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --fs-eyebrow: 0.75rem;      /* 12px, uppercase, getrackt                 */
  --fs-caption: 0.8125rem;    /* 13px                                      */
  --fs-sm: 0.9375rem;         /* 15px                                      */
  --fs-base: 1.0625rem;       /* 17px – Lauftext                           */
  --fs-lg: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);      /* 18 → 21       */
  --fs-h4: 1.0625rem;
  --fs-h3: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);       /* 20 → 24       */
  --fs-h2: clamp(1.75rem, 2vw + 1.1rem, 2.75rem);         /* 28 → 44       */
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);              /* 36 → 64       */
  /* Untergrenze bewusst niedrig: deutsche Komposita wie
     „Verpackungsmaterial" müssen bei 375px noch in den Container passen. */
  --fs-display: clamp(2.125rem, 4vw + 0.6rem, 4.5rem);    /* 34 → 72       */
  --fs-numeral: clamp(2.5rem, 4vw + 1rem, 4rem);

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

  --lh-tight: 1.06;
  --lh-head: 1.16;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-tight: -0.022em;       /* große Überschriften                       */
  --ls-head: -0.014em;
  --ls-normal: 0;
  --ls-eyebrow: 0.09em;

  /* --- Abstand ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  --sp-section: clamp(72px, 9vw, 140px);      /* vertikaler Section-Rhythmus */
  --sp-section-sm: clamp(56px, 6vw, 96px);

  /* --- Breiten ---------------------------------------------------------- */
  --w-content: 1280px;
  --w-narrow: 960px;
  --w-text: 68ch;
  --gutter: clamp(20px, 4vw, 40px);

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Schatten: je zwei Layer, sehr geringe Deckkraft ------------------ */
  --sh-sm: 0 1px 2px rgba(11, 13, 14, 0.04), 0 1px 3px rgba(11, 13, 14, 0.05);
  --sh-md: 0 2px 4px rgba(11, 13, 14, 0.04), 0 8px 24px rgba(11, 13, 14, 0.06);
  --sh-lg: 0 4px 8px rgba(11, 13, 14, 0.04), 0 18px 48px rgba(11, 13, 14, 0.08);
  --sh-focus: 0 0 0 3px rgba(47, 107, 107, 0.28);

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --e-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Header ----------------------------------------------------------- */
  --h-header: 76px;
  --h-header-scrolled: 60px;
  /* wird von js/nav.js auf die tatsächliche Höhe gesetzt                   */
  --scroll-offset: 76px;

  --z-header: 100;
  --z-dropdown: 110;
  --z-mobile-nav: 120;
}

@media (max-width: 860px) {
  :root {
    --h-header: 62px;
    --h-header-scrolled: 58px;
    --scroll-offset: 62px;
  }
}