/* ============================================================
   AVIVX — Design Tokens
   Centralized CSS custom properties for the entire site.
   ============================================================ */

:root {
    /* ── Colors ── */
    --color-primary:       #263589;
    --color-primary-dark:  #1C286E;
    --color-primary-light: #3C4EAA;
    --color-primary-50:    #EEF0F9;
    --color-primary-100:   #D0D5EE;
    --color-primary-200:   #A1ABdd;

    --color-accent:        #F59E0B;
    --color-accent-dark:   #D97706;

    --color-success:       #059669;
    --color-info:          #0284C7;
    --color-warning:       #D97706;
    --color-danger:        #DC2626;

    --color-white:         #FFFFFF;
    --color-bg:            #FFFFFF;
    --color-bg-soft:       #F8F9FB;
    --color-bg-muted:      #F1F3F7;

    --color-border:        #E2E5EB;
    --color-border-light:  #ECEEF2;

    --color-text:          #1A1F36;
    --color-text-secondary:#4A5068;
    --color-text-muted:    #6B7294;
    --color-text-faint:    #9CA3BE;
    --color-text-inverse:  #FFFFFF;

    /* ── Typography ── */
    --font-sans:           'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:           'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    --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 */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-bold:     700;

    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;

    /* ── Spacing ── */
    --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-32:  8rem;      /* 128px */

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:      0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.1);
    --shadow-xl:   0 24px 60px rgba(38, 53, 137, 0.12);

    /* ── Transitions ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration:        200ms;
    --duration-slow:   350ms;

    /* ── Layout ── */
    --nav-height:    64px;
    --content-width: 1200px;
    --content-narrow: 800px;

    /* ── Z-index ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

/* ── Dark mode prep (not active, for future use) ── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Reserved for future dark mode */
    }
}