/**
 * EA Bot Pro — Design Tokens & Core Variables
 * Purpose: Centralized theme management for the Premium Trading Terminal aesthetic.
 * This file should be included in all layouts (Landing, User, Admin).
 */

:root {
    /* ── Palette: Dark Multi-Tone Setup ──────────────────────────── */
    --bg-main:       #06080f;     /* Deep space black */
    --bg-surface:    #0c111d;     /* Primary surface */
    --bg-panel:      #121a29;     /* Elevated panel */
    --bg-accent:     #1a2436;     /* Highlighted background */
    
    /* ── Palette: Semantic Colors ────────────────────────────────── */
    --clr-primary:   #34d399;     /* Emerald Green (Growth/Positive) */
    --clr-secondary: #3b82f6;     /* Professional Blue (System/Neutral) */
    --clr-danger:    #ef4444;     /* Ruby Red (Error/Negative) */
    --clr-warning:   #f59e0b;     /* Amber (Alert) */
    --clr-info:      #a855f7;     /* Purple (Insights) */
    
    /* ── Typography: Families ────────────────────────────────────── */
    --ff-sans:       'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, sans-serif;
    --ff-data:       'JetBrains Mono', 'Fira Code', monospace;
    --ff-display:    'Plus Jakarta Sans', var(--ff-sans);

    /* ── Typography: Sizes ──────────────────────────────────────── */
    --fs-xs:         0.75rem;     /* 12px */
    --fs-sm:         0.875rem;    /* 14px */
    --fs-base:       1rem;        /* 16px */
    --fs-lg:         1.125rem;    /* 18px */
    --fs-xl:         1.25rem;     /* 20px */
    --fs-2xl:        1.5rem;      /* 24px */
    --fs-3xl:        1.875rem;    /* 30px */
    --fs-4xl:        2.25rem;     /* 36px */

    /* ── Text: Contrast Levels ───────────────────────────────────── */
    --tx-high:       #f8fafc;     /* Primary headings */
    --tx-med:        #94a3b8;     /* Secondary/Body */
    --tx-low:        #64748b;     /* Muted/Labels */
    --tx-dim:        #475569;     /* Disabled/Hidden */

    /* ── Borders & Outlines ──────────────────────────────────────── */
    --border-main:   rgba(255, 255, 255, 0.08);
    --border-hover:  rgba(255, 255, 255, 0.15);
    --border-active: rgba(52, 211, 153, 0.4);
    
    /* ── Effects & Surfaces ──────────────────────────────────────── */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --radius-full:   9999px;

    --shd-sm:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shd-md:        0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shd-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    --glass-bg:      rgba(18, 26, 41, 0.7);
    --glass-blur:    blur(12px);
    
    /* ── Animation ───────────────────────────────────────────────── */
    --ts-fast:       0.15s ease;
    --ts-med:        0.3s ease;
}

/* ── Typography Utilities ── */
.num { font-family: var(--ff-data) !important; font-variant-numeric: tabular-nums; }
.display { font-family: var(--ff-display); }
.text-gradient {
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Base utilities only in tokens */