/* ============================================================================ Neurodor — Tokens de design responsivo (canônico) ---------------------------------------------------------------------------- Namespace: --nd-* (Neurodor Design) Carregado em todas as rotas do plugin neurodor-onboarding. Reusável por TODOS os plugins futuros (interface-ead, ead-cursos, etc.). Regras: - Tipografia fluida via clamp() — escala continuamente entre 320 e 1920px - Espaçamento em escala de 4px (mais previsível que rem misturado) - Breakpoints como referência (não são variáveis CSS usáveis em @media, apenas docs — @media usa o número literal): 600 / 720 / 900 / 1200 - Containers com max-width fluido + width: 100% - Touch target mínimo: 44×44px (WCAG 2.5.5) ============================================================================ */ :root { /* ─── Tipografia fluida ──────────────────────────────────────────────── */ --nd-fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 12 → 14 */ --nd-fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 1rem); /* 14 → 16 */ --nd-fs-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); /* 16 → 18 */ --nd-fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); /* 18 → 24 */ --nd-fs-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* 24 → 36 */ /* ─── Espaçamento — escala 4px ──────────────────────────────────────── */ --nd-sp-1: 4px; --nd-sp-2: 8px; --nd-sp-3: 12px; --nd-sp-4: 16px; --nd-sp-5: 24px; --nd-sp-6: 32px; --nd-sp-7: 48px; --nd-sp-8: 64px; /* ─── Containers ────────────────────────────────────────────────────── */ --nd-form-max: 560px; /* largura útil de formulário em desktop */ --nd-window-max: 1080px; /* janela inteira (cartão centralizado) */ --nd-rail-w: 280px; /* coluna do stepper desktop expandido */ --nd-rail-w-min: 56px; /* coluna colapsada (só ícones) */ --nd-summary-w: 320px; /* coluna sticky de resumo (checkout) */ /* ─── Touch targets (WCAG 2.5.5) ────────────────────────────────────── */ --nd-touch-min: 44px; /* ─── Breakpoints canônicos (apenas para JS/matchMedia; @media usa literal) */ --nd-bp-xs: 360px; /* handheld pequeno — orçamento mínimo de topbar */ --nd-bp-sm: 600px; /* tablet portrait */ --nd-bp-md: 900px; /* tablet landscape / desktop pequeno */ --nd-bp-lg: 1200px; /* desktop */ /* ─── Zona-direita da topbar (governa avatar+sino+...) ──────────────── */ /* Avatar é o item mais à direita (right: --nd-topbar-right-edge). Sino fica à esquerda do avatar com gap explícito; itens futuros podem herdar o mesmo cálculo: right: calc(--nd-topbar-bell-offset + width + gap) */ --nd-topbar-right-edge: 16px; /* mobile */ --nd-topbar-right-edge-d: 10px; /* desktop */ --nd-topbar-right-gap: 12px; --nd-topbar-avatar-size: 40px; --nd-topbar-bell-offset: calc(var(--nd-topbar-right-edge) + var(--nd-topbar-avatar-size) + var(--nd-topbar-right-gap)); /* ─── Radii ─────────────────────────────────────────────────────────── */ --nd-radius-sm: 8px; --nd-radius: 12px; --nd-radius-lg: 16px; --nd-radius-pill: 999px; /* ─── Transições ────────────────────────────────────────────────────── */ --nd-ease-out: cubic-bezier(.2, .8, .2, 1); --nd-dur-fast: 150ms; --nd-dur-base: 250ms; --nd-dur-slow: 350ms; /* ─── Z-index ───────────────────────────────────────────────────────── */ --nd-z-sticky: 50; --nd-z-modal: 200; --nd-z-toast: 300; /* ─── Cores semânticas (fallbacks) ──────────────────────────────────── */ /* O interface-ead emite estas mesmas vars no com valores reais (preset light/dark + overrides do admin). Os fallbacks aqui só entram quando o plugin interface-ead está OFF ou a tela não é "área do aluno". */ --nd-bg-page: #F4F6F8; --nd-bg-surface: #FFFFFF; --nd-bg-surface-2: #F8FAFC; --nd-bg-input: #FFFFFF; --nd-border: #E2E8F0; --nd-border-strong: #CBD5E1; --nd-text: #0F172A; --nd-text-muted: #475569; --nd-text-dim: #94A3B8; --nd-mode-logged: light; --nd-brand: var(--interface-ea-primary, #1FBA7A); --nd-on-brand: var(--interface-ea-on-primary, #0F172A); --nd-brand-hover: color-mix(in srgb, var(--nd-brand) 80%, #000); --nd-brand-soft: color-mix(in srgb, var(--nd-brand) 12%, transparent); --nd-brand-border: color-mix(in srgb, var(--nd-brand) 35%, transparent); /* Semânticos */ --nd-live: #FF4D4D; --nd-warn: #F0B429; --nd-info: #4A9EFF; --nd-success: var(--nd-brand); --nd-danger: #E5484D; /* Sombras (mesma escala em light/dark — alpha sobre fundo) */ --nd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --nd-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08); --nd-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.12); --nd-shadow-glow: 0 0 0 4px color-mix(in srgb, var(--nd-brand) 25%, transparent); } /* ============================================================================ TEMAS — variantes pré-provisionadas ---------------------------------------------------------------------------- Aplicado pelo interface-ead via filter language_attributes: Componentes leem --nd-* via cascata. Aluno troca data-theme via toggle (allow_user_toggle) ou data-palette via /meu-perfil (allow_user_palette). ============================================================================ */ /* TEMA LIGHT (default) — confirma os tokens base */ [data-theme="light"] { --nd-bg-page: #F4F7F8; --nd-bg-surface: #FFFFFF; --nd-bg-surface-2: #F0F4F5; --nd-bg-input: #FFFFFF; --nd-border: #E2E8EB; --nd-border-strong: #C9D3D7; --nd-text: #0E1B22; --nd-text-muted: #56707A; --nd-text-dim: #8DA0A8; --nd-text-inverse: #FFFFFF; } /* TEMA DARK */ [data-theme="dark"] { --nd-bg-page: #0B0F12; --nd-bg-surface: #131A1F; --nd-bg-surface-2: #1A2329; --nd-bg-input: #0F161B; --nd-border: #233038; --nd-border-strong: #2F4049; --nd-text: #E8F1F2; --nd-text-muted: #8DA0A8; --nd-text-dim: #5A6E76; --nd-text-inverse: #042116; } /* TEMA DARK-BLUE — pré-provisionado, desabilitado no admin (MVP). Cliente liga via available_themes pra trocar accent pra azul institucional mantendo estrutura dark. */ [data-theme="dark-blue"] { --nd-bg-page: #0B0F12; --nd-bg-surface: #131A1F; --nd-bg-surface-2: #1A2329; --nd-bg-input: #0F161B; --nd-border: #233038; --nd-border-strong: #2F4049; --nd-text: #E8F1F2; --nd-text-muted: #8DA0A8; --nd-text-dim: #5A6E76; --nd-text-inverse: #FFFFFF; --nd-brand: #4A9EFF; --nd-on-brand: #FFFFFF; --nd-brand-hover: color-mix(in srgb, var(--nd-brand) 85%, #fff); --nd-brand-soft: color-mix(in srgb, var(--nd-brand) 12%, transparent); --nd-brand-border: color-mix(in srgb, var(--nd-brand) 35%, transparent); } /* TEMA HI-CONTRAST — pré-provisionado, desabilitado no admin (MVP). WCAG AAA, texto branco puro sobre fundo preto puro. Acessibilidade. */ [data-theme="hi-contrast"] { --nd-bg-page: #000000; --nd-bg-surface: #0E1418; --nd-bg-surface-2: #1A2329; --nd-bg-input: #000000; --nd-border: #5A6E76; --nd-border-strong: #8DA0A8; --nd-text: #FFFFFF; --nd-text-muted: #D5DDE0; --nd-text-dim: #A0B0B5; --nd-text-inverse: #000000; } /* ============================================================================ DENSIDADE — apenas admin define global. Ajusta espaçamentos médios. ============================================================================ */ [data-density="compact"] { --nd-sp-3: 10px; --nd-sp-4: 12px; --nd-sp-5: 18px; --nd-sp-6: 24px; } [data-density="comfortable"] { /* default — usa valores de :root */ } [data-density="roomy"] { --nd-sp-3: 14px; --nd-sp-4: 20px; --nd-sp-5: 32px; --nd-sp-6: 44px; } /* ============================================================================ TRANSIÇÕES suaves entre tema/paleta (200ms padrão). Respeita prefers-reduced-motion. ============================================================================ */ html, body { transition: background-color 200ms ease, color 200ms ease; } @media (prefers-reduced-motion: reduce) { html, body { transition: none; } } /* ─── Notas para devs ────────────────────────────────────────────────────── Breakpoints canônicos do projeto (mobile-first, sempre min-width): 360px → handheld pequeno — orçamento mínimo de topbar (regra de defesa) 600px → tablet portrait 720px → checkout pode ir 2 colunas (form + summary lateral) 900px → tablet landscape / desktop pequeno 1200px → desktop Em código NOVO, casar os literais com --nd-bp-* (mesmo número). Legado mantém seus números até refator próprio. Antipatterns proibidos em código novo: width: Npx; ❌ use max-width: ... + width: 100% min-width em layout ❌ só para casos pontuais (botões, badges) 100vh ❌ use min-height: 100dvh position: absolute ❌ para layout (apenas overlays/badges) font-size: < 16px ❌ em mobile (iOS dá zoom no foco) ─────────────────────────────────────────────────────────────────────────── */