/* web/styles/tokens.css — the only file in this repository where a hex
 * literal may appear. Primitives (--c-*) and the logo theme (--logo-*, also
 * hex, see docs/BRAND-SYSTEM.md #13) never get used directly in a component:
 * they only get assigned to a role inside a surface class below.
 * Source of truth: docs/BRAND-SYSTEM.md #6-8, extracted from
 * docs/reference/landing.html. */

:root{
  /* Neutros oscuros */
  --c-ink-950:#0A0C0A;  --c-ink-900:#0B0D0B;  --c-ink-850:#141418;
  --c-ink-800:#1B1B1F;  --c-ink-700:#24242A;  --c-ink-650:#0F120F;

  /* Neutros claros */
  --c-paper:#F2F2F0;    --c-paper-alt:#E7E7E4;  --c-white:#FFFFFF;

  /* Verde de señal */
  --c-green-500:#37F530;  --c-green-400:#7DFA78;
  --c-green-800:#167A12;  --c-green-850:#12660F;  --c-green-950:#0A2606;

  /* Grises de texto */
  --c-slate-100:#EDEDEF;  --c-slate-300:#A6A6AE;  --c-slate-400:#8A8A93;
  --c-slate-600:#6E6E7A;  --c-slate-700:#525260;  --c-slate-900:#22222A;

  /* Filetes */
  --c-line-dark:#3A3A42;
  --c-line-light:#D8D8D4;  --c-line-light-2:#84848F;  --c-line-light-3:#787883;

  /* Logo, docs/BRAND-SYSTEM.md #13. Hex values without the --c- prefix, but
   * hex nonetheless: this file is the only place a hex literal may live, so
   * they stay here rather than in base.css with the rest of the non-color
   * primitives. */
  --logo-shell:#383D3A; --logo-cell:#232724; --logo-hatch:#5E6360;
  --logo-void:#191C1A;  --logo-dot:#C9CDCA;

  /* Decorative texture and glow, verbatim (digit for digit) from the
   * background-image gradients of docs/reference/landing.html. Not derived
   * with color-mix() from another token: these are the reference's own
   * literal values, and this is the only file where a literal may live —
   * deriving an approximation elsewhere would be optimizing for the
   * checker instead of matching the source of truth. Separate tokens per
   * distinct value rather than one shared "grid line" token, because the
   * nav and hero grid lines are not actually the same opacity in the
   * reference (.028 vs .035). */
  --grid-line-nav:rgba(139,139,144,.028);
  --grid-line-hero:rgba(139,139,144,.035);
  --glow-accent-hero:rgba(55,245,48,.06);
  --glow-accent-mark:rgba(55,245,48,.09);
  --glow-neutral-mark:rgba(139,139,144,.12);

  /* LEGACY, transitional. Not part of docs/BRAND-SYSTEM.md's palette: these
   * are the exact values web/estilos.css used for .familia-* (the four
   * result-severity panels on web/plantillas/scan.html.j2) before commit
   * b0795a6 flattened them to a neutral gray, which left the four states
   * indistinguishable — a direct breach of BRAND-SYSTEM.md #15's one
   * non-negotiable rule. Restored here verbatim (git show
   * b0795a6^:web/tokens.css) rather than migrated to the section 15
   * silhouette system, because that requires deciding an unspecified
   * mapping from the engine's classification/severity values to the
   * manual's five rows — a real design decision, not a mechanical one, and
   * out of scope for this fix. Removed the moment phase 3 does that
   * mapping and rebuilds the template properly. */
  --legacy-st-adverse:#7A3D0C;   --legacy-st-adverse-bg:#F7EFE6;   --legacy-st-adverse-edge:#A56A24;
  --legacy-st-unproven:#4B4B59;  --legacy-st-unproven-bg:#EFEFF3;  --legacy-st-unproven-edge:#808094;
  --legacy-st-unknown:#5F5F6E;   --legacy-st-unknown-edge:#868695;
}

/* ============================================================
   SUPERFICIES. Cada sección declara sobre qué está pintada y
   redefine los roles. Ningún componente conoce un hex.
   ============================================================ */
.s-ink{
  --bg:var(--c-ink-800); --bg-raised:var(--c-ink-700); --bg-sunken:var(--c-ink-850);
  --fg:var(--c-slate-100); --fg-2:var(--c-slate-300); --fg-3:var(--c-slate-400);
  --fg-max:var(--c-white);
  --line:var(--c-line-dark); --line-strong:var(--c-slate-600);
  --accent:var(--c-green-500); --accent-line:var(--c-green-800);
  --field-bg:var(--c-ink-650);
  background:var(--bg); color:var(--fg);
}
.s-ink-deep{ --bg:var(--c-ink-850); }

.s-paper{
  --bg:var(--c-paper); --bg-raised:var(--c-white); --bg-sunken:var(--c-paper-alt);
  --fg:var(--c-slate-900); --fg-2:var(--c-slate-700); --fg-3:var(--c-slate-700);
  --fg-max:var(--c-slate-900);
  --line:var(--c-line-light); --line-strong:var(--c-line-light-2);
  --accent:var(--c-green-800); --accent-line:var(--c-green-800);
  --field-bg:var(--c-white);
  background:var(--bg); color:var(--fg);
}
.s-paper-alt{ --bg:var(--c-paper-alt); --bg-raised:var(--c-paper);
  --accent:var(--c-green-850); --accent-line:var(--c-green-850);
  --line-strong:var(--c-line-light-3); }