/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UltronArbitrage — Branding & Design Tokens
   ──────────────────────────────────────────────────────────────────────────
   Edit the variables in :root to update the visual identity of the entire
   application. All colors and measurements are derived from these tokens.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    /* ── Backgrounds ───────────────────────────────────────────────────────── */
    --bg-body:        #0c0f18;  /* page body background */
    --bg-surface:     #111520;  /* topbar, card surfaces */
    --bg-surface-2:   #181d2e;  /* secondary panels, hover */
    --bg-hover:       #1e2436;  /* hover backgrounds */
    --bg-input:       #161b28;  /* form inputs */

    /* ── Borders ───────────────────────────────────────────────────────────── */
    --border:         #1e2436;  /* default divider */
    --border-strong:  #2a3450;  /* emphasized separator */

    /* ── Brand Accent ───────────────────────────────────────────────────────
       Change --accent to rebrand the entire application.
       Also update --accent-muted and --accent-dim for coherence.         */
    --accent:         #3b82f6;  /* primary interactive color — blue */
    --accent-muted:   rgba(59, 130, 246, 0.14);
    --accent-dim:     #1a2d50;  /* dark tint for pressed / active bg */

    /* ── Semantic Status Colors ────────────────────────────────────────────── */
    --color-success:  #22c55e;  /* positive / buy / connected */
    --color-danger:   #ef4444;  /* negative / sell / error */
    --color-warning:  #f59e0b;  /* caution / warning */
    --color-info:     #60a5fa;  /* informational */

    /* ── Typography ────────────────────────────────────────────────────────── */
    --text-primary:   #e2e8f0;  /* main readable text */
    --text-secondary: #94a3b8;  /* secondary / muted text */
    --text-dim:       #64748b;  /* labels, placeholders */

    /* ── User Badge (Topbar Highlight) ─────────────────────────────────────── */
    --user-bg:        #162035;  /* avatar / badge background */
    --user-accent:    #60a5fa;  /* username highlight color */
    --user-border:    #2a4070;  /* avatar border */

    /* ── Topbar ─────────────────────────────────────────────────────────────
       --topbar-h controls the height that all pages must respect in their
       layout (e.g. body padding-top or flex offset).                       */
    --topbar-h:       52px;
    --topbar-bg:      var(--bg-surface);
    --topbar-border:  1px solid var(--border);

    /* ── Navigation Drawer ──────────────────────────────────────────────────── */
    --drawer-w:       252px;
    --nav-active-bg:  var(--accent-muted);
    --nav-active-fg:  var(--accent);
    --nav-active-br:  rgba(59, 130, 246, 0.30);

    /* ── Card / Panel ───────────────────────────────────────────────────────── */
    --card-bg:        var(--bg-surface);
    --card-border:    var(--border);
    --card-radius:    8px;

    /* ── Button ─────────────────────────────────────────────────────────────── */
    --btn-radius:     6px;
    --btn-primary-bg: var(--accent);
    --btn-primary-fg: #ffffff;

    /* ── Forms ──────────────────────────────────────────────────────────────── */
    --input-bg:       var(--bg-input);
    --input-border:   var(--border-strong);
    --input-focus:    var(--accent);
    --input-radius:   6px;

    /* ── Font Stack ─────────────────────────────────────────────────────────── */
    --font-ui:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:      'SF Mono', 'Consolas', 'Fira Code', monospace;
}