/* ══════════════════════════════════════════════════════════════════════════
   TOKENS DA HELP — familia TELA (produto)

   🔴 ARQUIVO GERADO. Nao edite aqui.
   Origem: `design-system/tokens/`, na raiz do Projeto 05.
   Refazer: `python ficha/scripts/tokens_do_design_system.py`

   O contrato visual (o que cada token significa, e as regras de contraste)
   esta em `DESIGN.md`, na raiz. Em conflito, o `DESIGN.md` ganha.

   Arquivos trazidos, nesta ordem: fonts.css, colors.css, typography.css, spacing.css, radius.css, elevation.css, motion.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tokens/fonts.css ─────────────────────────────── */
/* Help Entregas — webfonts.
   As tres familias do branding book sao Google Fonts de licenca aberta, servidas do CDN.
   Nao ha binarios .woff2 no repositorio: se o consumidor precisar de build offline,
   baixe os arquivos e troque este @import por regras @font-face locais. */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ── tokens/colors.css ─────────────────────────────── */
:root{
/* ===== marca ===== */
--cyan:#2BBDEF;            /* a cor da Help. Simbolo, acao, destaque */
--cyan-deep:#0E9BCB;       /* hover, borda */
--cyan-soft:#E6F6FC;       /* fundo de bloco, chip */
--cyan-text:#1C7999;       /* ciano legivel como TEXTO sobre fundo claro */

/* ===== acento ===== */
--coral:#FF6B4A;
--coral-deep:#E04A28;
--coral-soft:#FFEAE3;

/* ===== tinta ===== */
--ink:#121417;
--ink-2:#2A2D33;
--ink-3:#55585F;
--ink-4:#8C8F96;

/* ===== superficie: familia PAPEL (comunicacao) ===== */
--paper:#FAF7F2;
--paper-2:#F3EFE6;
--cream:#F7F1E4;

/* ===== superficie: familia TELA (produto) ===== */
--screen:#F4F8FD;
--screen-dark:#0A1730;
--screen-deep:#050B18;

/* ===== linha ===== */
--line:#E6E3DC;            /* familia papel */
--line-2:#D9D4C9;          /* familia papel, mais firme */
--line-screen:#E4EBF4;     /* adicao: linha fria para a familia TELA */
--line-screen-2:#D3DFEE;   /* adicao: linha fria firme */

/* ===== status pela jornada do pedido ===== */
--st-rota:#29B6F6;         --st-rota-bg:#E6F6FC;    --st-rota-fg:#1B79A3;
--st-espera:#FFD54F;       --st-espera-bg:#FFF6DA;  --st-espera-fg:#856F29;
--st-ok:#34D399;           --st-ok-bg:#E3F7EF;      --st-ok-fg:#1F805C;
--st-recusado:#F04030;     --st-recusado-bg:#FFEAE3;--st-recusado-fg:#8A2B12;

/* ===== aliases semanticos: produto (familia TELA) ===== */
--surface-app:var(--screen);
--surface-card:#FFFFFF;
--surface-sunken:#EDF3FA;
--surface-accent:var(--cyan-soft);
--surface-inverse:var(--screen-dark);

--text-body:var(--ink-2);
--text-strong:var(--ink);
--text-muted:var(--ink-3);
--text-faint:var(--ink-4);
--text-accent:var(--cyan-text);
--text-on-inverse:#FFFFFF;
--text-on-action:var(--ink);   /* rotulo sobre ciano: TINTA, nunca branco (branco da 2,16:1) */

--border-subtle:var(--line-screen);
--border-strong:var(--line-screen-2);
--border-accent:var(--cyan-deep);
--border-inverse:rgba(255,255,255,.14);

--action:var(--cyan);
--action-hover:var(--cyan-deep);
--action-soft:var(--cyan-soft);
--focus-ring:var(--cyan-deep);

/* ===== aliases semanticos: comunicacao (familia PAPEL) ===== */
--surface-doc:var(--paper);
--surface-doc-2:var(--paper-2);
--surface-doc-inverse:var(--ink);
--border-doc:var(--line);

/* ===== dados / graficos ===== */
--chart-1:var(--cyan);
--chart-2:#7FD8F6;
--chart-3:var(--cyan-deep);
--chart-4:var(--coral);
--chart-5:#9AA3AE;
--chart-grid:#E4EBF4;
}

/* escopo escuro da familia TELA: painel, mapa, header de operacao */
.help-dark{
--surface-app:var(--screen-dark);
--surface-card:rgba(255,255,255,.05);
--surface-sunken:var(--screen-deep);
--text-body:rgba(255,255,255,.78);
--text-strong:#FFFFFF;
--text-muted:rgba(255,255,255,.60);
--text-faint:rgba(255,255,255,.42);
--text-accent:var(--cyan);
--border-subtle:rgba(255,255,255,.12);
--border-strong:rgba(255,255,255,.22);
--chart-grid:rgba(255,255,255,.12);
color-scheme:dark;
}

/* ── tokens/typography.css ─────────────────────────────── */
:root{
/* familias — cada uma tem um papel fixo */
--font-grotesk:"Inter Tight","Helvetica Neue",Arial,sans-serif;  /* a voz do fato */
--font-serif:"Instrument Serif",Georgia,serif;                   /* a voz da emocao */
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; /* a voz do dado */

/* pesos */
--w-regular:400;  /* @kind font */
--w-medium:500;   /* @kind font */
--w-semibold:600; /* @kind font */
--w-bold:700;     /* @kind font */
--w-black:900;    /* @kind font */

/* escala de comunicacao (papel) */
--fs-display:clamp(56px,7vw,104px); /* @kind font */
--lh-display:.96;                   /* @kind font */
--tr-display:-.03em;                /* @kind font */
--fs-h2:clamp(36px,4vw,56px);       /* @kind font */
--lh-h2:1.04;                       /* @kind font */
--tr-h2:-.02em;                     /* @kind font */
--fs-h3:clamp(24px,2.2vw,32px);     /* @kind font */
--lh-h3:1.15;                       /* @kind font */
--tr-h3:-.01em;                     /* @kind font */
--fs-body-lg:18px;                  /* @kind font */
--lh-body:1.6;                      /* @kind font */
--fs-body:16px;                     /* @kind font */

/* escala de produto (tela) — densa, o dashboard opera em 12–14px */
--fs-ui-2xl:32px; /* @kind font */
--lh-ui-2xl:1.1;  /* @kind font */
--fs-ui-xl:24px;  /* @kind font */
--lh-ui-xl:1.2;   /* @kind font */
--fs-ui-lg:18px;  /* @kind font */
--lh-ui-lg:1.35;  /* @kind font */
--fs-ui-md:14px;  /* @kind font */
--lh-ui-md:1.45;  /* @kind font */
--fs-ui-sm:13px;  /* @kind font */
--lh-ui-sm:1.45;  /* @kind font */
--fs-ui-xs:12px;  /* @kind font */
--lh-ui-xs:1.4;   /* @kind font */

/* rotulo mono: caixa alta, tracking +.08em — nunca abaixo de 11px */
--fs-label:12px;    /* @kind font */
--fs-label-sm:11px; /* @kind font */
--tr-label:.08em;   /* @kind font */

/* metrica em destaque: Inter Tight 900 */
--fs-metric-xl:40px; /* @kind font */
--fs-metric:28px;    /* @kind font */
--fs-metric-sm:20px; /* @kind font */
}

/* ── tokens/spacing.css ─────────────────────────────── */
:root{
--sp-0:0px; --sp-1:2px; --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:10px;
--sp-6:12px; --sp-7:16px; --sp-8:20px; --sp-9:24px; --sp-10:32px;
--sp-11:40px; --sp-12:48px; --sp-13:64px; --sp-14:80px; --sp-15:96px;

/* ritmo do produto (denso) */
--gap-grid:16px;        /* entre cards do dashboard */
--pad-card:20px;        /* interno de card */
--pad-card-tight:16px;
--pad-row:12px;         /* linha de tabela/lista */
--pad-control-x:16px;
--pad-control-y:9px;

/* ritmo da comunicacao */
--container:1240px;
--section-y-spacing:clamp(64px,9vw,128px);

/* cromo do app */
--sidebar-w:240px;
--sidebar-w-collapsed:72px;
--topbar-h:64px;
--tapsize:44px;         /* alvo minimo de toque no mobile */
}

/* ── tokens/radius.css ─────────────────────────────── */
:root{
--r-1:10px;   /* controle, chip quadrado, campo */
--r-2:16px;   /* card pequeno, tile */
--r-3:24px;   /* card grande */
--r-4:32px;   /* bloco de secao */
--r-pill:999px; /* botao e chip */
}

/* ── tokens/elevation.css ─────────────────────────────── */
:root{
/* sombras frias e rasas: o produto usa borda primeiro, sombra como reforco */
--sh-0:none; /* @kind shadow */
--sh-1:0 1px 2px rgba(16,38,64,.06);
--sh-2:0 1px 3px rgba(16,38,64,.07),0 1px 1px rgba(16,38,64,.04);
--sh-3:0 8px 24px rgba(16,38,64,.08);
--sh-4:0 18px 48px rgba(16,38,64,.12);
--sh-inset:inset 0 1px 0 rgba(255,255,255,.6);
--ring:0 0 0 3px rgba(43,189,239,.32);
--ring-danger:0 0 0 3px rgba(240,64,48,.28);
}

/* ── tokens/motion.css ─────────────────────────────── */
:root{
/* movimento discreto e funcional. Sem parallax, sem particula, sem bounce. */
--ease:cubic-bezier(.2,.8,.3,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--dur-1:120ms; /* @kind other */  /* hover, chip */
--dur-2:180ms; /* @kind other */  /* painel, dropdown */
--dur-3:260ms; /* @kind other */  /* rota de tela, drawer */
--press-scale:.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms; /* @kind other */ --dur-2:0ms; /* @kind other */ --dur-3:0ms /* @kind other */}}