/* Wealthome · sistema de temas.
   Un solo juego de variables por tema; los componentes se escriben una vez. */

/* ---------- Sereno (por defecto) ---------- */
:root {
  --bg:            #e9edf1;
  --surface:       #e9edf1;
  --text:          #33404f;
  --text-muted:    #8a94a3;
  --accent:        #3f8f6f;
  --accent-strong: #2f7d5d;
  --danger:        #b0603f;
  /* Lo que sale: naranja, distinto del rojo de --danger (un error) y del
     verde de lo que entra. */
  --outflow:       #c2782a;

  --font-family:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-base: 15px;
  --font-weight-strong: 600;

  --radius:      17px;
  --radius-sm:   13px;
  --border-width: 0px;
  --border-color: transparent;

  /* Un campo del mismo color que la superficie con sombra hundida casi no se
     ve: la sombra es la UNICA senal del neomorfismo. --field-bg es un tono
     aparte, y --focus-ring el anillo del foco. */
  --field-bg:      #e1e6eb;
  --focus-ring:    rgb(63 143 111 / 45%);

  /* Desplazamiento corto y sombra oscura cercana al fondo: la tarjeta se
     levanta, no flota. Con 8px y #c3c9d1 la pantalla era un tablero de piezas
     sueltas. */
  --shadow-light: #ffffff;
  --shadow-dark:  #d2d8df;
  --shadow-raised: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
  --shadow-raised-sm: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light);
  --shadow-inset:  inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  --shadow-overlay: 0 12px 40px rgb(51 64 79 / 30%);

  --touch-target: 44px;

  /* Paleta categorica de graficas. Cinco series: mas de cinco categorias en
     una grafica ya no se distinguen por color, se distinguen por etiqueta. */
  --chart-1: #3f8f6f;
  --chart-2: #4a7a9b;
  --chart-3: #a8894f;
  --chart-4: #8c6b8f;
  --chart-5: #6f7d8a;
  --chart-grid: #d2d8de;
  --backdrop: rgb(51 64 79 / 45%);

  /* El nombre de la barra: el verde de branding/svg/wealthome-palabra-color. */
  --logo-palabra: #0f4436;
}

/* ---------- Nocturno ---------- */
[data-theme="nocturno"] {
  --bg:            #232830;
  --surface:       #232830;
  --text:          #eef2f6;
  --text-muted:    #8993a1;
  --accent:        #5cc196;
  --accent-strong: #3f9d78;
  --danger:        #d98b6a;
  --outflow:       #e0a25a;

  --field-bg:      #1e2329;
  --focus-ring:    rgb(92 193 150 / 50%);

  --shadow-light: #2b313a;
  --shadow-dark:  #1c2027;
  --shadow-overlay: 0 12px 40px rgb(0 0 0 / 55%);

  --chart-1: #5cc196;
  --chart-2: #6ba3c9;
  --chart-3: #d0ac6a;
  --chart-4: #b795bb;
  --chart-5: #93a0ad;
  --chart-grid: #333b45;
  --backdrop: rgb(0 0 0 / 62%);

  /* El verde de la marca se pierde sobre #232830: nombre e icono van en la
     variante blanca de la referencia (ver .logo__icono--blanco). */
  --logo-palabra: #eef2f6;
}

/* ---------- Accesible ----------
   El neomorfismo comunica profundidad con sombras suaves, y esa es la primera
   señal que se pierde con la vista cansada. Aquí se sustituye por bordes. */
[data-theme="accesible"] {
  --bg:            #f2f4f6;
  --surface:       #ffffff;
  --text:          #14181d;
  --text-muted:    #3a424c;
  --accent:        #0a5c3a;
  --accent-strong: #084a2e;
  --danger:        #8c2f14;
  --outflow:       #8a4b00;

  --font-size-base: 20px;
  --font-weight-strong: 800;

  --radius:      14px;
  --radius-sm:   11px;
  --border-width: 3px;
  --border-color: #14181d;

  --field-bg:      #ffffff;
  --focus-ring:    #0a5c3a;

  --shadow-raised: 0 4px 0 #14181d;
  --shadow-raised-sm: 0 2px 0 #14181d;
  --shadow-inset:  none;
  --shadow-overlay: none;

  --touch-target: 56px;

  /* Aqui no se buscan colores bonitos sino SEPARACION: el contraste es la
     senal que queda cuando la sombra se pierde. */
  --chart-1: #0a5c3a;
  --chart-2: #123a63;
  --chart-3: #6b4306;
  --chart-4: #5a1a52;
  --chart-5: #333a41;
  --chart-grid: #14181d;
  --backdrop: rgb(0 0 0 / 75%);
}