/* ========================================================== AYW DESIGN SYSTEM TOKENS Fonte única para: - cores; - estados semânticos; - tipografia; - espaçamentos; - arredondamentos; - sombras; - containers; - dimensões estruturais; - transições; - camadas; - temas claro e escuro. Regras: - este arquivo não contém classes; - componentes não devem criar cores próprias; - páginas não devem criar medidas estruturais globais; - tokens visuais são sobrescritos pelo tema escuro; - medidas e escalas permanecem compartilhadas. ========================================================== */ /* ========================================================== TEMA CLARO E TOKENS COMPARTILHADOS ========================================================== */ :root { color-scheme: light; /* ====================================================== MARCA ====================================================== */ --ayw-primary: #0b6ffb; --ayw-primary-hover: #075ed6; --ayw-primary-active: #064fb2; --ayw-primary-soft: #eaf3ff; --ayw-primary-border: #bfdbfe; /* ====================================================== ESTADO: SUCESSO ====================================================== */ --ayw-success: #16a34a; --ayw-success-soft: #ecfdf3; --ayw-success-border: #bbf7d0; /* ====================================================== ESTADO: PERIGO ====================================================== */ --ayw-danger: #ef4444; --ayw-danger-soft: #fef2f2; --ayw-danger-border: #fecaca; /* ====================================================== ESTADO: AVISO ====================================================== */ --ayw-warning: #f59e0b; --ayw-warning-soft: #fffbeb; --ayw-warning-border: #fde68a; /* ====================================================== ESTADO: INFORMAÇÃO ====================================================== */ --ayw-info: #0ea5e9; --ayw-info-soft: #f0f9ff; --ayw-info-border: #bae6fd; /* ====================================================== FUNDOS E SUPERFÍCIES ====================================================== */ --ayw-bg: #ffffff; --ayw-bg-soft: #f8fafc; --ayw-bg-muted: #f1f5f9; --ayw-surface: #ffffff; --ayw-surface-raised: #ffffff; --ayw-surface-hover: #f8fafc; --ayw-overlay: rgba(15, 23, 42, 0.52); /* ====================================================== TEXTO ====================================================== */ --ayw-text: #101828; --ayw-text-soft: #344054; --ayw-text-muted: #667085; --ayw-text-disabled: #98a2b3; --ayw-text-inverse: #ffffff; --ayw-text-inverse-soft: rgba(255, 255, 255, 0.82); --ayw-text-inverse-muted: rgba(255, 255, 255, 0.66); --ayw-surface-inverse-soft: rgba(255, 255, 255, 0.13); --ayw-border-inverse: rgba(255, 255, 255, 0.20); --ayw-brand-gradient: linear-gradient(145deg, var(--ayw-primary-active), var(--ayw-primary), var(--ayw-info)); /* ====================================================== BORDAS E FOCO ====================================================== */ --ayw-border: #e4e7ec; --ayw-border-strong: #d0d5dd; --ayw-focus-ring: rgba(11, 111, 251, 0.22); /* ====================================================== FAMÍLIAS TIPOGRÁFICAS ====================================================== */ --ayw-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ayw-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* ====================================================== TAMANHOS TIPOGRÁFICOS ====================================================== */ --ayw-font-size-xs: 0.75rem; --ayw-font-size-sm: 0.875rem; --ayw-font-size-md: 1rem; --ayw-font-size-lg: 1.125rem; --ayw-font-size-xl: 1.25rem; --ayw-font-size-2xl: 1.5rem; --ayw-font-size-3xl: 1.875rem; --ayw-font-size-4xl: 2.25rem; --ayw-font-size-5xl: 3rem; /* ====================================================== ALTURAS DE LINHA ====================================================== */ --ayw-line-height-tight: 1.2; --ayw-line-height-normal: 1.5; --ayw-line-height-relaxed: 1.7; /* ====================================================== PESOS TIPOGRÁFICOS ====================================================== */ --ayw-font-weight-regular: 400; --ayw-font-weight-medium: 500; --ayw-font-weight-semibold: 600; --ayw-font-weight-bold: 700; /* ====================================================== ESPAÇAMENTOS ====================================================== */ --ayw-space-1: 0.25rem; --ayw-space-2: 0.5rem; --ayw-space-3: 0.75rem; --ayw-space-4: 1rem; --ayw-space-5: 1.25rem; --ayw-space-6: 1.5rem; --ayw-space-7: 1.75rem; --ayw-space-8: 2rem; --ayw-space-10: 2.5rem; --ayw-space-12: 3rem; --ayw-space-16: 4rem; --ayw-space-20: 5rem; --ayw-space-24: 6rem; /* ====================================================== ARREDONDAMENTOS ====================================================== */ --ayw-radius-xs: 6px; --ayw-radius-sm: 8px; --ayw-radius-md: 12px; --ayw-radius-lg: 16px; --ayw-radius-xl: 22px; --ayw-radius-pill: 999px; /* * Alias oficial para componentes antigos e novos usarem * a mesma nomenclatura até a migração ser concluída. */ --ayw-radius-full: var(--ayw-radius-pill); /* ====================================================== SOMBRAS ====================================================== */ --ayw-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --ayw-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --ayw-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08); --ayw-shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.12); --ayw-shadow-xl: 0 24px 64px rgba(16, 24, 40, 0.16); /* ====================================================== COMPATIBILIDADE DE TOKENS Estes aliases impedem que componentes legados percam cor ou superfície durante a consolidação do AYW System. Novos componentes devem usar os nomes sem `color-`. ====================================================== */ --ayw-color-primary: var(--ayw-primary); --ayw-color-primary-hover: var(--ayw-primary-hover); --ayw-color-primary-soft: var(--ayw-primary-soft); --ayw-color-text: var(--ayw-text); --ayw-color-text-soft: var(--ayw-text-soft); --ayw-color-text-muted: var(--ayw-text-muted); --ayw-color-surface: var(--ayw-surface); --ayw-color-surface-raised: var(--ayw-surface-raised); --ayw-color-border: var(--ayw-border); --ayw-color-border-soft: var(--ayw-border); --ayw-color-border-subtle: var(--ayw-border); /* ====================================================== CONTAINERS ====================================================== */ --ayw-container-sm: 720px; --ayw-container-md: 960px; --ayw-container-lg: 1180px; --ayw-container-xl: 1320px; --ayw-content-readable: 760px; --ayw-control-height-sm: 36px; --ayw-control-height-md: 44px; --ayw-control-height-lg: 48px; --ayw-icon-size-sm: 32px; --ayw-icon-size-md: 40px; --ayw-icon-size-lg: 44px; --ayw-icon-size-xl: 52px; /* ====================================================== SHELL E NAVEGAÇÃO ====================================================== */ /* * Topbar autenticada: * - mobile: cabeçalho compacto; * - desktop: cabeçalho principal da área logada. */ --ayw-topbar-height-mobile: 64px; --ayw-topbar-height: 72px; /* * Navbar pública. */ --ayw-navbar-height: 72px; /* * Navegação inferior autenticada no celular. */ --ayw-bottom-nav-height: 72px; /* * Sidebar autenticada: * - largura aberta; * - largura recolhida; * - largura máxima do painel móvel. */ --ayw-sidebar-width: 248px; --ayw-sidebar-width-collapsed: 76px; --ayw-sidebar-width-mobile: 300px; /* ====================================================== TRANSIÇÕES ====================================================== */ --ayw-transition-fast: 150ms ease; --ayw-transition-base: 220ms ease; --ayw-transition-slow: 320ms ease; /* ====================================================== CAMADAS ====================================================== */ /* * Ordem oficial: * * dropdown * sticky * fixed * popover * modal backdrop * modal * toast * tooltip */ --ayw-z-dropdown: 1000; --ayw-z-sticky: 1020; --ayw-z-fixed: 1030; --ayw-z-popover: 1035; --ayw-z-modal-backdrop: 1040; --ayw-z-modal: 1050; --ayw-z-toast: 1060; --ayw-z-tooltip: 1070; } /* ========================================================== TEMA ESCURO Apenas tokens visuais são sobrescritos. Permanecem compartilhados: - famílias tipográficas; - tamanhos tipográficos; - alturas de linha; - pesos; - espaçamentos; - arredondamentos; - containers; - medidas estruturais; - transições; - camadas. ========================================================== */ html[data-theme="dark"] { color-scheme: dark; /* ====================================================== MARCA ====================================================== */ --ayw-primary: #2f8cff; --ayw-primary-hover: #5aa3ff; --ayw-primary-active: #7db6ff; --ayw-primary-soft: rgba(47, 140, 255, 0.14); --ayw-primary-border: rgba(47, 140, 255, 0.36); /* ====================================================== ESTADO: SUCESSO ====================================================== */ --ayw-success: #22c55e; --ayw-success-soft: rgba(34, 197, 94, 0.12); --ayw-success-border: rgba(34, 197, 94, 0.34); /* ====================================================== ESTADO: PERIGO ====================================================== */ --ayw-danger: #f87171; --ayw-danger-soft: rgba(248, 113, 113, 0.12); --ayw-danger-border: rgba(248, 113, 113, 0.34); /* ====================================================== ESTADO: AVISO ====================================================== */ --ayw-warning: #fbbf24; --ayw-warning-soft: rgba(251, 191, 36, 0.12); --ayw-warning-border: rgba(251, 191, 36, 0.34); /* ====================================================== ESTADO: INFORMAÇÃO ====================================================== */ --ayw-info: #38bdf8; --ayw-info-soft: rgba(56, 189, 248, 0.12); --ayw-info-border: rgba(56, 189, 248, 0.34); /* ====================================================== FUNDOS E SUPERFÍCIES ====================================================== */ --ayw-bg: #020d1b; --ayw-bg-soft: #061527; --ayw-bg-muted: #0a1a2d; --ayw-surface: #071a2e; --ayw-surface-raised: #0a2038; --ayw-surface-hover: #0d2946; --ayw-overlay: rgba(0, 5, 12, 0.72); /* ====================================================== TEXTO ====================================================== */ --ayw-text: #f8fafc; --ayw-text-soft: #d9e2ec; --ayw-text-muted: #9eafc4; --ayw-text-disabled: #6f8298; --ayw-text-inverse: #020d1b; /* ====================================================== BORDAS E FOCO ====================================================== */ --ayw-border: #18334e; --ayw-border-strong: #244766; --ayw-focus-ring: rgba(47, 140, 255, 0.30); /* ====================================================== SOMBRAS ====================================================== */ --ayw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --ayw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.18); --ayw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28); --ayw-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.35); --ayw-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.42); } /* ========================================================== MOVIMENTO REDUZIDO ========================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ayw-transition-fast: 0ms; --ayw-transition-base: 0ms; --ayw-transition-slow: 0ms; } }