/* ==========================================================================
   Ranaux Healthcare — Design Tokens
   Swap the hex values below to apply real brand colors sitewide.
   Everything else in the CSS references these variables — a one-line swap.
   ========================================================================== */

:root {
  /* ---- Brand colors (placeholder — replace with real brand palette) ---- */
  --color-primary: #0f6e74;         /* deep teal — trust, healthcare, hygiene */
  --color-primary-dark: #0a4f54;
  --color-primary-darker: #073a3e;
  --color-primary-light: #e6f4f4;
  --color-primary-tint: #f2f9f9;

  --color-accent: #e2703a;          /* warm amber/coral — CTAs only, used sparingly */
  --color-accent-dark: #c25a28;
  --color-accent-light: #fceae0;

  --color-bg: #faf9f6;              /* clean off-white */
  --color-surface: #ffffff;
  --color-surface-alt: #f4f6f5;

  --color-text: #1e2a2e;            /* deep charcoal */
  --color-text-muted: #5b6b6e;
  --color-text-inverse: #f5f8f7;

  --color-border: #e2e8e6;
  --color-border-strong: #cbd6d3;

  --color-success: #1e7d34;
  --color-success-bg: #e8f5ea;
  --color-error: #c62828;
  --color-error-bg: #fdecec;

  /* ---- Typography ---- */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Shape & elevation ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(15, 40, 42, 0.08);
  --shadow-md: 0 12px 28px -8px rgba(15, 40, 42, 0.16);
  --shadow-lg: 0 24px 56px -12px rgba(15, 40, 42, 0.22);

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --header-height: 76px;

  /* ---- Motion ---- */
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}