/* ─────────────────────────────────────────────────────────────────────────────
   Tokens de Stocky Studio — un solo lugar para colores, sombras, radios,
   tiempos y curvas. Espejo de `frontend/styles/tokens.css` del sistema de
   Stocky: mismos nombres conceptuales y mismas curvas, para que las dos webs se
   sientan del mismo producto.

   Los tokens son PRIMITIVAS, no decisiones de diseño. Cada página se arma sus
   propios nombres semánticos apuntando acá (`--petrol: var(--stk-petrol)`), así
   las reglas que ya existen siguen andando y el valor vive en un solo archivo.

   REGLA QUE NO SE ROMPE: el chrome de la herramienta es NEUTRO. La app muestra
   piezas de OTRAS marcas y un entorno teñido de verde altera cómo se perciben
   sus colores. Por eso hay dos familias separadas —marca y grafito— y la app
   usa la segunda. El acento de marca sólo aparece en estados interactivos.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Marca (páginas públicas: landing, ingreso, registro) ── */
  --stk-petrol: #025159;
  --stk-petrol-up: #036a72; /* el petróleo un punto más claro, para hover */
  --stk-teal: #2ab0a3;
  --stk-deep: #06363b;
  --stk-night: #0a2e33;
  --stk-grad-end: #017374; /* cierre de los degradados de marca */
  --stk-yellow: #ffc300;
  --stk-yellow-up: #ffcd2b;

  /* ── Grafito (chrome de la herramienta) ── */
  --stk-chrome: #1c2321;
  --stk-chrome-2: #28312e;
  --stk-chrome-soft: #39443f;
  --stk-chrome-night: #12171a;
  /* Grafitos de superficie de la herramienta. Ojo: adentro de la app estos
     ocupan el lugar que en las páginas públicas ocupa el petróleo de marca —
     son el reemplazo neutro, no el verde. */
  --stk-graphite: #27302d;
  --stk-graphite-deep: #161c1a;
  --stk-graphite-mid: #33403c;
  /* Verde desaturado: el único lugar donde la marca toca la herramienta */
  --stk-accent: #2f7d70;
  --stk-accent-up: #46a08f;
  --stk-accent-soft: #e8f2f0;
  --stk-accent-ring: rgba(47, 125, 112, 0.22);

  /* ── Texto ── */
  --stk-ink: #111111;
  --stk-ink-app: #12171a; /* el de la app, con una pizca de azul */
  --stk-ink-2: #545454;
  --stk-ink-2-app: #565d5c;
  --stk-subtle: #666e6c;
  --stk-muted: #9ca3af;
  --stk-mp: #3483fa; /* azul de Mercado Pago — dato externo, no es de la marca */

  /* ── Superficies y líneas ── */
  --stk-white: #ffffff;
  --stk-bg: #f4f7f7; /* fondo de sección en las páginas de marca */
  --stk-app-bg: #f5f6f6; /* fondo neutro de la herramienta */
  --stk-canvas: #e6e8e8; /* lienzo donde se apoyan las piezas */
  --stk-surface: #eef5f5; /* pastilla clara sobre blanco */
  --stk-line: #e3eaea;
  --stk-line-app: #e4e7e6;
  --stk-line-strong: #cddcdc; /* separador que tiene que verse (cabeceras) */
  --stk-line-hover: #cfe3e2;
  --stk-line-app-hover: #cdd4d2; /* el anterior tiraba a verde agua de marca */

  /* ── Estados ── */
  --stk-ok: #2e7d32;
  /* Ámbar oscuro y no naranja brillante: es el único de los tres estados que
     no se leía. Con texto blanco encima daba 2,3:1 — muy por debajo del
     mínimo. Así queda a la par de --stk-ok y --stk-bad. */
  --stk-warn: #a05500;
  --stk-bad: #c62828;
  --stk-bad-bg: #fdecea;

  /* ── Sombras ──
     UNA sola escala, siempre sobre el neutro de tinta. Nada de sombras teñidas
     del color del elemento: un halo amarillo bajo un botón amarillo no se lee
     como profundidad, se lee como un brillo raro, y además obliga a inventar
     una sombra por cada color.

     La convención es de ESTADO, no de componente:
       sm     → reposo de elementos chicos (pastillas, filas, números)
       md     → reposo de tarjetas y botones
       lg     → cualquier hover
       float  → piezas apoyadas sobre fondo oscuro (hero, modales)
     Si algo necesita otra sombra, primero revisar si en realidad necesita otro
     estado. */
  --stk-shadow-xs: 0 1px 3px rgba(18, 23, 26, 0.06);
  --stk-shadow-sm: 0 2px 10px rgba(18, 23, 26, 0.07);
  --stk-shadow-md: 0 8px 24px rgba(18, 23, 26, 0.1);
  --stk-shadow-lg: 0 16px 38px rgba(18, 23, 26, 0.13);
  --stk-shadow-xl: 0 24px 60px rgba(18, 23, 26, 0.2);
  --stk-shadow-float: 0 24px 60px rgba(0, 0, 0, 0.28);
  --stk-shadow-float-lg: 0 26px 56px rgba(0, 0, 0, 0.42);
  --stk-shadow-inset-bar: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 16px rgba(18, 23, 26, 0.22);

  /* ── Radios ── */
  --stk-r-xs: 6px;
  --stk-r-sm: 10px;
  --stk-r-md: 14px;
  --stk-r-lg: 18px;
  --stk-r-xl: 20px;
  --stk-r-pill: 999px;

  /* ── Tiempos ──
     Los hovers van más lentos que en el sistema a propósito: a 0,15–0,18 s el
     movimiento se percibe como un salto, no como una transición. */
  --stk-dur-quick: 0.18s; /* opacidad, color de un ícono chico */
  --stk-dur-fast: 0.24s; /* bordes, fondos */
  --stk-dur-hover: 0.34s; /* hover de botones y tarjetas */
  --stk-dur-base: 0.3s; /* campos, pestañas */
  --stk-dur-slow: 0.5s; /* entradas medianas, overlays */
  --stk-dur-md: 0.55s; /* entrada del contenido principal */
  --stk-dur-lg: 0.7s; /* entradas largas: dibujar una línea, un visual grande */

  /* ── Curvas ── */
  --stk-smooth: cubic-bezier(0.22, 1, 0.36, 1); /* desacelera suave — entradas */
  --stk-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebote corto — hovers */
  --stk-out: ease-out;

  /* ── Gestos ── */
  --stk-lift: translateY(-2px);
  --stk-lift-sm: translateY(-1px);
  --stk-press: translateY(0) scale(0.98);
  /* La firma juguetona del sistema: el ícono adentro del elemento que se hoverea */
  --stk-tilt: rotate(-6deg) scale(1.08);
  --stk-focus-ring: 0 0 0 4px rgba(2, 81, 89, 0.28);
  --stk-focus-ring-app: 0 0 0 4px var(--stk-accent-ring);
}

/* Si el visitante pidió menos movimiento, los tiempos se vuelven casi cero en
   un solo lugar y no hace falta repetir la excepción en cada hoja. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --stk-dur-quick: 0.01ms;
    --stk-dur-fast: 0.01ms;
    --stk-dur-hover: 0.01ms;
    --stk-dur-base: 0.01ms;
    --stk-dur-slow: 0.01ms;
    --stk-dur-md: 0.01ms;
    --stk-dur-lg: 0.01ms;
  }
}