/* ============================================================
   CSS CUSTOM PROPERTIES — Share Market Pro Theme
   Black · White · Green (Trading Terminal Aesthetic)
   ============================================================ */

/* ── Light Theme defaults (applied via :root) ─────────────── */
:root {
    /* ── Brand / Accent (Market Green) ──────────────────── */
    --color-accent:        #00a844;
    --color-accent-dark:   #007a30;
    --color-accent-light:  #00c853;
    --color-accent-glow:   rgba(0, 168, 68, 0.12);

    /* ── Background Layers ──────────────────────────────── */
    --color-primary:          #f0f2f5;
    --color-surface:          #ffffff;
    --color-surface-elevated: #f8f9fa;
    --color-surface-hover:    #f0f2f5;

    /* Legacy aliases */
    --color-bg:           #f0f2f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary:  #f8f9fa;
    --color-text:         #ffffff;

    /* ── Text ───────────────────────────────────────────── */
    --color-text-primary:   #0d0d0d;
    --color-text-secondary: #4a4a4a;
    --color-text-muted:     #888888;

    /* ── Borders ────────────────────────────────────────── */
    --color-border:        #e2e5ea;
    --color-border-dark:   #d0d4db;
    --color-border-accent: rgba(0, 168, 68, 0.35);

    /* ── Semantic ───────────────────────────────────────── */
    --color-success:    #00a844;
    --color-danger:     #e53935;
    --color-warning:    #f57c00;
    --color-info:       #1976d2;

    --color-primary-bg:  rgba(0, 168, 68, 0.08);
    --color-success-bg:  rgba(0, 168, 68, 0.08);
    --color-error:       #e53935;
    --color-error-bg:    rgba(229, 57, 53, 0.08);
    --color-warning-bg:  rgba(245, 124, 0, 0.08);

    /* ── Market Colors ──────────────────────────────────── */
    --color-bull:    #00a844;
    --color-bear:    #e53935;
    --color-neutral: #888888;

    /* ── Component-specific tokens ──────────────────────── */
    --color-table-header-bg:  rgba(0, 0, 0, 0.025);
    --color-table-row-hover:  rgba(0, 0, 0, 0.025);
    --color-badge-muted-bg:   rgba(0, 0, 0, 0.05);
    --color-dropdown-hover:   rgba(0, 0, 0, 0.04);
    --color-rejection-text:   #c62828;
    --color-focus-ring:       rgba(0, 168, 68, 0.15);

    /* ── Typography ─────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --leading-loose:   2;

    /* ── Spacing Scale ──────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-9:  2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Border Radius ──────────────────────────────────── */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.25rem;
    --radius-full: 9999px;

    /* ── Shadows ────────────────────────────────────────── */
    --shadow:    0 2px 8px rgba(0,0,0,0.08);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --shadow-green: 0 0 20px rgba(0, 168, 68, 0.10);

    /* ── Layout ─────────────────────────────────────────── */
    --max-width:      1280px;
    --sidebar-width:  260px;
    --topbar-height:  64px;

    /* ── Transitions ────────────────────────────────────── */
    --transition-fast: 120ms ease;
    --transition:      200ms ease;
    --transition-slow: 300ms ease;

    /* ── Z-index ────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-toast:    400;
}

/* ── Dark Theme overrides — MUST come after :root ───────── */
[data-theme="dark"] {
    --color-accent:        #00c853;
    --color-accent-dark:   #00a844;
    --color-accent-light:  #33d46a;
    --color-accent-glow:   rgba(0, 200, 83, 0.18);

    --color-primary:          #050505;
    --color-surface:          #0d0d0d;
    --color-surface-elevated: #161616;
    --color-surface-hover:    #1c1c1c;

    --color-bg:           #050505;
    --color-bg-secondary: #0d0d0d;
    --color-bg-tertiary:  #161616;
    --color-text:         #080808;

    --color-text-primary:   #f5f5f5;
    --color-text-secondary: #9e9e9e;
    --color-text-muted:     #555555;

    --color-border:        #1f1f1f;
    --color-border-dark:   #2a2a2a;
    --color-border-accent: rgba(0, 200, 83, 0.3);

    --color-success:    #00c853;
    --color-danger:     #f44336;
    --color-warning:    #ff9800;
    --color-info:       #2196f3;

    --color-primary-bg:  rgba(0, 200, 83, 0.08);
    --color-success-bg:  rgba(0, 200, 83, 0.08);
    --color-error:       #f44336;
    --color-error-bg:    rgba(244, 67, 54, 0.08);
    --color-warning-bg:  rgba(255, 152, 0, 0.08);

    --color-bull:    #00c853;
    --color-bear:    #f44336;
    --color-neutral: #9e9e9e;

    --shadow:    0 2px 8px rgba(0,0,0,0.5);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.6);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
    --shadow-green: 0 0 20px rgba(0, 200, 83, 0.12);

    /* ── Component-specific tokens ──────────────────────── */
    --color-table-header-bg:  rgba(255, 255, 255, 0.015);
    --color-table-row-hover:  rgba(255, 255, 255, 0.02);
    --color-badge-muted-bg:   rgba(255, 255, 255, 0.04);
    --color-dropdown-hover:   rgba(255, 255, 255, 0.05);
    --color-rejection-text:   #ef9a9a;
    --color-focus-ring:       rgba(0, 200, 83, 0.12);
}