/* ============================================================
   SUITE PERSONAL DE TRADING · Sistema de diseño (tokens)
   Identidad: terminal de precisión · calma · elegancia
   ============================================================ */

:root {
  /* --- Tipografía ------------------------------------------ */
  --font-display: "Space Grotesk", system-ui, sans-serif;   /* titulares, técnica */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif; /* interfaz, lectura */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;   /* cifras, datos, ticks */

  /* Escala de tipo (fluida, base 16) */
  --t-xs: 0.75rem;    /* 12 · etiquetas mono */
  --t-sm: 0.8125rem;  /* 13 · secundario */
  --t-base: 0.9375rem;/* 15 · cuerpo */
  --t-md: 1.0625rem;  /* 17 */
  --t-lg: 1.375rem;   /* 22 · subtítulos */
  --t-xl: 1.875rem;   /* 30 · títulos */
  --t-2xl: 2.5rem;    /* 40 · hero */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* --- Espaciado (base 4) ---------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* --- Radios ---------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* --- Estructura ------------------------------------------ */
  --rail-w: 264px;          /* ancho de la barra lateral expandida */
  --rail-w-collapsed: 76px; /* ancho colapsado */
  --topbar-h: 68px;
  --content-max: 1240px;

  /* --- Motion (muy suave) ---------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;

  /* --- Acento fijo (idéntico en ambos temas) --------------- */
  --electric: #2F6BFF;
  --electric-bright: #4C82FF;
  --electric-soft: rgba(47, 107, 255, 0.14);
  --positive: #3FB980;   /* verde discreto para P&L favorable futuro */
  --negative: #E06666;   /* rojo discreto para P&L adverso futuro */
}

/* ============================================================
   TEMA OSCURO (por defecto)
   ============================================================ */
:root,
[data-theme="dark"] {
  --void:        #080B12;  /* negro suave · fondo base */
  --bg:          #0B111C;  /* fondo de la app */
  --surface:     #0E1626;  /* navy · superficie principal */
  --surface-2:   #131E32;  /* panel elevado */
  --surface-3:   #172439;  /* hover / estado activo */
  --graphite:    #1B2536;  /* grafito */

  --line:        rgba(255, 255, 255, 0.07);  /* hairline */
  --line-strong: rgba(255, 255, 255, 0.13);

  --text:        #E6EAF2;  /* texto principal */
  --text-2:      #A7B2C6;  /* secundario */
  --text-3:      #6B788F;  /* terciario / mono labels */
  --text-faint:  #45536B;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --glow: 0 0 0 1px rgba(47,107,255,0.35), 0 8px 30px -10px rgba(47,107,255,0.4);

  color-scheme: dark;
}

/* ============================================================
   TEMA CLARO (preparado)
   ============================================================ */
[data-theme="light"] {
  --void:        #EEF1F6;
  --bg:          #F4F6FA;
  --surface:     #FFFFFF;
  --surface-2:   #FBFCFE;
  --surface-3:   #F1F4F9;
  --graphite:    #E3E8F0;

  --line:        rgba(14, 22, 38, 0.09);
  --line-strong: rgba(14, 22, 38, 0.16);

  --text:        #101828;
  --text-2:      #45536B;
  --text-3:      #6B788F;
  --text-faint:  #98A2B3;

  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-md: 0 10px 28px -12px rgba(16,24,40,0.18);
  --shadow-lg: 0 24px 60px -24px rgba(16,24,40,0.22);
  --glow: 0 0 0 1px rgba(47,107,255,0.4), 0 8px 30px -12px rgba(47,107,255,0.3);

  color-scheme: light;
}