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

:root {
    /* ── Brand Colors ─────────────────────────────── */
    --brand-primary:       #f59e0b;     /* Amber/Gold — main CTA, active */
    --brand-primary-hover: #d97706;     /* Gold darker */
    --brand-primary-light: rgba(245, 158, 11, 0.12);
    --brand-secondary:     #6366f1;     /* Indigo — links, secondary actions */
    --brand-secondary-hover: #4f46e5;

    /* ── Background Layers ────────────────────────── */
    --bg-body:             #f5f7fa;     /* Light gray body background */
    --bg-card:             #ffffff;     /* White cards, sidebar, panels */
    --bg-elevated:         #f0f2f5;     /* Inputs, dropdowns, modals */
    --bg-hover:            #e8eaef;     /* Hover state for items */
    --bg-active:           #dfe1e8;     /* Active/selected state */
    --bg-overlay:          rgba(0, 0, 0, 0.45); /* Modal overlay */

    /* ── Text Colors ──────────────────────────────── */
    --text-primary:        #1a1d2e;     /* Dark text on light backgrounds */
    --text-secondary:      #5a6178;     /* Muted text, labels */
    --text-tertiary:       #8b92a8;     /* Disabled, hints, placeholders */
    --text-inverse:        #ffffff;     /* Text on dark/brand backgrounds */
    --text-brand:          #d97706;     /* Darker gold for text readability */

    /* ── 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:             #ca8a04;     /* Pending, caution */
    --warning-bg:          rgba(202, 138, 4, 0.10);
    --info:                #0284c7;     /* Info badges */
    --info-bg:             rgba(2, 132, 199, 0.08);

    /* ── Borders ──────────────────────────────────── */
    --border-color:        #e2e4ea;
    --border-light:        rgba(0, 0, 0, 0.06);
    --border-input:        #d0d3db;

    /* ── Shadows ──────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.15);

    /* ── 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;
}