/* ═══════════════════════════════════════════════════════════════════ DESIGN TOKENS — fonte única de verdade para cores do projeto Altere aqui para mudar o tema de TODOS os apps (sistema, landing, cursos, meurpps) ═══════════════════════════════════════════════════════════════════ */ :root { /* Fonts */ --font-heading: 'Cormorant Garamond', serif; --font-body: 'DM Sans', sans-serif; /* Backgrounds */ --bg-deep: #0F1115; --bg-surface: #161B22; --bg-elevated: #1F2933; /* Text */ --text-primary: #E6EDF3; --text-secondary: #8B949E; /* Borders */ --border-color: #30363D; /* Accent (electric blue — default) */ --accent: #3B82F6; --accent-hover: #60A5FA; --accent-active: #2563EB; --accent-deep: #1D4ED8; --accent-glow: rgba(59,130,246,.35); /* Data-viz / status */ --color-blue: #3B82F6; --color-green: #22C55E; --color-cyan: #06B6D4; --color-amber: #F59E0B; --color-red: #EF4444; --color-purple: #A78BFA; --color-gray: #8B949E; /* Variantes suaves para barras de gráficos (data viz prolongada). Mistura 65% da cor base com 35% do bg-deep — preserva matiz, reduz saturação. Tema-aware automático: bg-deep muda, soft acompanha. */ --color-blue-soft: color-mix(in oklch, var(--color-blue) 65%, var(--bg-deep)); --color-green-soft: color-mix(in oklch, var(--color-green) 65%, var(--bg-deep)); --color-cyan-soft: color-mix(in oklch, var(--color-cyan) 65%, var(--bg-deep)); --color-amber-soft: color-mix(in oklch, var(--color-amber) 65%, var(--bg-deep)); --color-red-soft: color-mix(in oklch, var(--color-red) 65%, var(--bg-deep)); --color-purple-soft: color-mix(in oklch, var(--color-purple) 65%, var(--bg-deep)); --color-gray-soft: color-mix(in oklch, var(--color-gray) 65%, var(--bg-deep)); /* Layout */ --maxw: 1180px; --radius: 24px; --shadow: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.30); /* Legacy aliases */ --brand-blue: var(--accent); --brand-blue-dark: var(--accent-active); --footer-bg: var(--bg-surface); --footer-text: var(--text-primary); /* Mono font stack */ --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; /* Cor de texto que vai sobre o accent (botões primários, badges sólidos). No accent azul, branco tem contraste suficiente. Apps com accent gold sobrescrevem para um navy escuro — branco em dourado é ilegível. */ --text-on-accent: #FFFFFF; } /* ═══════════════════════════════════════════════════════════════════ LIGHT MODE — ativado com data-theme="light" no Warm beige palette for a refined, paper-like feel ═══════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-deep: #F5F0E8; --bg-surface: #FDFBF7; --bg-elevated: #FAF6EE; --text-primary: #1B2A4A; --text-secondary: #6B7B9A; --border-color: #D8CFC0; --accent: #2563EB; --accent-hover: #1D4ED8; --accent-active: #1E40AF; --accent-deep: #1E3A8A; --accent-glow: rgba(37,99,235,.25); --color-blue: #2563EB; --color-green: #16A34A; --color-cyan: #0891B2; --color-amber: #D97706; --color-red: #DC2626; --color-purple: #7C3AED; --color-gray: #6B7B9A; --footer-bg: var(--bg-surface); --footer-text: var(--text-primary); /* Sombras tintadas com navy (não preto) — combinam com a cena bege */ --shadow: 0 16px 40px rgba(27, 42, 74, 0.12); --shadow-sm: 0 4px 14px rgba(27, 42, 74, 0.08); } /* ═══════════════════════════════════════════════════════════════════ PER-APP ACCENT OVERRIDES Apps that use gold accent instead of blue set data-app on ═══════════════════════════════════════════════════════════════════ */ [data-app="cursos"], [data-app="meurpps"] { --accent: #C9A84C; --accent-hover: #B8963E; --accent-active: #A6842F; --accent-deep: #8D6F22; --accent-glow: rgba(201,168,76,.35); --text-on-accent: #0F1923; } [data-theme="light"][data-app="cursos"], [data-theme="light"][data-app="meurpps"] { --accent: #C9A84C; --accent-hover: #B8963E; --accent-active: #A6842F; --accent-deep: #8D6F22; --accent-glow: rgba(201,168,76,.25); --text-on-accent: #0F1923; }