/* ============================================================================
   BASE.CSS - Theme Variables & Color System
   Institutional Trading Platform
   ============================================================================ */

/* ============================================================================
   1. PRIMITIVE COLOR PALETTE
   Shared across all themes - actual color values
   ============================================================================ */

:root {
    /* === Neutral Grays === */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* === Warm Neutrals (for light mode) === */
    --warm-50: #fafafa;
    --warm-100: #f0ede8;
    --warm-200: #ebe8e3;
    --warm-300: #e4e1dc;
    --warm-400: #d4d0ca;
    --warm-500: #c0bdb8;
    --warm-600: #8a8a8a;
    --warm-700: #5a5a5a;
    --warm-800: #2a2a2a;
    --warm-900: #1a1a1a;

    /* === Brand Colors === */
    --blue-600: #1B4F72;
    --blue-500: #2563eb;
    --blue-400: #3b82f6;
    --blue-300: #60a5fa;

    --red-600: #D84315;
    --red-500: #ef4444;
    --red-400: #f87171;

    /* === Status Colors === */
    --green-600: #10b981;
    --green-500: #22c55e;
    --green-400: #4ade80;

    --yellow-600: #f59e0b;
    --yellow-500: #fbbf24;
    --yellow-400: #fcd34d;

    --orange-600: #ea580c;
    --orange-500: #f97316;
    --orange-400: #fb923c;

    /* === Pure Colors === */
    --white: #ffffff;
    --black: #000000;

    /* ========================================================================
       2. SEMANTIC TOKENS - DARK MODE (DEFAULT)
       Theme-aware variables that components use
       ======================================================================== */

    /* === Backgrounds === */
    --bg-primary: #1d1d1d;
    --bg-secondary: var(--gray-800);
    --bg-tertiary: var(--gray-900);
    --bg-toolbar: #181818;
    --bg-widget: var(--gray-800);
    --bg-widget-header: var(--gray-700);
    --bg-input: var(--gray-800);
    --bg-button: var(--gray-700);
    --bg-button--hover: var(--gray-600);
    --bg-button--active: var(--gray-500);
    --bg-button--disabled: var(--gray-800);
    --bg-overlay: rgba(0, 0, 0, 0.5);

    /* === Text === */
    --text-primary: var(--gray-100);
    --text-secondary: var(--gray-400);
    --text-tertiary: var(--gray-500);
    --text-disabled: var(--gray-600);
    --text-inverse: var(--gray-900);
    --text-on-primary: var(--white);
    --text-on-danger: var(--white);
    --text-on-success: var(--white);
    --text-info: var(--green-600);

    /* === Borders === */
    --border-default: rgba(148, 163, 184, 0.2);
    --border-strong: rgba(148, 163, 184, 0.3);
    --border-subtle: rgba(148, 163, 184, 0.1);
    --border-focus: var(--blue-600);

    /* === Scrollbars === */
    --scrollbar-track: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --scrollbar-thumb--hover: rgba(255, 255, 255, 0.5);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);

    /* === Brand Semantic === */
    --color-primary: var(--blue-600);
    --color-primary--hover: var(--blue-500);
    --color-primary--active: var(--blue-400);

    /* === Status Semantic === */
    --color-success: var(--green-600);
    --color-success--hover: var(--green-500);
    --color-warning: var(--yellow-600);
    --color-warning--hover: var(--yellow-500);
    --color-danger: var(--red-600);
    --color-danger--hover: var(--red-500);
    --color-info: var(--blue-500);
    --color-info--hover: var(--blue-400);

    /* === Trading Colors (Institutional Perspective) === */
    --color-bid: var(--red-600);              /* Sell side - red */
    --color-bid--hover: var(--red-400);
    --color-bid--light: rgba(216, 67, 21, 0.1);
    --color-ask: var(--blue-600);             /* Buy side - blue */
    --color-ask--hover: var(--blue-400);
    --color-ask--light: rgba(27, 79, 114, 0.1);

    /* === Action Colors (Retail Perspective - for badges/text) === */
    --color-buy: var(--blue-500);             /* Buy action - blue */
    --color-buy--hover: var(--blue-400);
    --color-sell: var(--red-500);             /* Sell action - red */
    --color-sell--hover: var(--red-400);

    /* === Chart Colors === */
    --chart-text: rgba(255, 255, 255, 0.7);
    --chart-text-muted: rgba(255, 255, 255, 0.5);
    --chart-grid: rgba(255, 255, 255, 0.3);
    --chart-session-line: rgba(255, 193, 7, 0.6);
    --chart-current-price: #58a6ff;
    --chart-current-price-text: #ffffff;
    --chart-bar-up: #4caf50;
    --chart-bar-down: #f44336;
    --chart-bar-neutral: rgba(255, 255, 255, 0.8);

    /* ========================================================================
       3. LAYOUT & SPACING (Theme-agnostic)
       ======================================================================== */

    /* === Spacing Scale === */
    --space-1: 0.125rem;    /* 2px */
    --space-2: 0.25rem;     /* 4px */
    --space-3: 0.5rem;      /* 8px */
    --space-4: 0.75rem;     /* 12px */
    --space-5: 1rem;        /* 16px */
    --space-6: 1.5rem;      /* 24px */
    --space-7: 1.75rem;     /* 28px */
    --space-8: 2rem;        /* 32px */
    --space-9: 2.25rem;     /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */

    /* === Font Sizes === */
    --font-size-8: 0.5rem;      /* 8px */
    --font-size-9: 0.5625rem;   /* 9px */
    --font-size-10: 0.625rem;   /* 10px */
    --font-size-11: 0.6875rem;  /* 11px */
    --font-size-12: 0.75rem;    /* 12px */
    --font-size-13: 0.8125rem;  /* 13px */
    --font-size-14: 0.875rem;   /* 14px */
    --font-size-15: 0.9375rem;  /* 15px */
    --font-size-16: 1rem;       /* 16px */
    --font-size-18: 1.125rem;   /* 18px */
    --font-size-20: 1.25rem;    /* 20px */
    --font-size-24: 1.5rem;     /* 24px */
    --font-size-30: 1.875rem;   /* 30px */
    --font-size-35: 2.1875rem;  /* 35px */
    --font-size-40: 2.5rem;     /* 40px */
    --font-size-48: 3rem;       /* 48px */

    /* === Font Weights === */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* === Border Radius === */
    --radius-sm: 0.125rem;  /* 2px */
    --radius-md: 0.25rem;   /* 4px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-full: 9999px;

    /* === Layout Dimensions === */
    --toolbar-height: 3rem;          /* 48px */
    --sub-toolbar-height: 2.5rem;    /* 40px */
    --toolbar-offset: 5.5rem;        /* 88px (toolbar + sub-toolbar) */
    --resize-handle-height: 0.5rem;  /* 8px */
    --nav-tab-height: 2.5rem;        /* 40px */

    /* === Component Heights === */
    --button-height-compact: 1.5rem;   /* 24px */
    --button-height-standard: 1.75rem; /* 28px */
    --button-height-large: 2.25rem;    /* 36px */
    --input-height-compact: 1.25rem;   /* 20px */
    --input-height-standard: 2rem;     /* 32px */

    /* === Component Widths === */
    --button-width-small: 4.0625rem;   /* 65px */
    --button-width-medium: 5rem;       /* 80px */
    --button-width-large: 6.875rem;    /* 110px */
    --sidebar-icon-width: 3.125rem;    /* 50px */
    --sidebar-expand-width: 18.75rem;  /* 300px */
    --sidebar-right-width: 21.875rem;  /* 350px */

    /* === Grid & Widget Dimensions === */
    --grid-min-column: 25rem;          /* 400px */
    --grid-min-row: 18.75rem;          /* 300px */
    --widget-height-medium: 37.5rem;   /* 600px */
    --widget-height-large: 56.25rem;   /* 900px */
    --widget-height-xlarge: 75rem;     /* 1200px */
    
    /* === Logo Dimensions === */
    --logo-max-height: 2.5rem;         /* 40px */
    --logo-max-width: 12.5rem;         /* 200px */
    
    /* === Widget Component Dimensions === */
    --widget-header-height: 1.875rem;  /* 30px */
    --widget-control-width: 8.125rem;  /* 130px */
    --control-button-size: 1.5rem;     /* 24px */
    --control-icon-size: 1.25rem;      /* 20px */
    --symbol-button-height: 2.8125rem; /* 45px */
    --order-card-max-width: 23.75rem;  /* 380px */

    /* === Z-Index Scale === */
    --z-dropdown: 100000;
    --z-toolbar: 1101;
    --z-sub-toolbar: 1100;
    --z-sidebar-toggle: 1070;
    --z-sidebar: 1050;
    --z-modal: 1060;
    --z-toast: 1120;

    /* === Opacity Scale === */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.8;
    --opacity-active: 0.9;

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ============================================================================
   4. LIGHT MODE OVERRIDES
   Remap semantic tokens to light palette
   ============================================================================ */

[data-theme="light"] {
    /* === Backgrounds === */
    --bg-primary: #EAE5E3;
    --bg-secondary: #DCDDDD;
    --bg-tertiary: var(--warm-200);
    --bg-toolbar: #C0BDB8;
    --bg-widget: #E7E7E8;
    --bg-widget-header: #DCDDDD;
    --bg-input: var(--white);
    --bg-button: var(--warm-400);
    --bg-button--hover: var(--warm-500);
    --bg-button--active: var(--warm-600);
    --bg-button--disabled: var(--warm-200);
    --bg-overlay: rgba(0, 0, 0, 0.3);

    /* === Text === */
    --text-primary: var(--warm-800);
    --text-secondary: var(--warm-700);
    --text-tertiary: var(--warm-600);
    --text-disabled: var(--warm-400);
    --text-inverse: var(--warm-50);
    --text-on-primary: var(--white);
    --text-on-danger: var(--white);
    --text-on-success: var(--white);

    /* === Borders === */
    --border-default: var(--warm-400);
    --border-strong: var(--warm-500);
    --border-subtle: var(--warm-300);
    --border-focus: var(--blue-600);

    /* === Scrollbars === */
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb--hover: rgba(0, 0, 0, 0.3);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* === Chart Colors (Light Mode) === */
    --chart-text: rgba(0, 0, 0, 0.7);
    --chart-text-muted: rgba(0, 0, 0, 0.5);
    --chart-grid: rgba(0, 0, 0, 0.2);
    --chart-session-line: rgba(245, 158, 11, 0.7);
    --chart-current-price: #1d4ed8;
    --chart-current-price-text: #ffffff;
    --chart-bar-up: #15803d;
    --chart-bar-down: #dc2626;
    --chart-bar-neutral: rgba(0, 0, 0, 0.6);

    /* Trading colors remain the same across themes */
    /* Status colors remain the same across themes */
    /* Brand colors remain the same across themes */
}

/* ============================================================================
   5. MOBILE RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) {
    :root {
        /* Larger touch targets */
        --button-height-compact: 2rem;      /* 32px */
        --button-height-standard: 2.5rem;   /* 40px */
        --button-height-large: 2.75rem;     /* 44px */
        
        /* Larger resize handle */
        --resize-handle-height: 1.5rem;     /* 24px */
        
        /* Adjusted spacing for mobile */
        --toolbar-height: 3.5rem;           /* 56px */
        --sub-toolbar-height: 3rem;         /* 48px */
        --toolbar-offset: 6.5rem;           /* 104px */
    }
}

/* ============================================================================
   6. REDUCED MOTION PREFERENCE
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}