/* ==========================================================================
   Broken Denture Repair — Design Tokens
   Source of truth: UI / Visual Design System v1.0 (Approved — Locked)
   Every value below is copied exactly from the locked spec. Do not
   introduce ad hoc values outside this file — see Design Consistency
   Rules, Section 15 of the source document.
   ========================================================================== */

:root {
  /* Color — Core Palette (Version 3: decisive cool overhaul, per owner direction) */
  --navy-900: #0F2647;   /* Primary buttons, headings, logo, footer bg, primary nav — deep, confident, blue-leaning */
  --navy-800: #17325C;   /* Hover state for Navy 900 fills/borders */
  --navy-950: #0A1B34;   /* Active/pressed state for Navy 900 fills */

  --teal-500: #0E7C74;   /* Healthcare/trust accent — icons, info banners, secondary emphasis */
  --teal-600: #0B6961;   /* Hover for teal fills */
  --teal-700: #08544E;   /* Active/text-safe teal */
  --teal-tint: #DFF0EF;  /* Pale teal tint for backgrounds only */

  /* Note: no warm/orange accent exists in this palette. Navy and teal are
     the only two brand accent colors — do not reintroduce an orange or
     terracotta token here. See Document Control / owner direction. */

  --cream: #F6F8F9;        /* Primary page background — crisp, extremely light cool neutral (NOT cream/beige despite the variable name, kept for minimal file churn) */
  --card-bg: #FFFFFF;      /* Cards, inputs, modals — clean white */
  --band-bg: #E7F1F1;      /* Alternating section band — pale blue-teal, cool and clean */
  --cream-white: #FFFFFF;  /* Button text/icons on dark fills; focus rings on dark */

  --charcoal: #16191C;     /* Primary body text — near-black */
  --muted-text: #565F66;   /* Secondary text, captions, placeholders — accessible medium cool gray */
  --divider: #D7DFE3;      /* Decorative dividers only — never functional */
  --border-strong: #7D8D96;/* Functional boundaries: inputs, cards — clear cool-neutral, not brown */

  --disabled-bg: #E7ECEE;
  --disabled-text: #94A0A6;

  --success: #1F7A4C;
  --success-tint: #E1F3E8;
  --warning: #8A6100;
  --warning-tint: #FBF0D9;
  --error: #B23A2C;
  --error-tint: #FBE4E0;
  --information: #0E7C74;  /* Repurposed to the new teal accent — trust/informational banners read as healthcare-teal */
  --information-tint: #DFF0EF;

  --focus-ring-light: #0F2647;
  --focus-ring-dark: #FFFFFF;
  --focus-ring-error: #B23A2C;

  /* Typography */
  --font-primary: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Source Serif 4', Georgia, serif;

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

  /* Layout tokens */
  --max-width: 1200px;
  --narrow-width: 720px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-input: 8px;
  --radius-upload: 12px;
  --radius-thumb: 8px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-standard: 200ms;
  --duration-emphasis: 350ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Shadows (Card Components, Section 8) — strengthened for definition against white cards */
  --shadow-informational: 0 1px 4px rgba(15,38,71,0.10), 0 1px 2px rgba(15,38,71,0.08);
  --shadow-clickable-hover: 0 6px 14px rgba(15,38,71,0.14);
  --shadow-faq-hover: 0 3px 8px rgba(15,38,71,0.12);
  --card-hairline: 1px solid rgba(15,38,71,0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-standard: 1ms;
    --duration-emphasis: 1ms;
  }
}