/* Weex Design System — Spacing, Radius & Shadow Tokens */ /* Base unit: 4px | Radii extraídos do protótipo real */ :root { /* ── SPACING — escala de interação curada · decisão: híbrida 2px / 4px ── */ /* Faixa fina (passos de 2px) onde a densidade gamificada vive (gaps de */ /* ícone, padding de tile, listas); faixa grande coesa (passos largos). */ /* Convenção: o número do token É o valor em px. Não usar valores fora */ /* desta escala (10 passos de conteúdo + 2 estruturais). */ --space-2: 2px; /* micro — gap ícone/label */ --space-4: 4px; /* gap mínimo */ --space-6: 6px; /* gap pequeno */ --space-8: 8px; /* gap padrão */ --space-10: 10px; /* gap médio / lista densa */ --space-12: 12px; /* gap interno de card */ --space-16: 16px; /* padding padrão */ --space-24: 24px; /* padding de card / bloco */ --space-32: 32px; /* separação de seção */ --space-48: 48px; /* separação grande */ /* Estruturais — layout/seção, fora do ritmo de conteúdo */ --space-64: 64px; --space-80: 80px; /* Semantic — eixos separados (use -x / -y; o composto é conveniência) */ --spacing-page-y: 22px; --spacing-page-x: 28px; --spacing-page: var(--spacing-page-y) var(--spacing-page-x); /* padding de páginas internas */ --spacing-card-y: 16px; --spacing-card-x: 18px; --spacing-card: var(--spacing-card-y) var(--spacing-card-x); /* padding de cards */ --spacing-card-kpi-y: 13px; --spacing-card-kpi-x: 15px; --spacing-card-kpi: var(--spacing-card-kpi-y) var(--spacing-card-kpi-x); /* padding de cards KPI */ --spacing-modal-y: 18px; --spacing-modal-x: 20px; --spacing-modal: var(--spacing-modal-y) var(--spacing-modal-x); /* padding de modais */ /* ── BORDER RADIUS ── */ /* DUAS escalas legítimas e documentadas: */ /* • ADMIN (denso, B2B): 6–14px — extraído do protótipo da plataforma */ /* • APP (amigável): 12–20px — superfícies do participante / controles */ /* Escala ADMIN (plataforma densa) */ --radius-sm: 6px; /* botões de paginação, ícone-botão */ --radius-md: 7px; /* tb-btn, filtros, dropdowns */ --radius-input: 8px; /* inputs e selects da plataforma */ --radius-card: 11px; /* cards e tbl-wrap da plataforma */ --radius-modal: 14px; /* modais da plataforma */ /* Escala APP (controles arredondados — botões/cards/modais do app) */ --radius-control-xs: 10px; --radius-control-sm: 12px; --radius-control: 14px; /* default de controle (app tone) */ --radius-control-lg: 16px; --radius-control-xl: 20px; --radius-card-app: 16px; /* cards do app participante */ --radius-modal-app: 20px; /* modais/sheets do app */ --radius-full: 9999px; /* badges, toggles, pills, avatars */ /* O toast flutua sobre a plataforma E sobre o app: não é o cartão do admin (11) nem o modal do app (20). Régua própria, única para a peça. */ --radius-toast: 18px; /* ── RITMO DE CHIP/PÍLULA ── */ /* Um único ritmo para a família de chips de CONTEÚDO (TagCategoria, */ /* ChipPremio, e os chips inline que ainda existem). Antes: dot 5/6/7, */ /* gap 4/6, padding 2×9 / 3×10 / 4×10 soltos. O Badge (etiqueta de status) */ /* tem escala própria — mais apertada — e não usa estes tokens. */ --chip-radius: var(--radius-full); --chip-gap: var(--space-6); /* 6px entre dot/ícone e label */ --chip-dot: 6px; /* ponto indicador */ --chip-pad: 4px 10px; /* padding padrão do chip de conteúdo */ /* ── MOLDURA DO APP (mock mobile do participante) ── */ /* As alturas de componente (botão, input, toggle…) são propriedade dos */ /* próprios componentes — não há token para elas (evita token-mentira). */ --app-frame-min-h: 640px; /* altura mínima uniforme da tela mobile */ /* ── SOMBRAS ── */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-modal: 0 20px 60px color-mix(in oklab, var(--brand-light) 18%, transparent); /* Toast — base de profundidade TINGIDA DE MARCA, como todo elevado do DS (a sombra preta era o que fazia a peça parecer colada por cima). O halo da cor semântica é composto por cima disto, no componente, porque varia por variante. */ --shadow-toast: 0 14px 34px -14px color-mix(in oklab, var(--brand) 40%, transparent), 0 2px 8px rgba(28, 11, 61, 0.05); --shadow-btn: none; /* botões da plataforma admin — sem sombra */ --shadow-btn-brand: 0 4px 16px color-mix(in oklab, var(--brand) 35%, transparent); /* CTA roxo (app tone) — tinge com a marca */ --shadow-card-hover: 0 8px 28px color-mix(in oklab, var(--brand) 14%, transparent); /* card interativo em hover (lift) */ --shadow-card-dark: 0 8px 24px rgba(0, 0, 0, 0.25); /* card/toast elevado sobre superfície escura */ --shadow-card-pop: 0 4px 24px color-mix(in oklab, var(--brand) 8%, transparent); /* card do app com elevação suave (gate/destaque) */ --shadow-brand-glow: 0 8px 40px color-mix(in oklab, var(--brand) 35%, transparent); /* glow de marca — hero/tile sobre gradiente */ /* ── FOCUS RING (acessibilidade) ── */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent); /* anel de foco — tinge com a marca */ --focus-ring-err: 0 0 0 3px rgba(220, 38, 38, 0.18); /* erro */ /* ── Z-INDEX ── */ --z-dropdown: 50; /* @kind other */ --z-sticky: 100; /* @kind other */ --z-modal: 200; /* @kind other */ --z-toast: 300; /* @kind other */ /* ── MEDIDA DA PÁGINA ADMIN — uma régua só ────────────────────────────── */ /* Antes cada tela do organizador reinventava o próprio teto (1080 no Configurar, 1120 no Início e no Assistente, 1140 no Certificado) e só uma delas centralizava: em monitor largo a coluna encostava na esquerda e sobravam ~800px de vazio. Medida definida AQUI, consumida pelo AdminShell e pelas telas — nunca redeclarada na página, senão o drift volta por cópia. --admin-inset centraliza acima da medida e vira respiro fixo abaixo dela, numa declaração só (`padding-inline: var(--admin-inset)`). O `100%` resolve no ponto de uso, contra a largura da própria coluna de conteúdo. */ --admin-measure: 1280px; --admin-gutter: 28px; --admin-inset: max(var(--admin-gutter), (100% - var(--admin-measure)) / 2); } @media (max-width: 680px) { :root { --admin-gutter: 16px; } }