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

:root {
    /* ── Brand Colors ─────────────────────────────── */
    --brand-primary:       #d8910a;     /* Amber/Gold — main CTA, active */
    --brand-primary-hover: #b86b05;     /* Gold darker */
    --brand-primary-light: rgba(216, 145, 10, 0.18);
    --brand-accent-start:  #ffbe55;
    --brand-accent-end:    #ff7b8a;
    --brand-accent-solid:  #ff9b6d;
    --brand-accent-border: rgba(255, 141, 117, 0.52);
    --brand-accent-shadow: rgba(255, 123, 138, 0.18);
    --brand-accent-gradient: linear-gradient(90deg, var(--brand-accent-start) 0%, var(--brand-accent-end) 100%);
    --brand-accent-gradient-soft: linear-gradient(135deg, rgba(255, 190, 85, 0.2) 0%, rgba(255, 123, 138, 0.18) 100%);
    --brand-accent-gradient-strong: linear-gradient(135deg, var(--brand-accent-start) 0%, var(--brand-accent-end) 100%);
    --brand-secondary:     #6366f1;     /* Indigo — links, secondary actions */
    --brand-secondary-hover: #4f46e5;

    /* ── Background Layers ────────────────────────── */
    --bg-body:             #edf1f5;     /* Slightly darker body background */
    --bg-card:             #fbfcfe;     /* Card, sidebar, panels */
    --bg-elevated:         #e6ebf1;     /* Inputs, dropdowns, modals */
    --bg-hover:            #dde3ea;     /* Hover state for items */
    --bg-active:           #d2d9e2;     /* Active/selected state */
    --bg-overlay:          rgba(0, 0, 0, 0.45); /* Modal overlay */

    /* ── Text Colors ──────────────────────────────── */
    --text-primary:        #151a2a;     /* Dark text on light backgrounds */
    --text-secondary:      #4d566e;     /* Muted text, labels */
    --text-tertiary:       #77819a;     /* Disabled, hints, placeholders */
    --text-inverse:        #ffffff;     /* Text on dark/brand backgrounds */
    --text-brand:          #b86b05;     /* 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:             #b77905;     /* Pending, caution */
    --warning-bg:          rgba(183, 121, 5, 0.12);
    --info:                #0284c7;     /* Info badges */
    --info-bg:             rgba(2, 132, 199, 0.08);

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

    /* ── 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(216, 145, 10, 0.2);

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