/* ============================================
   Dr. Soumya Pal — Design Tokens
   Source of truth for all visual values
   ============================================ */

:root {
    /* ── Primary Colors ── */
    --color-primary-900: #063B50;
    --color-primary-800: #07465D;
    --color-primary-700: #0B506B;
    --color-primary-600: #17657C;
    --color-primary-500: #2E7D8F;
    --color-primary-400: #5D9AAA;
    --color-primary-300: #8CB8C4;
    --color-primary-200: #C6DEE5;
    --color-primary-100: #EAF5F8;

    /* ── Neutral Colors ── */
    --color-white: #FFFFFF;
    --color-neutral-50: #FCFDFC;
    --color-neutral-100: #F6F9FA;
    --color-neutral-200: #EDF2F3;
    --color-neutral-300: #DCE7EB;
    --color-neutral-400: #B8C8CE;
    --color-neutral-500: #82959D;
    --color-neutral-600: #60737D;
    --color-neutral-700: #405660;
    --color-neutral-800: #263F4A;
    --color-neutral-900: #18303D;

    /* ── Supporting Colors ── */
    --color-accent-soft: #EEF7F8;
    --color-success: #2E7D5B;
    --color-success-soft: #EAF6EF;
    --color-warning: #B9852B;
    --color-warning-soft: #FFF6E5;
    --color-danger: #B54A4A;
    --color-danger-soft: #FBEDED;
    --color-info: #356D9A;
    --color-info-soft: #EDF5FB;

    /* ── Semantic Tokens ── */
    --bg-page: var(--color-white);
    --bg-surface: var(--color-neutral-100);
    --bg-surface-alt: #F4F3EE;
    --bg-dark: var(--color-primary-900);
    --bg-dark-mid: var(--color-primary-800);

    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-600);
    --text-muted: var(--color-neutral-500);
    --text-on-primary: #FFFFFF;
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: var(--color-primary-200);

    --border-default: var(--color-neutral-300);
    --border-strong: var(--color-neutral-400);
    --border-light: var(--color-neutral-200);

    --action-primary: var(--color-primary-700);
    --action-primary-hover: var(--color-primary-800);
    --action-primary-active: var(--color-primary-900);

    --focus-ring: var(--color-primary-500);

    /* ── Typography ── */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* Display Scale — Desktop */
    --text-display-xl: 64px;
    --text-display-lg: 52px;
    --text-display-md: 42px;
    --text-heading-xl: 36px;
    --text-heading-lg: 30px;
    --text-heading-md: 24px;
    --text-heading-sm: 20px;

    /* Body Scale */
    --text-body-xl: 20px;
    --text-body-lg: 18px;
    --text-body-md: 16px;
    --text-body-sm: 14px;
    --text-caption: 12px;

    /* Line Heights */
    --lh-display: 1.08;
    --lh-heading: 1.2;
    --lh-body: 1.6;
    --lh-caption: 1.4;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 56px;
    --space-11: 64px;
    --space-12: 80px;
    --space-13: 96px;
    --space-14: 120px;

    /* ── Container ── */
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --container-xl: 1320px;

    /* ── Border Radius ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(24, 48, 61, 0.06);
    --shadow-md: 0 8px 24px rgba(24, 48, 61, 0.08);
    --shadow-lg: 0 16px 40px rgba(24, 48, 61, 0.12);
    --shadow-card: 0 4px 16px rgba(24, 48, 61, 0.07);

    /* ── Motion ── */
    --duration-fast: 150ms;
    --duration-normal: 220ms;
    --duration-emphasis: 350ms;
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Breakpoints (for reference, used via media queries) ── */
    /* --bp-sm: 576px; */
    /* --bp-md: 768px; */
    /* --bp-lg: 992px; */
    /* --bp-xl: 1200px; */
    /* --bp-2xl: 1400px; */

    /* ── Z-Index ── */
    --z-header: 1000;
    --z-mobile-menu: 1100;
    --z-overlay: 1200;
    --z-modal: 1300;
    --z-sticky-cta: 900;
}

/* ── Responsive Typography (Mobile) ── */
@media (max-width: 767px) {
    :root {
        --text-display-xl: 38px;
        --text-display-lg: 34px;
        --text-display-md: 30px;
        --text-heading-xl: 28px;
        --text-heading-lg: 24px;
        --text-heading-md: 20px;
        --text-heading-sm: 18px;
        --text-body-lg: 17px;
        --text-body-md: 15px;
        --text-body-sm: 13px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    :root {
        --text-display-xl: 48px;
        --text-display-lg: 42px;
        --text-display-md: 36px;
        --text-heading-xl: 32px;
        --text-heading-lg: 28px;
        --text-heading-md: 22px;
        --text-heading-sm: 19px;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}