/*
 * Stealth – Design Tokens
 *
 * Single source of truth for every colour, spacing constant and
 * typographic value used across the application (PHP pages, React
 * components and Plotly / SVG graphs).
 *
 * JS/TS code should import theme.ts which mirrors these values.
 */

/* ── Dark theme (default) ──────────────────────────────── */
:root, [data-theme="dark"] {
  --color-bg:              #23262d;
  --color-bg-surface:      #2c2f38;
  --color-bg-elevated:     #343843;

  --color-text-primary:    #f3f6fb;
  --color-text-secondary:  #dbe3ef;
  --color-text-muted:      #b8c2d1;
  --color-text-placeholder:#9aa3ad;

  /* ── Borders & grid lines ─────────────────────────────── */
  --color-border:          #343843;
  --color-border-subtle:   #3a3f49;
  --color-border-input:    #4a5060;

  /* ── Accent colours ───────────────────────────────────── */
  --color-accent-blue:     #4c78ff;
  --color-accent-gold:     #f3c84b;
  --color-accent-gold-light:#ffe9a3;
  --color-accent-red:      #ee5a54;
  --color-accent-orange:   #d98a3b;
  --color-accent-link:     #6b9eff;

  /* ── Chart palette ────────────────────────────────────── */
  --color-chart-grid:      #3a3f49;
  --color-chart-axis:      #6b7280;
  --color-chart-grid-line: #374151;
  --color-chart-tick:      #9ca3af;
  --color-chart-tick-label:#d1d5db;
  --color-chart-close:     #8ec5ff;
  --color-chart-volume:    #f7c873;
  --color-chart-ask:       rgb(199, 0, 57);
  --color-chart-ask-fill:  rgba(199, 0, 57, 0.1);
  --color-chart-bid:       rgb(82, 222, 151);
  --color-chart-bid-fill:  rgba(82, 222, 151, 0.1);

  /* ── Modebar (Plotly toolbar) ─────────────────────────── */
  --color-modebar-bg:      rgba(255, 255, 255, 0.06);
  --color-modebar-border:  rgba(255, 255, 255, 0.2);
  --color-modebar-icon:    rgba(255, 255, 255, 0.8);
  --color-modebar-hover:   rgba(255, 255, 255, 0.13);
  --color-modebar-active:  #ECC94B;

  /* ── Sidebar ──────────────────────────────────────────── */
  --color-sidebar-bg:      #2c2f38;
  --color-sidebar-border:  #343843;
  --color-sidebar-text:    #b8c2d1;
  --color-sidebar-cart:    #4a98e8;

  /* ── Breadcrumb ───────────────────────────────────────── */
  --color-breadcrumb-bg:   #383838;

  /* ── Misc ─────────────────────────────────────────────── */
  --color-white:           #ffffff;
  --color-success:         #22c55e;
  --color-error-bg:        #7f1d1d;
  --color-error-border:    #ef4444;
  --color-error-text:      #fef2f2;

  /* ── Spacing ──────────────────────────────────────────── */
  --navbar-height:         90px;
  --index-topbar-height:   56px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:       0.15s ease;
  --transition-hover:      transform 0.15s ease, box-shadow 0.15s ease;

  /* ── Aliases for gateka-core shared components (connect modal, etc.) ──
   * connect.css looks up --bg / --accent / --text / --border / --radius
   * before falling back to its hardcoded defaults, so exposing aliases
   * here makes the shared auth modal track Stealth's active theme. */
  --bg:           var(--color-bg-surface);
  --bg3:          var(--color-bg);
  --text:         var(--color-text-primary);
  --text-muted:   var(--color-text-muted);
  --border:       var(--color-border);
  --accent:       var(--color-accent-blue);
  --accent-hover: var(--color-accent-link);
  --radius:       8px;
}

/* ── Light theme ───────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:              #f8f9fb;
  --color-bg-surface:      #ffffff;
  --color-bg-elevated:     #f0f2f5;

  --color-text-primary:    #1a1d23;
  --color-text-secondary:  #3d4452;
  --color-text-muted:      #6b7280;
  --color-text-placeholder:#9ca3af;

  --color-border:          #e2e5ea;
  --color-border-subtle:   #d1d5db;
  --color-border-input:    #d1d5db;

  --color-accent-blue:     #3b6cf0;
  --color-accent-gold:     #d4a017;
  --color-accent-gold-light:#fef3c7;
  --color-accent-red:      #dc2626;
  --color-accent-orange:   #c2770c;
  --color-accent-link:     #2563eb;

  --color-chart-grid:      #e5e7eb;
  --color-chart-axis:      #9ca3af;
  --color-chart-grid-line: #e5e7eb;
  --color-chart-tick:      #6b7280;
  --color-chart-tick-label:#374151;
  --color-chart-close:     #2563eb;
  --color-chart-volume:    #d97706;
  --color-chart-ask:       rgb(199, 0, 57);
  --color-chart-ask-fill:  rgba(199, 0, 57, 0.08);
  --color-chart-bid:       rgb(22, 163, 74);
  --color-chart-bid-fill:  rgba(22, 163, 74, 0.08);

  --color-modebar-bg:      rgba(0, 0, 0, 0.04);
  --color-modebar-border:  rgba(0, 0, 0, 0.1);
  --color-modebar-icon:    rgba(0, 0, 0, 0.6);
  --color-modebar-hover:   rgba(0, 0, 0, 0.08);
  --color-modebar-active:  #d97706;

  --color-sidebar-bg:      #f0f2f5;
  --color-sidebar-border:  #e2e5ea;
  --color-sidebar-text:    #3d4452;
  --color-sidebar-cart:    #3b6cf0;

  --color-breadcrumb-bg:   #e5e7eb;

  --color-success:         #16a34a;
  --color-error-bg:        #fef2f2;
  --color-error-border:    #fca5a5;
  --color-error-text:      #991b1b;
}