/* ============================================================================
* Conversattiva Design System — Design Tokens
* ----------------------------------------------------------------------------
* SINGLE SOURCE OF TRUTH. Nunca hardcode cores/tamanhos/radius/sombra em telas.
* Consuma via var(--token-name). Se algo estiver faltando, adicione aqui,
* não invente ad-hoc no componente.
*
* Identidade oficial Advertti (2026-08-03) — palette teal + Montserrat.
* Escolha institucional do cliente (Ricardo/Advertti); substituiu a fase autoral
* anterior (Instrument Serif + Bricolage Grotesque + verde vibrante #109370).
* - display + sans: Montserrat — variable, uma família cobrindo hero e UI.
* - mono: JetBrains Mono — dados/código.
* Palette central (do guia visual): #02342A · #004D40 · #26A69A · #F0F0E8 · #FFFFFF.
* Escala 50-950 derivada preservando os 3 tons oficiais como anchor (500/900/950).
* Decisões commitadas: uma escala de radius disciplinada, hairlines 1px, uso comedido
* do teal da marca (não slather), números em tabular-nums.
*
* Themes:
* - Default = app (light, admin corporativo, uso prolongado)
* - [data-theme="stage"] = apresentação/palestra (dark high-impact)
* ============================================================================ */
:root {
/* Force light UA styling regardless of OS `prefers-color-scheme`. The app is
light-only (Advertti identity). Any `@media (prefers-color-scheme: dark)`
block in the codebase was unauthorized — see decision below. */
color-scheme: light;
/* ── COLOR — BRAND (Conversattiva teal — identidade Advertti, escala 50-950) ─ */
--brand-50: #eaf6f4;
--brand-100: #cae8e3;
--brand-200: #a5d6cd;
--brand-300: #78c1b4;
--brand-400: #47b0a1;
--brand-500: #26A69A; /* PRIMARY — logo, CTA, brand accents (Advertti) */
--brand-600: #1c887e;
--brand-700: #146a63;
--brand-800: #0a5951;
--brand-900: #004D40; /* DEEP — gradient anchor, dark surfaces (Advertti) */
--brand-950: #02342A; /* INK — fundo escuro máximo, wordmark sobre claro (Advertti) */
/* Neutro quente da marca — fundo off-white institucional */
--brand-cream: #F0F0E8;
--brand-cream-track: #e6e6da; /* track fills on the cream/light slide surfaces */
/* Gradient marca (usar em hero, capa, CTAs premium) */
--brand-gradient: linear-gradient(160deg, var(--brand-500) 0%, var(--brand-900) 100%);
--brand-gradient-soft: linear-gradient(160deg, var(--brand-100) 0%, var(--brand-200) 100%);
/* ── COLOR — NEUTRALS (slate, escala 0-1000) ────────────────────────────── */
--neutral-0: #ffffff;
--neutral-25: #fcfcfd;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-200: #e5e7eb;
--neutral-300: #d1d5db;
--neutral-400: #9ca3af;
--neutral-500: #6b7280;
--neutral-600: #4b5563;
--neutral-700: #374151;
--neutral-800: #1f2937;
--neutral-900: #111827;
--neutral-950: #0b0f17;
--neutral-1000: #05070c;
/* ── COLOR — SEMANTIC ───────────────────────────────────────────────────── */
/* Danger / erro / destrutivo */
--danger-50: #fff5f5;
--danger-100: #fee2e2;
--danger-500: #ef4444;
--danger-600: #dc2626;
--danger-700: #b91c1c;
/* Warning / atenção */
--warning-50: #fffbeb;
--warning-100: #fef3c7;
--warning-500: #f59e0b;
--warning-600: #d97706;
--warning-700: #b45309;
--warning-800: #92400e;
/* Info / neutro-informativo */
--info-50: #eff6ff;
--info-100: #dbeafe;
--info-500: #3b82f6;
--info-600: #2563eb;
--info-700: #1d4ed8;
/* Success (alias de brand + verde puro para status inequívoco) */
--success-50: #f0fdf4;
--success-100: #dcfce7;
--success-500: #22c55e;
--success-600: #15803d;
--success-700: #166534;
/* ── COLOR — ACCENTS (usar com parcimônia, para diferenciação) ──────────── */
/* Magenta — categorização política/partidos, chips secundários */
--accent-magenta-100: #fce7f3;
--accent-magenta-500: #ec4899;
--accent-magenta-600: #db2777;
--accent-magenta-700: #be185d;
--accent-magenta-800: #9d174d;
/* Purple — insights de IA / Radar */
--accent-purple-100: #ede9fe;
--accent-purple-500: #8b5cf6;
--accent-purple-600: #7c3aed;
--accent-purple-700: #6d28d9;
--accent-purple-800: #5b21b6;
/* Gold — highlight/ranking/premium */
--accent-gold-100: #fef3c7;
--accent-gold-500: #eab308;
--accent-gold-600: #ca8a04;
--accent-gold-700: #ffd700;
/* Ranking medals — top-3 rank badges (SlideMetricaGeral etc.) */
--rank-gold: #D4AF37;
--rank-silver: #A8A9AD;
--rank-bronze: #CD7F32;
/* ── SEMANTIC TOKENS (o que telas de fato consomem) ─────────────────────── */
/* Estes são REMAPEADOS por theme-app.css / theme-stage.css.
Componentes devem usar --surface-*, --text-*, --border-*, NÃO --neutral-*. */
/* Surfaces (camadas) */
--surface-canvas: var(--neutral-50); /* fundo da janela */
--surface-raised: var(--neutral-0); /* cards, painéis */
--surface-overlay: var(--neutral-0); /* modals, popovers */
--surface-sunken: var(--neutral-100); /* insets, code blocks */
--surface-inverted: var(--neutral-900); /* tooltips, dark chips */
/* Text */
--text-primary: var(--neutral-900); /* titles, body principal */
--text-secondary: var(--neutral-700); /* body secundário */
--text-tertiary: var(--neutral-500); /* labels, captions */
--text-quaternary: var(--neutral-400); /* placeholders, disabled */
--text-on-brand: var(--neutral-0); /* texto sobre --brand-* dark */
--text-on-cream: var(--neutral-900); /* texto sobre fundos cream/off-white */
--text-on-inverted: var(--neutral-0); /* texto sobre --surface-inverted */
--text-link: var(--brand-700);
--text-link-hover: var(--brand-800);
/* Borders */
--border-subtle: var(--neutral-200); /* separadores discretos */
--border-default: var(--neutral-300); /* inputs, cards */
--border-strong: var(--neutral-400); /* hover, ativo */
--border-brand: var(--brand-500); /* focus/select em contexto brand */
/* Interactive states (backgrounds) */
--interactive-hover: var(--neutral-100);
--interactive-pressed: var(--neutral-200);
--interactive-selected: var(--brand-50);
/* Focus ring (accessibility) */
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand-500) 35%, transparent);
/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
/* Escolha canônica (Identidade Advertti): MONTSERRAT única família para display + UI.
Weights disponíveis 100-900, incluindo itálico 400-900. Regra prática:
- Body/UI: 400 (regular) e 500 (medium)
- Buttons/labels: 600 (semibold)
- Headings: 700 (bold) e 800 (extrabold) — Montserrat regular é fraco em headings
- Display grande (hero): 900 (black) com tracking negativo
Carregar via Google Fonts:
Fallbacks a system fonts são aceitáveis offline mas comprometem a identidade. */
--font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
/* Feature settings — sempre ligadas em textos numéricos/tabelas */
--font-feature-tabular: "tnum" 1, "cv11" 1;
/* Type scale — MOBILE-FIRST com clamp() nas escalas grandes. Mobile mostra
valor mínimo; desktop escala com viewport. Base 16px, escala corpo linear
porque não faz sentido corpo shrinkar. */
--text-2xs: 0.6875rem; /* 11 */
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.8125rem; /* 13 */
--text-base: 0.9375rem; /* 15 — corpo default */
--text-md: 1rem; /* 16 */
--text-lg: 1.125rem; /* 18 */
--text-xl: 1.25rem; /* 20 */
--text-2xl: clamp(1.375rem, 3vw + 0.5rem, 1.5rem); /* 22 → 24 */
--text-3xl: clamp(1.625rem, 4vw + 0.5rem, 1.875rem); /* 26 → 30 */
--text-4xl: clamp(1.875rem, 5vw + 0.5rem, 2.25rem); /* 30 → 36 */
--text-5xl: clamp(2.25rem, 6vw + 0.5rem, 3rem); /* 36 → 48 */
--text-6xl: clamp(2.5rem, 8vw, 3.75rem); /* 40 → 60 */
--text-7xl: clamp(2.75rem, 9vw, 4.5rem); /* 44 → 72 */
--text-8xl: clamp(3rem, 10vw, 6rem); /* 48 → 96 — hero */
--text-9xl: clamp(3.5rem, 14vw, 8rem); /* 56 → 128 — stat impact */
/* Line heights */
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--leading-loose: 1.85;
/* Letter spacing */
--tracking-tighter: -0.04em; /* display grande */
--tracking-tight: -0.02em; /* headings */
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.15em; /* eyebrows/uppercase */
/* Font weights (Inter suporta full, Fraunces é variable 100-900) */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 900;
/* ── SPACE — escala 4/8 híbrida ─────────────────────────────────────────── */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2 */
--space-1: 0.25rem; /* 4 */
--space-1-5: 0.375rem; /* 6 */
--space-2: 0.5rem; /* 8 */
--space-2-5: 0.625rem; /* 10 — half-step entre 2 e 3 (mesmo padrão do Tailwind space-2.5) */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-14: 3.5rem; /* 56 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--space-40: 10rem; /* 160 */
--space-48: 12rem; /* 192 */
/* ── RADIUS — mais generoso que o padrão utilitário (editorial) ─────────── */
--radius-none: 0;
--radius-xs: 4px; /* chips micro, badges */
--radius-sm: 6px; /* inputs pequenos */
--radius-md: 8px; /* inputs, buttons */
--radius-lg: 12px; /* cards */
--radius-xl: 16px; /* cards proeminentes, painéis */
--radius-2xl: 20px; /* cards hero, modals */
--radius-3xl: 28px; /* pastilhas display */
--radius-full: 9999px; /* pills, avatars */
/* ── SHADOW — layered, com tint sutil (não preto puro) ──────────────────── */
--shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
--shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
--shadow-md: 0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
--shadow-lg: 0 12px 24px -4px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.06);
--shadow-xl: 0 24px 48px -8px rgb(15 23 42 / 0.14), 0 8px 16px -8px rgb(15 23 42 / 0.08);
--shadow-2xl: 0 40px 80px -16px rgb(15 23 42 / 0.20);
/* Shadow com tint da marca — para elementos ativos/selecionados */
--shadow-brand-sm: 0 2px 8px -2px color-mix(in oklab, var(--brand-500) 30%, transparent);
--shadow-brand-md: 0 8px 24px -4px color-mix(in oklab, var(--brand-500) 35%, transparent);
/* Inner shadow — insets, code, sunken surfaces */
--shadow-inner: inset 0 1px 2px 0 rgb(15 23 42 / 0.06);
/* ── MOTION ─────────────────────────────────────────────────────────────── */
--duration-instant: 80ms;
--duration-fast: 140ms;
--duration-base: 220ms;
--duration-slow: 380ms;
--duration-slower: 600ms;
--ease-linear: linear;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* natural exit */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */
/* ── LAYOUT & BREAKPOINTS ───────────────────────────────────────────────── */
/* Breakpoints canônicos (Tailwind-aligned) — MOBILE-FIRST:
base sem media query = mobile. @media (min-width: var(--bp-md)) sobe pra tablet. */
--bp-sm: 640px; /* iPhone landscape, tablets pequenos */
--bp-md: 768px; /* iPad portrait, sidebar aparece */
--bp-lg: 1024px; /* iPad landscape, desktop grid */
--bp-xl: 1280px; /* desktop padrão */
--bp-2xl: 1536px; /* desktop wide */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
--container-prose: 68ch;
/* Touch targets (WCAG 2.1) — mínimo em qualquer control interativo mobile */
--touch-target: 44px;
/* Safe area (notch iPhone, gesture bar Android) — usar em bottom-nav, drawers */
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
/* Alturas de shell mobile */
--topbar-h-mobile: 56px;
--topbar-h-desktop: 64px;
--bottom-nav-h: 56px;
--sidebar-w: 260px; /* desktop; em mobile vira drawer */
/* Z-index scale — evita torres de babel */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-popover: 500;
--z-toast: 600;
--z-tooltip: 700;
/* Chart palette — categorial, editorial (usar nesta ordem para séries) */
--chart-1: var(--brand-500);
--chart-2: var(--accent-purple-600);
--chart-3: var(--accent-magenta-600);
--chart-4: var(--warning-500);
--chart-5: var(--info-500);
--chart-6: var(--brand-700);
--chart-7: var(--accent-gold-600);
--chart-8: var(--neutral-500);
/* ── SLIDE REPORT — tokens de organização + relatório (#121) ─────────────
Override via Organization.theme JSON: --org-primary, --org-accent.
Fallback = valores PSDB SC (padrão de lançamento).
LR-09: --pos/--neu/--neg/--warn são FIXOS — zero improvisação por slide. */
/* Organization theme (override per-org via inline style on .slide-shell) */
--org-primary: #0E3B34; /* deep green PSDB SC default */
--org-accent: #2FBE97; /* teal accent PSDB SC default */
--org-accent-soft: #79D9BC;
/* Slide canvas palette */
--canvas: #F0F0E8; /* cream page bg — LR-06: slides operacionais */
--card: #FFFFFF;
--ink: #101A1A;
--ink-soft: #3D4D4D;
--ink-mute: #7A8888;
--line: #E5E1D6;
/* Semantic colors — HARD RULE fixos (LR-09). NUNCA mudar por slide. */
--pos: #2E9A6B; /* positivo */
--neu: #C99A2B; /* neutro */
--neg: #C0392B; /* negativo */
--warn: #F59E0B; /* HARD RULE amber-500 — sempre este valor */
/* Slide typography (#121) — Bricolage Grotesque para relatórios */
--font-hero-italic: 'Instrument Serif', Georgia, serif; /* hero italic only */
/* Note: --font-display and --font-mono already declared above (Montserrat / JetBrains Mono).
.slide-shell overrides --font-display to Bricolage Grotesque (scoped below). */
/* Slide dimensions — LR-03 (PDF/TV zero scroll, LR-03 auto-paginação) */
--stage-w: 1600px;
--stage-h: 900px;
--pdf-w: 1122px;
--pdf-h: 794px;
--mobile-w: 375px;
}
/* Slide shell font override — Bricolage Grotesque replaces Montserrat inside slides.
Scoped to .slide-shell so the app UI (Montserrat) is unaffected. */
.slide-shell {
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
}