/* Gran Concurso de Halloween — tokens de diseño.
   Dirección "noche de dulces": morado nocturno con brillo magenta y naranja de calabaza, tomados de
   la pieza que publicó el cliente. El formulario vive sobre papel crema cálido para que leerlo y
   llenarlo no cueste: el teatro es del hero, la legibilidad es del formulario.
   Los componentes no usan hex sueltos: todo sale de aquí. */

:root {
  color-scheme: dark;

  /* Superficies de la noche */
  --color-bg: #160420;
  --color-night: #160420;
  --color-night-soft: #23073a;
  --color-surface-dark: #2c0b47;
  --color-paper: #fff4e3;            /* papel del formulario */
  --color-paper-deep: #ffe7c9;
  --color-surface: #fffaf2;
  --color-print: #fffaf2;

  /* Marca y acción */
  --color-primary: #ff7a18;          /* calabaza; encima va texto oscuro (5,1:1) */
  --color-primary-strong: #ff9440;   /* hover / active sobre fondo oscuro */
  --color-on-primary: #2a0a3d;
  --color-candy: #ffc531;            /* amarillo de caramelo */
  --color-magenta: #e832c4;          /* brillo, nunca fondo de texto */
  --color-violet: #7b2cbf;
  --gradient-brand: linear-gradient(92deg, #ffc531, #ff7a18 55%, #e832c4);
  --gradient-glow: radial-gradient(60% 55% at 50% 42%, rgba(232, 50, 196, 0.55), rgba(22, 4, 32, 0) 70%);

  /* Texto sobre la noche */
  --color-heading: #fff4e3;
  --color-text: #f4e3d2;
  --color-muted: #cdb3d8;            /* 7,2:1 sobre --color-night */
  --color-link: #ffc531;
  --color-link-strong: #ffd968;
  --color-on-dark: #fff4e3;
  --color-on-dark-muted: #cdb3d8;

  /* Acento estructural (barras, bordes, cintas): el morado de la marca */
  --color-accent-deep: #4a1368;
  --color-accent: #6a2d9c;
  --color-accent-soft: #d9b8ef;
  --color-tape: rgba(255, 197, 49, 0.45);

  /* Bordes */
  --color-border: rgba(255, 244, 227, 0.18);
  --color-border-strong: rgba(255, 244, 227, 0.38);
  --color-border-input: #7a5a35;     /* contorno de controles sobre papel */

  /* Estados: siempre con ícono y texto, nunca solo color */
  --color-success: #2f7d4f;
  --color-success-strong: #25663f;
  --color-success-bg: #e5f3ea;
  --color-error: #b3261e;
  --color-error-bg: #fde7e4;
  --color-error-on-dark: #ff8f85;
  --color-warning-bg: #fff1c9;
  --color-warning-text: #6b4a00;
  --color-focus: #ffc531;
  --color-scrim: rgba(12, 2, 20, 0.72);
  --color-selection: #ffd1a8;

  /* Tipografía */
  --font-display: "Lilita One", "Trebuchet MS", "Gill Sans", sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-hero: clamp(2.75rem, 1.7rem + 4.8vw, 5.25rem);
  --text-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --text-h3: 1.4375rem;
  --text-code: clamp(3.5rem, 2rem + 8vw, 6rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --leading-tight: 0.96;
  --leading-snug: 1.15;
  --leading-body: 1.6;

  /* Espacio: escala de 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --width-page: 68rem;
  --width-form: 38rem;
  --width-prose: 42rem;
  --tap-min: 48px;

  /* Radios */
  --radius-input: 14px;
  --radius-pill: 999px;
  --radius-print: 4px;
  --radius-card: 22px;
  --radius-board: 18px;

  /* Sombras y brillos */
  --shadow-print: 0 1px 0 rgba(0, 0, 0, 0.06), 0 18px 34px -14px rgba(10, 2, 18, 0.7);
  --shadow-print-lift: 0 1px 0 rgba(0, 0, 0, 0.06), 0 28px 48px -16px rgba(10, 2, 18, 0.78);
  --shadow-card: 0 20px 44px -22px rgba(10, 2, 18, 0.8);
  --shadow-dialog: 0 36px 70px -24px rgba(6, 1, 12, 0.85);
  --shadow-glow: 0 0 0 1px rgba(255, 244, 227, 0.08), 0 28px 70px -30px rgba(232, 50, 196, 0.75);
  --shadow-candy: 0 6px 0 0 #c9560c;  /* relieve del botón principal */

  /* Motion: solo transform y opacity */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* Capas */
  --z-header: 10;
  --z-sticky: 20;
  --z-modal: 100;
  --z-toast: 1000;
}

/* Islas de papel dentro de la noche: formulario, éxito, páginas legales y el panel.
   Redeclarar los tokens de texto evita tener que duplicar reglas en cada componente. */
.on-paper {
  color-scheme: light;
  --color-bg: var(--color-paper);
  --color-heading: #2a0a3d;
  --color-text: #33203d;
  --color-muted: #6a5068;
  --color-link: #7b2cbf;
  --color-link-strong: #5b1b92;
  /* El naranja claro del tema oscuro no contrasta sobre papel: aquí va el tostado. */
  --color-primary-strong: #b14a08;
  --color-border: #e8d3b8;
  --color-border-strong: #c9ab85;
  --color-focus: #7b2cbf;
  --color-on-dark: #fff4e3;
  color: var(--color-text);
}