/*
 * Marca KlaryFlow — dirección "Eco" (la misma que la app KlaryFlow).
 * Fuente de los valores: ~/KlaryFlow/src/app/globals.css y docs/brand/.
 *   coral = marca y acción · jade = decisión / todo bien · papel + tinta cálidos.
 * Tipografías: Newsreader (títulos), Hanken Grotesk (texto), DM Mono (cifras).
 * Los ficheros .woff2 son los mismos que usa la app (licencia OFL).
 *
 * Los nombres de variable (--bg, --panel, --accent...) son los que ya usaba el
 * panel: así el HTML y el JS no cambian, solo lo que valen.
 */
@font-face { font-family:"Newsreader"; src:url("/assets/Newsreader-latin.woff2") format("woff2");
  font-weight:500 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/HankenGrotesk-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Hanken Grotesk"; src:url("/assets/HankenGrotesk-italic-latin.woff2") format("woff2");
  font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:"DM Mono"; src:url("/assets/DMMono-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

:root {
  color-scheme: light dark;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Claro: papel + tinta */
  --bg:#FCFCFB; --panel:#FFFFFF; --panel2:#F6F4F1;
  --border:rgba(33,29,26,.11); --border2:rgba(33,29,26,.20);
  --text:#211D1A; --muted:#6B635C; --faint:#9A928A;
  --accent:#F0623C; --accent-ink:#C0431F; --accent-bg:#FCEAE3; --on-accent:#FFFFFF;
  --verde:#17A98C; --verde-ink:#0E7D67; --verde-bg:#E1F4EF;
  --ambar:#B8791C; --ambar-ink:#7A4E08; --ambar-bg:#FAF0DF;
  --rojo:#C2453A;  --rojo-ink:#8E2A21;  --rojo-bg:#FBEBE9;
  --morado:#7C4DBE; --morado-bg:#F2ECFA;
  --c-cost:#F0623C; --c-ok:#17A98C; --c-err:#C2453A;
  --radius:12px; --shadow:0 1px 2px rgba(33,29,26,.06);
  --overlay:rgba(33,29,26,.42); --tooltip:#211D1A; --tooltip-text:#FCFCFB;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#181513; --panel:#221D1A; --panel2:#2B2521;
    --border:rgba(242,236,230,.12); --border2:rgba(242,236,230,.22);
    --text:#F2ECE6; --muted:#ABA197; --faint:#7A716A;
    --accent:#FF845F; --accent-ink:#FF9C7C; --accent-bg:rgba(255,132,95,.13); --on-accent:#181513;
    --verde:#4FC9B6; --verde-ink:#6FD7C6; --verde-bg:rgba(79,201,182,.12);
    --ambar:#E0A64A; --ambar-ink:#F0CE8E; --ambar-bg:#3A2E17;
    --rojo:#E08A82;  --rojo-ink:#F5D0CC;  --rojo-bg:rgba(224,138,130,.12);
    --morado:#B08CE8; --morado-bg:#2A2036;
    --c-cost:#FF845F; --c-ok:#4FC9B6; --c-err:#E08A82;
    --shadow:0 1px 2px rgba(0,0,0,.35);
    --overlay:rgba(10,8,7,.66); --tooltip:#F2ECE6; --tooltip-text:#181513;
  }
}

body { font-family:var(--font-sans); background:var(--bg); color:var(--text); }

/* Logotipo: símbolo Eco + "Klary" (tinta) "Flow" (cursiva coral) + producto */
.kf-lockup { display:inline-flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.kf-lockup svg { flex:none; color:var(--accent); }
.kf-word { font-family:var(--font-sans); font-weight:700; letter-spacing:-.4px; line-height:1; }
.kf-word i { font-style:italic; font-weight:600; color:var(--accent); }
.kf-prod { font-family:var(--font-sans); font-weight:500; color:var(--muted); letter-spacing:.2px;
  padding-left:10px; margin-left:1px; border-left:1px solid var(--border2); line-height:1; }