/**
 * Design tokens for SIX08 Dental.
 * Brand colours and font supplied by client; all other tokens (spacing,
 * radius, shadow, dark surface colour) are inferred from the homepage
 * mockup and can be adjusted here in one place.
 */

:root {
  /* ---- Brand colour (client-supplied) ---- */
  --color-primary: #009ea9;
  /* Darkened, WCAG-AA-safe variant of the brand teal (4.5:1+ with
     white text, and against every light background used sitewide).
     The raw --color-primary (3.25:1) reads fine for large brand
     moments, icons, and borders, but is too light for body-size
     text or white-on-teal buttons — use this instead in those cases. */
  --color-primary-600: #00747c;
  --color-primary-700: #006670; /* hover/pressed state on top of primary-600 */
  --color-secondary: #a8e3e7;
  --color-heading: #3f4848;

  /* ---- Dark surface (INFERRED from mockup's dark header/footer/CTA band —
     confirm or replace with an exact brand value) ---- */
  --color-ink: #142524;
  --color-ink-soft: #1c332f;

  /* ---- Neutrals & background tints (client-supplied) ---- */
  --color-white: #ffffff;
  --color-bg-muted: #f2f2f0;
  --color-bg-tint: rgba(185, 219, 229, 0.4); /* #b9dbe5 at 40% opacity (background use only) */
  --color-border: #e2e5e2;
  /* INFERRED from the mockup's header utility bar — no exact hex was
     supplied for this warm off-white; confirm or replace here. */
  --color-cream: #fdf9f0;

  /* ---- Text (derived from heading grey) ---- */
  --color-text: #3f4848;
  --color-text-muted: #5c6666;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #c7d6d4;

  /* ---- Type ---- */
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h6: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-h5: clamp(1.125rem, 1.06rem + 0.3vw, 1.375rem);
  --fs-h4: clamp(1.375rem, 1.27rem + 0.5vw, 1.75rem);
  --fs-h3: clamp(1.625rem, 1.45rem + 0.9vw, 2.25rem);
  --fs-h2: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --fs-h1: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --tracking-eyebrow: 0.08em;

  /* ---- Spacing (fluid) ---- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
  --space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-md: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-lg: clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem);
  --space-xl: clamp(3.25rem, 2.6rem + 3.25vw, 5.5rem);
  --space-2xl: clamp(4.5rem, 3.5rem + 5vw, 8rem);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-narrow: 860px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 8px rgba(20, 37, 36, 0.06);
  --shadow-md: 0 12px 32px rgba(20, 37, 36, 0.1);
  --shadow-lg: 0 24px 56px rgba(20, 37, 36, 0.14);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;

  --header-height: 88px;
}

/* Phones: the fluid clamps above bottom out at their floors here, and
   the larger floors read as too airy on a narrow screen — tighten the
   bigger steps so section padding and stacked-layout gaps scale down. */
@media (max-width: 36rem) {
  :root {
    --space-md: 1.25rem;
    --space-lg: 1.75rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}