/* =========================================================================
   Dentora — Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Nothing in this file produces output; it only declares custom properties.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. Colour — the six approved brand values, plus derived working tints.
     Derived values are opacity/lightness steps of the six; no new hues.
     --------------------------------------------------------------------- */
  --color-navy: #12304a;
  --color-teal: #28a9a1;
  --color-off-white: #f7fafa;
  --color-soft-gray: #e9eff1;
  --color-text: #19252d;
  --color-white: #ffffff;

  /* Navy steps — for hover states and dark-section layering */
  --color-navy-900: #0c2134;
  --color-navy-700: #12304a;
  --color-navy-500: #234a68;
  --color-navy-300: #5b7a93;

  /* Teal steps — hover is darker so contrast on white only ever improves.
     teal-700 is the *text-safe* teal: it is the only teal used for text,
     links, the eyebrow label and the focus ring, because the brand teal
     (#28A9A1) is 2.88:1 on white and fails WCAG AA for text.
       #1A736E on white     5.64:1  AA
       #1A736E on off-white 5.38:1  AA
       #1A736E on teal-100  4.98:1  AA
       white on #1A736E     5.64:1  AA  (primary button hover) */
  --color-teal-700: #1a736e;
  --color-teal-600: #23968f;
  --color-teal-500: #28a9a1;
  --color-teal-100: #e4f4f3;

  /* Text roles */
  --color-text-strong: var(--color-navy);
  --color-text-body: var(--color-text);
  --color-text-muted: #55666f;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #c2d2dd;

  /* Surfaces */
  --color-surface: var(--color-white);
  --color-surface-page: var(--color-off-white);
  --color-surface-alt: var(--color-soft-gray);
  --color-surface-dark: var(--color-navy);

  /* Lines */
  --color-border: #e9eff1;
  --color-border-strong: #d5e0e4;
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  /* Feedback — used only for form validation, not decoration */
  --color-error: #b3261e;
  --color-error-bg: #fdf1f0;
  --color-success: #1f7a4d;
  --color-success-bg: #eef7f2;

  /* Focus ring */
  --color-focus: var(--color-teal-700);

  /* ---------------------------------------------------------------------
     2. Typography
     Manrope for headings, Inter for body/UI. Both self-hosted via
     @fontsource-variable, so there is no third-party font request.
     --------------------------------------------------------------------- */
  --font-heading: 'Manrope Variable', 'Manrope', ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter Variable', 'Inter', ui-sans-serif, system-ui,
    -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

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

  /* Fluid type scale.
     clamp(mobile, fluid, desktop) — every heading scales continuously
     between 320px and 1280px rather than stepping at breakpoints.
     Ranges are taken directly from the brief (sections 7). */
  --text-h1: clamp(2.375rem, 1.66rem + 3.57vw, 3.625rem); /* 38 → 58 */
  --text-h2: clamp(1.875rem, 1.45rem + 2.14vw, 2.625rem); /* 30 → 42 */
  --text-h3: clamp(1.5rem, 1.36rem + 0.71vw, 1.8125rem); /* 24 → 29 */
  --text-h4: clamp(1.25rem, 1.18rem + 0.36vw, 1.375rem); /* 20 → 22 */
  --text-body-lg: 1.125rem; /* 18 */
  --text-body: 1rem; /* 16 — never smaller for body copy */
  --text-small: 0.875rem; /* 14 */
  --text-eyebrow: 0.8125rem; /* 13 */
  --text-button: 0.9688rem; /* 15.5 */
  --text-nav: 0.9688rem; /* 15.5 */

  --leading-heading: 1.18;
  --leading-heading-tight: 1.12;
  --leading-body: 1.65;
  --leading-ui: 1.4;

  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.08em;

  /* ---------------------------------------------------------------------
     3. Spacing — 4px base scale
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Responsive section rhythm — brief section 8.
     56–64 mobile · 72–88 tablet · 96–120 desktop, expressed fluidly. */
  --section-y: clamp(3.5rem, 2.2rem + 6.5vw, 7.5rem); /* 56 → 120 */
  --section-y-tight: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96 */
  --section-gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); /* inner block gap */

  /* ---------------------------------------------------------------------
     4. Layout
     --------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 880px; /* legal / long-form reading measure */
  --container-pad: clamp(1.125rem, 0.55rem + 2.5vw, 2.5rem); /* 18 → 40 */
  --measure: 68ch; /* max paragraph line length */

  --header-height: 76px;
  --header-height-compact: 64px;
  --mobile-bar-height: 62px;

  /* ---------------------------------------------------------------------
     5. Radius — brief section 9. Deliberately not pill-shaped.
     --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-media: 22px;
  --radius-lg: 24px;
  --radius-pill: 999px; /* reserved for eyebrow badges only */

  /* ---------------------------------------------------------------------
     6. Borders & shadows — brief section 10. Subtle only.
     --------------------------------------------------------------------- */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);
  --border-strong: var(--border-width) solid var(--color-border-strong);

  --shadow-xs: 0 1px 2px rgba(18, 48, 74, 0.05);
  --shadow-sm: 0 2px 10px rgba(18, 48, 74, 0.06);
  --shadow-md: 0 8px 30px rgba(18, 48, 74, 0.08); /* the brief's example */
  --shadow-lg: 0 16px 44px rgba(18, 48, 74, 0.1);
  --shadow-focus: 0 0 0 4px rgba(40, 169, 161, 0.24);

  /* ---------------------------------------------------------------------
     7. Motion
     Only UI-interaction timings live here. The scroll/reveal motion system
     arrives in a later phase and will extend, not replace, these tokens.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 180ms;
  --duration-base: 200ms;
  --duration-dropdown: 260ms;
  --duration-menu: 300ms;

  --transition-color: color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);

  /* ---------------------------------------------------------------------
     8. Elevation order
     --------------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky-bar: 40;
  --z-header: 50;
  --z-dropdown: 60;
  --z-mobile-nav: 70;
  --z-skip-link: 100;

  /* Minimum comfortable touch target (WCAG 2.2 AA target size) */
  --touch-target: 44px;
}

/* Users who prefer reduced motion get near-instant transitions.
   Set here so every component inherits it without extra media queries. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-dropdown: 1ms;
    --duration-menu: 1ms;
  }
}