/* =============================================
   AHORRETA - Fintech Dark Design System
   Fuente display: DM Serif Display
   Fuente UI: DM Sans
   Paleta: Argentina — Celeste & Blanco
   ============================================= */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

/* ---------- Variables ---------- */
:root {
  /* Fondos oscuros con tinte celeste */
  --bg-base: #060c14;
  --bg-surface: #0b1420;
  --bg-elevated: #101d2e;
  --bg-hover: #162538;
  --bg-input: #0e1825;
  --border: #1a2e44;
  --border-strong: #244060;

  /* Texto */
  --text-primary: #f0f6ff;
  --text-secondary: #7ba3cc;
  --text-muted: #3d6080;

  /* MARCA — celeste y blanco argentino (solo identidad, no datos) */
  --brand-celeste: #74c5f5;
  --brand-white: #ffffff;

  /* DATOS — convención financiera universal */
  --accent-green: #22c55e; /* verde = ingreso / positivo */
  --accent-green-dim: #14532d;
  --accent-red: #f0445a; /* rojo = gasto / negativo */
  --accent-red-dim: #8a1a27;

  /* Sol de mayo dorado — cuotas / deuda */
  --accent-amber: #f5c842;
  --accent-amber-dim: #7a5c00;

  /* Celeste — info / ahorros ARS */
  --accent-blue: #38a8f5;
  --accent-blue-dim: #0a3860;

  /* Violeta — ahorros USD / patrimonio */
  --accent-violet: #a78bfa;
  --accent-violet-dim: #3b2880;

  --sidebar-w: 240px;
  --sidebar-collapsed: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --font-display: "DM Sans", sans-serif;
  --font-ui: "DM Sans", sans-serif;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.18);
  --shadow-glow-red: 0 0 20px rgba(240, 68, 90, 0.15);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  background-color: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* subtle noise texture on bg */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}