:root {
    /* =====================================================
       COLOR PALETTE — Premium Fintech Insurance
    ===================================================== */

    /* Primary Orange Spectrum (from Logo) */
    --primary-50:  #fff7f5;
    --primary-100: #ffede8;
    --primary-200: #ffd3c7;
    --primary-300: #ffa894;
    --primary-400: #ff7455;
    --primary-500: #f15a24;
    --primary-600: #e04a1b;
    --primary-700: #bc3b16;
    --primary-800: #9b3114;
    --primary-900: #7f2b14;

    /* Aliases */
    --primary-brand:   var(--primary-600);
    --primary-dark:    var(--primary-800);
    --primary-light:   var(--primary-50);

    /* Gradients */
    --primary-gradient:     linear-gradient(135deg, #f15a24 0%, #ff7455 60%, #ffa894 100%);
    --wallet-gradient:      linear-gradient(135deg, #231f20 0%, #443c3e 50%, #63585b 100%);
    --accent-gradient:      linear-gradient(135deg, #f15a24 0%, #231f20 100%);
    --success-gradient:     linear-gradient(135deg, #059669 0%, #10b981 100%);
    --card-hover-gradient:  linear-gradient(135deg, #fff7f5 0%, #ffede8 100%);

    /* Backgrounds */
    --bg-main:     #f0f4f9;
    --bg-white:    #ffffff;
    --bg-sidebar:  #ffffff;
    --bg-overlay:  rgba(15, 23, 42, 0.65);

    /* Text */
    --text-main:   #0f172a;
    --text-muted:  #64748b;
    --text-light:  #94a3b8;
    --text-white:  #ffffff;
    --text-link:   var(--primary-brand);

    /* Borders */
    --border-color:  #e2e8f0;
    --border-light:  #f1f5f9;
    --border-focus:  var(--primary-400);

    /* Semantic / Status Colors */
    --success:        #10b981;
    --success-bg:     #ecfdf5;
    --success-border: #a7f3d0;

    --warning:        #f59e0b;
    --warning-bg:     #fffbeb;
    --warning-border: #fde68a;

    --error:          #ef4444;
    --error-bg:       #fef2f2;
    --error-border:   #fecaca;

    --info:           #0ea5e9;
    --info-bg:        #f0f9ff;
    --info-border:    #bae6fd;

    --pending:        #8b5cf6;
    --pending-bg:     #f5f3ff;
    --pending-border: #ddd6fe;

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */
    --font-heading: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', monospace;

    --text-2xs:  0.625rem;   /* 10px */
    --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 */

    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.625;

    /* =====================================================
       SPACING SYSTEM (8pt grid)
    ===================================================== */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;

    /* Legacy aliases */
    --space-xs:  var(--space-1);
    --space-sm:  var(--space-2);
    --space-md:  var(--space-4);
    --space-lg:  var(--space-6);
    --space-xl:  var(--space-8);
    --space-2xl: var(--space-12);

    /* =====================================================
       BORDER RADIUS
    ===================================================== */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* =====================================================
       SHADOWS — Soft & Premium
    ===================================================== */
    --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-md:      0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.12);
    --shadow-premium: 0 8px 32px rgba(241, 90, 36, 0.12);
    --shadow-brand:    0 8px 24px rgba(241, 90, 36, 0.25);
    --shadow-brand-sm: 0 4px 12px rgba(241, 90, 36, 0.15);
    --shadow-inset:   inset 0 2px 4px rgba(0, 0, 0, 0.04);

    /* =====================================================
       TRANSITIONS & ANIMATION
    ===================================================== */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.4s ease;
    --ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);

    /* =====================================================
       Z-INDEX SCALE
    ===================================================== */
    --z-base:     1;
    --z-dropdown: 50;
    --z-sticky:   90;
    --z-header:   100;
    --z-sidebar:  110;
    --z-modal:    200;
    --z-toast:    300;
    --z-tooltip:  400;

    /* =====================================================
       LAYOUT
    ===================================================== */
    --sidebar-width:           260px;
    --sidebar-collapsed-width:  70px;
    --header-height:            68px;
    --content-max-width:       1400px;
}