/* ==========================================================
   Azulito — Design Tokens
   Una gotita del Olimar
   ========================================================== */

:root {
  /* --- Brand ------------------------------------------------ */
  --azulito: #29B8E8;          /* La gotita */
  --azulito-bright: #5CCEF2;
  --azulito-deep: #1A8FBD;

  --olimar: #0B4F6C;           /* Azul río profundo */
  --olimar-ink: #062E40;
  --olimar-soft: #1E6A87;

  --coral: #F4A26A;            /* Acento cálido familiar */
  --coral-soft: #FAD4B8;
  --coral-deep: #D97A3D;

  --sunny: #F7D46A;            /* Energía / destacados */
  --leaf: #7BBF8A;              /* Éxito suave */
  --cherry: #E67D7D;            /* Alerta cálida */

  /* --- Surface (light) -------------------------------------- */
  --cream: #FDF9F3;             /* Fondo crema principal */
  --cream-2: #F5EEE2;
  --paper: #FFFFFF;
  --paper-2: #FBF7F0;
  --ink: #0A1F2B;               /* Texto principal */
  --ink-2: #2B4453;
  --ink-3: #5A7380;
  --ink-4: #8FA3AE;
  --hairline: rgba(11, 79, 108, 0.12);
  --hairline-2: rgba(11, 79, 108, 0.06);

  /* --- Shadows --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(11, 79, 108, .08);
  --shadow-md: 0 8px 24px -8px rgba(11, 79, 108, .15), 0 2px 4px rgba(11, 79, 108, .06);
  --shadow-lg: 0 24px 48px -16px rgba(11, 79, 108, .22), 0 4px 12px rgba(11, 79, 108, .08);
  --shadow-xl: 0 40px 80px -24px rgba(11, 79, 108, .28), 0 8px 24px rgba(11, 79, 108, .10);
  --shadow-water: 0 20px 40px -12px rgba(41, 184, 232, .35);

  /* --- Radii ----------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* --- Type ------------------------------------------------ */
  --font-display: "Fraunces", "Georgia", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- Motion ---------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 400ms;

  /* --- Spacing ---------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Semantic */
  --bg: var(--cream);
  --bg-elev: var(--paper);
  --bg-elev-2: var(--paper-2);
  --text: var(--ink);
  --text-muted: var(--ink-3);
  --text-subtle: var(--ink-4);
  --border: var(--hairline);
  --border-soft: var(--hairline-2);
  --primary: var(--azulito);
  --primary-deep: var(--olimar);
  --accent: var(--coral);
}

html[data-theme="dark"] {
  --cream: #0A1F2B;
  --cream-2: #0E2A38;
  --paper: #10303F;
  --paper-2: #0C2734;
  --ink: #EAF4F9;
  --ink-2: #BBD4DE;
  --ink-3: #8AA8B6;
  --ink-4: #627D8B;
  --hairline: rgba(234, 244, 249, 0.10);
  --hairline-2: rgba(234, 244, 249, 0.05);
  --azulito: #4CC8F2;
  --olimar: #A5D8EA;
  --coral: #F7B589;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-xl: 0 40px 80px -24px rgba(0, 0, 0, .7);
  --shadow-water: 0 20px 40px -12px rgba(41, 184, 232, .25);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--azulito); color: white; }

/* Scrollbar sutil */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }

/* Typography helpers */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olimar);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}