/* ══════════════════════════════════════════════════════════════════
   OSCORP · TOKENS DE MARCA — fuente única de verdad
   ------------------------------------------------------------------
   Todas las páginas del sitio cargan este archivo. Si cambias un color
   aquí, cambia en TODO el sitio. No copies estos tokens dentro de las
   páginas: si una página los redefine, gana la página y se rompe la
   consistencia.

   Hay DOS colores de acento y no son lo mismo:

     --accent  El lima de Oscorp. Es nuestra marca (el punto del
               wordmark, el orb, el landing). NO cambia por negocio.

     --acc     El color del NEGOCIO. Por defecto hereda el lima, pero
               en las páginas de cara al cliente (catálogo, carrito,
               comparar) lo sobreescribe brand.js con el color que el
               negocio configuró. Úsalo en acentos y tintes —
               NUNCA en texto de cuerpo, que siempre es --ink.

   Para cambiar el color principal del sitio: la línea --accent.
   Para el color de UN negocio: no toques nada aquí, lo hace brand.js.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── EL COLOR PRINCIPAL ─── cambia esta línea y cambia todo el sitio */
  --accent:    #ACF533;

  /* Color del negocio: hereda el de Oscorp hasta que brand.js lo cambie */
  --acc:       var(--accent);
  /* Texto legible ENCIMA de --acc. Lo recalcula brand.js según qué tan
     oscuro sea el color del negocio (lima pide tinta, verde bosque pide
     blanco). Sin esto, un acento oscuro deja los CTAs ilegibles. */
  --acc-ink:   #18181B;

  /* ─── Superficies ─── */
  --bg:        #F5F4F0;   /* fondo general, off-white cálido — nunca blanco puro */
  --surface:   #FFFFFF;   /* cards, modales, inputs */

  /* ─── Tipografía ─── */
  --ink:       #18181B;   /* titulares y texto principal */
  --ink-2:     #52525B;   /* subtítulos, texto secundario */
  --ink-3:     #A1A1AA;   /* placeholders, labels de sección, timestamps */

  /* ─── Líneas ─── */
  --separator: rgba(24, 24, 27, 0.06);
  --hairline:  rgba(24, 24, 27, 0.10);

  /* ─── Semánticos ─── */
  --danger:    #E04545;
  --estado-pendiente:  #EAB308;
  --estado-aceptado:   #60A5FA;
  --estado-completado: #34D399;
  --estado-cancelado:  #E04545;

  /* ─── Movimiento (§6 de BRAND_WEB.md) ─── */
  --ease-outExpo:  cubic-bezier(0.16, 1, 0.30, 1);   /* entradas */
  --ease-inExpo:   cubic-bezier(0.70, 0, 0.84, 0);   /* salidas */
  --ease-outQuint: cubic-bezier(0.22, 1, 0.36, 1);   /* reveals */
  --ease-outBack:  cubic-bezier(0.34, 1.56, 0.64, 1);/* rebote: CTAs, chips */
  --ease-circ:     cubic-bezier(0.85, 0, 0.15, 1);   /* transiciones de vista */

  --d-instant:  150ms;
  --d-fast:     300ms;
  --d-medium:   600ms;
  --d-slow:     900ms;
}

/* ── Orbs ──
   Los <svg> del orb llevan sus stops en atributos (stop-color="#ACF533"), y
   var() NO funciona dentro de un atributo de presentación. Por eso el color se
   maneja desde aquí: el CSS gana sobre el atributo, que queda como fallback.

     [data-orb]            → el orb de Oscorp, sigue --accent
     [data-orb="negocio"]  → el orb del splash, sigue el color del negocio

   El orden importa: la regla de negocio va después para poder ganar. */
[data-orb] stop:first-child { stop-color: var(--accent); }
[data-orb] stop:last-child  { stop-color: color-mix(in srgb, var(--accent) 50%, transparent); }

[data-orb="negocio"] stop:first-child { stop-color: var(--acc); }
[data-orb="negocio"] stop:last-child  { stop-color: color-mix(in srgb, var(--acc) 50%, transparent); }