/* ============================================
   MARKET TITAN - Design System Variables
   Fintech Premium Aesthetic for Gen Y/Z
   Clean, Sophisticated, Professional
   ============================================ */

:root {
    /* ===== BASE COLORS ===== */
    /* Deep, sophisticated dark palette */
    --bg-primary: #09090b;           /* Near black - main background */
    --bg-secondary: #18181b;         /* Zinc 900 - cards, panels */
    --bg-tertiary: #27272a;          /* Zinc 800 - elevated elements */
    --bg-elevated: #3f3f46;          /* Zinc 700 - hover states */
    --bg-hover: rgba(255, 255, 255, 0.05);

    /* ===== ACCENT COLORS ===== */
    /* Refined, professional accents */
    --accent-primary: #10b981;       /* Emerald 500 - primary actions, gains */
    --accent-primary-dim: #059669;   /* Emerald 600 */
    --accent-primary-bg: rgba(16, 185, 129, 0.1);
    --accent-primary-border: rgba(16, 185, 129, 0.2);

    --accent-negative: #ef4444;      /* Red 500 - losses, sell */
    --accent-negative-dim: #dc2626;  /* Red 600 */
    --accent-negative-bg: rgba(239, 68, 68, 0.1);
    --accent-negative-border: rgba(239, 68, 68, 0.2);

    --accent-blue: #3b82f6;          /* Blue 500 - links, info */
    --accent-blue-dim: #2563eb;
    --accent-blue-bg: rgba(59, 130, 246, 0.1);

    --accent-purple: #8b5cf6;        /* Violet 500 - premium, special */
    --accent-purple-bg: rgba(139, 92, 246, 0.1);

    --accent-amber: #f59e0b;         /* Amber 500 - warnings, highlights */
    --accent-amber-bg: rgba(245, 158, 11, 0.1);

    /* ===== TEXT COLORS ===== */
    --text-primary: #fafafa;         /* Zinc 50 - primary text */
    --text-secondary: #a1a1aa;       /* Zinc 400 - secondary text */
    --text-muted: #71717a;           /* Zinc 500 - muted text */
    --text-disabled: #52525b;        /* Zinc 600 - disabled */

    /* ===== BORDER COLORS ===== */
    --border-subtle: #27272a;        /* Zinc 800 */
    --border-default: #3f3f46;       /* Zinc 700 */
    --border-strong: #52525b;        /* Zinc 600 */

    /* ===== SHADOWS ===== */
    /* Subtle, professional shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

    /* ===== TYPOGRAPHY ===== */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes - Refined scale */
    --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: 2rem;        /* 32px */
    --text-4xl: 2.5rem;      /* 40px */
    --text-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;

    /* ===== SPACING ===== */
    --space-0: 0;
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */
    --space-24: 6rem;        /* 96px */

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

    /* ===== TRANSITIONS ===== */
    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 200ms ease;
    --transition-slower: 300ms ease;

    /* ===== Z-INDEX SCALE ===== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;

    /* ===== LAYOUT ===== */
    --sidebar-width: 280px;
    --panel-width: 320px;
    --navbar-height: 56px;
    --ticker-height: 36px;
    --container-max: 1280px;
    --container-wide: 1440px;
}

/* ===== SEMANTIC COLOR CLASSES ===== */
.text-positive { color: var(--accent-primary); }
.text-negative { color: var(--accent-negative); }
.text-info { color: var(--accent-blue); }
.text-warning { color: var(--accent-amber); }

.bg-positive { background-color: var(--accent-primary-bg); }
.bg-negative { background-color: var(--accent-negative-bg); }
.bg-info { background-color: var(--accent-blue-bg); }

/* ===== DIFFICULTY BADGES ===== */
.difficulty-easy {
    --badge-color: var(--accent-primary);
    --badge-bg: var(--accent-primary-bg);
}
.difficulty-medium {
    --badge-color: var(--accent-amber);
    --badge-bg: var(--accent-amber-bg);
}
.difficulty-hard {
    --badge-color: var(--accent-negative);
    --badge-bg: var(--accent-negative-bg);
}

/* ===== STATUS CLASSES ===== */
.status-live {
    --status-color: var(--accent-negative);
}
.status-active {
    --status-color: var(--accent-primary);
}
.status-upcoming {
    --status-color: var(--accent-blue);
}
.status-completed {
    --status-color: var(--text-muted);
}