/* ========================================================================== BR.VC Design Tokens — fonte unica de verdade do design system -------------------------------------------------------------------------- Camada 1: primitivos (rampa de cor, neutros, semanticos base) Camada 2: escalas (radius, shadow, spacing, type, fonts) Camada 3: tokens semanticos por papel (--app-*, --admin-*) + tema escuro -------------------------------------------------------------------------- Regras (ver .cursor/rules/21-design-system.mdc): - Componentes consomem SEMPRE var(--token); nunca hex de marca solto. - Este arquivo carrega antes de todos os demais CSS de cada surface. - Surfaces (portal, registro) podem estender via "surface themes" abaixo, mas derivando dos primitivos, nao com hex paralelo. ========================================================================== */ :root { /* ==================================================================== MARCA DA INSTALAÇÃO (--brand-*) Fallbacks = BR.VC. A instalação vence via style inline no (app_brand_style), que tem precedência sobre este :root. ==================================================================== */ --brand-primary: #008a3e; --brand-primary-hover: #006b2f; --brand-primary-dark: #005323; --brand-accent: #00ff88; --brand-background: #f5faf7; --brand-surface: #ffffff; --brand-text: #10251a; --brand-text-muted: #617168; --brand-border: #dbe7df; --brand-success: #008a3e; --brand-danger: #b42318; --brand-primary-bright: color-mix(in srgb, var(--brand-primary) 70%, var(--brand-accent)); /* ==================================================================== CAMADA 1 — PRIMITIVOS ==================================================================== */ /* Marca: rampa derivada de --brand-* (BR.VC permanece var(--brand-primary) via fallback) */ --brvc-green-50: color-mix(in srgb, var(--brand-primary) 12%, #ffffff); --brvc-green-100: color-mix(in srgb, var(--brand-primary) 22%, #ffffff); --brvc-green-200: color-mix(in srgb, var(--brand-primary) 38%, #ffffff); --brvc-green-300: color-mix(in srgb, var(--brand-primary) 58%, #ffffff); --brvc-green-400: color-mix(in srgb, var(--brand-primary) 78%, #ffffff); --brvc-green-500: var(--brand-primary); --brvc-green-600: var(--brand-primary-hover); --brvc-green-700: var(--brand-primary-hover); --brvc-green-800: var(--brand-primary-dark); --brvc-green-900: color-mix(in srgb, var(--brand-primary) 55%, #000000); /* Acentos especiais (highlight / dark / marketing) */ --brvc-green-neon: var(--brand-accent); --brvc-green-neon-soft: color-mix(in srgb, var(--brand-accent) 72%, var(--brand-primary)); --brvc-green-neon-strong: color-mix(in srgb, var(--brand-accent) 55%, #ffffff); --brvc-teal: color-mix(in srgb, var(--brand-primary) 45%, var(--brand-accent)); /* Neutros da instalação (esverdeados no BR.VC, azulados no MX.TV) */ --brvc-neutral-0: #ffffff; --brvc-neutral-50: var(--brand-background); --brvc-neutral-100: color-mix(in srgb, var(--brand-primary) 8%, #ffffff); --brvc-neutral-150: color-mix(in srgb, var(--brand-primary) 5%, #ffffff); --brvc-neutral-200: var(--brand-border); --brvc-neutral-300: color-mix(in srgb, var(--brand-primary) 28%, #c5cdd0); --brvc-neutral-400: color-mix(in srgb, var(--brand-primary) 22%, #8a969c); --brvc-neutral-500: var(--brand-text-muted); --brvc-neutral-600: color-mix(in srgb, var(--brand-primary) 35%, #2a3338); --brvc-neutral-700: color-mix(in srgb, var(--brand-primary) 40%, #1a2226); --brvc-neutral-900: var(--brand-text); /* Tintas escuras (base do tema dark) */ --brvc-ink-900: color-mix(in srgb, var(--brand-primary) 18%, #05080a); --brvc-ink-800: color-mix(in srgb, var(--brand-primary) 24%, #0a1014); --brvc-ink-700: color-mix(in srgb, var(--brand-primary) 20%, #081018); /* Semanticos base */ --brvc-danger: #b42318; --brvc-danger-soft: #fff1f0; --brvc-warning: #8a6116; --brvc-warning-amber: #f59e0b; --brvc-focus: #f2c94c; --brvc-info: #2196f3; /* Sub-marca de IA (assistentes, geracao) */ --brvc-ai: #7c3aed; --brvc-ai-soft: rgba(124, 58, 237, 0.12); /* ==================================================================== CAMADA 2 — ESCALAS ==================================================================== */ /* Raio de borda */ --brvc-radius-xs: 8px; --brvc-radius-sm: 12px; --brvc-radius-md: 16px; --brvc-radius-lg: 20px; --brvc-radius-xl: 24px; --brvc-radius-pill: 999px; /* Elevacao / sombra */ --brvc-shadow-hairline: 0 1px 0 color-mix(in srgb, var(--brand-primary) 6%, transparent); --brvc-shadow-sm: 0 8px 18px color-mix(in srgb, var(--brand-primary) 16%, transparent); --brvc-shadow-card: 0 12px 32px color-mix(in srgb, var(--brand-primary) 6%, transparent); --brvc-shadow-md: 0 16px 40px color-mix(in srgb, var(--brand-primary) 8%, transparent); --brvc-shadow-lg: 0 18px 46px color-mix(in srgb, var(--brand-primary) 8%, transparent); --brvc-shadow-overlay: 0 24px 60px rgba(15, 23, 42, 0.28); --brvc-shadow-focus: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent); /* Espacamento (escala 4px) */ --brvc-space-1: 4px; --brvc-space-2: 8px; --brvc-space-3: 12px; --brvc-space-4: 16px; --brvc-space-5: 20px; --brvc-space-6: 24px; --brvc-space-7: 32px; --brvc-space-8: 40px; /* Tipografia — escala fluida */ --brvc-text-xs: 0.78rem; --brvc-text-sm: 0.875rem; --brvc-text-base: 1rem; --brvc-text-lg: clamp(1rem, 1.8vw, 1.12rem); --brvc-text-xl: clamp(1.2rem, 2.2vw, 1.4rem); --brvc-text-2xl: clamp(1.5rem, 3vw, 1.9rem); --brvc-text-3xl: clamp(1.9rem, 3vw, 2.75rem); /* Pesos */ --brvc-weight-regular: 400; --brvc-weight-medium: 500; --brvc-weight-semibold: 600; --brvc-weight-bold: 700; --brvc-weight-heavy: 800; --brvc-weight-black: 900; /* Fontes (tokenizadas; cada surface aplica via font-family) */ --brvc-font-sans: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --brvc-font-display: "Playfair Display", Georgia, serif; --brvc-font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; /* ==================================================================== CAMADA 3 — SEMANTICOS POR PAPEL (tema claro) Espelham os valores atuais de app.css e definem os tokens que hoje eram usados apenas como fallback inline (--app-primary, --app-surface*). ==================================================================== */ --app-accent: var(--brand-primary); --app-accent-strong: var(--brand-primary-hover); --app-accent-soft: var(--brvc-green-50); --app-primary: var(--brand-primary); --app-primary-soft: var(--brvc-green-50); --app-primary-strong: var(--brand-primary-hover); --app-bg: var(--brand-background); --app-surface: var(--brand-surface); --app-surface-soft: var(--brvc-neutral-150); --app-surface-muted: var(--brvc-neutral-100); --app-card: var(--brvc-neutral-0); --app-card-bg: var(--brvc-neutral-0); --app-border: var(--brand-border); --app-border-strong: var(--brvc-neutral-300); --app-text: var(--brand-text); --app-text-soft: var(--brand-text-muted); --app-muted: var(--brand-text-muted); --app-danger: var(--brand-danger); --app-danger-soft: var(--brvc-danger-soft); --app-warning: var(--brvc-warning); --app-focus: var(--brvc-focus); --app-shadow: var(--brvc-shadow-lg); --app-shadow-card: var(--brvc-shadow-card); --app-radius: var(--brvc-radius-lg); --app-radius-control: var(--brvc-radius-sm); --app-font-sans: var(--brvc-font-sans); --app-icon-button-size: 38px; /* Espelho admin (alias dos tokens app) */ --admin-accent: var(--app-accent); --admin-accent-strong: var(--app-accent-strong); --admin-accent-soft: var(--app-accent-soft); --admin-bg: var(--app-bg); --admin-border: var(--app-border); --admin-card: var(--app-card); --admin-card-soft: var(--app-surface-soft); --admin-surface: var(--app-surface); --admin-surface-soft: var(--app-surface-soft); --admin-surface-muted: var(--app-surface-muted); --admin-danger: var(--app-danger); --admin-danger-soft: var(--app-danger-soft); --admin-focus: var(--app-focus); --admin-muted: var(--app-muted); --admin-sidebar: var(--app-card); --admin-text: var(--app-text); --admin-text-soft: var(--app-text-soft); --admin-warning: var(--brvc-warning); --admin-shadow: var(--app-shadow); } /* ====================================================================== CAMADA 3 — TEMA ESCURO Seletor canonico: body.brvc-theme-dark (app.css ainda usa body.app-mode.brvc-theme-dark com mais especificidade para seus proprios tokens; aqui garantimos os tokens "fantasma" no dark) ====================================================================== */ body.brvc-theme-dark { --app-accent: var(--brand-accent); --app-accent-strong: var(--brand-accent); --app-accent-soft: color-mix(in srgb, var(--brand-accent) 13%, transparent); --app-primary: var(--brand-accent); --app-primary-soft: color-mix(in srgb, var(--brand-accent) 16%, transparent); --app-primary-strong: var(--brand-accent); --app-bg: var(--brvc-ink-900); --app-surface: var(--brvc-ink-800); --app-surface-soft: color-mix(in srgb, var(--brand-primary) 20%, #0a1014); --app-surface-muted: color-mix(in srgb, var(--brand-accent) 8%, transparent); --app-card: var(--brvc-ink-800); --app-card-bg: var(--brvc-ink-800); --app-border: color-mix(in srgb, var(--brand-accent) 16%, transparent); --app-border-strong: color-mix(in srgb, var(--brand-accent) 24%, transparent); --app-text: #f4f8fb; --app-text-soft: color-mix(in srgb, var(--brand-accent) 18%, #d5dde2); --app-muted: color-mix(in srgb, var(--brand-accent) 12%, #a8b4bc); --app-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); --app-shadow-card: 0 18px 46px rgba(0, 0, 0, 0.28); /* Espelho admin concreto (evita alias :root → --app-* ficar preso no light) */ --admin-accent: var(--brand-accent); --admin-accent-strong: var(--brand-accent); --admin-accent-soft: color-mix(in srgb, var(--brand-accent) 13%, transparent); --admin-bg: var(--brvc-ink-900); --admin-border: color-mix(in srgb, var(--brand-accent) 16%, transparent); --admin-card: var(--brvc-ink-800); --admin-card-soft: color-mix(in srgb, var(--brand-primary) 20%, #0a1014); --admin-surface: var(--brvc-ink-800); --admin-surface-soft: color-mix(in srgb, var(--brand-primary) 20%, #0a1014); --admin-surface-muted: color-mix(in srgb, var(--brand-accent) 8%, transparent); --admin-danger: #ff8f84; --admin-danger-soft: rgba(180, 35, 24, 0.18); --admin-muted: var(--app-muted); --admin-text: var(--app-text); --admin-text-soft: var(--app-text-soft); --admin-shadow: 0 18px 46px rgba(0, 0, 0, 0.28); } /* ====================================================================== SURFACE THEMES Surfaces de marketing reusam os mesmos primitivos com papeis proprios. (Preenchidos na migracao de portal/registro — Fase 1b.) ====================================================================== */