/* ==========================================================================
   CPR Health Care - Design Tokens & Oat CSS Variable Overrides
   Brand Palette: Mint Green, Dark Slate, Medium Gray, Off-White
   ========================================================================== */

:root {
  /* ── Oat Core Overrides ── */
  --color-primary: #1aab7a;
  --color-primary-fg: #060A12;
  --color-bg: #FFFFFF;
  --color-fg: #060A12;
  --color-bg-card: #FFFFFF;
  --color-fg-card: #060A12;
  --color-bg-muted: #EBEDF0;
  --color-fg-muted: #374151;
  --color-border: #B0B7C3;
  --color-input: #FFFFFF;
  --color-focus: #1aab7a;
  --color-success: #16A34A;
  --color-danger: #DC2626;
  --color-warning: #D97706;
  --color-info: #2563EB;
  --border-radius: 12px;
  --padding: 0.875rem;
  --gap: 1rem;

  /* ── Brand Colors ── */
  --cpr-mint: #1aab7a;
  --cpr-mint-light: #7DDBB5;
  --cpr-mint-bg: #DAF5E8;
  --cpr-mint-50: #C8F0DB;
  --cpr-mint-100: #93E3C0;
  --cpr-mint-600: #03704F;
  --cpr-slate: #060A12;
  --cpr-slate-light: #0E1421;
  --cpr-gray: #1F2937;
  --cpr-gray-light: #374151;
  --cpr-gray-200: #B0B7C3;
  --cpr-gray-100: #D1D5DB;
  --cpr-off-white: #EBEDF0;
  --cpr-section-bg: #E2E4E8;
  --cpr-partner-blue: #042A52;
  --cpr-white: #FFFFFF;

  /* ── UI Tokens ── */
  --cpr-pill-radius: 9999px;
  --cpr-card-radius: 16px;
  --cpr-card-radius-lg: 24px;
  --cpr-card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12);
  --cpr-card-shadow-hover: 0 20px 40px -8px rgba(0, 0, 0, 0.18);
  --cpr-border-subtle: 1px solid #D1D5DB;
  --cpr-border-default: 1px solid #B0B7C3;
  --cpr-transition: 0.2s ease;
  --cpr-transition-slow: 0.3s ease;

  /* ── Typography ── */
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-body: 1.6;
  --line-height-heading: 1.2;
  --line-height-tight: 1.1;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  /* ── Spacing Scale ── */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* ── Layout ── */
  --cpr-container-max: 1280px;
  --cpr-container-padding: 1.5rem;
  --cpr-header-height: 72px;
  --cpr-sidebar-width: 220px;

  /* ── Z-Index Scale ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* ── Responsive overrides ── */
@media (max-width: 768px) {
  :root {
    --cpr-container-padding: 1rem;
    --cpr-header-height: 60px;
    --space-2xl: 2rem;
    --space-3xl: 3rem;
    --space-4xl: 4rem;
  }
}