/* ==========================================================================
   Mipplet — tokens del sistema de diseño.
   Única fuente de verdad: la landing y la app leen de aquí. Nada de colores,
   tamaños ni tiempos sueltos en otros archivos.
   ========================================================================== */

:root {
  /* --- Escala de marca (violeta) ---------------------------------------- */
  --violet-950: #100a20;
  --violet-900: #1f1440;
  --violet-800: #2a1a52;
  --violet-700: #382064; /* Deep Violet — primario */
  --violet-600: #5a3bb0;
  --violet-500: #7654d6; /* Violet — secundario */
  --violet-400: #9a80e6;
  --violet-300: #b9a5f5; /* Lavender — acento */
  --violet-200: #d7cafa;
  --violet-100: #ebddfb; /* Soft */
  --violet-50:  #f3eefc;
  --violet-25:  #f8f7fb; /* Cloud */

  /* --- Semánticos: solo cuando comunican un estado ---------------------- */
  --green-600: #23845f;
  --amber-600: #a86d12;
  --red-600:   #c8384e;

  /* --- Roles (tema día) ------------------------------------------------- */
  --bg:               var(--violet-25);
  --bg-ambient:       var(--violet-50);
  --surface:          #ffffff;
  --surface-elevated: #ffffff;
  --surface-sunken:   #f1edf8;
  --border:           rgb(56 32 100 / 0.10);
  --border-strong:    rgb(56 32 100 / 0.18);

  --text:   var(--violet-900);
  --text-2: #5e5873;
  --text-3: #6f6985;

  --primary:       var(--violet-700);
  --primary-hover: var(--violet-800);
  --on-primary:    #ffffff;
  --accent:        var(--violet-500);
  --accent-soft:   var(--violet-100);
  --accent-muted:  var(--violet-300);

  --success: var(--green-600);
  --warning: var(--amber-600);
  --error:   var(--red-600);
  --info:    var(--violet-500);

  /* Materiales */
  --glass-bg:        rgb(255 255 255 / 0.66);
  --glass-bg-strong: rgb(255 255 255 / 0.82);
  --glass-edge:      rgb(56 32 100 / 0.08);
  --glass-light:     inset 0 1px 0 rgb(255 255 255 / 0.65);
  --glass-blur:      saturate(160%) blur(18px);

  /* --- Tipografía ------------------------------------------------------- */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display:    clamp(2.75rem, 1.55rem + 4.7vw, 5.25rem);
  --fs-heading:    clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --fs-subheading: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-lead:       clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:       1rem;
  --fs-small:      0.9375rem;
  --fs-label:      0.875rem;
  --fs-caption:    0.8125rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --ls-display: -0.042em;
  --ls-heading: -0.03em;
  --ls-snug:    -0.015em;

  /* --- Espaciado (múltiplos de 4) --------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  --gutter: clamp(16px, 4vw, 40px);
  --page-max: 1200px;
  --section-gap: clamp(96px, 12vw, 176px);

  /* --- Radios ----------------------------------------------------------- */
  --r-sm:     8px;
  --r-input:  14px;
  --r-button: 999px;
  --r-card:   24px;
  --r-float:  20px;
  --r-sheet:  28px;
  --r-modal:  28px;

  /* --- Elevación -------------------------------------------------------- */
  --e-1: 0 1px 2px rgb(31 20 64 / 0.06), 0 1px 1px rgb(31 20 64 / 0.03);
  --e-2: 0 10px 28px -12px rgb(31 20 64 / 0.18), 0 2px 6px rgb(31 20 64 / 0.05);
  --e-3: 0 28px 56px -20px rgb(31 20 64 / 0.28), 0 6px 14px rgb(31 20 64 / 0.06);

  /* --- Movimiento ------------------------------------------------------- */
  --dur-micro: 160ms;
  --dur-comp:  260ms;
  --dur-nav:   360ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  /* --- Iconos ----------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;

  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);

  color-scheme: light;
}

/* Spring real donde el navegador lo soporta. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.13 5%, 0.42 12%, 0.74 22%, 0.93 33%, 1.025 45%, 1.035 55%, 1.01 70%, 1);
  }
}

/* --- Tema noche ---------------------------------------------------------
   Se aplica con data-theme="night" o, sin preferencia guardada, cuando el
   sistema está en oscuro. */
:root[data-theme="night"],
.theme-night {
  --bg:               var(--violet-950);
  --bg-ambient:       #160e2c;
  --surface:          #1a1230;
  --surface-elevated: #22183d;
  --surface-sunken:   #0c0718;
  --border:           rgb(214 200 255 / 0.10);
  --border-strong:    rgb(214 200 255 / 0.18);

  --text:   #efebf8;
  --text-2: #aba3c4;
  --text-3: #958eae;

  --primary:       var(--violet-300);
  --primary-hover: var(--violet-200);
  --on-primary:    var(--violet-900);
  --accent:        var(--violet-300);
  --accent-soft:   rgb(185 165 245 / 0.14);
  --accent-muted:  rgb(185 165 245 / 0.45);

  --success: #5cc79a;
  --warning: #e0a548;
  --error:   #f0788a;
  --info:    var(--violet-300);

  --glass-bg:        rgb(26 18 48 / 0.62);
  --glass-bg-strong: rgb(30 21 54 / 0.82);
  --glass-edge:      rgb(214 200 255 / 0.10);
  --glass-light:     inset 0 1px 0 rgb(255 255 255 / 0.06);

  --e-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --e-2: 0 12px 30px -12px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
  --e-3: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 6px 14px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --bg:               var(--violet-950);
    --bg-ambient:       #160e2c;
    --surface:          #1a1230;
    --surface-elevated: #22183d;
    --surface-sunken:   #0c0718;
    --border:           rgb(214 200 255 / 0.10);
    --border-strong:    rgb(214 200 255 / 0.18);
    --text:   #efebf8;
    --text-2: #aba3c4;
    --text-3: #958eae;
    --primary:       var(--violet-300);
    --primary-hover: var(--violet-200);
    --on-primary:    var(--violet-900);
    --accent:        var(--violet-300);
    --accent-soft:   rgb(185 165 245 / 0.14);
    --accent-muted:  rgb(185 165 245 / 0.45);
    --success: #5cc79a;
    --warning: #e0a548;
    --error:   #f0788a;
    --info:    var(--violet-300);
    --glass-bg:        rgb(26 18 48 / 0.62);
    --glass-bg-strong: rgb(30 21 54 / 0.82);
    --glass-edge:      rgb(214 200 255 / 0.10);
    --glass-light:     inset 0 1px 0 rgb(255 255 255 / 0.06);
    --e-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --e-2: 0 12px 30px -12px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3);
    --e-3: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 6px 14px rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-comp:  1ms;
    --dur-nav:   1ms;
  }
}