/* Seklyn — tokens de design (branco + roxo), espelhando a paleta e a hierarquia de raio/sombra do produto real (violet + slate, Tailwind). Tema claro é o padrão; a área do Aluno suporta modo escuro opcional (via atributo [data-theme="escuro"] no , alternado em treino.js). */ :root { /* Marca (violet) */ --cor-primaria: #7c3aed; /* violet-600 */ --cor-primaria-hover: #6d28d9; /* violet-700 */ --cor-primaria-ativa: #5b21b6; /* violet-800 */ --cor-primaria-forte: #4c1d95; /* violet-900 */ --cor-primaria-clara: #ede9fe; /* violet-100 */ --cor-primaria-suave: #f5f3ff; /* violet-50 */ --cor-primaria-contraste: #ffffff; /* Neutros / superfícies (slate) */ --cor-fundo: #ffffff; --cor-fundo-alt: #f8fafc; /* slate-50 */ --cor-superficie: #ffffff; --cor-borda: #e2e8f0; /* slate-200 */ --cor-borda-forte: #cbd5e1; /* slate-300 */ /* Texto (slate) */ --cor-texto: #0f172a; /* slate-900 */ --cor-texto-muted: #64748b; /* slate-500 */ --cor-texto-contraste: #ffffff; /* Estados */ --cor-sucesso: #16a34a; --cor-sucesso-clara: #dcfce7; --cor-perigo: #dc2626; --cor-perigo-clara: #fee2e2; --cor-aviso: #d97706; --cor-aviso-clara: #fef3c7; /* Tipografia */ --fonte-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* Espaçamento */ --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-5: 24px; --espaco-6: 32px; --espaco-7: 48px; --espaco-8: 64px; /* Raio — hierarquia: botão/input = sm (xl), card = md (2xl), hero/página = lg (3xl), badge/avatar = total (full) */ --raio-sm: 12px; --raio-md: 16px; --raio-lg: 24px; --raio-total: 999px; --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --sombra-md: 0 4px 16px rgba(76, 29, 149, 0.12); --sombra-lg: 0 12px 32px rgba(76, 29, 149, 0.18); /* Sombra em camadas do botão primário — assinatura visual do produto */ --sombra-botao: 0 2px 4px rgba(124, 58, 237, 0.3), 0 10px 20px rgba(76, 29, 149, 0.25); --sombra-botao-hover: 0 4px 8px rgba(124, 58, 237, 0.35), 0 14px 28px rgba(76, 29, 149, 0.3); /* Cores dos blobs decorativos de fundo (landing/auth) — trocadas por tema personalizado */ --cor-blob-1: #8b5cf6; --cor-blob-2: #4c1d95; --cor-blob-3: #a78bfa; } /* Modo escuro opcional — usado principalmente na área do Aluno */ :root[data-theme="escuro"] { --cor-primaria: #a78bfa; /* violet-400 */ --cor-primaria-hover: #c4b5fd; /* violet-300 */ --cor-primaria-ativa: #ddd6fe; /* violet-200 */ --cor-primaria-forte: #ede9fe; --cor-primaria-clara: #2e1f4d; --cor-primaria-suave: #221a38; --cor-primaria-contraste: #1a1327; --cor-fundo: #020617; /* slate-950 — igual ao fundo de página do v1 */ --cor-fundo-alt: #0f172a; /* slate-900 */ --cor-superficie: #0f172a; /* slate-900 — cards/sidebar um tom acima do fundo */ --cor-borda: #1e293b; /* slate-800 */ --cor-borda-forte: #334155; /* slate-700 */ --cor-texto: #f8fafc; /* slate-50 */ --cor-texto-muted: #94a3b8; /* slate-400 */ --cor-texto-contraste: #0f172a; /* As "claras" (fundo pastel dos badges/alertas de sucesso/aviso/perigo) ficavam claras mesmo no escuro — texto claro em cima de fundo pastel = ilegível. Aqui viram tons escuros da mesma cor, do jeito que --cor-primaria-clara já faz. */ --cor-sucesso-clara: #14291c; --cor-perigo-clara: #3a1414; --cor-aviso-clara: #3a2a0a; --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.35); --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --sombra-botao: 0 2px 4px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.35); --sombra-botao-hover: 0 4px 8px rgba(0, 0, 0, 0.45), 0 14px 28px rgba(0, 0, 0, 0.4); } /* Tema personalizado "rosa" — exclusivo por conta (Personal.tema_personalizado), aplicado via [data-tema-personalizado="rosa"] no (ver tema-personalizado.js). Reflete tanto no painel do Personal quanto na área dos alunos dele, pra manter a identidade visual consistente ponta a ponta. Funciona em cima do claro/escuro. */ :root[data-tema-personalizado="rosa"] { --cor-primaria: #db2777; /* pink-600 */ --cor-primaria-hover: #be185d; /* pink-700 */ --cor-primaria-ativa: #9d174d; /* pink-800 */ --cor-primaria-forte: #831843; /* pink-900 */ --cor-primaria-clara: #fce7f3; /* pink-100 */ --cor-primaria-suave: #fdf2f8; /* pink-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #f9a8d4; /* pink-300 */ --cor-blob-2: #db2777; /* pink-600 */ --cor-blob-3: #f472b6; /* pink-400 */ --sombra-botao: 0 2px 4px rgba(219, 39, 119, 0.3), 0 10px 20px rgba(131, 24, 67, 0.25); --sombra-botao-hover: 0 4px 8px rgba(219, 39, 119, 0.35), 0 14px 28px rgba(131, 24, 67, 0.3); } :root[data-tema-personalizado="rosa"][data-theme="escuro"] { --cor-primaria: #f9a8d4; /* pink-300 */ --cor-primaria-hover: #fbcfe8; /* pink-200 */ --cor-primaria-ativa: #fce7f3; /* pink-100 */ --cor-primaria-forte: #fce7f3; --cor-primaria-clara: #4a1d3a; --cor-primaria-suave: #341527; --cor-primaria-contraste: #2b1220; } /* Tema personalizado "verde" — mesmo esquema, exclusivo de outra conta. */ :root[data-tema-personalizado="verde"] { --cor-primaria: #16a34a; /* green-600 */ --cor-primaria-hover: #15803d; /* green-700 */ --cor-primaria-ativa: #166534; /* green-800 */ --cor-primaria-forte: #14532d; /* green-900 */ --cor-primaria-clara: #dcfce7; /* green-100 */ --cor-primaria-suave: #f0fdf4; /* green-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #86efac; /* green-300 */ --cor-blob-2: #16a34a; /* green-600 */ --cor-blob-3: #4ade80; /* green-400 */ --sombra-botao: 0 2px 4px rgba(22, 163, 74, 0.3), 0 10px 20px rgba(20, 83, 45, 0.25); --sombra-botao-hover: 0 4px 8px rgba(22, 163, 74, 0.35), 0 14px 28px rgba(20, 83, 45, 0.3); } :root[data-tema-personalizado="verde"][data-theme="escuro"] { --cor-primaria: #86efac; /* green-300 */ --cor-primaria-hover: #bbf7d0; /* green-200 */ --cor-primaria-ativa: #dcfce7; /* green-100 */ --cor-primaria-forte: #dcfce7; --cor-primaria-clara: #1f3d2a; --cor-primaria-suave: #16291c; --cor-primaria-contraste: #0d1f14; } /* Tema personalizado "azul" — mesmo esquema, exclusivo de outra conta. */ :root[data-tema-personalizado="azul"] { --cor-primaria: #2563eb; /* blue-600 */ --cor-primaria-hover: #1d4ed8; /* blue-700 */ --cor-primaria-ativa: #1e40af; /* blue-800 */ --cor-primaria-forte: #1e3a8a; /* blue-900 */ --cor-primaria-clara: #dbeafe; /* blue-100 */ --cor-primaria-suave: #eff6ff; /* blue-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #93c5fd; /* blue-300 */ --cor-blob-2: #2563eb; /* blue-600 */ --cor-blob-3: #60a5fa; /* blue-400 */ --sombra-botao: 0 2px 4px rgba(37, 99, 235, 0.3), 0 10px 20px rgba(30, 58, 138, 0.25); --sombra-botao-hover: 0 4px 8px rgba(37, 99, 235, 0.35), 0 14px 28px rgba(30, 58, 138, 0.3); } :root[data-tema-personalizado="azul"][data-theme="escuro"] { --cor-primaria: #93c5fd; /* blue-300 */ --cor-primaria-hover: #bfdbfe; /* blue-200 */ --cor-primaria-ativa: #dbeafe; /* blue-100 */ --cor-primaria-forte: #dbeafe; --cor-primaria-clara: #1e3a5f; --cor-primaria-suave: #16283f; --cor-primaria-contraste: #0c1a2e; } /* Tema personalizado "celeste" — azul claro, mais leve que o "azul" (blue-600) de outra conta, pra ficar visualmente distinto dele. */ :root[data-tema-personalizado="celeste"] { --cor-primaria: #0ea5e9; /* sky-500 */ --cor-primaria-hover: #0284c7; /* sky-600 */ --cor-primaria-ativa: #0369a1; /* sky-700 */ --cor-primaria-forte: #075985; /* sky-800 */ --cor-primaria-clara: #e0f2fe; /* sky-100 */ --cor-primaria-suave: #f0f9ff; /* sky-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #7dd3fc; /* sky-300 */ --cor-blob-2: #0ea5e9; /* sky-500 */ --cor-blob-3: #38bdf8; /* sky-400 */ --sombra-botao: 0 2px 4px rgba(14, 165, 233, 0.3), 0 10px 20px rgba(7, 89, 133, 0.25); --sombra-botao-hover: 0 4px 8px rgba(14, 165, 233, 0.35), 0 14px 28px rgba(7, 89, 133, 0.3); } :root[data-tema-personalizado="celeste"][data-theme="escuro"] { --cor-primaria: #7dd3fc; /* sky-300 */ --cor-primaria-hover: #bae6fd; /* sky-200 */ --cor-primaria-ativa: #e0f2fe; /* sky-100 */ --cor-primaria-forte: #e0f2fe; --cor-primaria-clara: #123549; --cor-primaria-suave: #0d2736; --cor-primaria-contraste: #081a25; } /* Tema personalizado "choque" — roxo vibrante/magenta, propositalmente diferente do roxo padrão do site (violet-600) pra ficar bem distinto. */ :root[data-tema-personalizado="choque"] { --cor-primaria: #c026d3; /* fuchsia-600 */ --cor-primaria-hover: #a21caf; /* fuchsia-700 */ --cor-primaria-ativa: #86198f; /* fuchsia-800 */ --cor-primaria-forte: #701a75; /* fuchsia-900 */ --cor-primaria-clara: #fae8ff; /* fuchsia-100 */ --cor-primaria-suave: #fdf4ff; /* fuchsia-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #f0abfc; /* fuchsia-300 */ --cor-blob-2: #c026d3; /* fuchsia-600 */ --cor-blob-3: #e879f9; /* fuchsia-400 */ --sombra-botao: 0 2px 4px rgba(192, 38, 211, 0.35), 0 10px 20px rgba(112, 26, 117, 0.3); --sombra-botao-hover: 0 4px 8px rgba(192, 38, 211, 0.4), 0 14px 28px rgba(112, 26, 117, 0.35); } /* Tema personalizado "amarelo" — mesmo esquema, exclusivo de outra conta. Contraste em marrom bem escuro (não branco): texto branco em cima de amarelo tem contraste ruim. */ :root[data-tema-personalizado="amarelo"] { --cor-primaria: #f59e0b; /* amber-500 */ --cor-primaria-hover: #d97706; /* amber-600 */ --cor-primaria-ativa: #92400e; /* amber-800 */ --cor-primaria-forte: #78350f; /* amber-900 */ --cor-primaria-clara: #fef3c7; /* amber-100 */ --cor-primaria-suave: #fffbeb; /* amber-50 */ --cor-primaria-contraste: #451a03; --cor-blob-1: #fcd34d; /* amber-300 */ --cor-blob-2: #f59e0b; /* amber-500 */ --cor-blob-3: #fbbf24; /* amber-400 */ --sombra-botao: 0 2px 4px rgba(245, 158, 11, 0.35), 0 10px 20px rgba(120, 53, 15, 0.25); --sombra-botao-hover: 0 4px 8px rgba(245, 158, 11, 0.4), 0 14px 28px rgba(120, 53, 15, 0.3); } :root[data-tema-personalizado="amarelo"][data-theme="escuro"] { --cor-primaria: #fcd34d; /* amber-300 */ --cor-primaria-hover: #fde68a; /* amber-200 */ --cor-primaria-ativa: #fef3c7; /* amber-100 */ --cor-primaria-forte: #fef3c7; --cor-primaria-clara: #4a3208; --cor-primaria-suave: #332305; --cor-primaria-contraste: #241a04; } /* Tema personalizado "laranja" — vibrante/chamativo de propósito, distinto de todos os outros (rosa, verde, azul, celeste, choque, amarelo). */ :root[data-tema-personalizado="laranja"] { --cor-primaria: #ea580c; /* orange-600 */ --cor-primaria-hover: #c2410c; /* orange-700 */ --cor-primaria-ativa: #9a3412; /* orange-800 */ --cor-primaria-forte: #7c2d12; /* orange-900 */ --cor-primaria-clara: #ffedd5; /* orange-100 */ --cor-primaria-suave: #fff7ed; /* orange-50 */ --cor-primaria-contraste: #ffffff; --cor-blob-1: #fdba74; /* orange-300 */ --cor-blob-2: #ea580c; /* orange-600 */ --cor-blob-3: #fb923c; /* orange-400 */ --sombra-botao: 0 2px 4px rgba(234, 88, 12, 0.35), 0 10px 20px rgba(124, 45, 18, 0.3); --sombra-botao-hover: 0 4px 8px rgba(234, 88, 12, 0.4), 0 14px 28px rgba(124, 45, 18, 0.35); } :root[data-tema-personalizado="laranja"][data-theme="escuro"] { --cor-primaria: #fb923c; /* orange-400 */ --cor-primaria-hover: #fdba74; /* orange-300 */ --cor-primaria-ativa: #ffedd5; /* orange-100 */ --cor-primaria-forte: #ffedd5; --cor-primaria-clara: #4a260d; --cor-primaria-suave: #331a09; --cor-primaria-contraste: #1f1005; } :root[data-tema-personalizado="choque"][data-theme="escuro"] { --cor-primaria: #f0abfc; /* fuchsia-300 */ --cor-primaria-hover: #f5d0fe; /* fuchsia-200 */ --cor-primaria-ativa: #fae8ff; /* fuchsia-100 */ --cor-primaria-forte: #fae8ff; --cor-primaria-clara: #4a1258; --cor-primaria-suave: #330d3d; --cor-primaria-contraste: #260a2e; }