/* ==========================================================================
   OrthoAlign Rehab — Design Tokens (CSS Custom Properties)
   Premium Healthcare Design System
   ========================================================================== */

:root {
    /* ── Primary Colors ──────────────────────────────────────────── */
    --primary:          #0F7BFF;
    --primary-light:    #4DA0FF;
    --primary-dark:     #0A5FCC;
    --primary-50:       #E8F2FF;
    --primary-100:      #C5DFFF;
    --primary-200:      #8FBFFF;

    /* ── Navy ────────────────────────────────────────────────────── */
    --navy:             #0B2545;
    --navy-light:       #13315C;
    --navy-dark:        #071A30;

    /* ── Accent (Orange CTA) ─────────────────────────────────────── */
    --accent:           #FF7A00;
    --accent-light:     #FF9B40;
    --accent-dark:      #E06A00;
    --accent-glow:      rgba(255, 122, 0, 0.25);

    /* ── Neutrals ────────────────────────────────────────────────── */
    --white:            #FFFFFF;
    --gray-50:          #F8FAFC;
    --gray-100:         #F1F5F9;
    --gray-200:         #E2E8F0;
    --gray-300:         #CBD5E1;
    --gray-400:         #94A3B8;
    --gray-500:         #64748B;
    --gray-600:         #475569;
    --gray-700:         #334155;
    --gray-800:         #1E293B;
    --gray-900:         #0F172A;
    --black:            #000000;

    /* ── Semantic Colors ─────────────────────────────────────────── */
    --success:          #10B981;
    --success-light:    #D1FAE5;
    --warning:          #F59E0B;
    --error:            #EF4444;
    --info:             #3B82F6;

    /* ── Soft Cyan ───────────────────────────────────────────────── */
    --cyan-50:          #ECFEFF;
    --cyan-100:         #CFFAFE;
    --cyan-200:         #A5F3FC;
    --cyan-500:         #06B6D4;

    /* ── Typography ──────────────────────────────────────────────── */
    --font-heading:     'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes — fluid scale */
    --text-xs:          0.75rem;      /* 12px */
    --text-sm:          0.875rem;     /* 14px */
    --text-base:        1rem;         /* 16px */
    --text-lg:          1.125rem;     /* 18px */
    --text-xl:          1.25rem;      /* 20px */
    --text-2xl:         1.5rem;       /* 24px */
    --text-3xl:         1.875rem;     /* 30px */
    --text-4xl:         2.25rem;      /* 36px */
    --text-5xl:         3rem;         /* 48px */
    --text-6xl:         3.75rem;      /* 60px */

    /* Font Weights */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* Line Heights */
    --leading-tight:    1.2;
    --leading-snug:     1.375;
    --leading-normal:   1.5;
    --leading-relaxed:  1.625;
    --leading-loose:    1.8;

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

    /* ── Border Radius ───────────────────────────────────────────── */
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        16px;
    --radius-xl:        24px;
    --radius-2xl:       28px;
    --radius-full:      9999px;

    /* ── Shadows (4-tier elevation) ──────────────────────────────── */
    --shadow-subtle:    0 1px 3px rgba(0, 0, 0, 0.04),
                        0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-card:      0 4px 16px rgba(0, 0, 0, 0.06),
                        0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-elevated:  0 12px 40px rgba(0, 0, 0, 0.08),
                        0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-floating:  0 24px 64px rgba(0, 0, 0, 0.12),
                        0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-glow:      0 0 40px rgba(15, 123, 255, 0.15);
    --shadow-accent:    0 8px 32px rgba(255, 122, 0, 0.25);

    /* ── Transitions ─────────────────────────────────────────────── */
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:    150ms;
    --duration-normal:  300ms;
    --duration-slow:    500ms;
    --duration-slower:  800ms;

    /* ── Layout ──────────────────────────────────────────────────── */
    --container-max:    1200px;
    --container-wide:   1400px;
    --container-narrow: 800px;
    --nav-height:       80px;
    --section-padding:  clamp(4rem, 10vw, 9rem);

    /* ── Z-Index Scale ───────────────────────────────────────────── */
    --z-base:           1;
    --z-dropdown:       100;
    --z-sticky:         500;
    --z-nav:            1000;
    --z-mobile-cta:     1200;
    --z-overlay:        1500;
    --z-modal:          2000;
}