/* ==========================================================================
   CreditVana — Design Tokens & Neo-Fintech Foundation
   --------------------------------------------------------------------------
   The single source of truth for the portal scales, depth layers, glass
   surfaces, typography, and motion curves.
   ========================================================================== */

:root {
    /* ---- Spacing Scale ------------------------------------------------ */
    --sp-0: 0;
    --sp-1: 2px;
    --sp-2: 4px;
    --sp-3: 6px;
    --sp-4: 8px;
    --sp-5: 10px;
    --sp-6: 12px;
    --sp-7: 14px;
    --sp-8: 16px;
    --sp-9: 20px;
    --sp-10: 24px;
    --sp-11: 32px;
    --sp-12: 40px;
    --sp-13: 48px;
    --sp-14: 64px;
    --sp-15: 80px;
    --sp-16: 96px;

    /* ---- Border Radius Scale ------------------------------------------ */
    --r-1: 6px;
    --r-2: 10px;
    --r-3: 14px;
    --r-4: 18px;
    --r-5: 22px;
    --r-6: 28px;
    --r-pill: 9999px;

    /* ---- Brand Violet Ramp -------------------------------------------- */
    --brand-50: #f6f2ff;
    --brand-100: #ede4ff;
    --brand-200: #ddd0fb;
    --brand-250: #c9b3f0;
    --brand-300: #c4aef7;
    --brand-400: #a585f7;
    --brand-450: #a855f7;
    --brand-500: #8b5cf6;
    --brand-600: #7c3aed;
    --brand-700: #6d28d9;
    --brand-800: #5b21b6;
    --brand-900: #4c1d95;
    --brand-950: #2f1063;

    /* ---- Violet-Tinted Neutrals --------------------------------------- */
    --n-0: #ffffff;
    --n-25: #faf8fd;
    --n-50: #f4f2f9;
    --n-100: #eee9f5;
    --n-200: #e7e2f0;
    --n-250: #e1dee6;
    --n-300: #ded7ea;
    --n-400: #c3bcd2;
    --n-500: #9b93ad;
    --n-600: #7d7590;
    --n-700: #5d5573;
    --n-750: #4e4957;
    --n-800: #4a4360;
    --n-900: #3a3350;
    --n-950: #1c1630;
    --ink-900: #1a0f2a;

    /* ---- Semantic Colors & Score Bands -------------------------------- */
    --ok-fg: #0a5c3a;
    --ok-bg: #dcf5e9;
    --ok-solid: #0e9f6e;
    --ok-700: #0f7858;
    
    --warn-fg: #6d4406;
    --warn-bg: #fbf0dd;
    --warn-solid: #b45309;
    --warn-700: #8a5b00;
    
    --bad-fg: #9b1030;
    --bad-bg: #fdeaee;
    --bad-solid: #d13a5e;

    /* Perceptual Credit Score Color Accents */
    --score-excellent: #10b981;
    --score-excellent-bg: rgba(16, 185, 129, 0.12);
    --score-excellent-glow: rgba(16, 185, 129, 0.25);

    --score-very-good: #06b6d4;
    --score-very-good-bg: rgba(6, 182, 212, 0.12);
    --score-very-good-glow: rgba(6, 182, 212, 0.25);

    --score-good: #3b82f6;
    --score-good-bg: rgba(59, 130, 246, 0.12);
    --score-good-glow: rgba(59, 130, 246, 0.25);

    --score-fair: #f59e0b;
    --score-fair-bg: rgba(245, 158, 11, 0.12);
    --score-fair-glow: rgba(245, 158, 11, 0.25);

    --score-poor: #ef4444;
    --score-poor-bg: rgba(239, 68, 68, 0.12);
    --score-poor-glow: rgba(239, 68, 68, 0.25);

    /* ---- Glassmorphism & Depth Layers --------------------------------- */
    --surface-base: #f8f6fc;
    --surface-card: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.85);
    --surface-glass-border: rgba(255, 255, 255, 0.65);
    --surface-glass-subtle: rgba(255, 255, 255, 0.60);
    --surface-glass-dark: rgba(28, 22, 48, 0.88);
    --surface-dock: rgba(255, 255, 255, 0.92);

    --backdrop-blur-sm: blur(8px);
    --backdrop-blur-md: blur(16px);
    --backdrop-blur-lg: blur(24px);

    /* ---- Typography & Tabular Figures --------------------------------- */
    --font-display: "DM Sans", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
    --font-numbers: "DM Sans", "Plus Jakarta Sans", system-ui, sans-serif;

    --t-eyebrow: 0.68rem;
    --t-caption: 0.78rem;
    --t-small: 0.86rem;
    --t-body: 0.95rem;
    --t-lead: 1.05rem;
    --t-h3: 1.25rem;
    --t-h2: 1.55rem;
    --t-h1: 2.15rem;
    --t-display: 3.1rem;

    --track-eyebrow: 0.12em;
    --track-tight: -0.02em;
    --track-title: -0.035em;

    /* ---- Elevation & Neo-Fintech Shadows ------------------------------ */
    --e-0: none;
    --e-1: 0 1px 3px rgba(28, 22, 48, 0.04), 0 1px 2px rgba(28, 22, 48, 0.02);
    --e-2: 0 6px 18px -4px rgba(28, 22, 48, 0.08), 0 2px 6px -1px rgba(28, 22, 48, 0.04);
    --e-3: 0 20px 40px -12px rgba(28, 22, 48, 0.14), 0 4px 12px -2px rgba(28, 22, 48, 0.06);
    --e-pop: 0 1px 3px rgba(28, 22, 48, 0.12), 0 0 0 1px rgba(28, 22, 48, 0.05);
    
    --shadow-aurora-purple: 0 16px 36px -12px rgba(124, 58, 237, 0.35);
    --shadow-aurora-green: 0 16px 36px -12px rgba(16, 185, 129, 0.35);
    --shadow-dock: 0 10px 30px -5px rgba(28, 22, 48, 0.18), 0 0 0 1px rgba(28, 22, 48, 0.06);

    /* ---- Motion & Spring Curves --------------------------------------- */
    --ease: cubic-bezier(0.22, 0.9, 0.3, 1);
    --spring-bounce: cubic-bezier(0.16, 1, 0.3, 1);
    --spring-snappy: cubic-bezier(0.25, 1, 0.5, 1);
    
    --dur-fast: 0.15s;
    --dur: 0.24s;
    --dur-slow: 0.42s;
}

/* Global Financial Numbers Rule */
.vx-number, 
.cvx-metric-val, 
.vx-score-val, 
.score-number, 
[data-tabular-num] {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}