/* ============================================================ PORTAL DO ALUNO — DESIGN TOKENS Fonte única da verdade visual. Três camadas: 1. PRIMITIVAS — valores brutos da marca. Quando a identidade oficial chegar, SOMENTE esta camada muda. 2. SEMÂNTICAS — papéis de uso, definidas POR TEMA. Um novo tema = um novo bloco [data-theme="..."]. 3. COMPONENTE — variáveis específicas derivadas das semânticas (vivem junto dos componentes em components.css). Nenhum componente pode referenciar uma primitiva diretamente. ============================================================ */ /* ── 1. PRIMITIVAS (troca de marca acontece aqui) ── */ :root { /* Acento principal — dourado */ --brand-accent-100: #EBDCC3; --brand-accent-200: #D9C4A0; --brand-accent-300: #C4A882; --brand-accent-500: #B8924A; --brand-accent-700: #8F6F33; /* Acento secundário — rosé */ --brand-accent2-200: #D4AEB4; --brand-accent2-300: #C4929A; --brand-accent2-500: #A96F79; /* Neutros quentes — areia/nude */ --brand-neutral-50: #F9F4EF; --brand-neutral-100: #F4EDE8; --brand-neutral-200: #E8DDD4; --brand-neutral-300: #CBBBAC; --brand-neutral-400: #A99A8C; --brand-neutral-500: #8A7A6E; --brand-neutral-600: #6B5C52; --brand-neutral-800: #2B211C; --brand-neutral-900: #201714; --brand-neutral-950: #1A1210; /* Tipografia */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-data: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* ── 2. SEMÂNTICAS — TEMA DARK (padrão) ── */ :root, [data-theme="dark"] { color-scheme: dark; /* Fundo e superfícies (vidro: alpha sobre o fundo) */ --bg: var(--brand-neutral-950); --bg-raised: var(--brand-neutral-900); --surface-1: rgba(255, 248, 244, 0.04); --surface-2: rgba(255, 248, 244, 0.07); --surface-3: rgba(255, 248, 244, 0.11); --surface-solid: #241A16; /* Texto (contraste AA sobre --bg) */ --text-1: var(--brand-neutral-100); --text-2: rgba(244, 237, 232, 0.76); --text-3: rgba(244, 237, 232, 0.56); /* apenas apoio, nunca dado essencial */ --text-on-accent: #FFFFFF; /* Bordas — a intensidade codifica hierarquia/estado */ --border-1: rgba(196, 168, 130, 0.14); --border-2: rgba(196, 168, 130, 0.30); --border-3: rgba(196, 168, 130, 0.50); /* Acentos em papéis */ --accent: var(--brand-accent-300); --accent-strong: var(--brand-accent-500); --accent-soft: rgba(196, 168, 130, 0.12); --accent-2: var(--brand-accent2-300); --accent-2-soft: rgba(196, 146, 154, 0.12); /* Gradiente de ação (escurecido p/ contraste AA com texto branco) */ --gradient-action: linear-gradient(135deg, #A9707B, #9E7333); --gradient-text: linear-gradient(105deg, var(--brand-neutral-100), var(--brand-accent-200) 55%, var(--brand-accent-500)); /* Status */ --success: #93C29B; --success-soft: rgba(147, 194, 155, 0.12); --warning: #E3B563; --warning-soft: rgba(227, 181, 99, 0.12); --danger: #E08D80; --danger-soft: rgba(224, 141, 128, 0.14); --info: var(--accent); --info-soft: var(--accent-soft); /* Sombras e brilhos */ --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.25); --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.45); --glow-accent: 0 0 24px rgba(196, 168, 130, 0.14); --glow-accent-strong: 0 0 32px rgba(196, 168, 130, 0.22); /* Linha de luz — assinatura visual do Portal */ --light-line: linear-gradient(90deg, transparent, rgba(196, 146, 154, 0.35), rgba(196, 168, 130, 0.30), transparent); /* Vidro */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; /* Superfícies de vidro (sidebar/topbar sobre o --ambient) */ --surface-glass: rgba(26, 18, 16, 0.72); --surface-glass-soft: rgba(26, 18, 16, 0.65); /* Foco visível */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-accent-200); } /* ── 2b. TEMA CLARO (placeholder — valores a definir com a identidade oficial; a estrutura já está pronta) ── */ [data-theme="light"] { color-scheme: light; --bg: var(--brand-neutral-50); --bg-raised: #FFFFFF; --surface-1: rgba(43, 33, 28, 0.04); --surface-2: rgba(43, 33, 28, 0.07); --surface-3: rgba(43, 33, 28, 0.11); --surface-solid: #FFFFFF; --text-1: var(--brand-neutral-800); --text-2: rgba(43, 33, 28, 0.78); --text-3: rgba(43, 33, 28, 0.58); --border-1: rgba(143, 111, 51, 0.18); --border-2: rgba(143, 111, 51, 0.34); --border-3: rgba(143, 111, 51, 0.52); --accent: var(--brand-accent-700); --accent-strong: var(--brand-accent-500); --accent-soft: rgba(184, 146, 74, 0.12); --shadow-1: 0 2px 10px rgba(43, 33, 28, 0.08); --shadow-2: 0 10px 30px rgba(43, 33, 28, 0.12); --shadow-3: 0 24px 60px rgba(43, 33, 28, 0.16); --glow-accent: none; --glow-accent-strong: none; --surface-glass: rgba(249, 244, 239, 0.72); --surface-glass-soft: rgba(249, 244, 239, 0.65); --gradient-text: linear-gradient(105deg, var(--brand-neutral-800), var(--brand-accent-500) 55%, var(--brand-accent-700)); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-accent-700); } /* ── 2c. ESCALAS NEUTRAS AO TEMA ── */ :root { /* Espaçamento (base 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; /* Raio */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Escala tipográfica (produto, não landing) */ --text-xs: 0.72rem; --text-sm: 0.82rem; --text-md: 0.95rem; --text-lg: 1.1rem; --text-xl: 1.35rem; --display-sm: 1.6rem; --display-md: 2.1rem; --display-lg: clamp(2.2rem, 4vw, 2.9rem); /* Eyebrow — rótulo uppercase de seção */ --eyebrow-size: 0.68rem; --eyebrow-tracking: 0.24em; /* Movimento — sóbrio por padrão */ --dur-1: 150ms; --dur-2: 280ms; --dur-3: 480ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* reservado a momentos-chave */ /* Camadas */ --z-sidebar: 40; --z-topbar: 30; --z-dropdown: 50; --z-modal: 60; --z-toast: 70; /* Layout */ --sidebar-width: 264px; --topbar-height: 64px; --content-max: 1200px; }