/* public/shared/theme.css */

/* ═══ Light theme (default) ═══ */
:root {
  --bg:           #f5f7fa;
  --bg-soft:      #eef2f7;
  --card:         #ffffff;
  --card-hover:   #f1f5f9;
  --border:       #e2e8f0;
  --border-soft:  #eef2f7;

  --text:         #1e293b;
  --text-strong:  #0f172a;
  --muted:        #64748b;
  --muted-soft:   #94a3b8;

  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft:  #dbeafe;

  --buy:          #059669;
  --buy-soft:     #d1fae5;
  --sell:         #dc2626;
  --sell-soft:    #fee2e2;
  --warn:         #f59e0b;
  --warn-soft:    #fef3c7;

  --shadow-card:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);

  /* RGB variants for Tailwind color opacity modifiers */
  --bg-rgb:         245 247 250;
  --card-rgb:       255 255 255;
  --cardHover-rgb:  241 245 249;
  --border-rgb:     226 232 240;
  --buy-rgb:        5 150 105;
  --sell-rgb:       220 38 38;
  --accent-rgb:     37 99 235;
  --accentHover-rgb: 29 78 216;
}

/* ═══ Dark theme ═══ */
html.dark,
html[data-theme="dark"] {
  --bg:           #0b0e14;
  --bg-soft:      #10151f;
  --card:         #161b22;
  --card-hover:   #1c212c;
  --border:       #30363d;
  --border-soft:  #232a36;

  --text:         #e6edf3;
  --text-strong:  #ffffff;
  --muted:        #8b949e;
  --muted-soft:   #6b7280;

  --accent:       #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft:  #1e3a8a;

  --buy:          #26a69a;
  --buy-soft:     #064e3b;
  --sell:         #ef5350;
  --sell-soft:    #7f1d1d;
  --warn:         #f59e0b;
  --warn-soft:    #78350f;

  --shadow-card:  0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);

  --bg-rgb:         11 14 20;
  --card-rgb:       22 27 34;
  --cardHover-rgb:  28 33 44;
  --border-rgb:     48 54 61;
  --buy-rgb:        38 166 154;
  --sell-rgb:       239 83 80;
  --accent-rgb:     37 99 235;
  --accentHover-rgb: 29 78 216;
}

/* ═══ Utilities ═══ */
body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.2s ease, color 0.2s ease;
}