/* Tokens do design system blogflow.
 *
 * Origem: .claude/skills/blogflow-design/tokens/ (colors, typography, spacing,
 * radius, elevation, motion, responsive). Só variáveis — nenhuma regra de
 * componente, nenhum seletor além de :root.
 *
 * Carregado ANTES do CSS do painel. Hoje isto é inerte de propósito: nenhum
 * nome aqui colide com os tokens atuais (--azul, --texto, --borda, ...), então
 * nada muda de aparência só por existir. A adoção é feita depois, token a
 * token, trocando o valor literal pelo var() correspondente.
 *
 * Duas coisas do design system não vieram para cá:
 *
 * 1. A carga das fontes, que é regra e não variável: mora em
 *    blogflow-fontes.css, com @font-face local apontando pros woff2 em
 *    ../fonts/. NÃO é o @import do Google Fonts do design system — o painel
 *    roda isolado e não deve depender da rede pra desenhar a interface.
 * 2. As classes utilitárias de responsive.css (.bf-only-desktop, .bf-table-*),
 *    que são regra de componente.
 *
 * Ver DESIGN-MAPPING.md para o que tem e o que não tem equivalente no painel.
 */

:root {
  /* ── Cor: marca — amostrada do wordmark blogflow ──────────────────── */
  --bf-blue-600: #0c7bfa; --bf-blue-650: #0972e8; --bf-blue-700: #0a63d4; --bf-blue-800: #0b4fa8;
  --bf-blue-500: #3d95fb; --bf-blue-400: #79b6fc; --bf-blue-200: #c2dcfe;
  --bf-blue-100: #e4eefe; --bf-blue-50: #f2f7ff;
  --bf-teal-600: #14c8be; --bf-teal-700: #0fa49c; --bf-teal-800: #0c7f79;
  --bf-teal-500: #45d5cd; --bf-teal-400: #7ee3dd; --bf-teal-200: #c0f2ef;
  --bf-teal-100: #e2faf8; --bf-teal-50: #f1fdfc;
  --bf-cyan-600: #17a8d4;
  --bf-gradient-brand: linear-gradient(90deg, #0c7bfa 0%, #17a8d4 52%, #14c8be 100%);
  --bf-gradient-brand-diag: linear-gradient(135deg, #0c7bfa 0%, #17a8d4 55%, #14c8be 100%);

  /* o slate profundo do lettering "blog", estendido numa rampa de ink */
  --bf-ink-900: #0a1c2c; --bf-ink-800: #0f2a40; --bf-ink-700: #143c5a; --bf-ink-600: #1d5075;

  /* ── Cor: neutros — slate frio, pra sentar bem sob o azul ─────────── */
  --bf-slate-950: #070e17; --bf-slate-900: #0e1926; --bf-slate-800: #172436;
  --bf-slate-700: #27364a; --bf-slate-600: #3d4f68; --bf-slate-500: #5d7089;
  --bf-slate-400: #8697ab; --bf-slate-300: #b2bfcd; --bf-slate-200: #d6dee7;
  --bf-slate-150: #e4eaf1; --bf-slate-100: #eef2f7; --bf-slate-50: #f6f8fb;
  --bf-white: #ffffff;

  /* ── Cor: matizes semânticos ──────────────────────────────────────── */
  --bf-green-600: #0fa958; --bf-green-500: #1ec46c; --bf-green-100: #e0f8ec; --bf-green-700: #0a7f42;
  /* amber-700 escurecido de #a8640f pra #9c5c0d: era 4.15:1 sobre
     amber-100 (texto do badge/aviso "alerta"), abaixo do 4.5:1 exigido
     (achado por auditoria Lighthouse) — só ele muda porque só é usado como
     --status-warning-ink, nunca em fundo/decoração. */
  --bf-amber-600: #e0891a; --bf-amber-500: #f5a52e; --bf-amber-100: #fdf0dc; --bf-amber-700: #9c5c0d;
  --bf-red-600: #e0393f; --bf-red-500: #f05a60; --bf-red-100: #fde6e7; --bf-red-700: #a82a2f;
  /* violet-650 é a variante de texto (mesma lógica do blue-650 acima) —
     violet-600 continua servindo --chart-3 e qualquer uso não textual. */
  --bf-violet-600: #6b4ef0; --bf-violet-650: #5f3fe0; --bf-violet-100: #ebe7fe;

  /* ── Cor: aliases semânticos — usar SEMPRE estes, nunca o token bruto ── */
  /* accent usa 650, não 600: texto/botão com --bf-blue-600 mede 4.02:1 contra
     branco, abaixo do 4.5:1 exigido pra texto normal (achado por auditoria
     Lighthouse). 650 é 4.58:1 — visualmente quase idêntico ao azul da marca,
     só o suficiente pra passar. --bf-blue-600 continua intocado pra usos não
     textuais (gradiente da marca, anel de foco), onde o contraste mínimo é
     3:1 e 600 já cumpre. */
  --accent: var(--bf-blue-650);
  --accent-hover: var(--bf-blue-700);
  --accent-press: var(--bf-blue-800);
  --accent-soft: var(--bf-blue-100);
  --accent-soft-hover: var(--bf-blue-200);
  --accent-contrast: var(--bf-white);
  --accent-alt: var(--bf-teal-600);
  --accent-alt-soft: var(--bf-teal-100);

  --surface-app: var(--bf-slate-50);
  --surface-card: var(--bf-white);
  --surface-sunken: var(--bf-slate-100);
  --surface-raised: var(--bf-white);
  --surface-inverse: var(--bf-ink-900);
  --surface-nav: var(--bf-ink-900);
  --surface-nav-active: #16334d;
  --surface-overlay: rgba(10, 28, 44, .55);
  --surface-hover: var(--bf-slate-50);
  --surface-selected: var(--bf-blue-50);

  --text-strong: var(--bf-ink-900);
  --text-body: var(--bf-slate-800);
  --text-muted: var(--bf-slate-500);
  --text-subtle: var(--bf-slate-400);
  --text-on-accent: var(--bf-white);
  --text-on-nav: #c8d6e4;
  --text-on-nav-active: var(--bf-white);
  --text-link: var(--bf-blue-650); /* ver nota de contraste em --accent */
  --text-link-hover: var(--bf-blue-700);

  --border-subtle: var(--bf-slate-150);
  --border-default: var(--bf-slate-200);
  --border-strong: var(--bf-slate-300);
  --border-nav: rgba(255, 255, 255, .08);
  --border-focus: var(--bf-blue-600);
  --ring-focus: 0 0 0 3px rgba(12, 123, 250, .22);

  --status-success: var(--bf-green-600); --status-success-soft: var(--bf-green-100); --status-success-ink: var(--bf-green-700);
  --status-warning: var(--bf-amber-600); --status-warning-soft: var(--bf-amber-100); --status-warning-ink: var(--bf-amber-700);
  --status-danger: var(--bf-red-600); --status-danger-soft: var(--bf-red-100); --status-danger-ink: var(--bf-red-700);
  --status-info: var(--bf-blue-600); --status-info-soft: var(--bf-blue-100); --status-info-ink: var(--bf-blue-700);
  --status-neutral: var(--bf-slate-500); --status-neutral-soft: var(--bf-slate-100);

  /* data-viz — sequência fixa, marca primeiro */
  --chart-1: var(--bf-blue-600); --chart-2: var(--bf-teal-600); --chart-3: var(--bf-violet-600);
  --chart-4: var(--bf-amber-500); --chart-5: var(--bf-blue-400); --chart-6: var(--bf-slate-300);
  --chart-grid: var(--bf-slate-150); --chart-axis: var(--bf-slate-400);

  /* ── Tipografia ───────────────────────────────────────────────────── */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* escala de densidade admin — piso de 13px pra texto de interface */
  --fs-display: 40px; --lh-display: 1.08; --ls-display: -.028em;
  --fs-h1: 30px; --lh-h1: 1.16; --ls-h1: -.022em;
  --fs-h2: 24px; --lh-h2: 1.2; --ls-h2: -.018em;
  --fs-h3: 19px; --lh-h3: 1.26; --ls-h3: -.013em;
  --fs-h4: 16px; --lh-h4: 1.32; --ls-h4: -.008em;
  --fs-body: 14px; --lh-body: 1.55; --ls-body: 0;
  --fs-body-lg: 15px; --lh-body-lg: 1.6;
  --fs-sm: 13px; --lh-sm: 1.45;
  --fs-xs: 12px; --lh-xs: 1.35;
  --fs-micro: 11px; --lh-micro: 1.25; --ls-micro: .04em;

  /* números — sempre mono tabular em tabela, KPI e dinheiro */
  --fs-metric: 30px; --lh-metric: 1.1; --ls-metric: -.02em;
  --fs-metric-lg: 38px;
  --fs-metric-sm: 20px;
  --num-feat: "tnum" 1, "lnum" 1;

  /* ── Espaçamento: grade de 4px ────────────────────────────────────── */
  --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* moldura de layout */
  --layout-sidebar-w: 248px;
  --layout-sidebar-collapsed-w: 72px;
  --layout-topbar-h: 64px;
  --layout-bottomnav-h: 64px;
  --layout-page-pad: 24px;
  --layout-page-pad-mobile: 16px;
  --layout-max-w: 1440px;
  --layout-gutter: 20px;

  /* dimensionamento de controle */
  --control-h-sm: 32px; --control-h-md: 40px; --control-h-lg: 48px;
  --control-pad-x-sm: 12px; --control-pad-x-md: 16px; --control-pad-x-lg: 20px;
  --tap-min: 44px;

  /* interior de cartão e tabela */
  --card-pad: 20px; --card-pad-lg: 24px; --card-pad-sm: 16px;
  --table-row-h: 52px; --table-row-h-dense: 44px; --table-cell-pad-x: 16px;

  /* ── Raio ─────────────────────────────────────────────────────────── */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --r-2xl: 24px; --r-pill: 999px;
  --r-control: 10px;   /* botão, input, select */
  --r-card: 14px;      /* cartão, painel */
  --r-surface: 18px;   /* modal, folha */
  --r-chip: 999px;     /* badge, tag, pílula de filtro */
  --r-avatar: 999px;

  /* ── Ícone — quatro degraus, e só estes ───────────────────────────────
   *
   * O painel tinha treze tamanhos (11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
   * 22, 26 e 28px), cada um nascido pra resolver uma tela. Viraram quatro:
   *
   *   14  micro: chip, marcador, aviso inline, resumo de <summary>
   *   16  controle pequeno e ação secundária: botão, botão de linha, aba,
   *       menu, campo de busca, e título de seção h2/h3
   *   18  padrão da UI: item de navegação, título de página, ícone dentro
   *       de caixa ou medalhão
   *   22  destaque e estado vazio
   *
   * O critério é o papel visual, não o tamanho antigo. Na dúvida, o tamanho
   * do texto vizinho decide: 11–12px pede 14, 13–16px pede 16.
   *
   * A templatetag {% icone %} recebe o número direto (o padrão dela é 18),
   * então estas variáveis servem pro CSS e como a definição escrita da
   * escala. Qualquer valor fora dos quatro é regressão.
   */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 22px;

  /* ── Elevação — tinta slate, nunca preto puro ─────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(14, 25, 38, .05);
  --shadow-2: 0 2px 6px rgba(14, 25, 38, .06), 0 1px 2px rgba(14, 25, 38, .04);
  --shadow-3: 0 8px 20px rgba(14, 25, 38, .08), 0 2px 6px rgba(14, 25, 38, .05);
  --shadow-4: 0 18px 40px rgba(14, 25, 38, .12), 0 4px 12px rgba(14, 25, 38, .06);
  --shadow-5: 0 32px 72px rgba(10, 28, 44, .22);
  --shadow-accent: 0 8px 22px rgba(12, 123, 250, .24);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .08);
  --blur-overlay: saturate(140%) blur(14px);

  /* ── Movimento ────────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-slower: 480ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-entrance: cubic-bezier(.16, 1, .3, 1);
  --t-control: all var(--dur-fast) var(--ease-out);
  --t-surface: all var(--dur-base) var(--ease-out);

  /* ── Breakpoints — mobile-first; o shell admin vira em 900px ──────── */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;
}

/* Quem pediu menos movimento recebe zero duração. Faz parte da camada de
   token: zera na origem, sem precisar tocar em cada transição. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}