/* ========================================================= ATHENA — DESIGN SYSTEM (TOKENS) --------------------------------------------------------- Arquivo ADITIVO. Define tokens (variáveis CSS) que podem ser usados aos poucos para substituir cores/espaçamentos inline. NÃO substitui CSS existente — convive com ele. Para usar em produção, adicione no : ========================================================= */ :root { /* ── BRAND ─────────────────────────────────────── */ --ds-brand-orange-300: #ffa050; --ds-brand-orange-500: #ff8c00; --ds-brand-orange-600: #ff6600; --ds-brand-orange-700: #d35500; --ds-brand-cyan-300: #4dd9ff; --ds-brand-cyan-500: #00d2ff; --ds-brand-cyan-700: #0083b0; /* Gradiente característico ATHENA (cyan → laranja) — usar em borders/headers */ --ds-gradient-brand: linear-gradient(90deg, #00d4ff 0%, #00a8e8 30%, #ff8c00 70%, #ff6600 100%); /* ── SEMÂNTICAS ──────────────────────────────────── */ --ds-success-300: #4cffaa; --ds-success-500: #00e676; --ds-success-700: #00a04f; --ds-warning-300: #ffd166; --ds-warning-500: #ffb300; --ds-warning-700: #b67900; --ds-danger-300: #ff6666; --ds-danger-500: #ff3344; --ds-danger-700: #cc0011; --ds-info-300: #5dade2; --ds-info-500: #2196f3; --ds-info-700: #0d47a1; /* ── NEUTROS (dark theme) ────────────────────────── */ --ds-bg-page: #0a0a0a; --ds-bg-surface: rgba(255,255,255,0.025); --ds-bg-surface-2: rgba(255,255,255,0.05); --ds-bg-elevated: rgba(20,20,25,0.97); --ds-bg-input: rgba(0,0,0,0.35); --ds-bg-input-focus: rgba(0,0,0,0.50); --ds-border-subtle: rgba(255,255,255,0.06); --ds-border-default: rgba(255,255,255,0.10); --ds-border-strong: rgba(255,255,255,0.18); --ds-border-accent: rgba(255,102,0,0.55); --ds-text-primary: #ffffff; --ds-text-secondary: rgba(255,255,255,0.78); --ds-text-muted: rgba(255,255,255,0.55); --ds-text-faint: rgba(255,255,255,0.35); /* ── ESCALA DE ESPAÇAMENTO (8px-based) ───────────── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; /* ── TIPOGRAFIA ──────────────────────────────────── */ --ds-font-display: 'Inter', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', 'Courier New', monospace; --ds-text-xs: 9px; --ds-text-sm: 11px; --ds-text-base: 13px; --ds-text-md: 15px; --ds-text-lg: 18px; --ds-text-xl: 22px; --ds-text-2xl: 28px; --ds-text-3xl: 36px; /* ── RAIOS ───────────────────────────────────────── */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 18px; --ds-radius-pill: 999px; /* ── SOMBRAS ─────────────────────────────────────── */ --ds-shadow-1: 0 1px 3px rgba(0,0,0,0.06); --ds-shadow-2: 0 4px 12px rgba(0,0,0,0.10); --ds-shadow-3: 0 12px 28px rgba(0,0,0,0.18); --ds-shadow-4: 0 24px 64px rgba(0,0,0,0.32); --ds-shadow-5: 0 32px 80px rgba(0,0,0,0.70); --ds-glow-accent: 0 0 24px rgba(255,102,0,0.35); --ds-glow-cyan: 0 0 24px rgba(0,210,255,0.30); /* ── EASING ──────────────────────────────────────── */ --ds-ease-out: cubic-bezier(.2,.8,.2,1); --ds-ease-in-out: cubic-bezier(.6,.0,.2,1); --ds-dur-fast: 0.12s; --ds-dur-base: 0.18s; --ds-dur-slow: 0.32s; /* ── Z-INDEX (escala definida) ───────────────────── */ --ds-z-base: 1; --ds-z-dropdown: 10; --ds-z-sticky: 20; --ds-z-overlay: 40; --ds-z-modal: 50; --ds-z-toast: 60; --ds-z-tooltip: 70; } /* Overrides leves de tema claro (acessibilidade) */ .light-theme { --ds-bg-page: #f4f6fa; --ds-bg-surface: rgba(0,0,0,0.025); --ds-bg-surface-2: rgba(0,0,0,0.05); --ds-bg-elevated: #ffffff; --ds-bg-input: rgba(0,0,0,0.04); --ds-bg-input-focus: rgba(0,0,0,0.06); --ds-border-subtle: rgba(0,0,0,0.05); --ds-border-default: rgba(0,0,0,0.08); --ds-border-strong: rgba(0,0,0,0.15); --ds-text-primary: #111827; --ds-text-secondary: rgba(0,0,0,0.72); --ds-text-muted: rgba(0,0,0,0.55); --ds-text-faint: rgba(0,0,0,0.30); } /* ========================================================= COMPONENTES BASE — OPT-IN --------------------------------------------------------- Adicione a classe ds-card / ds-btn etc. em novos componentes pra usar o sistema. Componentes legados não são afetados. ========================================================= */ .ds-card { background: var(--ds-bg-elevated); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-xl); padding: var(--ds-space-6); box-shadow: var(--ds-shadow-3); position: relative; overflow: hidden; } .ds-card-branded::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ds-gradient-brand); pointer-events: none; } .ds-btn { appearance: none; border: none; cursor: pointer; font-family: var(--ds-font-display); font-size: var(--ds-text-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: var(--ds-space-3) var(--ds-space-5); border-radius: var(--ds-radius-md); transition: all var(--ds-dur-base) var(--ds-ease-out); } .ds-btn-primary { background: linear-gradient(135deg, var(--ds-brand-orange-500), var(--ds-brand-orange-600)); color: #fff; box-shadow: 0 4px 14px rgba(255,102,0,0.30); } .ds-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,102,0,0.45); filter: brightness(1.08); } .ds-btn-ghost { background: transparent; border: 1px solid var(--ds-border-default); color: var(--ds-text-muted); } .ds-btn-ghost:hover { color: var(--ds-text-primary); border-color: var(--ds-border-strong); background: var(--ds-bg-surface); } .ds-input { width: 100%; background: var(--ds-bg-input); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-md); padding: var(--ds-space-3) var(--ds-space-4); color: var(--ds-text-primary); font-size: var(--ds-text-base); font-family: var(--ds-font-display); transition: all var(--ds-dur-base) var(--ds-ease-out); } .ds-input:focus { outline: none; border-color: var(--ds-border-accent); background: var(--ds-bg-input-focus); box-shadow: 0 0 0 3px rgba(255,102,0,0.10); } .ds-input::placeholder { color: var(--ds-text-faint); } .ds-label { display: flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: var(--ds-space-2); } .ds-label::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ds-brand-orange-600); box-shadow: 0 0 6px var(--ds-brand-orange-600); } /* Foco visível acessível em todos os elementos com foco */ .ds-focus-ring:focus-visible { outline: 2px solid var(--ds-brand-cyan-500); outline-offset: 2px; } /* Reduce motion para usuários com preferência */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }