/* ==========================================================================
   Denty — Design Tokens
   Global CSS variables shared across all future sections (Header, Hero, ...)
   ========================================================================== */

:root {
  /* Color system */
  --color-primary: #0168ff;
  --color-primary-hover: #0055d4;
  --color-dark: #0f1a2d;
  --color-secondary: #878c96;
  --color-light: #f8f8f8;
  --color-white: #ffffff;
  --color-border: rgba(15, 26, 45, 0.1);
  --color-border-strong: rgba(15, 26, 45, 0.16);

  /* Global grid — Header, Hero and Cards share this coordinate system */
  --container-width: 1440px;
  --container-padding: 40px;
  /* Header logo and Hero headline read as one composition only if they
     sit on the exact same left edge — this is that single shared value.
     Wider than --container-padding on purpose (an editorial inset, not
     the plain section padding used sitewide); both .header-inner and
     .hero-inner read their *left* padding from this one token so they
     can never drift apart again. */
  --content-inset-left: clamp(48px, 7vw, 140px);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Radius */
  --radius-pill: 999px;
  --radius-header: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;

  /* Typography */
  --font-base: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Prata", "Georgia", serif;
  --font-hero: "TT Hoves Pro", var(--font-base);
  --fs-nav: 16px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-standard);
  --transition-base: 240ms var(--ease-standard);
  /* Header hero-state <-> scrolled-state: surface (background/border/
     shadow) and text color get their own explicit, named transitions —
     never `transition: all` — so the swap reads as a clean recolor, not
     a layout change (height/padding/width never move). */
  --transition-header-surface: 400ms ease;
  --transition-header-color: 350ms ease;

  /* Header-specific — one height, used in both hero and scrolled states. */
  --header-height: 88px;
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 28px;
    --header-height: 76px;
    --content-inset-left: clamp(32px, 6vw, 64px);
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding: 16px;
    --header-height: 72px;
    --content-inset-left: var(--container-padding);
  }
}