/* ============================================ Design System: "The Digital Atelier" Duo Academy — Navy · Violet · Magenta ============================================ Temas claro/escuro (convenção shadcn): :root → paleta CLARA (padrão) .dark → paleta ESCURA (a original do produto) O recebe a classe .dark via lib/theme.mjs + script inline no index.html (antes do primeiro paint). Mantenha as duas sincronizadas com os tokens em public/_js/ui/tokens/plataforma.css (--primary/--background existem nas duas folhas — editar juntas). */ :root { /* === Fonts (compartilhadas entre os temas) === */ --font-headline: 'Noto Serif', serif; --font-display: 'Noto Serif', serif; --font-body: 'Manrope', sans-serif; --font-label: 'Manrope', sans-serif; /* === Surface Hierarchy (Light Lavender Architecture) === */ --surface: #f6f4fc; --surface-dim: #e9e6f6; --surface-bright: #ffffff; --surface-container-lowest: #ffffff; --surface-container-low: #f1effa; --surface-container: #ebe8f7; --surface-container-high: #e3dff3; --surface-container-highest: #d9d4ee; --surface-variant: #e3dff3; --surface-tint: #7c3aed; /* === Primary (Violet) === */ --primary: #7c3aed; --primary-container: #ede9fe; --primary-fixed: #ddd6fe; --primary-fixed-dim: #c4b5fd; --on-primary: #ffffff; --on-primary-container: #2e1065; --on-primary-fixed: #2e1065; --on-primary-fixed-variant: #4c1d95; --inverse-primary: #c4b5fd; /* === Secondary (Magenta) === */ --secondary: #a21caf; --secondary-container: #fae8ff; --secondary-fixed: #f5d0fe; --secondary-fixed-dim: #e879f9; --on-secondary: #ffffff; --on-secondary-container: #701a75; --on-secondary-fixed: #701a75; --on-secondary-fixed-variant: #86198f; /* === Tertiary (Indigo) === */ --tertiary: #4338ca; --tertiary-container: #e0e7ff; --tertiary-fixed: #c7d2fe; --tertiary-fixed-dim: #818cf8; --on-tertiary: #ffffff; --on-tertiary-container: #1e1b4b; --on-tertiary-fixed: #1e1b4b; --on-tertiary-fixed-variant: #3730a3; /* === Error === */ --error: #b3261e; --error-container: #f9dedc; --on-error: #ffffff; --on-error-container: #410e0b; /* === Text / On-Surface === */ --on-surface: #1e1b36; --on-surface-variant: #4a4564; --on-background: #1e1b36; --background: #ffffff; /* --surface-bright (sincronizado com tokens/plataforma.css) */ --outline: #77718f; --outline-variant: #cbc6e6; --inverse-surface: #2d2a4a; --inverse-on-surface: #e8e5ff; /* === Signature Gradient — Duo Academy violet → magenta === */ --gold-gradient: linear-gradient(135deg, #6d28d9 0%, #a855f7 50%, #c026d3 100%); --brand-gradient: linear-gradient(135deg, #6d28d9 0%, #a855f7 50%, #c026d3 100%); /* === Legacy Compatibility Aliases === */ --text: #1e1b36; --text-50: #ffffff; --text-100: #f6f4fc; --text-200: #ebe8f7; --text-300: #d9d4ee; --text-400: #a39dc4; --text-500: #77718f; --text-600: #5b5679; --text-700: #4a4564; --text-800: #322e4e; --text-900: #1e1b36; --text-950: #14122a; --background-50: #ffffff; --background-100: #f6f4fc; --background-200: #ebe8f7; --background-300: #d9d4ee; --background-400: #c2bce4; --background-500: #a39dc4; --background-600: #77718f; --background-700: #5b5679; --background-800: #3a3557; --background-900: #1e1b36; --background-950: #14122a; --accent: #7c3aed; --accent-50: #f5f3ff; --accent-100: #ede9fe; --accent-200: #ddd6fe; --accent-300: #c4b5fd; --accent-400: #a78bfa; --accent-500: #8b5cf6; --accent-600: #7c3aed; --accent-700: #6d28d9; --accent-800: #5b21b6; --accent-900: #4c1d95; --accent-950: #2e1065; --secondary-50: #fdf4ff; --secondary-100: #fae8ff; --secondary-200: #f5d0fe; --secondary-300: #f0abfc; --secondary-400: #e879f9; --secondary-500: #d946ef; --secondary-600: #c026d3; --secondary-700: #a21caf; --secondary-800: #86198f; --secondary-900: #701a75; --secondary-950: #4a044e; --primary-50: #f5f3ff; --primary-100: #ede9fe; --primary-200: #ddd6fe; --primary-300: #c4b5fd; --primary-400: #a78bfa; --primary-500: #8b5cf6; --primary-600: #7c3aed; --primary-700: #6d28d9; --primary-800: #5b21b6; --primary-900: #4c1d95; --primary-950: #2e1065; /* Neutral (mapped to light lavender surfaces) */ --neutral: #ebe8f7; --neutral-50: #ffffff; --neutral-100: #f6f4fc; --neutral-200: #ebe8f7; --neutral-300: #d9d4ee; --neutral-400: #c2bce4; --neutral-500: #a39dc4; --neutral-600: #77718f; --neutral-700: #5b5679; --neutral-800: #3a3557; --neutral-900: #1e1b36; --neutral-950: #14122a; } /* ════════════════════════════════════════════════════════════════════════ TEMA ESCURO (original do produto) — ativado pela classe .dark no ════════════════════════════════════════════════════════════════════════ */ .dark { /* === Surface Hierarchy (Dark Navy Architecture) === */ --surface: #09071a; --surface-dim: #09071a; --surface-bright: #2d2a4a; --surface-container-lowest: #050412; --surface-container-low: #100e28; --surface-container: #161338; --surface-container-high: #1e1a42; --surface-container-highest: #27244e; --surface-variant: #27244e; --surface-tint: #a78bfa; /* === Primary (Violet) === */ --primary: #a78bfa; --primary-container: #7c3aed; --primary-fixed: #c4b5fd; --primary-fixed-dim: #8b5cf6; --on-primary: #1e0a4a; --on-primary-container: #ede9fe; --on-primary-fixed: #0d0520; --on-primary-fixed-variant: #2e1065; --inverse-primary: #5b21b6; /* === Secondary (Magenta) === */ --secondary: #f0abfc; --secondary-container: #86198f; --secondary-fixed: #fae8ff; --secondary-fixed-dim: #e879f9; --on-secondary: #4a044e; --on-secondary-container: #fae8ff; --on-secondary-fixed: #2d0030; --on-secondary-fixed-variant: #701a75; /* === Tertiary (Indigo) === */ --tertiary: #a5b4fc; --tertiary-container: #4338ca; --tertiary-fixed: #e0e7ff; --tertiary-fixed-dim: #818cf8; --on-tertiary: #1e1b4b; --on-tertiary-container: #e0e7ff; --on-tertiary-fixed: #0f0e26; --on-tertiary-fixed-variant: #312e81; /* === Error === */ --error: #ffb4ab; --error-container: #93000a; --on-error: #690005; --on-error-container: #ffdad6; /* === Text / On-Surface === */ --on-surface: #e8e5ff; --on-surface-variant: #c5bdef; --on-background: #e8e5ff; --background: #09071a; --outline: #6b61a0; --outline-variant: #3b3468; --inverse-surface: #e8e5ff; --inverse-on-surface: #09071a; /* === Legacy Compatibility Aliases === */ --text: #e8e5ff; --text-50: #050412; --text-100: #09071a; --text-200: #100e28; --text-300: #161338; --text-400: #6b61a0; --text-500: #6b61a0; --text-600: #c5bdef; --text-700: #c5bdef; --text-800: #e8e5ff; --text-900: #e8e5ff; --text-950: #e8e5ff; --background-50: #050412; --background-100: #100e28; --background-200: #1e1a42; --background-300: #27244e; --background-400: #3b3468; --background-500: #6b61a0; --background-600: #6b61a0; --background-700: #c5bdef; --background-800: #e8e5ff; --background-900: #e8e5ff; --background-950: #e8e5ff; --accent: #a78bfa; --accent-50: #1e0a4a; --accent-100: #2e1065; --accent-200: #2e1065; --accent-300: #5b21b6; --accent-400: #8b5cf6; --accent-500: #a78bfa; --accent-600: #a78bfa; --accent-700: #c4b5fd; --accent-800: #c4b5fd; --accent-900: #1e0a4a; --accent-950: #0d0520; --secondary-50: #2d0030; --secondary-100: #4a044e; --secondary-200: #701a75; --secondary-300: #86198f; --secondary-400: #e879f9; --secondary-500: #f0abfc; --secondary-600: #f0abfc; --secondary-700: #fae8ff; --secondary-800: #fae8ff; --secondary-900: #fae8ff; --secondary-950: #fae8ff; --primary-50: #0d0520; --primary-100: #1e0a4a; --primary-200: #2e1065; --primary-300: #2e1065; --primary-400: #5b21b6; --primary-500: #8b5cf6; --primary-600: #a78bfa; --primary-700: #a78bfa; --primary-800: #c4b5fd; --primary-900: #c4b5fd; --primary-950: #c4b5fd; /* Neutral (mapped to navy surfaces) */ --neutral: #161338; --neutral-50: #050412; --neutral-100: #09071a; --neutral-200: #100e28; --neutral-300: #161338; --neutral-400: #1e1a42; --neutral-500: #27244e; --neutral-600: #3b3468; --neutral-700: #6b61a0; --neutral-800: #c5bdef; --neutral-900: #e8e5ff; --neutral-950: #e8e5ff; }