/* ==========================================================================
   VEXCAPITAL — DESIGN TOKENS
   Design System "Trading Terminal" — noir dense, inspiré des captures de
   référence (langage visuel type exchange pro : Bybit-like), identité
   Vexcapital (or) conservée comme accent, jamais comme fond.
   Variables partagées (:root) + valeurs par thème
   ([data-theme="dark"] / [data-theme="light"]). Le thème actif est posé
   sur <html data-theme="..."> par le script anti-flash (voir <head>)
   et par assets/js/theme.js.
   ========================================================================== */
:root {
  /* Marque — identique entre Dark et Light (section 6 du brief theming) */
  --brand-primary: #ffa928;
  --brand-primary-2: #ffb547;
  --brand-primary-hover: #e6941f;
  --brand-gradient: linear-gradient(135deg, #ffb547 0%, #ffa928 55%, #e6941f 100%);
  --brand-primary-rgb: 255, 169, 40;
  --text-on-brand: #1a1206;

  /* Couleurs métier — mêmes teintes dans les deux thèmes */
  --success: #00c778;
  --success-bg: rgba(0, 199, 120, 0.14);
  --danger: #ff425a;
  --danger-bg: rgba(255, 66, 90, 0.14);
  --warning: #ffa928;
  --warning-bg: rgba(255, 169, 40, 0.14);
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.14);
  --vip: #8b5cf6;

  /* Texte plein (blanc) utilisé sur les pastilles pleines vert/rouge */
  --on-success: #ffffff;
  --on-danger: #ffffff;

  /* Ombres — très discrètes, jamais lourdes (règle du design de référence) */
  --shadow-brand: 0 4px 14px rgba(255, 169, 40, 0.2);

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Espacements — resserrés (densité "trading terminal") */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-8: 30px;

  /* Typo (identique dans les deux thèmes — seule la couleur change) */
  --font-family: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs: 10.5px;
  --fs-sm: 12px;
  --fs-base: 13.5px;
  --fs-md: 14.5px;
  --fs-lg: 16.5px;
  --fs-xl: 19px;
  --fs-2xl: 23px;
  --fs-3xl: 27px;

  /* Layout */
  --app-max-width: 480px;
  --header-height: 52px;
  --bottom-nav-height: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   DARK THEME — thème principal ("Trading Terminal" noir dense)
   ========================================================================== */
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #0b0c0e;
  --bg-card: #15161a;
  --bg-card-light: #1a1c21;
  --bg-input: #1d1f24;
  --bg-elevated: #22252b;

  --text-primary: #ffffff;
  --text-secondary: #a6a7ab;
  --text-muted: #66686f;

  --border-color: #23252a;
  --border-color-light: #2e3137;

  --shadow-card: none;
  --shadow-nav: 0 -1px 0 rgba(255, 255, 255, 0.03);

  --nav-bg-color: rgba(11, 12, 14, 0.98);
  --scrim-color: rgba(0, 0, 0, 0.78);
  --brand-soft-bg: rgba(255, 169, 40, 0.1);
  --premium-tint-bg: var(--bg-card);

  --vip-gradient: linear-gradient(135deg, #6d3fd1 0%, #3d2470 100%);
  --vip-border: transparent;
  --vip-text-strong: #ffffff;
  --vip-text-soft: rgba(255, 255, 255, 0.75);

  --bg-hero-gradient: linear-gradient(160deg, #17181c 0%, #000000 100%);
  --bg-balance-gradient: linear-gradient(155deg, #17181c 0%, #0a0a0b 100%);
  --bg-ai-gradient: linear-gradient(120deg, #1c1610 0%, #131417 100%);
  --bg-chart-gradient: linear-gradient(160deg, #16171b, #000000);
  --splash-bg-gradient: radial-gradient(ellipse at 50% 20%, #17181c 0%, #000000 60%);

  --bg-page-image: url('../images/bg-theme-dark.jpg');
}

/* ==========================================================================
   LIGHT THEME (dérivé du même Design System, non supprimé)
   ========================================================================== */
[data-theme="light"] {
  --bg-primary: #f7f8fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-light: #f3f4f6;
  --bg-input: #f8fafc;
  --bg-elevated: #eef1f5;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --border-color: #e5e7eb;
  --border-color-light: #cbd5e1;

  --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow-nav: 0 -2px 16px rgba(15, 23, 42, 0.08);

  --nav-bg-color: rgba(255, 255, 255, 0.96);
  --scrim-color: rgba(15, 23, 42, 0.45);
  --brand-soft-bg: rgba(255, 169, 40, 0.12);
  --premium-tint-bg: #fdf6e8;

  --vip-gradient: linear-gradient(135deg, #f3e8ff 0%, #e4d3fb 55%, #d6c0f7 100%);
  --vip-border: #dcc4f5;
  --vip-text-strong: #3b1a78;
  --vip-text-soft: rgba(59, 26, 120, 0.72);

  --bg-hero-gradient: linear-gradient(160deg, #ffffff 0%, #f0f2f5 100%);
  --bg-balance-gradient: linear-gradient(155deg, #ffffff 0%, #fbf7ee 100%);
  --bg-ai-gradient: linear-gradient(120deg, #fff8ea 0%, #ffffff 100%);
  --bg-chart-gradient: linear-gradient(160deg, #ffffff, #f7f8fa);
  --splash-bg-gradient: radial-gradient(ellipse at 50% 20%, #ffffff 0%, #eef0f3 60%);

  --bg-page-image: url('../images/bg-theme-light.jpg');
}