/* file: assets/css/theme.css */
:root {
    /* Color Palette (Dark Theme) */
    --color-background: #0a0a0a;
    --color-surface-1: #1a1a1a;
    --color-surface-2: #2a2a2a;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #a0a0a0;
    --color-border: #333333;
    --color-accent: #007bff;

    /* Semantic Colors for Heatmap */
    --color-bullish-bg: rgba(22, 163, 74, 0.2);
    --color-bullish-border: #16a34a;
    --color-bullish-text: #22c55e;

    --color-bearish-bg: rgba(220, 38, 38, 0.2);
    --color-bearish-border: #dc2626;
    --color-bearish-text: #ef4444;

    --color-neutral-bg: rgba(107, 114, 128, 0.15);
    --color-neutral-border: #6b7280;
    --color-neutral-text: #9ca3af;

    /* Typography */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-base: 16px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing & Sizing */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */

    /* Borders & Shadows */
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --box-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    
    /* Animation */
    --transition-base: all 0.3s ease;
}