/* =============================================================================
   theme-execution-market.css — PIEL B
   -----------------------------------------------------------------------------
   Fundada en los tokens REALES de Execution Market:
     · dashboard/src/styles/globals.css:12-65  (los --color-* como tripletas RGB)
     · dashboard/tailwind.config.js:51-58      (el par #000/#fff como marca)
     · landing/vision.html:28-35               (el único color que EM eligió)

   Sensación buscada: **instrumento.** Un recibo, no una app. Nada decorativo.

   Dos hallazgos que se heredan como doctrina, no como valores:
     1. "Glifo antes que matiz" (globals.css:454): la dirección la carga una
        flecha, el progreso la LUMINANCIA, la alarma el GROSOR del borde. Por eso
        esta piel funciona sin un solo color y la piel describeme puede sumar
        color como REFUERZO, nunca como único portador de significado.
     2. Punteado = "todavía no" (10 usos consistentes en EM). Es el token
        semántico más limpio del repo.

   Dos errores de EM que NO se heredan:
     · El alias de paleta de tailwind.config.js:17-42, que mapea las 22 familias
       de color al mismo gris. Hace que el código fuente MIENTA: ReputationBadge
       pide `bg-sky-50` y sale gris. Acá el componente pide var(--token) y el
       token dice la verdad en las dos pieles.
     · Los escapes por `style={{}}` (TaskDetail.tsx:317) — cinco hexes que
       esquivan el sistema entero. Prohibido por contrato.

   Ratios CALCULADOS (WCAG 2.1). Formato: [claro / oscuro].
   ============================================================================= */

[data-theme="execution-market"] {
  color-scheme: light dark;

  /* ===========================================================================
     SUPERFICIES — el par #fff/#000 ES la marca
     INTENCIÓN: en oscuro el fondo es NEGRO PURO, no un zinc-950 (globals.css:52).
     Es una decisión, no un descuido. La elevación no se hace con tono: la
     tarjeta tiene el MISMO fondo que la página y se separa con un borde de 1px
     (globals.css:22 declara --color-background-elevated igual al fondo).
     ======================================================================== */
  --surface-page: light-dark(#ffffff, #000000);
  --surface-raised: light-dark(#ffffff, #09090b);
  --surface-sunken: light-dark(#f4f4f5, #18181b);
  --surface-inverse: light-dark(#18181b, #fafafa);
  /* El lavado del acento sube medio paso en claro: con #f7edec el texto
     terciario daba 4.39:1 — fallaba AA por poco. Con #f9f2f1 da 4.55:1. */
  --surface-accent-soft: light-dark(#f9f2f1, #1f1413);
  --surface-overlay: light-dark(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.75));

  /* ===========================================================================
     TEXTO — ni negro puro ni blanco puro
     Valores literales de globals.css:25-27 y :57-59. El texto es zinc-950 sobre
     fondo blanco y zinc-50 sobre fondo negro: simétrico y deliberado.
     Corrección respecto de EM: su `foreground-muted` (#71717a) da 4.40:1 sobre
     la superficie hundida — falla AA por poco. Acá se baja medio paso.
     ======================================================================== */
  --text-primary:   light-dark(#09090b, #fafafa);   /* 19.90 / 20.12 */
  --text-secondary: light-dark(#3f3f46, #d4d4d8);   /* 10.44 / 14.21 */
  --text-tertiary:  light-dark(#6e6e77, #a1a1aa);   /*  5.05 /  8.19 · sunken 4.59 / 6.91 */
  --text-on-inverse: light-dark(#fafafa, #09090b);  /* 16.97 / 19.06 */
  --text-on-accent:  light-dark(#ffffff, #000000);  /* 10.01 /  8.24 */
  --text-on-action:  light-dark(#fafafa, #09090b);  /* 16.97 / 19.06 */
  --text-link:       light-dark(#8b0000, #e08c82);  /* 10.01 /  8.24 */
  --text-link-hover: light-dark(#6b0000, #efa69d);  /* el hover de vision.html:185 */

  /* ===========================================================================
     LÍNEAS — el borde reemplaza a la sombra
     INTENCIÓN: `.card` es `shadow-none` y el hover no ilumina, OSCURECE el borde
     hasta volverlo tinta (globals.css:235-237). Ese es el gesto de interacción
     de la casa y se traduce con una variable.
     `border-strong` sube respecto de EM (#d4d4d8 no llega a 3:1 como límite de
     componente); el hairline decorativo sí conserva el valor original.
     ======================================================================== */
  --border-subtle: light-dark(#e4e4e7, #27272a);
  --border-strong: light-dark(#8a8a94, #6a6a74);   /* 3.42 / 3.93 · sunken 3.11 / 3.31 */
  --border-absent: light-dark(#8a8a94, #6a6a74);
  --border-absent-style: dashed;
  --border-width-emphasis: 2px;   /* alarma fuerte SIN recurrir al matiz */
  --border-focus: light-dark(#09090b, #fafafa);
  --border-hover: var(--text-primary);

  /* ===========================================================================
     ACENTO — oxblood, y solo como ANOTACIÓN
     INTENCIÓN: `--accent:#8B0000` de landing/vision.html:31 es el único color
     que Execution Market eligió de verdad, y viene con su propia regla de uso:
     aparece en 6 lugares del manifiesto —links, barra de cita, línea de cierre—
     y JAMÁS como fondo de botón. Se respeta esa regla.
     En oscuro el oxblood se hunde contra el negro (2.1:1), así que se levanta
     a un ladrillo de la misma familia que sí cumple.
     ======================================================================== */
  --accent:         light-dark(#8b0000, #e08c82);   /* 10.01 / 8.24 */
  --accent-hover:   light-dark(#6b0000, #efa69d);
  --accent-support: light-dark(#3f3f46, #d4d4d8);   /* no hay segundo color: es tinta */

  /* ===========================================================================
     ACCIÓN — la acción es TINTA INVERTIDA, no un color
     INTENCIÓN: el botón primario de EM es `bg-zinc-900 text-white` en claro y
     exactamente lo inverso en oscuro (Pill.tsx:38, TaskPartyPanel.tsx:131).
     Es el mismo elemento dado vuelta. Ese gesto es la firma visual del producto
     y hace innecesario un color de CTA.
     ======================================================================== */
  --action:       light-dark(#18181b, #fafafa);
  --action-hover: light-dark(#000000, #ffffff);
  --action-edge:  light-dark(#18181b, #fafafa);   /* el relleno ya es el límite */

  /* ===========================================================================
     ESTADOS — progresión por LUMINANCIA, no por matiz
     INTENCIÓN: taskStatus.ts:14-64 lo dice literal — "lifecycle moves darker
     toward completion", disputed = ring-2, y la animación carga significado.
     El ciclo avanza oscureciéndose en claro, y aclarándose en oscuro.
     ======================================================================== */
  --state-positive:         light-dark(#18181b, #fafafa);   /* 17.72 / 20.12 */
  --state-positive-surface: light-dark(#f4f4f5, #18181b);
  --state-caution:          light-dark(#52525b, #a1a1aa);   /*  7.03 /  6.91 */
  --state-caution-surface:  light-dark(#f4f4f5, #18181b);
  --state-critical:         light-dark(#09090b, #fafafa);   /* 15.68 / 14.27 sobre su surface */
  --state-critical-surface: light-dark(#e4e4e7, #27272a);   /* + border-width-emphasis */
  --state-neutral:          light-dark(#6e6e77, #a1a1aa);
  --state-neutral-surface:  light-dark(#f4f4f5, #18181b);

  /* ===========================================================================
     SCORE — tonal, y NUNCA estrellas
     INTENCIÓN: ReputationFoils.tsx aclara en el propio archivo "Score is 0-100
     (NOT stars)": pista con borde, relleno de tinta sólida, número en mono
     `87/100`. Sin gradiente y sin color por tramo.
     Acá la rampa existe igual —el contrato la exige— pero se resuelve en
     luminancia: bajo = pálido, alto = tinta plena. En oscuro se invierte.
     Consecuencia buena: la MISMA barra funciona en las dos pieles.
     ======================================================================== */
  --score-low:  light-dark(#8a8a94, #7a7a85);   /* 3.11 / 4.18 sobre el track */
  --score-mid:  light-dark(#6e6e77, #a1a1aa);   /* 4.59 / 6.91 */
  --score-high: light-dark(#18181b, #fafafa);   /* 16.12 / 16.97 */
  --score-fill-neutral: light-dark(#18181b, #fafafa);
  --score-track: light-dark(#f4f4f5, #18181b);
  --score-track-border: light-dark(#8a8a94, #6a6a74);   /* 3.11 / 3.31 */
  --score-dot-size: 0.625rem;
  --score-dot-gap: 0.25rem;

  /* ===========================================================================
     SIN DATOS 🔴 — acá EM ya tenía la respuesta correcta, en UN solo archivo
     INTENCIÓN: PartyStrip.tsx:50 hace `hasData = !!data && total_reviews > 0 &&
     chains.length > 0` y ramifica a un literal: "No on-chain reputation yet".
     Los otros tres lugares del dashboard lo resuelven mal — uno devuelve `null`
     (desaparece en silencio) y otro COLAPSA sin-datos a CERO. Ese último es el
     antipatrón: un novato se ve idéntico a un estafador con score 0.
     El contrato lo cierra: punteado + `—`, sin relleno y sin numeral.
     Y la voz de EM ya lo decía en prosa (skill.md:1621): "a 0-review identity is
     unproven, not bad". Acá esa frase por fin llega a la pantalla.
     ======================================================================== */
  --nodata-ink: light-dark(#6e6e77, #a1a1aa);      /* 5.05 / 8.19 */
  --nodata-border: light-dark(#8a8a94, #6a6a74);   /* 3.42 / 3.93 */
  --nodata-surface: transparent;
  --nodata-glyph: "—";
  --nodata-opacity: 1;

  /* ===========================================================================
     FACETAS — seis pasos tonales, y la etiqueta hace el trabajo
     Honestidad: seis grises no son seis categorías. En esta piel la faceta se
     distingue por POSICIÓN y ETIQUETA; el tono es una pista secundaria. Los seis
     cumplen 3:1 como punto o subrayado, que es su único uso permitido acá.
     ======================================================================== */
  --facet-1: light-dark(#18181b, #fafafa);   /* 17.72 / 20.12 */
  --facet-2: light-dark(#3f3f46, #d4d4d8);   /* 10.44 / 14.21 */
  --facet-3: light-dark(#52525b, #a1a1aa);   /*  7.73 /  8.19 */
  --facet-4: light-dark(#6e6e77, #8a8a94);   /*  5.05 /  6.14 */
  --facet-5: light-dark(#7c7c86, #7a7a85);   /*  4.13 /  4.95 */
  --facet-6: light-dark(#8a8a94, #6a6a74);   /*  3.42 /  3.93 */

  /* ===========================================================================
     SERIES POR CADENA — ocho grises, y la etiqueta hace el trabajo
     Honestidad: ocho grises no son ocho categorías. En esta piel el tono ordena
     (más oscuro = más arriba en la leyenda) pero NO identifica. Por eso el
     contrato exige el segundo canal, y acá es obligatorio de verdad: etiqueta
     directa sobre la serie o patrón de trazo. Los ocho cumplen 3:1 contra
     raised y sunken. Es la misma restricción que EM ya aceptó al mapear sus 22
     familias de color al mismo gris (tailwind.config.js) — la diferencia es que
     acá está declarada en vez de escondida.
     ======================================================================== */
  --series-1: light-dark(#8b8b8b, #fcfcfc);   /* 3.41 / 20.47 */
  --series-2: light-dark(#7b7b7b, #e0e0e0);   /* 4.23 / 15.91 */
  --series-3: light-dark(#6e6e6e, #c5c5c5);   /* 5.10 / 12.17 */
  --series-4: light-dark(#626262, #aeaeae);   /* 6.10 /  9.47 */
  --series-5: light-dark(#555555, #999999);   /* 7.46 /  7.37 */
  --series-6: light-dark(#4b4b4b, #878787);   /* 8.72 /  5.85 */
  --series-7: light-dark(#3d3d3d, #787878);   /* 10.86 / 4.76 */
  --series-8: light-dark(#303030, #6d6d6d);   /* 13.20 / 4.06 */
  --series-other: light-dark(#8a8a94, #6a6a74);
  --series-stroke-width: 2px;

  /* ===========================================================================
     TIER — cuatro niveles sin un solo color
     `unproven` es punteado y sin relleno: es literalmente la doctrina que EM ya
     escribió en prosa ("a 0-review identity is unproven, not bad") y que su
     propio dashboard traiciona colapsando sin-datos a cero.
     El tope no se marca con matiz: suma --border-width-emphasis.
     ======================================================================== */
  --tier-unproven-ink: light-dark(#6e6e77, #a1a1aa);   /* 5.05 / 8.19 */
  --tier-unproven-surface: transparent;
  --tier-low-ink:  light-dark(#52525b, #a1a1aa);       /* 7.03 / 6.91 */
  --tier-low-surface: light-dark(#f4f4f5, #18181b);
  --tier-mid-ink:  light-dark(#3f3f46, #d4d4d8);       /* 9.49 / 11.98 */
  --tier-mid-surface: light-dark(#ececee, #1f1f23);
  --tier-high-ink: light-dark(#09090b, #fafafa);       /* 15.68 / 14.27 */
  --tier-high-surface: light-dark(#e4e4e7, #27272a);

  /* ===========================================================================
     CARGA Y FRESCURA
     ======================================================================== */
  --skeleton-base:  light-dark(#e4e4e7, #1f1f23);
  --skeleton-sheen: light-dark(#f4f4f5, #2c2c31);
  --skeleton-duration: 1400ms;
  --surface-stale: light-dark(#f4f4f5, #18181b);
  --text-stale:    light-dark(#5c5c64, #a1a1aa);       /* 6.03 / 6.91 */

  /* ===========================================================================
     TABLA DENSA — sin cebra: manda la regla horizontal
     Coherente con "el borde reemplaza a la sombra". Esta piel es un recibo, y
     un recibo tiene renglones, no bandas.
     ======================================================================== */
  --table-row-height: 2.25rem;    /* más densa que la piel A */
  --table-rule: light-dark(#e4e4e7, #27272a);
  --table-header-surface: light-dark(#f4f4f5, #18181b);
  --table-header-ink: light-dark(#3f3f46, #d4d4d8);    /* 9.49 / 11.98 */
  --table-row-hover: light-dark(#f4f4f5, #18181b);
  --table-zebra: transparent;
  --table-sticky-edge: light-dark(#8a8a94, #6a6a74);   /* 3.42 / 3.93 */

  /* ===========================================================================
     FORMA — esquina viva
     INTENCIÓN: components/receipt/ es el subsistema disciplinado de EM y tiene
     radio CERO en todo (ReceiptChip.tsx:29, MatrixStamp.tsx:28, PartyStrip.tsx:114).
     El resto del dashboard usa `rounded-lg` 484 veces y esa es la incoherencia,
     no la regla. Acá se resuelve: radio 0 para todo contenedor.
     El círculo sobrevive solo donde representa a una persona.
     ======================================================================== */
  --radius-surface: 0;
  --radius-control: 0;
  --radius-chip: 0;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --seal-size: 2.5rem;
  --seal-radius: 0;        /* en esta piel el sello es un SELLO, no una medalla */
  --avatar-radius: 50%;

  /* ===========================================================================
     TIPOGRAFÍA — prosa en sans, TODO dato en mono
     INTENCIÓN: tailwind.config.js:154-158 lo argumenta en el propio archivo —
     "Space Grotesk desciende de Space Mono: ADN de terminal con pesos reales" y
     "Roboto Mono lleva TODOS los datos: wallets, montos, estados, timestamps".
     El tope de peso 600 en h1-h3 es preferencia explícita del usuario
     (globals.css:85-88: "700 reads too thick in Space Grotesk"): se respeta.
     La voz humana toma la serif del manifiesto (vision.html:18).
     ======================================================================== */
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-data: "Roboto Mono", ui-monospace, Menlo, monospace;
  --font-voice: "Source Serif 4", Georgia, serif;
  --weight-heading: 600;
  --tracking-label: 0.18em;   /* ReceiptMasthead.tsx:49 — el micro-label respira */

  /* ===========================================================================
     ELEVACIÓN Y TEXTURA
     INTENCIÓN: cero sombras (`.card` es shadow-none). La única textura es la
     grilla de 24px sobre el body (globals.css:79-83, :90-94) — seis líneas de
     CSS y es lo más identitario del producto.
     ======================================================================== */
  --shadow-raised: none;
  --shadow-overlay: light-dark(0 8px 24px rgb(0 0 0 / 0.24), 0 8px 24px rgb(0 0 0 / 0.7));
  --texture-page:
    linear-gradient(to right,  light-dark(rgb(0 0 0 / 0.03), rgb(255 255 255 / 0.04)) 1px, transparent 1px),
    linear-gradient(to bottom, light-dark(rgb(0 0 0 / 0.03), rgb(255 255 255 / 0.04)) 1px, transparent 1px);
  --texture-size: 24px 24px;
}

[data-theme="execution-market"][data-mode="light"] { color-scheme: light; }
[data-theme="execution-market"][data-mode="dark"]  { color-scheme: dark; }