/* ════════════════════════════════════════════════════════════
   AVTT · Tokens de diseño
   Cada tema define EXACTAMENTE las mismas variables. Los componentes
   solo usan estas variables: nunca colores fijos.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Escala compartida por todos los temas */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --font-num: var(--font);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --nav-h: 64px;
  --sidebar-w: 232px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .18s;
}

/* ── Claro ─────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f3f6fb;
  --surface-3: #e6ecf5;
  --border: #d5deec;
  --border-strong: #b4c2da;
  --text: #142033;
  --text-muted: #52607a;
  --text-faint: #5d6a85;
  --accent: #1558b0;
  --accent-hover: #124a96;
  --accent-contrast: #ffffff;
  --accent-text: #1558b0;
  --accent-soft: #e2ecfa;
  --success: #1b7a3a;
  --success-soft: #def2e4;
  --warning: #8f4a00;
  --warning-soft: #fdebd0;
  --danger: #c62828;
  --danger-soft: #fde4e4;
  --c-molienda: #1558b0;
  --c-cuchara: #a14500;
  --c-total: #1b7a3a;
  --header-bg: linear-gradient(135deg, #0c447c, #185fa5);
  --header-text: #ffffff;
  --overlay: rgba(10, 20, 40, .5);
  --shadow: 0 1px 2px rgba(16, 32, 64, .08), 0 8px 24px rgba(16, 32, 64, .07);
  --shadow-lg: 0 12px 40px rgba(16, 32, 64, .22);
  --swatch-a: #1558b0;
  --swatch-b: #eef2f8;
}

/* ── Oscuro ────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080c16;
  --surface: #0d1525;
  --surface-2: #121c32;
  --surface-3: #192744;
  --border: #22324f;
  --border-strong: #35496c;
  --text: #d6e2f0;
  --text-muted: #94a9c2;
  --text-faint: #7a8fab;
  --accent: #1a6fd0;
  --accent-hover: #2480ec;
  --accent-contrast: #ffffff;
  --accent-text: #5db3ff;
  --accent-soft: #11284a;
  --success: #4ade80;
  --success-soft: #0f2c1c;
  --warning: #fbbf24;
  --warning-soft: #33260a;
  --danger: #ff6b6b;
  --danger-soft: #371417;
  --c-molienda: #40c4ff;
  --c-cuchara: #ffab40;
  --c-total: #00e676;
  --header-bg: linear-gradient(135deg, #0d1525, #0a1020);
  --header-text: #e8f0fa;
  --overlay: rgba(0, 4, 12, .72);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
  --swatch-a: #1a6fd0;
  --swatch-b: #0d1525;
}

/* ── Sakura (claro, rosa) ──────────────────────────────────── */
[data-theme="sakura"] {
  color-scheme: light;
  --bg: #fff5f8;
  --surface: #ffffff;
  --surface-2: #ffeaf2;
  --surface-3: #fbdbe8;
  --border: #f1c9db;
  --border-strong: #e3a7c2;
  --text: #2d0f1e;
  --text-muted: #7a4560;
  --text-faint: #86556d;
  --accent: #b5447a;
  --accent-hover: #9f3a6a;
  --accent-contrast: #ffffff;
  --accent-text: #a63a6d;
  --accent-soft: #fde4ef;
  --success: #1d6f4a;
  --success-soft: #dff3e8;
  --warning: #944a00;
  --warning-soft: #fdebd2;
  --danger: #c0262d;
  --danger-soft: #fde3e5;
  --c-molienda: #a63a6d;
  --c-cuchara: #7b3fa6;
  --c-total: #1d6f4a;
  --header-bg: linear-gradient(135deg, #9c3468, #bb4a82);
  --header-text: #ffffff;
  --overlay: rgba(60, 10, 35, .5);
  --shadow: 0 1px 2px rgba(120, 40, 80, .1), 0 8px 24px rgba(120, 40, 80, .09);
  --shadow-lg: 0 12px 40px rgba(120, 40, 80, .25);
  --swatch-a: #b5447a;
  --swatch-b: #fff5f8;
}

/* ── Sakura oscuro ─────────────────────────────────────────── */
[data-theme="sakura-dark"] {
  color-scheme: dark;
  --bg: #160810;
  --surface: #200d18;
  --surface-2: #2a1220;
  --surface-3: #361a2b;
  --border: #4a2038;
  --border-strong: #6b3052;
  --text: #f7dce9;
  --text-muted: #cf9db8;
  --text-faint: #b58099;
  --accent: #c93a80;
  --accent-hover: #dc4a92;
  --accent-contrast: #ffffff;
  --accent-text: #ff8fc4;
  --accent-soft: #3d1530;
  --success: #7ae7b4;
  --success-soft: #11301f;
  --warning: #ffc266;
  --warning-soft: #3a2509;
  --danger: #ff7a9a;
  --danger-soft: #3d1420;
  --c-molienda: #ff8ccc;
  --c-cuchara: #d0a0ff;
  --c-total: #80f0c0;
  --header-bg: linear-gradient(135deg, #8a1650, #c9427f);
  --header-text: #ffffff;
  --overlay: rgba(14, 2, 8, .75);
  --shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .65);
  --swatch-a: #c93a80;
  --swatch-b: #200d18;
}

/* ── Hacker (oscuro, verde neón, monoespaciada) ────────────── */
[data-theme="hacker-dark"] {
  color-scheme: dark;
  --font-display: ui-monospace, "Cascadia Mono", "Space Mono", Consolas, "Courier New", monospace;
  --font-num: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1b1b1b;
  --surface-3: #242424;
  --border: #2c3a14;
  --border-strong: #4a6414;
  --text: #e6e6e6;
  --text-muted: #a8a8a8;
  --text-faint: #8c8c8c;
  --accent: #c6fd0e;
  --accent-hover: #d6ff44;
  --accent-contrast: #0a0a0a;
  --accent-text: #c6fd0e;
  --accent-soft: #1c2608;
  --success: #5dff8a;
  --success-soft: #0c2414;
  --warning: #ffd24a;
  --warning-soft: #2b2308;
  --danger: #ff5a5a;
  --danger-soft: #2e1010;
  --c-molienda: #c6fd0e;
  --c-cuchara: #6ef0ff;
  --c-total: #5dff8a;
  --header-bg: linear-gradient(135deg, #0a0a0a, #172005);
  --header-text: #c6fd0e;
  --overlay: rgba(0, 0, 0, .78);
  --shadow: 0 0 0 1px rgba(198, 253, 14, .1), 0 8px 24px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px rgba(198, 253, 14, .25), 0 12px 40px rgba(0, 0, 0, .7);
  --swatch-a: #c6fd0e;
  --swatch-b: #141414;
}