/* ===================================================================== VÍNEA PREGADOR — Design tokens Paleta: Índigo & Névoa Fonte única de verdade para cores, tipografia, espaçamento e raios. ===================================================================== */ :root { /* --- Marca: Índigo --- */ --indigo-900: #0E1628; /* texto / azul noite */ --indigo-800: #16224a; --indigo-700: #1E2E52; /* PRINCIPAL */ --indigo-600: #2E4580; /* ativo / hover */ --indigo-400: #5b73b0; --indigo-200: #aebde0; --indigo-100: #cdd6ec; --indigo-50: #EDF0F7; /* névoa / fundo de página */ /* --- Superfícies --- */ --color-primary: var(--indigo-700); --color-primary-hover:var(--indigo-600); --color-accent: var(--indigo-600); --bg-page: var(--indigo-50); /* fundo geral névoa */ --bg-card: #FFFFFF; /* cards */ --bg-soft: #F8F9FC; /* superfície suave (inputs, stats) */ --bg-sidebar: var(--indigo-700); /* sidebar desktop */ /* --- Texto --- */ --text-strong: var(--indigo-900); --text: #1c2438; --text-muted: #6b7488; --text-faint: #9aa2b5; --text-on-dark: #ffffff; --text-on-dark-muted: rgba(255,255,255,.66); /* --- Bordas --- */ --border: rgba(30,46,82,.12); --border-strong: rgba(30,46,82,.22); --focus-ring: rgba(46,69,128,.30); /* --- Semânticas (status) --- */ --success: #1D9E75; --success-bg: #E1F5EE; --success-tx: #0F6E56; --warning: #BA7517; --warning-bg: #FAEEDA; --warning-tx: #854F0B; --danger: #A32D2D; --danger-bg: #FCEBEB; --danger-tx: #791F1F; --info: var(--indigo-600); --info-bg: var(--indigo-50); --info-tx: var(--indigo-700); /* --- Tipografia --- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Fraunces", Georgia, serif; /* usado só em títulos de marca */ /* --- Raios --- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* --- Sombra (sutil, conforme identidade Vínea) --- */ --shadow-sm: 0 1px 2px rgba(14,22,40,.05); --shadow-md: 0 4px 16px rgba(14,22,40,.08); --shadow-lg: 0 10px 30px rgba(14,22,40,.10); /* --- Layout --- */ --sidebar-w: 248px; --topbar-h: 60px; --bottomnav-h: 64px; --content-max: 1100px; } /* ===================================================================== TEMA ESCURO — ativado com Sobrescreve só as superfícies e textos; a marca índigo continua. ===================================================================== */ html[data-theme="dark"] { --bg-page: #0f1524; /* fundo geral escuro */ --bg-card: #18203a; /* cards */ --bg-soft: #202a49; /* inputs, stats */ --bg-sidebar: #0b1120; --color-primary: #2E4580; --color-primary-hover:#3a5599; --text-strong: #eef1fb; --text: #dfe4f2; --text-muted: #9aa6c4; --text-faint: #6b779a; --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.18); --focus-ring: rgba(120,150,220,.40); --success-bg: #123a30; --success-tx: #7fe3c0; --warning-bg: #3a2c12; --warning-tx: #f0c983; --danger-bg: #3a1a1a; --danger-tx: #f0a0a0; --info-bg: #1a2340; --info-tx: #aebde0; }