/* ============================================================
   FloatQuest · tokens de marca — V1 (D-08, 18/09/2026)
   Fuente visual: 03-marketing/identidad.html
   Ficha de reglas:  03-marketing/IDENTIDAD.md
   Cárgalo ANTES del CSS de la página.
   ============================================================ */

:root{
  /* ---------- claro (web y TODAS las piezas sociales) ---------- */
  --L-bg:#f7f6f3;            /* fondo hueso cálido */
  --L-surface:#ffffff;
  --L-panel:#ffffff;
  --L-ink:#14171a;           /* cuerpo · 16,65:1 sobre hueso */
  --L-ink-2:#3d454c;         /* secundario · 9,02:1 */
  --L-muted:#6a7179;         /* etiquetas · 4,57:1  (antes #767f88 = 3,76, fallaba AA) */
  --L-rule:#dcdfe3;
  --L-rule-warm:#e4e2dd;
  --L-accent:#0f4c3a;        /* verde bosque · 9,19:1 sobre hueso */
  --L-accent-mark:#0f4c3a;   /* el símbolo usa este */
  --L-accent-soft:#e7efeb;
  --L-on-accent:#f7f6f3;
  --L-warm:#8a5a00;          /* «aún no» · 5,50:1 sobre crema */
  --L-warm-bg:#fdf6e6;
  --L-warm-rule:#e6d3a3;
  --L-field:#f7f6f3;
  --L-on-field:#14171a;
  --L-field-rule:#dcdfe3;
  --L-accent-on-field:var(--L-accent-mark);

  /* ---------- oscuro (SOLO web; las redes son siempre claras) ---------- */
  --D-bg:#121614;
  --D-surface:#1a1f1c;
  --D-panel:#1a1f1c;
  --D-ink:#ecebe6;
  --D-ink-2:#c2c6c1;
  --D-muted:#979d98;
  --D-rule:#2c332f;
  --D-rule-warm:#2c332f;
  --D-accent:#7fc4a4;
  --D-accent-mark:#5fae8c;
  --D-accent-soft:#1c2a24;
  --D-on-accent:#0d1210;
  --D-warm:#e2b55c;
  --D-warm-bg:#231d12;
  --D-warm-rule:#54442a;
  --D-field:#121614;
  --D-on-field:#ecebe6;
  --D-field-rule:#2c332f;
  --D-accent-on-field:var(--D-accent-mark);

  /* ---------- anotación sobre captura (igual en claro y oscuro) ---------- */
  --annot:#e9a21b;               /* ámbar: llama la atención, NO da legibilidad */
  --annot-casing:#14171a;        /* ribete: ESTO es lo que hace legible la anotación */
  --annot-fill:rgba(233,162,27,.38);
  --redact:#14171a;              /* tapar datos de cliente */
  --redact-edge:#f7f6f3;
  --scrim:rgba(20,23,26,.55);

  /* grosores de anotación con SUELO ABSOLUTO (corrección 18/09):
     sin el max() el ribete adelgaza con el contenedor y a tamaño de
     cuadrícula de Instagram la anotación desaparece. */
  --ann-t-core:max(calc(var(--ann-k-core) * var(--u)), 2px);
  --ann-t-case:max(calc(var(--ann-k-case) * var(--u)), 1px);
  --ann-t-halo:max(calc(var(--ann-k-halo) * var(--u)), 1px);

  /* ---------- vivos: cámbialos para el tema ---------- */
  --bg:var(--L-bg);           --surface:var(--L-surface);
  --panel:var(--L-panel);     --ink:var(--L-ink);
  --ink-2:var(--L-ink-2);     --muted:var(--L-muted);
  --rule:var(--L-rule);       --rule-warm:var(--L-rule-warm);
  --accent:var(--L-accent);   --accent-mark:var(--L-accent-mark);
  --accent-soft:var(--L-accent-soft); --on-accent:var(--L-on-accent);
  --warm:var(--L-warm);       --warm-bg:var(--L-warm-bg);
  --warm-rule:var(--L-warm-rule);
  --field:var(--L-field);     --on-field:var(--L-on-field);
  --field-rule:var(--L-field-rule);
  --accent-on-field:var(--L-accent-on-field);

  /* ---------- tipografía · V1 = Libre Franklin ---------- */
  --font-text:"Libre Franklin","Franklin Gothic Medium","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-text);
  --display-weight:800;
  --display-stretch:100%;
  --display-tracking:-.012em;
  --display-leading:1.1;
  --strong-weight:600;
  --label-weight:700;
  --label-tracking:.14em;

  /* ---------- escala tipográfica (ratio ≈1,25 sobre 17px) ---------- */
  --fs-xs:12px;  --fs-sm:14px;  --fs-base:17px; --fs-md:21px;
  --fs-lg:26px;  --fs-xl:33px;  --fs-2xl:44px;
  --lh-text:1.55; --lh-head:1.2;

  /* ---------- espaciado · base 4 ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:56px; --sp-9:80px;

  --radius:2px;
  --page:660px;
  --measure:62ch;
}

/* Modo oscuro: SOLO en la web. Nunca en piezas para redes. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--D-bg);           --surface:var(--D-surface);
    --panel:var(--D-panel);     --ink:var(--D-ink);
    --ink-2:var(--D-ink-2);     --muted:var(--D-muted);
    --rule:var(--D-rule);       --rule-warm:var(--D-rule-warm);
    --accent:var(--D-accent);   --accent-mark:var(--D-accent-mark);
    --accent-soft:var(--D-accent-soft); --on-accent:var(--D-on-accent);
    --warm:var(--D-warm);       --warm-bg:var(--D-warm-bg);
    --warm-rule:var(--D-warm-rule);
    --field:var(--D-field);     --on-field:var(--D-on-field);
    --field-rule:var(--D-field-rule);
    --accent-on-field:var(--D-accent-on-field);
  }
}
:root[data-theme="dark"]{
  --bg:var(--D-bg);           --surface:var(--D-surface);
  --panel:var(--D-panel);     --ink:var(--D-ink);
  --ink-2:var(--D-ink-2);     --muted:var(--D-muted);
  --rule:var(--D-rule);       --rule-warm:var(--D-rule-warm);
  --accent:var(--D-accent);   --accent-mark:var(--D-accent-mark);
  --accent-soft:var(--D-accent-soft); --on-accent:var(--D-on-accent);
  --warm:var(--D-warm);       --warm-bg:var(--D-warm-bg);
  --warm-rule:var(--D-warm-rule);
  --field:var(--D-field);     --on-field:var(--D-on-field);
  --field-rule:var(--D-field-rule);
  --accent-on-field:var(--D-accent-on-field);
}

body{ background:var(--bg); color:var(--ink);
      font-family:var(--font-text); font-size:var(--fs-base);
      line-height:var(--lh-text); }