/**
 * Global design tokens
 * Bright Horizons Psychiatry — Rockville, MD
 *
 * Single source of truth for colors, type, spacing, layout, and motion.
 * Always prefer these variables over hard-coded values in theme CSS.
 */

:root {
	/* ——— Brand palette ——— */
	--bhp-ocean: #013a65;       /* Ocean blue */
	--bhp-midnight: #00111e;    /* Midnight navy */
	--bhp-blue-gray: #4c5f72;   /* Blue-gray */
	--bhp-silver: #e8e8e8;      /* Silver gray */
	--bhp-sky: #4bbedd;         /* Sky blue */
	--bhp-white: #ffffff;

	/* ——— Brand colors (semantic) ——— */
	--bhp-primary: var(--bhp-ocean);
	--bhp-primary-dark: var(--bhp-midnight);
	--bhp-primary-light: #e6eef4;
	--bhp-accent: var(--bhp-ocean);
	--bhp-accent-dark: var(--bhp-midnight);
	--bhp-accent-light: #e6eef4;

	/* ——— Neutrals / text ——— */
	--bhp-ink: var(--bhp-midnight);
	--bhp-ink-muted: var(--bhp-blue-gray);
	--bhp-ink-subtle: #7a8a9a;

	/* ——— Surfaces ——— */
	--bhp-surface: var(--bhp-white);
	--bhp-surface-soft: #f4f6f8;
	--bhp-surface-muted: var(--bhp-silver);
	--bhp-border: var(--bhp-silver);
	--bhp-border-strong: #c5cdd4;
	--bhp-hero-bg: #8eafc7;

	/* ——— Semantic ——— */
	--bhp-success: #1a7f4b;
	--bhp-warning: #c47a00;
	--bhp-error: #c62828;
	--bhp-info: var(--bhp-sky);

	/* ——— Typography ——— */
	--bhp-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
	--bhp-font-body: var(--bhp-font);
	--bhp-font-display: var(--bhp-font);

	--bhp-fw-light: 400;
	--bhp-fw-regular: 500;
	--bhp-fw-medium: 500;
	--bhp-fw-semibold: 600;
	--bhp-fw-bold: 600;

	--bhp-fs-xs: 0.75rem;      /* 12px */
	--bhp-fs-sm: 0.875rem;     /* 14px */
	--bhp-fs-md: 0.9375rem;    /* 15px */
	--bhp-fs-base: 1rem;       /* 16px */
	--bhp-fs-lg: 1.125rem;     /* 18px */
	--bhp-fs-xl: 1.25rem;      /* 20px */
	--bhp-fs-body-lg: 1.25rem; /* 20px — large body */
	--bhp-fs-2xl: 1.5rem;      /* 24px */
	--bhp-fs-3xl: 2rem;        /* 32px */
	--bhp-fs-4xl: 2.5rem;      /* 40px */
	--bhp-fs-5xl: clamp(2.5rem, 5vw, 3.5rem);

	--bhp-lh-tight: 1.2;
	--bhp-lh-snug: 1.35;
	--bhp-lh-base: 1.6;
	--bhp-lh-relaxed: 1.75;

	--bhp-ls-tight: -0.035em;
	--bhp-ls-normal: -0.02em;
	--bhp-ls-wide: 0.01em;

	/* ——— Spacing scale (4px base) ——— */
	--bhp-space-1: 0.25rem;    /* 4px */
	--bhp-space-2: 0.5rem;     /* 8px */
	--bhp-space-3: 0.75rem;    /* 12px */
	--bhp-space-4: 1rem;       /* 16px */
	--bhp-space-5: 1.25rem;    /* 20px */
	--bhp-space-6: 1.5rem;     /* 24px */
	--bhp-space-8: 2rem;       /* 32px */
	--bhp-space-10: 2.5rem;    /* 40px */
	--bhp-space-12: 3rem;      /* 48px */
	--bhp-space-16: 4rem;      /* 64px */
	--bhp-space-20: 5rem;      /* 80px */
	--bhp-space-24: 6rem;      /* 96px */

	/* Section vertical rhythm */
	--bhp-section-y: clamp(3rem, 8vw, 6rem);
	--bhp-section-y-sm: clamp(2rem, 5vw, 3.5rem);

	/* ——— Layout / grid ——— */
	--bhp-container-pad: clamp(1rem, 4vw, 2.5rem);
	--bhp-container-max: 1440px;
	--bhp-container-wide: 1440px;
	--bhp-container-default: 1200px;
	--bhp-container-narrow: 960px;
	--bhp-container-legal: 42rem; /* ~672px — reading width for legal/prose pages */
	--bhp-gutter: 0.75rem;     /* 12px — half of 24px column gap */

	/* Breakpoints (reference only — use same values in @media) */
	--bhp-bp-sm: 576px;
	--bhp-bp-md: 768px;
	--bhp-bp-lg: 992px;
	--bhp-bp-xl: 1200px;

	/* ——— Radii ——— */
	--bhp-radius-sm: 4px;
	--bhp-radius: 6px;
	--bhp-radius-md: 8px;
	--bhp-radius-lg: 12px;
	--bhp-radius-xl: 16px;
	--bhp-radius-full: 9999px;

	/* ——— Shadows ——— */
	--bhp-shadow-xs: 0 1px 2px rgba(0, 17, 30, 0.06);
	--bhp-shadow-soft: 0 4px 24px rgba(0, 17, 30, 0.08);
	--bhp-shadow-md: 0 8px 32px rgba(0, 17, 30, 0.1);
	--bhp-shadow-lg: 0 16px 48px rgba(0, 17, 30, 0.12);

	/* ——— Motion ——— */
	--bhp-ease: ease;
	--bhp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--bhp-duration-fast: 0.15s;
	--bhp-duration: 0.25s;
	--bhp-duration-slow: 0.4s;
	--bhp-transition: var(--bhp-duration) var(--bhp-ease);
	--bhp-transition-fast: var(--bhp-duration-fast) var(--bhp-ease);
	--bhp-transition-slow: var(--bhp-duration-slow) var(--bhp-ease-out);

	/* ——— Z-index ——— */
	--bhp-z-dropdown: 100;
	--bhp-z-sticky: 200;
	--bhp-z-header: 1000;
	--bhp-z-overlay: 1100;
	--bhp-z-modal: 1200;

	/* ——— Header / chrome ——— */
	--bhp-header-height: 4.5rem;
	--bhp-header-height-lg: 5.25rem;
	--bhp-topbar-height: 2.8125rem; /* 45px */
	--bhp-header-blur: 16px;
	--bhp-logo-max-height: 40px;
	--bhp-logo-max-width: 180px;
	--bhp-nav-fs: 1rem; /* 16px */

	/* ——— Buttons ——— */
	--bhp-btn-pad-y: 1rem;
	--bhp-btn-pad-x: 2rem;
	--bhp-btn-pad-y-sm: 0.7rem;
	--bhp-btn-pad-x-sm: 1.4rem;
	--bhp-btn-radius: 0.25rem;
	--bhp-btn-border-width: 1px;
}