:root {
  color-scheme: dark;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --bg: #06101d;
  --bg-elevated: #091626;
  --bg-soft: #0b192c;
  --surface: rgba(14, 31, 52, 0.88);
  --surface-solid: #0f2036;
  --surface-strong: #142945;
  --surface-light: rgba(255, 255, 255, 0.055);

  --text: #f8fbff;
  --text-soft: #d6e2f2;
  --muted: #93a6bf;
  --muted-strong: #b2c0d2;

  --primary: #5eb9ff;
  --primary-strong: #318fff;
  --primary-soft: rgba(94, 185, 255, 0.13);
  --secondary: #8b5cf6;
  --cyan: #22d3ee;
  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #fb7185;

  --line: rgba(150, 174, 207, 0.16);
  --line-strong: rgba(94, 185, 255, 0.38);

  --gradient-brand: linear-gradient(135deg, #6ee7ff 0%, #5e9bff 48%, #8b5cf6 100%);
  --gradient-text: linear-gradient(100deg, #8ae7ff 0%, #6ea8ff 48%, #b393ff 100%);
  --gradient-surface: linear-gradient(150deg, rgba(20, 43, 71, 0.96), rgba(8, 23, 40, 0.98));

  --shadow-small: 0 16px 38px rgba(1, 7, 15, 0.22);
  --shadow-medium: 0 26px 70px rgba(1, 7, 15, 0.34);
  --shadow-large: 0 42px 110px rgba(1, 7, 15, 0.48);

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --container: 1200px;
  --header-height: 78px;

  --transition: 180ms ease;
  --transition-slow: 420ms cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f8fd;
  --bg-elevated: #ffffff;
  --bg-soft: #edf4fb;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-solid: #ffffff;
  --surface-strong: #e8f1fa;
  --surface-light: rgba(12, 37, 66, 0.045);

  --text: #071321;
  --text-soft: #17324f;
  --muted: #60758d;
  --muted-strong: #415870;

  --line: rgba(21, 65, 108, 0.14);
  --line-strong: rgba(49, 143, 255, 0.28);

  --gradient-surface: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(237, 245, 253, 0.98));

  --shadow-small: 0 16px 38px rgba(30, 73, 112, 0.09);
  --shadow-medium: 0 26px 70px rgba(30, 73, 112, 0.13);
  --shadow-large: 0 42px 110px rgba(30, 73, 112, 0.16);
}


/* =========================================================
   XIPALAPLUTS HOME MODERNA CLARA · V2
   ========================================================= */
html[data-theme="light"] {
  --bg: #f7f9fd;
  --bg-elevated: #ffffff;
  --bg-soft: #eef3fb;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --surface-strong: #e9f0fa;
  --surface-light: rgba(37, 99, 235, 0.045);

  --text: #101827;
  --text-soft: #25344a;
  --muted: #64748b;
  --muted-strong: #475569;

  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.09);
  --secondary: #7c3aed;
  --cyan: #0891b2;

  --line: rgba(37, 64, 102, 0.11);
  --line-strong: rgba(37, 99, 235, 0.24);

  --gradient-brand: linear-gradient(135deg, #38bdf8 0%, #2563eb 50%, #7c3aed 100%);
  --gradient-text: linear-gradient(100deg, #0284c7 0%, #2563eb 50%, #7c3aed 100%);
  --gradient-surface: linear-gradient(155deg, rgba(255,255,255,.99), rgba(246,249,255,.98));

  --shadow-small: 0 14px 35px rgba(30, 64, 110, 0.08);
  --shadow-medium: 0 24px 58px rgba(30, 64, 110, 0.12);
  --shadow-large: 0 38px 95px rgba(30, 64, 110, 0.16);
}

/* =========================================================
   XIPALAPLUTS · PALETA CLARA PREMIUM V3
   Fondo claro, tipografía azul marino y acentos azul-violeta.
   ========================================================= */
html[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f8fc;
  --bg-elevated: #ffffff;
  --bg-soft: #eef3fa;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-strong: #e8eef8;
  --surface-light: rgba(25, 55, 95, 0.045);

  --text: #0b1b33;
  --text-soft: #193451;
  --muted: #64748b;
  --muted-strong: #41536c;

  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.10);
  --secondary: #7c3aed;
  --cyan: #0891b2;

  --line: rgba(32, 61, 101, 0.12);
  --line-strong: rgba(37, 99, 235, 0.26);

  --gradient-brand: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #8b5cf6 100%);
  --gradient-text: linear-gradient(100deg, #0f66d8 0%, #356ee6 45%, #7c3aed 100%);
  --gradient-surface: linear-gradient(155deg, #ffffff 0%, #f5f8fd 100%);

  --shadow-small: 0 14px 36px rgba(29, 53, 87, 0.08);
  --shadow-medium: 0 24px 60px rgba(29, 53, 87, 0.13);
  --shadow-large: 0 38px 90px rgba(29, 53, 87, 0.17);
}