/* ============================================================
   DESIGN SYSTEM — CSS Custom Properties (Variables)
   Change colors/fonts here → reflects across entire app
   ============================================================ */

:root {
    /* ── Brand Colors (VARDHAN 111 brand — also set in theme-variables.css) ── */
    --brand-primary:       #7A0C1F;
    --brand-primary-hover: #4A0814;
    --brand-primary-light: rgba(122, 12, 31, 0.14);
    --brand-accent-start:  #7A0C1F;
    --brand-accent-end:    #C45A6E;
    --brand-accent-solid:  #7A0C1F;
    --brand-accent-border: rgba(122, 12, 31, 0.35);
    --brand-accent-shadow: rgba(122, 12, 31, 0.22);
    --brand-accent-gradient: linear-gradient(135deg, var(--brand-accent-start) 0%, var(--brand-accent-end) 100%);
    --brand-accent-gradient-soft: linear-gradient(135deg, rgba(122, 12, 31, 0.16) 0%, rgba(196, 90, 110, 0.14) 100%);
    --brand-accent-gradient-strong: linear-gradient(135deg, #7A0C1F 0%, #9B1832 100%);
    --brand-secondary:     #C45A6E;
    --brand-secondary-hover: #B83A52;

    /* ── Background Layers ────────────────────────── */
    --bg-body:             #F9FAFB;
    --bg-card:             #FFFFFF;
    --bg-elevated:         #F3F4F6;
    --bg-hover:            #F3F4F6;
    --bg-active:           #E5E7EB;
    --bg-overlay:          rgba(0, 0, 0, 0.45);

    /* ── Text Colors ──────────────────────────────── */
    --text-primary:        #1F2937;
    --text-secondary:      #6B7280;
    --text-tertiary:       #9CA3AF;
    --text-inverse:        #ffffff;
    --text-brand:          #7A0C1F;

    /* ── Semantic Colors ──────────────────────────── */
    --success:             #16a34a;     /* Win, profit, confirmed */
    --success-bg:          rgba(22, 163, 74, 0.10);
    --danger:              #dc2626;     /* Loss, error, delete */
    --danger-bg:           rgba(220, 38, 38, 0.08);
    --warning:             #b77905;     /* Pending, caution */
    --warning-bg:          rgba(183, 121, 5, 0.12);
    --info:                #7A0C1F;     /* Info badges */
    --info-bg:             rgba(122, 12, 31, 0.08);

    /* ── Borders ──────────────────────────────────── */
    --border-color:        #d4d9e2;
    --border-light:        rgba(20, 27, 45, 0.08);
    --border-input:        #c1c9d4;

    /* ── Shadows (brand-soft — avoid black halos on rounded cards) ── */
    --shadow-sm:  0 1px 2px rgba(122, 12, 31, 0.04);
    --shadow-md:  0 4px 12px rgba(122, 12, 31, 0.07);
    --shadow-lg:  0 8px 24px rgba(122, 12, 31, 0.09);
    --shadow-xl:  0 16px 40px rgba(122, 12, 31, 0.10);
    --shadow-glow: 0 0 20px rgba(122, 12, 31, 0.12);

    /* ── Spacing Scale ────────────────────────────── */
    --space-xs:   0.25rem;   /* 4px */
    --space-sm:   0.5rem;    /* 8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */

    /* ── Border Radius ────────────────────────────── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ── Typography ───────────────────────────────── */
    --font-main:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Poppins', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px — mobile optimized */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

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

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ── Transitions ──────────────────────────────── */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow:   0.4s ease;
    --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ───────────────────────────────────── */
    --sidebar-width:     280px;
    --sidebar-collapsed: 0px;
    --header-height:     56px;
    --bottom-nav-height: 60px;
    --max-content-width: 480px;    /* Mobile-app feel */
    --safe-area-bottom:  env(safe-area-inset-bottom, 0px);

    /* ── Z-Index Scale ────────────────────────────── */
    --z-sidebar:   1000;
    --z-header:    900;
    --z-overlay:   1100;
    --z-modal:     1200;
    --z-toast:     1300;
    --z-bottom-nav: 950;
}