/* Entre Sesiones · por Vida Valiosa — tokens del sistema Corriente
   Fuente única para app/ y panel/. No escribir colores, radios ni sombras sueltos en otros archivos.
   Origen: app/css/tokens.css + _ds/tokens/ (espaciado, tamaños de texto, esquinas asimétricas).
   Las fuentes son locales (fonts.css): sin peticiones a Google Fonts. */
@import url('fonts.css');

:root {
  /* paleta base — «Corriente» */
  --indigo-950: #0D1226;
  --indigo-900: #151B33;
  --indigo-800: #1F2647;
  --linen-100: #FBF6F1;
  --linen-200: #F3E9E0;
  --ink-900: #141726;
  --ink-500: #5F6377;
  --coral-500: #FF7A59;
  --coral-600: #E05B3C;
  --coral-700: #BE3F1D;
  --coral-btn: #CF4826;
  --peach-300: #FFC59B;
  --sky-400: #8FA8D8;
  --sky-200: #C3D2EE;

  /* alias semánticos */
  --bg-dark: var(--indigo-900);
  --bg-dark-2: var(--indigo-800);
  --bg-dark-hover: var(--indigo-950);
  --bg-light: var(--linen-100);
  --bg-light-2: var(--linen-200);
  --text-primary: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-dark: var(--linen-100);
  --text-on-dark-muted: #B7BBD1;
  --accent-primary: var(--coral-500);
  --accent-primary-deep: var(--coral-600);
  --accent-primary-text: var(--coral-700);
  --accent-primary-btn: var(--coral-btn);
  --accent-warm: var(--peach-300);
  --accent-cool: var(--sky-400);
  --accent-cool-light: var(--sky-200);
  --surface-card: #FFFFFF;
  --border-subtle: rgba(20, 23, 38, 0.08);
  --border-subtle-dark: rgba(255, 255, 255, 0.14);
  --gradient-warm: linear-gradient(135deg, var(--coral-500), var(--peach-300));
  --gradient-cool: linear-gradient(135deg, var(--sky-400), var(--sky-200));

  /* tipografía: Outfit solo en títulos, cifras grandes y logotipo; Inter en lo demás */
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-kicker: 0.08em;
  --text-display-1: clamp(2.6rem, 5vw, 4.2rem);
  --text-display-2: clamp(2rem, 3.6vw, 3rem);
  --text-h3: clamp(1.4rem, 2.2vw, 1.9rem);
  --text-price: clamp(2.2rem, 4vw, 3.4rem);
  --text-body-lg: 1.15rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-kicker: 0.8rem;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* espaciado y ancho */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad-y: clamp(64px, 10vw, 128px);
  --content-max: 1180px;
  --touch-min: 44px;

  /* formas: tarjetas con esquinas de 26–34 px y una más larga */
  --radius-pill: 999px;
  --radius-card: 28px;
  --radius-card-sm: 18px;
  --radius-input: 14px;
  --card-corner-odd: 34px 34px 34px 96px;
  --card-corner-even: 34px 96px 34px 34px;
  --blob-a: 38% 62% 63% 37% / 41% 44% 56% 59%;
  --blob-b: 58% 42% 33% 67% / 62% 34% 66% 38%;

  /* sombras y movimiento */
  --shadow-card: 0 18px 40px -12px rgba(20, 23, 38, 0.16);
  --shadow-card-hover: 0 26px 54px -14px rgba(20, 23, 38, 0.22);
  --shadow-btn: 0 10px 24px -8px rgba(207, 72, 38, 0.45);
  --ease-flow: cubic-bezier(0.45, 0, 0.2, 1);
  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-blob: 13s;
  --motion-orb: 14s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-blob: 0s; --motion-orb: 0s; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); color: var(--text-primary); background: var(--bg-light); }
a { color: var(--accent-primary-text); }
a:hover { color: var(--accent-primary-deep); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--accent-primary-text); outline-offset: 2px; }

@keyframes morphBlobA { 0%, 100% { border-radius: var(--blob-a); } 50% { border-radius: var(--blob-b); } }
@keyframes floatOrb { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -24px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }