/* ==========================================================================
   DESIGN TOKENS
   Derived from the live diatonica.si design system (Oswald/Open Sans,
   dark-bg-1 #111517, gold accent #B1926F, wide-tracked uppercase labels,
   outline buttons). Reused across every Diatonica premium case-study site —
   change values here to reskin, never hardcode raw values in components.
   ========================================================================== */

:root {
  /* ---- Color: core ---- */
  --color-bg: #0e1112;
  --color-bg-raised: #15181a;
  --color-ink: #f5f4f2;
  --color-ink-dim: #9a9a98;
  --color-ink-faint: #6b6b69;
  --color-accent: #b1926f;
  --color-accent-soft: #c9ab86;
  --color-line: rgba(245, 244, 242, 0.16);
  --color-line-strong: rgba(245, 244, 242, 0.32);
  --color-overlay: rgba(14, 17, 18, 0.55);
  --color-overlay-strong: rgba(14, 17, 18, 0.82);

  /* ---- Typography ---- */
  --font-display: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;

  --size-hero: clamp(2.75rem, 3.2vw + 2rem, 7.5rem);
  --size-h1: clamp(2.25rem, 2.4vw + 1.6rem, 5rem);
  --size-h2: clamp(1.75rem, 1.6vw + 1.3rem, 3rem);
  --size-h3: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
  --size-lead: clamp(1.05rem, 0.4vw + 0.95rem, 1.35rem);
  --size-body: 1rem;
  --size-small: 0.8125rem;
  --size-label: 0.75rem;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.18em;
  --tracking-widest: 0.32em;

  --leading-tight: 1.14;
  --leading-snug: 1.25;
  --leading-body: 1.75;

  /* ---- Spacing (fluid) ---- */
  --space-3xs: clamp(0.4rem, 0.3vw, 0.6rem);
  --space-2xs: clamp(0.75rem, 0.6vw, 1rem);
  --space-xs: clamp(1.25rem, 1vw, 1.75rem);
  --space-sm: clamp(2rem, 2vw, 2.75rem);
  --space-md: clamp(3rem, 4vw, 4.5rem);
  --space-lg: clamp(4.5rem, 6vw, 7rem);
  --space-xl: clamp(6rem, 9vw, 10rem);
  --space-section: clamp(6rem, 12vw, 12rem);

  --container-max: 1600px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.3s;
  --dur-base: 0.6s;
  --dur-slow: 1.1s;

  /* ---- Layers ---- */
  --z-header: 100;
  --z-overlay: 50;
}