/*
  VARIABLES DE DISEÑO
  Si después queremos cambiar un color, radio o sombra en todo el sitio,
  normalmente bastará con modificarlo una sola vez en este archivo.
*/
:root {
  --color-primary: #4657d9;
  --color-primary-dark: #3240b5;
  --color-secondary: #1f9d8b;
  --color-accent: #f4b740;

  --color-background: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #eef1ff;
  --color-text: #20253a;
  --color-text-muted: #697087;
  --color-border: #dfe3ee;
  --color-success: #16836f;
  --color-warning: #9a6400;

  --font-main: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 24px;
  --shadow-soft: 0 8px 28px rgba(46, 54, 99, 0.09);
  --sidebar-width: 260px;
  --content-width: 1180px;
  --transition: 180ms ease;
}

/* Estos valores reemplazan los anteriores cuando se activa el tema oscuro. */
[data-theme="dark"] {
  --color-background: #111522;
  --color-surface: #1b2030;
  --color-surface-soft: #242a45;
  --color-text: #f2f4ff;
  --color-text-muted: #b5bbce;
  --color-border: #343b50;
  --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.24);
}