/* ==========================================================================
   CEDAR GROVE HEALTH PARTNERS — DESIGN TOKENS
   Modern U.S. Primary Care & Community Health Center
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* Brand Palette - Deep Desaturated Teal & Calm Slate */
  --color-primary: #174F55;
  --color-primary-dark: #0F383D;
  --color-primary-light: #20676F;
  --color-primary-subtle: #EAF3F1;
  --color-primary-surface: #F2F8F7;
  
  --color-secondary: #486B7A;
  --color-secondary-dark: #324D59;
  --color-secondary-light: #618797;
  --color-secondary-subtle: #EEF4F7;

  /* Neutrals & Healthcare Backgrounds */
  --color-bg-main: #FAFBF9;
  --color-bg-card: #FFFFFF;
  --color-bg-neutral: #F2F5F2;
  --color-bg-sage: #DDE8E1;
  --color-bg-warm: #F8F6F2;
  --color-bg-dark: #123337;
  --color-bg-dark-surface: #184449;

  /* Warm Sand Accents */
  --color-sand: #E7DDCF;
  --color-sand-light: #F4EFEA;
  --color-sand-accent: #D8BFA6;
  --color-warm-gold: #C29B72;

  /* Typography Colors */
  --color-text-main: #1E292B;
  --color-text-muted: #596B6D;
  --color-text-subtle: #7A8C8E;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: #D1E1DF;

  /* Borders & Dividers */
  --color-border: rgba(31, 48, 50, 0.10);
  --color-border-subtle: rgba(31, 48, 50, 0.06);
  --color-border-strong: rgba(31, 48, 50, 0.18);
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Status & Clinical Signals */
  --color-success: #267A56;
  --color-success-bg: #EAF6F0;
  --color-success-border: #A9DFC6;
  
  --color-alert: #B46A14;
  --color-alert-bg: #FEF7EE;
  --color-alert-border: #F7D4A8;

  --color-emergency: #B93838;
  --color-emergency-bg: #FDF2F2;
  --color-emergency-border: #F8B4B4;

  --color-info: #2B6CB0;
  --color-info-bg: #EBF8FF;

  /* Typography Families */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type Scale (Fluid via clamp) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);      /* 12-13px */
  --text-sm: clamp(0.84rem, 0.80rem + 0.2vw, 0.9375rem);       /* 13.5-15px */
  --text-base: clamp(0.95rem, 0.92rem + 0.25vw, 1.0625rem);    /* 15-17px */
  --text-lg: clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);         /* 17.5-20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);         /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.85vw, 1.875rem);       /* 24-30px */
  --text-3xl: clamp(1.85rem, 1.6rem + 1.25vw, 2.375rem);       /* 30-38px */
  --text-4xl: clamp(2.25rem, 1.9rem + 1.8vw, 3rem);            /* 36-48px */
  --text-5xl: clamp(2.75rem, 2.2rem + 2.8vw, 4.125rem);        /* 44-66px */

  /* Line Heights */
  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  /* Spacing Scale */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6.5rem;   /* 104px */
  --space-5xl: 8.5rem;   /* 136px */

  /* Layout Max Widths */
  --container-max: 1320px;
  --container-narrow: 1040px;
  --container-reading: 780px;
  --container-padding: clamp(1.25rem, 3.5vw, 3.5rem);

  /* Border Radii (Controlled, never hyper-pill) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadows (Subtle, calm, architectural) */
  --shadow-subtle: 0 2px 6px rgba(18, 51, 55, 0.04);
  --shadow-card: 0 6px 20px rgba(18, 51, 55, 0.05), 0 1px 3px rgba(18, 51, 55, 0.02);
  --shadow-hover: 0 14px 34px rgba(18, 51, 55, 0.08), 0 2px 6px rgba(18, 51, 55, 0.03);
  --shadow-modal: 0 24px 60px rgba(15, 40, 43, 0.16), 0 4px 16px rgba(15, 40, 43, 0.08);

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 260ms cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus Indicator for Accessibility */
  --focus-ring: 2px solid var(--color-primary);
  --focus-offset: 3px;
}