/* FLOW — design tokens
 * Extraídos do protótipo "Flow App standalone.html" (Claude Design, 26 jul 2026).
 * Valores medidos no source, não estimados a olho.
 * Nomes antigos preservados (WO-01 §4) para não partir os módulos; valores actualizados.
 */
:root{
  /* ---- superfícies ---- */
  --bg:#08080a;
  --bg-top:#17161b;                       /* topo do gradiente radial */
  --bg-grad:radial-gradient(120% 90% at 50% 0%, #17161b 0%, #08080a 60%);
  --bg2:#111014;
  --card:#141317;
  --card2:#1c1a1f;
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.14);
  --line3:rgba(255,255,255,.1);           /* borda de tab inactiva */
  --fill-soft:rgba(255,255,255,.06);      /* fundo de tab activa */

  /* ---- texto ---- */
  --txt:#f6f4f1;
  --txt2:#eceaef;
  --muted:#9a9299;
  --muted2:#6b6970;
  --placeholder:#5f5d66;

  /* ---- laranja: o Brain. É um GRADIENTE, não uma cor chapada ---- */
  --oGA:#ff8f52;                          /* início do gradiente */
  --oGB:#e34a0f;                          /* fim do gradiente */
  --o-grad:linear-gradient(150deg, #ff8f52, #e34a0f);
  --o:#ff7a3d;                            /* laranja chapado: links, ícones */
  --o2:#ff9a68;                           /* hover, ícone de Capture */
  --oDim:rgba(255,106,43,.14);

  /* ---- Flows: cada um tem fill (campo do ícone) + accent (texto, bordas, dots) ---- */
  --note-fill:#A21F72;   --note-accent:#DB7FB4;
  --idea-fill:#B0850C;   --idea-accent:#E0B03C;
  --build-fill:#10763F;  --build-accent:#4FBE7E;
  --task-fill:#A32029;   --task-accent:#E0736E;

  /* ---- estados de decisão ---- */
  --st-new:#8f8b97;
  --go:#4FBE7E;                           /* = BuildFlow accent, de propósito */
  --st-next:#7fa0dd;
  --st-pilot:#E0B03C;
  --st-parked:#9a7bd8;
  --kill:#E0736E;                         /* = TaskFlow accent */
  --wait:#e0a23a;
  --info:#5b8cff;

  /* ---- raios ---- */
  --r-xs:2px;    /* barras pequenas do mark */
  --r-sm:4px;    /* barras grandes do mark */
  --r-chip:11px;
  --r-card:12px;
  --r:14px;
  --r-btn:15px;
  --r-lg:16px;
  --r-xl:18px;
  --r-capture:30px;                       /* botão de captura quadrado 92px */

  /* ---- escala tipográfica (Figtree) ---- */
  --fs-micro:10.5px;
  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-base:14.5px;
  --fs-md:15.5px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-display:29px;
  --fs-hero:38px;

  /* ---- mark: 7 barras, sempre ---- */
  --mark-bar-w:9px;      --mark-bar-h:56px;   --mark-gap:5px;
  --mark-bar-w-lg:8px;   --mark-bar-h-lg:74px;
  --mark-bar-w-sm:3px;   --mark-bar-h-sm:19px; --mark-gap-sm:1.5px;
  --capture-size:112px;                   /* círculo em gravação */
  --capture-square:92px;                  /* quadrado em repouso */

  /* ---- outros ---- */
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --viewport-w:440px;
  --viewport-h:924px;
  font-synthesis:none;
}