/**
 * MOD-014: Dental Compass UI Foundation - design tokens.
 *
 * The single source of every colour, type size, spacing value, radius,
 * and shadow used by dc-components.css and the four pilot surfaces.
 * Nothing outside this file should hard-code a colour, font size, or
 * spacing value - that is what makes the foundation reusable rather
 * than a one-off restyle. Approved visual direction: dark navy framing,
 * pale clinical blue backgrounds, teal for positive actions/progress,
 * warm stone for human warmth, gold used sparingly, generous white
 * space, calm/medical/premium - explicitly not travel-agency styling
 * or a generic template look.
 */

:root {
  /* Colour - navy (frame: header, footer, dark surfaces) */
  --dc-color-navy-900: #0b1e33;
  --dc-color-navy-700: #16324d;
  --dc-color-navy-500: #2a4d6e;
  /* Compare Clinics matrix header/footer navy - a distinct, slightly
     different navy than the -900/-700/-500 scale above; consolidated
     here from 13 identical hardcoded #0d1b2a occurrences rather than
     merged into -900 to avoid any visual change. */
  --dc-color-navy: #0d1b2a;

  /* Colour - pale clinical blue (page/section backgrounds) */
  --dc-color-blue-50: #f3f8fb;
  --dc-color-blue-100: #e6f0f6;
  --dc-color-blue-200: #d2e3ed;

  /* Colour - teal (positive actions, progress, success) */
  --dc-color-teal-700: #0b636b;
  --dc-color-teal-600: #0e7c86;
  --dc-color-teal-100: #dcf0ef;

  /* Colour - warm stone (human warmth accents) */
  --dc-color-stone-700: #6b4f30;
  --dc-color-stone-500: #a98a68;
  --dc-color-stone-300: #c9ae93;
  --dc-color-stone-100: #f5efe7;

  /* Colour - gold (used sparingly: highlights, "new", premium accents) */
  --dc-color-gold-600: #a3801f;
  --dc-color-gold-500: #c6a15b;
  --dc-color-gold-100: #f7ecd4;

  /* Colour - neutrals and text */
  --dc-color-white: #ffffff;
  --dc-color-ink-900: #1a2430;
  --dc-color-ink-600: #4b5a68;
  --dc-color-ink-400: #7c8b98;
  --dc-color-border: #d7e1e8;
  /* Treatment Builder redesign: white-on-navy text tiers for the new
     full-navy-panel page background - the ink-* tokens above assume a
     light background and read too dark on navy. */
  --dc-color-white-muted: rgba(255, 255, 255, 0.72);
  --dc-color-white-faint: rgba(255, 255, 255, 0.5);
  --dc-color-navy-border: rgba(255, 255, 255, 0.14);

  /* Colour - status */
  --dc-color-danger-700: #8f2f2a;
  --dc-color-danger-600: #b3403a;
  --dc-color-danger-100: #fbeae9;
  --dc-color-info-600: #2a6f9e;
  --dc-color-info-100: #e6f0f8;

  /* Typography */
  --dc-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Treatment Builder redesign: this theme's first serif heading
     treatment - a system serif stack only, no webfont load, since
     none is set up here yet and this pass is visual-only for one
     page. Reserved for headings; body copy stays on the base
     sans-serif throughout. */
  --dc-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --dc-font-size-xs: 0.75rem;
  --dc-font-size-sm: 0.875rem;
  --dc-font-size-base: 1rem;
  --dc-font-size-md: 1.125rem;
  --dc-font-size-lg: 1.375rem;
  --dc-font-size-xl: 1.75rem;
  --dc-font-size-2xl: 2.25rem;
  /* Brand Experience Polish (EXPERIENCE-001 Stage 2): a single step
     above 2xl, reserved for a page's one dominant hero headline (the
     homepage today) - not a general heading size, so it stays unused
     by section-level h2s across the site. */
  --dc-font-size-3xl: 2.75rem;
  --dc-line-height-tight: 1.25;
  --dc-line-height-base: 1.55;
  --dc-font-weight-regular: 400;
  --dc-font-weight-medium: 500;
  --dc-font-weight-semibold: 600;
  --dc-font-weight-bold: 700;

  /* Spacing (4px base scale) */
  --dc-space-1: 0.25rem;
  --dc-space-2: 0.5rem;
  --dc-space-3: 0.75rem;
  --dc-space-4: 1rem;
  --dc-space-5: 1.5rem;
  --dc-space-6: 2rem;
  --dc-space-7: 3rem;
  --dc-space-8: 4rem;

  /* Border radius */
  --dc-radius-sm: 0.25rem;
  --dc-radius-md: 0.5rem;
  --dc-radius-lg: 1rem;
  --dc-radius-pill: 999px;

  /* Shadows - soft, navy-tinted, never harsh black (calm/premium, not
     a generic template drop-shadow) */
  --dc-shadow-sm: 0 1px 2px rgba(11, 30, 51, 0.06);
  --dc-shadow-md: 0 4px 12px rgba(11, 30, 51, 0.08);
  --dc-shadow-lg: 0 12px 32px rgba(11, 30, 51, 0.12);

  /* Focus ring - shared by every interactive component so keyboard
     focus is always visible and always the same shape/colour */
  --dc-focus-ring: 0 0 0 3px rgba(14, 124, 134, 0.35);

  /* Motion - guarded globally by prefers-reduced-motion below */
  --dc-transition-fast: 120ms ease;
  --dc-transition-base: 200ms ease;
}

/**
 * Reduced motion: every component built on these tokens must use
 * var(--dc-transition-*) rather than a hard-coded duration, so this
 * single override silences all of them at once.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dc-transition-fast: 0ms;
    --dc-transition-base: 0ms;
  }
}