/* Tokens del sistema visual: papel blanco, tinta y tiquete. Fuente única de verdad:
   ningún color, medida, duración o curva se escribe fuera de este archivo. */
:root {
  color-scheme: light;

  /* Superficies (papel, tinte frío de la tinta) */
  --surface-base: #F5F7FB;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEF1F7;
  --surface-scrim: rgba(13, 21, 38, 0.44);
  --border-hairline: #E1E6EF;
  --border-strong: #C9D1DE;

  /* Tinta */
  --content-primary: #0D1526;
  --content-secondary: #4A5468;
  --content-tertiary: #667085;
  --content-on-accent: #FFFFFF;

  /* Acento: cobalto de sello. Solo acción y estado. Lo puede cambiar el admin. */
  --accent: #1D4ED8;
  --accent-pressed: color-mix(in srgb, var(--accent) 86%, #000);
  --accent-subtle: color-mix(in srgb, var(--accent) 10%, #FFF);
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);

  /* Sala a oscuras: el panel de la entrada y las billeteras */
  --ink-base: #0B1020;
  --ink-raised: #18203A;
  --ink-hairline: rgba(255, 255, 255, 0.12);
  --ink-content: #F4F6FB;
  --ink-secondary: #AEB8CF;
  --ink-glow: color-mix(in srgb, var(--accent) 46%, transparent);
  --on-brand: #FFFFFF;

  /* Estados */
  --success: #0F7B52;
  --success-subtle: #E4F5EC;
  --warning: #B45309;
  --warning-subtle: #FDF1DC;
  --danger: #C2261D;
  --danger-subtle: #FCE9E7;

  /* Tipografía */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-display: 700 clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)/1.1 var(--font-display);
  --text-title: 600 1.5rem/1.25 var(--font-display);
  --text-headline: 600 1.125rem/1.3 var(--font-display);
  --text-body-lg: 400 1.0625rem/1.5 var(--font-body);
  --text-body: 400 0.9375rem/1.5 var(--font-body);
  --text-label: 500 0.8125rem/1.25 var(--font-body);
  --text-caption: 600 0.6875rem/1.3 var(--font-body);
  --track-display: -0.02em;
  --track-title: -0.01em;
  --track-caption: 0.06em;

  /* Espacio (base 4) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --gutter: var(--s4);
  --tap: 2.75rem;
  --hairline: 1px;
  --content-max: 70rem;
  --form-max: 26rem;
  --sidebar: 15rem;
  --tabbar: 4rem;
  --poster: 3.5rem;
  --art: 5.5rem;
  --spot: 16rem;

  /* Forma */
  --r-chip: 999px;
  --r-control: 0.75rem;
  --r-card: 1.125rem;
  --r-sheet: 1.5rem;
  --notch: 0.625rem;

  /* Elevación: ambiental + directa */
  --e1: 0 1px 2px rgba(13, 21, 38, 0.05), 0 6px 20px -8px rgba(13, 21, 38, 0.10);
  --e2: 0 2px 4px rgba(13, 21, 38, 0.06), 0 16px 36px -12px rgba(13, 21, 38, 0.18);
  --e3: 0 4px 8px rgba(13, 21, 38, 0.08), 0 32px 64px -16px rgba(13, 21, 38, 0.28);

  /* Movimiento */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.3, 1.3, 0.5, 1);
  --t-micro: 120ms;
  --t-small: 220ms;
  --t-medium: 320ms;
  --t-exit: 200ms;
  --t-ambient: 1600ms;
  --t-wall: 60s;
  --lift: -0.1875rem;
  --stagger: 45ms;
  --shift: 0.75rem;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--s8);
  }
}

@media (min-width: 60rem) {
  :root {
    --poster: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: 80ms;
    --t-small: 100ms;
    --t-medium: 100ms;
    --t-exit: 80ms;
    --stagger: 0ms;
    --shift: 0rem;
    --lift: 0rem;
  }
}