/*
 * Tokens de diseño de Cuadra. Los usan la app (/app) y las páginas estáticas
 * (landing, legal). Hermano de DolarFlashVe: misma base oscura "fintech" y
 * Geist, con acento menta en lugar de azul.
 *
 * Tema: oscuro por defecto; html.light fuerza claro, html.dark fuerza oscuro.
 * Sin clase se sigue la preferencia del sistema.
 */
:root {
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Oscuro (por defecto) */
  color-scheme: dark;
  --bg: #070b14;
  --bg-elev: #111a2b;
  --bg-elev-2: #172236;
  --bg-sunken: #0b111d;
  --bg-input: #0d1422;
  --text: #eef2fa;
  --text-2: #9aa5c2;
  --text-3: #5d6888;
  --border: #1f2a42;
  --border-strong: #2c3b5c;
  --accent: #2fd5a8;
  --accent-strong: #1fbf93;
  --accent-rgb: 47, 213, 168;
  --accent-soft: rgba(47, 213, 168, 0.12);
  --on-accent: #032a1f;
  --positive: #2fd5a8;
  --negative: #ff6b7f;
  --negative-soft: rgba(255, 107, 127, 0.12);
  --warning: #f2b04a;
  --warning-soft: rgba(242, 176, 74, 0.14);
  --info: #6f8cff;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --scrim: rgba(3, 6, 12, 0.66);
  --header-bg: rgba(7, 11, 20, 0.82);
}

@media (prefers-color-scheme: light) {
  :root:not(.dark) {
    color-scheme: light;
    --bg: #f3f6f9;
    --bg-elev: #ffffff;
    --bg-elev-2: #f7f9fc;
    --bg-sunken: #e9eef4;
    --bg-input: #ffffff;
    --text: #0e1626;
    --text-2: #536079;
    --text-3: #8d97ab;
    --border: #e1e7ef;
    --border-strong: #cdd6e3;
    --accent: #0c9a76;
    --accent-strong: #0a8263;
    --accent-rgb: 12, 154, 118;
    --accent-soft: rgba(12, 154, 118, 0.1);
    --on-accent: #ffffff;
    --positive: #0c9a76;
    --negative: #d93a55;
    --negative-soft: rgba(217, 58, 85, 0.08);
    --warning: #c27a12;
    --warning-soft: rgba(194, 122, 18, 0.1);
    --info: #3f5fe0;
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-2: 0 12px 32px rgba(15, 23, 42, 0.12);
    --scrim: rgba(15, 23, 42, 0.4);
    --header-bg: rgba(243, 246, 249, 0.86);
  }
}

:root.light {
  color-scheme: light;
  --bg: #f3f6f9;
  --bg-elev: #ffffff;
  --bg-elev-2: #f7f9fc;
  --bg-sunken: #e9eef4;
  --bg-input: #ffffff;
  --text: #0e1626;
  --text-2: #536079;
  --text-3: #8d97ab;
  --border: #e1e7ef;
  --border-strong: #cdd6e3;
  --accent: #0c9a76;
  --accent-strong: #0a8263;
  --accent-rgb: 12, 154, 118;
  --accent-soft: rgba(12, 154, 118, 0.1);
  --on-accent: #ffffff;
  --positive: #0c9a76;
  --negative: #d93a55;
  --negative-soft: rgba(217, 58, 85, 0.08);
  --warning: #c27a12;
  --warning-soft: rgba(194, 122, 18, 0.1);
  --info: #3f5fe0;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 12px 32px rgba(15, 23, 42, 0.12);
  --scrim: rgba(15, 23, 42, 0.4);
  --header-bg: rgba(243, 246, 249, 0.86);
}