/* =============================
 * FONT IMPORTS
 * ============================= */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
/* Open Sauce font from 1001fonts.com (variable weight), using @font-face: */
@font-face {
  font-family: 'Open Sauce';
  src: url('https://dl.1001fonts.com/open-sauce/open-sauce-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =============================
   * WHITESTONE HEALTH – DESIGN TOKENS (MID-FI)
   * Global neutrals, typography, spacing, elevation
   * Domain themes (Family Medicine, NUCCA, ABA)
   * ============================= */

  /* -------- Typography -------- */
  --font-heading: "Unbounded", sans-serif;
  --font-sans: "Montserrat", sans-serif;
  --font-paragraph: "Open Sauce", "Montserrat", sans-serif;
  --font-condensed: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;

  /* Font sizes & weights (scale for mid‑fi; adjust in prod) */
  --fs-xxs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -------- Neutrals -------- */
  --color-black: #000000;
  --color-white: #ffffff;
  --neutral-900: #0a0a0a;
  --neutral-800: #1f1f1f;
  --neutral-700: #2c2c2c;
  --neutral-600: #3f3f3f;
  --neutral-500: #6b6b6b;
  --neutral-400: #9a9a9a;
  --neutral-300: #c8c8c8;
  --neutral-200: #e6e6e6;
  --neutral-100: #f3f3f3;
  --neutral-050: #fafafa;

  --text-primary: var(--neutral-900);
  --text-secondary: #444;
  --text-muted: #666;
  --border-subtle: var(--neutral-300);
  --border-strong: var(--neutral-700);
  --bg-page: var(--neutral-050);
  --bg-surface: var(--white);

  /* -------- Elevation / Effects -------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.16);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --focus-ring: 0 0 0 3px rgba(26,106,255,0.35); /* aligns with link/hover blue */

  /* =====================================
   * BRAND & DOMAIN COLOR SYSTEM
   * Each domain has primary, dark, light, and subtle tint.
   * Global action/link colors unify interactive states.
   * ===================================== */

  /* ---- GLOBAL INTERACTIVE (shared) ---- */
  --action-link: #1a6aff;            /* link + hover for non-domain elements */
  --action-link-hover: #1558d4;
  --action-focus: #1a6aff;
  --cta-accent: #00c2ff;             /* lightweight accent for badges/pills */

  /* ---- FAMILY MEDICINE (FM) – GREEN ---- */
  --fm-500: #00c853; /* updated bright/poppy green */
  --fm-600: #00a846;
  --fm-700: #008f3b;
  --fm-300: #69e49c;
  --fm-100: #e6fff0;

  /* Suggested gradients */
  --fm-gradient: linear-gradient(135deg, #00c853 0%, #00e676 60%, #69e49c 100%);

  /* ---- NUCCA (Upper Cervical) – PURPLE option ---- */
  --nucca-500: #7c4dff;              /* vivid purple */
  --nucca-600: #5e35b1;
  --nucca-700: #4527a0;
  --nucca-300: #b39cff;
  --nucca-100: #f0eaff;
  --nucca-gradient: linear-gradient(135deg, #7c4dff 0%, #9b6bff 60%, #b39cff 100%);

  /* (Alt NUCCA Yellow if needed on specific pages) */
  --nuccaY-500: #ffd600;             /* bright yellow */
  --nuccaY-700: #f0b400;
  --nuccaY-300: #ffe866;
  --nuccaY-100: #fff9db;

  /* ---- ABA (Behavior) – ORANGE/YELLOW ---- */
  --aba-500: #ff9100;                /* bright orange */
  --aba-600: #ff6d00;                /* hover/deeper */
  --aba-700: #e65100;
  --aba-300: #ffbd66;
  --aba-100: #fff3e0;
  --aba-gradient: linear-gradient(135deg, #ff9100 0%, #ffab40 60%, #ffd180 100%);

  /* ---- Legacy / compatibility tokens (mapped) ---- */
  --color-blue-dark: #0a2f5c;        /* keep for legacy sections if referenced */
  --color-blue-accent: var(--action-link);
  --color-blue-accent-light: #b3ccff;

  /* Buttons (generic, overridden per-domain as needed) */
  --btn-primary-bg: var(--fm-500);
  --btn-primary-bg-hover: var(--fm-600);
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: var(--action-link);
  --btn-secondary-bg-hover: var(--action-link-hover);
  --btn-secondary-text: #ffffff;
}

/* =============================
 * DOMAIN THEMES VIA UTILITY CLASSES
 * Apply one of the theme classes on <body> or a page container.
 * ============================= */

.theme-fm {
  --brand-primary: var(--fm-500);
  --brand-primary-hover: var(--fm-600);
  --brand-primary-strong: var(--fm-700);
  --brand-tint: var(--fm-100);
  --brand-gradient: var(--fm-gradient);
}

.theme-nucca {
  --brand-primary: var(--nucca-500);
  --brand-primary-hover: var(--nucca-600);
  --brand-primary-strong: var(--nucca-700);
  --brand-tint: var(--nucca-100);
  --brand-gradient: var(--nucca-gradient);
}

/* Optional yellow-forward NUCCA palette for specific campaigns */
.theme-nucca-yellow {
  --brand-primary: var(--nuccaY-500);
  --brand-primary-hover: var(--nuccaY-700);
  --brand-primary-strong: var(--nuccaY-700);
  --brand-tint: var(--nuccaY-100);
  --brand-gradient: linear-gradient(135deg, #ffd600 0%, #ffea70 60%, #fff59d 100%);
}

.theme-aba {
  --brand-primary: var(--aba-500);
  --brand-primary-hover: var(--aba-600);
  --brand-primary-strong: var(--aba-700);
  --brand-tint: var(--aba-100);
  --brand-gradient: var(--aba-gradient);
}

/* =============================
 * COMMON COMPONENT TOKENS (read from active theme)
 * ============================= */

:root, .theme-fm, .theme-nucca, .theme-nucca-yellow, .theme-aba {
  --link-color: var(--action-link);
  --link-hover: var(--action-link-hover);
  --hero-title: var(--text-primary);
  --hero-subtitle: var(--text-muted);
  --chip-bg: var(--brand-tint);
  --chip-text: var(--brand-primary);
  --cta-bg: var(--brand-primary);
  --cta-bg-hover: var(--brand-primary-hover);
  --cta-text: #ffffff;
  --badge-bg: rgba(0,0,0,0.06);
  --badge-text: var(--text-secondary);
}

/* Example helpers (optional) */
.btn-primary { background: var(--cta-bg); color: var(--cta-text); border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--cta-bg-hover); box-shadow: var(--shadow-md); }

.link { color: var(--link-color); text-decoration: none; }
.link:hover { color: var(--link-hover); text-decoration: underline; }