:root {
    /* ======================================================
       DESIGN SYSTEM v2.0
       AESTHETIC: Editorial/Magazine + Healthcare
       TONE: Professional trust, warm accessibility
       PALETTE: Warm Orange, Deep Blue-Black, Teal, Cream
       ====================================================== */

    /* --- Brand Palette (decorative only — never in color:) --- */
    --brand-orange: #FF6700;
    --brand-orange-hover: #CC5200;
    --brand-teal: #00B8A9;
    --brand-yellow: #FCB52A;
    --brand-coral: #FF7A59;

    /* --- Accessible Text Colors --- */
    --text-orange: #B34900;
    --text-teal: #006B62;
    --text-body: #3D2B1F;
    --text-heading: #1A1A1A;
    --text-muted: #7A6B5C;

    /* --- Surfaces --- */
    --surface-white: #FFFFFF;
    --surface-warm: #FDF8F4;
    --surface-warm-light: #FAF5EF;
    --surface-warm-alt: #F5EDE4;
    --surface-dark: #0A0F1A;
    --surface-dark-blue: #0F1B2D;

    /* --- Text on Dark --- */
    --text-white: #FFFFFF;               /* always-white token; same value in dark theme — used on rgba(0,0,0,*) overlays in either theme */
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: #A0B0C4;       /* ~8:1 on #0A0F1A — AAA */
    --text-on-dark-hero: rgba(255, 255, 255, 0.85);
    --text-on-dark-accent: #FF6700;      /* ~7.5:1 on #0A0F1A — AA */
    --text-on-dark-highlight: #FCB52A;   /* ~10:1 on #0A0F1A — AAA */
    --text-on-blue-accent: #FCB52A;      /* kept for compat */

    /* --- Interactive / CTA --- */
    --cta-bg: #0F1B2D;
    --cta-bg-hover: #0A1322;

    /* --- Borders --- */
    --border-subtle: rgba(0, 0, 0, 0.06);

    /* --- Validation --- */
    --color-error: #C0392B;

    /* --- Orange Opacity Scale --- */
    --orange-glow: 0 0 80px rgba(255, 103, 0, 0.12);
    --orange-glow-strong: 0 0 120px rgba(255, 103, 0, 0.2);
    --primary-orange-10: rgba(255, 103, 0, 0.1);
    --primary-orange-05: rgba(255, 103, 0, 0.05);

    /* --- Neutrals (warm-tinted) --- */
    --gray-50: #FDF8F4;
    --gray-100: #FAF5EF;
    --gray-200: #EDE4DA;
    --gray-300: #D4C8BC;
    --gray-400: #A89888;
    --gray-500: #7A6B5C;
    --gray-600: #5C4E40;
    --gray-700: #3E3228;
    --gray-800: #231A12;
    --gray-900: #130E08;

    /* --- Typography --- */
    --font-body: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-display: 'Crimson Pro', Georgia, serif;

    /* --- Spacing (8px grid) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* --- Container --- */
    --container-max: 1280px;
    --container-padding: max(1.5rem, calc((100vw - 80rem) / 2));

    /* --- Section --- */
    --section-padding: clamp(3rem, 8vw, 5rem);

    /* --- Radius --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;

    /* --- Shadows --- */
    --shadow-resting: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
    --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);

    /* --- Transitions --- */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ═══ LEGACY ALIASES (backward compat for subpages) ═══ */
    --primary-orange: var(--brand-orange);
    --primary-dark: var(--brand-orange-hover);
    --primary-light: #FF8533;
    --primary-dark-blue: var(--surface-dark-blue);
    --primary-light-blue: #2D7DD2;
    --primary-yellow: var(--brand-yellow);
    --accent-coral: var(--brand-coral);
    --dark-deep: var(--surface-dark);
    --dark-blue: var(--surface-dark-blue);
    --dark-gradient-start: var(--surface-dark-blue);
    --dark-gradient-end: var(--surface-dark);
    --bg-warm-white: var(--surface-warm);
    --bg-warm-light: var(--surface-warm-light);
    --bg-section-alt: var(--surface-warm-alt);
    --white: var(--surface-white);
    --secondary-teal: var(--brand-teal);
    --primary-orange-1: rgba(255, 103, 0, 1);
    --primary-orange-2: rgba(255, 103, 0, 0.5);
    --primary-orange-3: rgba(255, 103, 0, 0.1);
    --primary-orange-4: rgba(255, 103, 0, 0.05);
    --primary-orange-5: rgba(255, 103, 0, 0.025);
    --section-width: 100%;
    --shadow-sm: var(--shadow-resting);
    --shadow-md: var(--shadow-hover);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);
}