/* =======================================================
   css/variables.css
   Variables globales, reset y estilos base del documento.
   ======================================================= */

/* ── Custom Properties ─────────────────────────────── */
:root {
  /* Fondos */
  --bg-main:       #0f1117;
  --bg-sidebar:    #161b22;
  --bg-card:       #1c2128;
  --bg-card-hover: #21262d;
  --bg-input:      #21262d;
  --bg-modal:      #1c2128;

  /* Bordes */
  --border: #30363d;

  /* Texto */
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #6e7681;

  /* Colores de acento */
  --accent-blue:   #58a6ff;
  --accent-green:  #3fb950;
  --accent-red:    #f85149;
  --accent-yellow: #d29922;
  --accent-purple: #bc8cff;
  --accent-orange: #ffa657;

  /* Semántica financiera */
  --income-color:   #3fb950;
  --expense-color:  #f85149;
  --balance-color:  #58a6ff;
  --reminder-color: #d29922;

  /* Layout */
  --sidebar-width:  240px;
  --topbar-height:  64px;

  /* Miscelánea */
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 4px 20px rgba(0, 0, 0, 0.4);
  --transition: 0.2s ease;
}

/* ── Reset Universal ───────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ── Base ──────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-main);
  color: var(--text-primary);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-blue);
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  display: block;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}