/* ── embdtrader Design Tokens ────────────────────────────────────────────────── */
/* Single source of truth for all visual properties                              */

:root {
    /* ── Colors ─────────────────────────────────────────────────────────────── */
    --bg-primary:    #09090b;
    --bg-secondary:  #111118;
    --bg-card:       rgba(17, 17, 24, 0.85);
    --bg-elevated:   rgba(25, 25, 38, 0.9);
    --bg-surface:    rgba(20, 20, 30, 0.95);
    --bg-hover:      rgba(255, 255, 255, 0.04);
    --bg-active:     rgba(255, 255, 255, 0.08);

    --border:        rgba(255, 255, 255, 0.06);
    --border-hover:  rgba(255, 255, 255, 0.12);
    --border-active: rgba(255, 255, 255, 0.18);

    --text-primary:   #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted:     #71717a;
    --text-dim:       #52525b;

    /* Semantic colors */
    --emerald:       #10b981;
    --emerald-soft:  #34d399;
    --emerald-dim:   rgba(16, 185, 129, 0.15);
    --emerald-bg:    rgba(16, 185, 129, 0.08);

    --rose:          #f43f5e;
    --rose-soft:     #fb7185;
    --rose-dim:      rgba(244, 63, 94, 0.15);
    --rose-bg:       rgba(244, 63, 94, 0.08);

    --amber:         #f59e0b;
    --amber-soft:    #fbbf24;
    --amber-dim:     rgba(245, 158, 11, 0.15);
    --amber-bg:      rgba(245, 158, 11, 0.08);

    --blue:          #3b82f6;
    --blue-soft:     #60a5fa;
    --blue-dim:      rgba(59, 130, 246, 0.15);
    --blue-bg:       rgba(59, 130, 246, 0.08);

    --violet:        #8b5cf6;
    --violet-soft:   #a78bfa;
    --violet-dim:    rgba(139, 92, 246, 0.15);

    /* Glow effects */
    --glow-emerald:  0 0 20px rgba(16, 185, 129, 0.15);
    --glow-rose:     0 0 20px rgba(244, 63, 94, 0.15);
    --glow-blue:     0 0 20px rgba(59, 130, 246, 0.15);
    --glow-violet:   0 0 20px rgba(139, 92, 246, 0.15);

    /* ── Typography ─────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --text-xs:   0.65rem;   /* 10.4px — labels */
    --text-sm:   0.78rem;   /* 12.5px — secondary */
    --text-base: 0.85rem;   /* 13.6px — body */
    --text-md:   0.95rem;   /* 15.2px — values */
    --text-lg:   1.1rem;    /* 17.6px — headings */
    --text-xl:   1.3rem;    /* 20.8px — page titles */
    --text-2xl:  1.6rem;    /* 25.6px — KPI values */
    --text-3xl:  2.0rem;    /* 32px — hero numbers */

    /* ── Spacing ────────────────────────────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ── Borders & Radii ────────────────────────────────────────────────────── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────────────────────── */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.7);

    /* ── Transitions ─────────────────────────────────────────────────────────── */
    --ease-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ── Layout ──────────────────────────────────────────────────────────────── */
    --sidebar-width: 56px;
    --sidebar-expanded: 200px;
    --header-height: 56px;
    --panel-width: 65%;
    --panel-min-width: 620px;
    --content-max-width: 1600px;
}