/* ==========================================================================
BPO Brief — Design System (fonte da verdade)
Tokens + reset base + utilitários de tipografia.
Extraído fielmente do "Design System BPO Brief (offline)" enviado pelo board
na issue THE-8. NÃO edite valores sem aprovação — este arquivo é canônico.
Tema: dark, editorial/financeiro. Acento amarelo. Space Grotesk + Inter.
Uso: e consuma via
var(--token). Fontes: carregue Inter e Space Grotesk (Google Fonts) no :
========================================================================== */
:root {
/* ---- fontes ---- */
--font-display: "Space Grotesk", "Sora", "Manrope", system-ui, sans-serif;
--font-text: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
/* ---- paleta base ---- */
--black: #0D0D0D;
--white: #FFFFFF;
--yellow: #F2B705;
--yellow-600: #D9A404;
--yellow-200: #FAE199;
--yellow-a12: rgba(242, 183, 5, .12);
--yellow-a24: rgba(242, 183, 5, .24);
--gray-900: #1A1A1A;
--gray-800: #242424;
--gray-700: #3A3A3A;
--gray-600: #555555;
--gray-500: #777777;
--gray-300: #CFCFCF;
--card-bg: #181818;
--card-border: #2A2A2A;
/* ---- estado ---- */
--success: #00C853;
--error: #FF4D4F;
--info: #2D8CFF;
/* ---- badges editoriais (categorias de matéria) ---- */
--badge-news: #F2B705;
--badge-tech: #2D8CFF;
--badge-ma: #00C853; /* M&A */
--badge-ia: #8B5CF6; /* IA */
--badge-tributario: #FF8A29;
--badge-erp: #22D3EE;
/* ---- aliases semânticos (USE ESTES no código de produto) ---- */
--bg-page: var(--black);
--bg-elevated: var(--gray-900);
--surface-card: var(--card-bg);
--surface-inset: var(--gray-800);
--surface-hover: var(--gray-800);
--text-primary: var(--white);
--text-body: var(--gray-300);
--text-muted: var(--gray-500);
--text-disabled: var(--gray-600);
--text-accent: var(--yellow);
--text-on-accent: var(--black);
--border-hairline: var(--card-border);
--border-strong: var(--gray-700);
--border-accent: var(--yellow);
--accent: var(--yellow);
--accent-hover: var(--yellow-600);
--accent-wash: var(--yellow-a12);
--focus-ring: var(--yellow);
/* ---- tipografia (escala) ---- */
--fs-h1: 48px;
--fs-h2: 36px;
--fs-h3: 28px;
--fs-h4: 22px;
--fs-body: 18px;
--fs-small: 15px;
--fs-caption: 13px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.6;
--lh-snug: 1.4;
--tracking-display: -.02em;
--tracking-body: 0;
--tracking-eyebrow: .14em;
/* ---- espaçamento (base 8px) ---- */
--space-half: 4px;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-8: 64px;
--space-10: 80px;
--space-12: 96px;
/* ---- raios ---- */
--radius-sm: 6px;
--radius-input: 10px;
--radius-button: 10px;
--radius-card: 12px;
--radius-badge: 999px;
/* ---- layout ---- */
--border-width: 1px;
--container-max: 1200px;
--measure-read: 680px;
/* ---- elevação ---- */
--shadow-card: 0 8px 30px rgba(0, 0, 0, .18);
--shadow-raised: 0 16px 48px rgba(0, 0, 0, .32);
--shadow-accent: 0 8px 24px rgba(242, 183, 5, .18);
/* ---- movimento ---- */
--ease-out: cubic-bezier(.2, .7, .3, 1);
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 320ms;
}
/* ==========================================================================
Reset base
========================================================================== */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg-page);
color: var(--text-body);
font-family: var(--font-text);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
}
a {
color: var(--text-accent);
text-decoration: none;
border-bottom: 1px solid var(--yellow-a24);
transition: border-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--yellow-200); border-bottom-color: var(--accent); }
::selection { background: var(--yellow); color: var(--black); }
hr {
border: 0;
border-top: 1px solid var(--border-hairline);
margin: var(--space-4) 0;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ==========================================================================
Utilitários de tipografia (prefixo bb-)
========================================================================== */
.bb-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.bb-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.bb-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: var(--text-primary); margin: 0; }
.bb-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-primary); margin: 0; }
.bb-body { font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--text-body); margin: 0; }
.bb-small { font-family: var(--font-text); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text-body); margin: 0; }
.bb-caption { font-family: var(--font-text); font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--text-muted); margin: 0; }
.bb-eyebrow { font-family: var(--font-text); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); margin: 0; }
/* separadores / marcadores */
.bb-rule { height: 1px; background: var(--border-hairline); border: 0; }
.bb-mark { display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--accent); }
.bb-bar { display: inline-block; width: 4px; height: 1em; background: var(--accent); border-radius: 2px; }
/* leitura: largura de medida confortável para corpo de texto */
.bb-measure { max-width: var(--measure-read); }
.bb-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-3); }