/* ═══════════════════════════════════════════════════════════════
   SHANI FINSERVE — Canonical Design Tokens v6.0
   LIGHT PREMIUM FINTECH THEME
   Apple × Stripe × Groww × Mercury × Ramp inspired.
   Single source of truth for the entire platform.
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography Global Imports ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=Manrope:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ── Typography ────────────────────────────────── */
    --sf-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sf-font-heading: 'Outfit', 'Inter', sans-serif;
    --sf-font-nav:     'Inter', sans-serif;
    --sf-font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;

    /* ── Primary Brand Colors ──────────────────────── */
    --sf-primary:         #0d5152;
    --sf-primary-light:   #1a7475;
    --sf-primary-dark:    #062e2f;
    --sf-primary-lighter: #248f91;
    --sf-primary-50:      #f0f9f9;
    --sf-primary-100:     #d9f0f0;
    --sf-accent:          #23dbe0;
    --sf-accent-light:    #5ae8ec;
    --sf-accent-dark:     #17b0b5;
    --sf-accent-pale:     rgba(35, 219, 224, 0.08);
    --sf-accent-pale-md:  rgba(35, 219, 224, 0.15);
    --sf-accent-pale-lg:  rgba(35, 219, 224, 0.25);

    /* ── LIGHT THEME BACKGROUNDS ───────────────────── */
    --sf-bg-main:         #f7fafb;
    --sf-bg-surface:      #ffffff;
    --sf-bg-soft:         #eef6f7;
    --sf-bg-softer:       #f2f9fa;
    --sf-bg-elevated:     #ffffff;
    --sf-bg-teal-soft:    rgba(13, 81, 82, 0.04);
    --sf-bg-teal-band:    #f0f9f9;
    --sf-bg-accent-band:  rgba(35, 219, 224, 0.06);
    --sf-bg-dark:         #07191A;
    --sf-bg-dark-deep:    #031314;
    --sf-bg-light:        var(--sf-bg-main);

    /* ── LIGHT THEME TEXT ──────────────────────────── */
    --sf-text-primary:    #07191A;
    --sf-text-secondary:  #4f6368;
    --sf-text-muted:      #5d6c6d;
    --sf-text-caption:    #708084;
    --sf-text-accent:     #0d5152;
    --sf-text-link:       #0d5152;
    --sf-text-white:      #ffffff;
    --sf-text-white-soft: rgba(255,255,255,0.88);
    --sf-text-light-body: var(--sf-text-secondary);

    /* ── HEADER — Light Glass ──────────────────────── */
    --sf-header-height:          72px;
    --sf-header-height-scrolled: 60px;
    --sf-header-bg:              rgba(255, 255, 255, 0.82);
    --sf-header-bg-scrolled:     rgba(255, 255, 255, 0.95);
    --sf-header-border:          rgba(13, 81, 82, 0.08);
    --sf-header-border-scrolled: rgba(13, 81, 82, 0.12);
    --sf-header-shadow:          0 1px 0 rgba(13,81,82,0.06), 0 4px 24px rgba(13,81,82,0.06);
    --sf-header-shadow-scrolled: 0 1px 0 rgba(13,81,82,0.10), 0 8px 32px rgba(13,81,82,0.10);

    /* ── NAV — Light ───────────────────────────────── */
    --sf-nav-text:         #2d4a4b;
    --sf-nav-text-hover:   #0d5152;
    --sf-nav-text-active:  #0d5152;
    --sf-nav-pill-bg:      rgba(13, 81, 82, 0.06);
    --sf-nav-pill-border:  rgba(13, 81, 82, 0.12);

    /* ── MEGA MENU — Light Panels ──────────────────── */
    --sf-mega-bg:          rgba(255, 255, 255, 0.98);
    --sf-mega-border:      rgba(13, 81, 82, 0.08);
    --sf-mega-shadow:      0 8px 40px rgba(13, 81, 82, 0.12), 0 0 0 1px rgba(13,81,82,0.06);
    --sf-mega-blur:        blur(20px) saturate(180%);
    --sf-mega-heading:     #0d5152;
    --sf-mega-title:       #07191A;
    --sf-mega-desc:        #4f6368;
    --sf-mega-icon-bg:     rgba(13, 81, 82, 0.06);
    --sf-mega-icon-color:  #0d5152;
    --sf-mega-hover-bg:    rgba(13, 81, 82, 0.04);
    --sf-mega-hover-border: rgba(13, 81, 82, 0.10);

    /* ── SEMANTIC COLORS ───────────────────────────── */
    --sf-success:       #10b981;
    --sf-success-pale:  rgba(16, 185, 129, 0.08);
    --sf-warning:       #f59e0b;
    --sf-warning-pale:  rgba(245, 158, 11, 0.08);
    --sf-danger:        #ef4444;
    --sf-danger-pale:   rgba(239, 68, 68, 0.08);
    --sf-info:          #3b82f6;
    --sf-info-pale:     rgba(59, 130, 246, 0.08);

    /* ── BORDERS ───────────────────────────────────── */
    --sf-border-light:   rgba(13, 81, 82, 0.06);
    --sf-border-soft:    rgba(13, 81, 82, 0.08);
    --sf-border-medium:  rgba(13, 81, 82, 0.12);
    --sf-border-strong:  rgba(13, 81, 82, 0.18);
    --sf-border-accent:  rgba(35, 219, 224, 0.25);
    --sf-border-dark:    rgba(255, 255, 255, 0.08);

    /* ── SHADOWS — Light Premium ───────────────────── */
    --sf-shadow-xs:     0 1px 3px rgba(13,81,82,0.06);
    --sf-shadow-sm:     0 2px 8px rgba(13,81,82,0.08);
    --sf-shadow-card:   0 4px 16px rgba(13,81,82,0.08), 0 0 0 1px rgba(13,81,82,0.06);
    --sf-shadow-md:     0 8px 24px rgba(13,81,82,0.10);
    --sf-shadow-lg:     0 12px 40px rgba(13,81,82,0.12);
    --sf-shadow-xl:     0 20px 60px rgba(13,81,82,0.14);
    --sf-shadow-hover:  0 8px 32px rgba(13,81,82,0.16), 0 0 0 1px rgba(13,81,82,0.10);
    --sf-shadow-btn:    0 4px 12px rgba(13,81,82,0.20);
    --sf-shadow-btn-hover: 0 8px 24px rgba(13,81,82,0.28);
    --sf-shadow-accent: 0 4px 16px rgba(35,219,224,0.20);
    --sf-shadow-accent-hover: 0 8px 28px rgba(35,219,224,0.32);

    /* ── SPACING SCALE (base 4px) ──────────────────── */
    --sf-space-1:  4px;
    --sf-space-2:  8px;
    --sf-space-3:  12px;
    --sf-space-4:  16px;
    --sf-space-5:  20px;
    --sf-space-6:  24px;
    --sf-space-8:  32px;
    --sf-space-10: 40px;
    --sf-space-12: 48px;
    --sf-space-16: 64px;
    --sf-space-20: 80px;
    --sf-space-24: 96px;
    --sf-space-30: 120px;
    --sf-space-40: 160px;

    /* ── BORDER RADIUS ─────────────────────────────── */
    --sf-radius-xs:   6px;
    --sf-radius-sm:   10px;
    --sf-radius-md:   14px;
    --sf-radius-lg:   20px;
    --sf-radius-xl:   28px;
    --sf-radius-2xl:  40px;
    --sf-radius-full: 9999px;

    /* ── GRADIENTS — Light Premium ─────────────────── */
    --sf-gradient-primary:    linear-gradient(135deg, #0d5152 0%, #1a7475 100%);
    --sf-gradient-accent:     linear-gradient(135deg, #23dbe0 0%, #17b0b5 100%);
    --sf-gradient-hero:       linear-gradient(135deg, #f0f9f9 0%, #eef6f7 50%, #f7fafb 100%);
    --sf-gradient-hero-teal:  linear-gradient(135deg, #0d5152 0%, #1a7475 60%, #23dbe0 100%);
    --sf-gradient-soft:       linear-gradient(135deg, rgba(35,219,224,0.06) 0%, rgba(13,81,82,0.03) 100%);
    --sf-gradient-card:       linear-gradient(135deg, #ffffff 0%, #f7fafb 100%);
    --sf-gradient-surface:    linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
    --sf-gradient-cta:        linear-gradient(135deg, #0d5152 0%, #062e2f 100%);
    --sf-gradient-text:       linear-gradient(135deg, #0d5152, #23dbe0);
    --sf-gradient-text-dark:  linear-gradient(135deg, #07191A, #2d4a4b);

    /* ── GLASSMORPHISM — Light ─────────────────────── */
    --sf-glass-bg:        rgba(255, 255, 255, 0.72);
    --sf-glass-bg-strong: rgba(255, 255, 255, 0.90);
    --sf-glass-border:    1px solid rgba(255, 255, 255, 0.80);
    --sf-glass-blur:      blur(16px) saturate(180%);
    --sf-glass-shadow:    0 8px 32px rgba(13,81,82,0.10);

    /* ── TRANSITIONS ───────────────────────────────── */
    --sf-transition:      0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    --sf-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --sf-transition-base: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --sf-transition-slow: 0.4s  cubic-bezier(0.16, 1, 0.3, 1);
    --sf-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --sf-ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-INDEX HIERARCHY ─────────────────────────── */
    --sf-z-base:       1;
    --sf-z-dropdown:   100;
    --sf-z-sticky:     200;
    --sf-z-header:     1000;
    --sf-z-mega:       1010;
    --sf-z-mega-panel: 1010;
    --sf-z-overlay:    900;
    --sf-z-fab:        998;
    --sf-z-modal:      1050;
    --sf-z-toast:      10000;
}