/* ==========================================================================
   tokens.css – Design-Tokens für CalitO eSmoKe
   Single source of truth für Farben, Typografie, Spacing, Radius, Schatten.
   Werte abgeleitet aus DESIGN.md (Farben exakt aus dem Logo gemessen).
   ========================================================================== */

:root {
  /* --- Markenfarben (DESIGN.md) ----------------------------------------- */
  --ink: #222222;          /* Anthrazit/Schwarz – Text auf Hell           */
  --grey: #797979;         /* Mittelgrau – Sekundärtext, "SMOKE"-Ton      */
  --red: #a41111;          /* Marken-Rot – Akzent, CTAs, aktive Zustände  */
  --red-deep: #7e0d0d;     /* dunkleres Rot – Hover/Verläufe              */
  --white: #ffffff;
  --offwhite: #f2f2f2;     /* helle Flächen / Sektionswechsel             */
  --surface-dark: #161616; /* fast-schwarze Fläche – Hero/dunkle Sektion  */

  /* abgeleitete Töne (für feine Abstufungen, alle aus der Palette) */
  --ink-soft: #2c2c2c;
  --line-dark: rgba(255, 255, 255, 0.12); /* Trennlinien auf Dunkel       */
  --line-light: rgba(34, 34, 34, 0.12);   /* Trennlinien auf Hell         */
  --grey-light: #b4b4b4;   /* hellgrauer Text auf dunklem Grund           */
  --red-tint: rgba(164, 17, 17, 0.10);     /* zarter roter Flächen-Hauch  */

  /* --- Typografie ------------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono nur für technische Labels: Sektionsnummern, Koordinaten, Eyebrows.
     Gibt der Seite einen ruhigen, "industriellen" Editorial-Charakter. */
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  /* fluide Typo-Skala (mobile-first, skaliert mit Viewport) */
  --fs-300: 0.875rem;                              /* 14px – Kleintext     */
  --fs-400: 1rem;                                  /* 16px – Basis         */
  --fs-500: 1.125rem;                              /* 18px – Lead          */
  --fs-600: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); /* Sub-Headline         */
  --fs-700: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);  /* H3                   */
  --fs-800: clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem); /* H2                   */
  --fs-900: clamp(2.8rem, 1.5rem + 6.5vw, 6rem);   /* H1 / Hero            */
  --fs-mega: clamp(3.5rem, 1rem + 13vw, 11rem);    /* übergroße Typo-Momente */

  --lh-tight: 0.95;
  --lh-snug: 1.15;
  --lh-normal: 1.6;

  --tracking-display: 0.01em;
  --tracking-wide: 0.18em;   /* Versal-Labels / Eyebrows                   */

  /* --- Spacing-Skala (8px-Raster) -------------------------------------- */
  --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;

  /* vertikaler Sektions-Rhythmus (fluid) */
  --section-y: clamp(4rem, 2.5rem + 7vw, 8rem);

  /* --- Layout ---------------------------------------------------------- */
  --container: 1200px;       /* Standard-Inhaltsbreite                     */
  --container-narrow: 760px; /* Lesebreite für Fließtext/Rechtstexte       */
  --container-wide: 1400px;  /* breite Galerien                            */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); /* Außenabstand          */

  --header-h: 76px;          /* Höhe der Sticky-Navigation                 */

  /* --- Radius / Schatten / Borders ------------------------------------ */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.28);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  --z-header: 1000;
  --z-overlay: 1100;
}