/* =========================================================================== UTeam — ponte de tokens sobre o design system do parque (half-infra/theme) POR QUE ESTE ARQUIVO NAO DECLARA COR NENHUMA A paleta ciano deste app virou o tema canonico `azure` da biblioteca (half-infra 0.5.3). Manter uma copia dos hex aqui era o parque voltar a ter duas definicoes de "azul": a primeira correcao de contraste feita la nunca chegaria aqui. Entao cada nome local (`--accent`, `--glass-*`, `--text*`) e um ALIAS de um token `--hi-*` de `vendor/half-infra/theme/glassmorphism.css`, e a semantica (sucesso, alerta, perigo) sai da paleta de contrato — a que o Half Ecosys usa para desenhar o mesmo estado com a mesma cor em todo app. ORDEM: `/vendor/half-infra/theme/theme.css` carrega ANTES deste arquivo, e o `` leva `data-hi-theme="azure"`. Sem os dois, todo `var()` abaixo fica invalido em silencio — o unico modo de falhar que o navegador nao acusa. Geometria, fonte e transicao sao deste produto e ficam declaradas aqui. =========================================================================== */ :root { /* --- Superficies --- */ --bg-base: var(--hi-bg-app); --bg-deep: #03060c; /* so no gradiente do body: mais fundo que o app */ --bg-elevated: var(--hi-bg-surface); /* --- Vidro --- */ --glass-bg: var(--hi-glass); --glass-bg-strong: var(--hi-glass-hover); --glass-border: var(--hi-border-glass); --glass-border-strong: var(--hi-primary-border); --glass-blur: 18px; --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --glass-inner: inset 0 1px 0 var(--hi-bevel-top); /* --- Acento (a marca: --hi-primary e o ciano do tema azure) --- */ --accent: var(--hi-primary); --accent-soft: var(--hi-primary-vivid); --accent-deep: var(--hi-primary-dark); --accent-glow: rgba(var(--hi-primary-rgb), 0.35); --accent-gradient: linear-gradient(135deg, var(--hi-primary) 0%, var(--hi-secondary) 100%); /* --- Semanticas: a paleta de CONTRATO do ecossistema --- */ --success: var(--hi-state-ok); --warning: var(--hi-state-warn-ink); /* o ambar de leitura: o puro reprova em corpo */ --danger: var(--hi-state-danger); --info: var(--hi-state-info); /* --- Texto --- */ --text: var(--hi-text-primary); --text-muted: var(--hi-text-secondary); --text-dim: var(--hi-text-muted); /* --- Geometria --- */ --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --space: 16px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--font); color: var(--text); background: radial-gradient(1200px 700px at 12% -10%, rgba(53, 224, 245, 0.10), transparent 60%), radial-gradient(900px 600px at 95% 0%, rgba(78, 168, 255, 0.10), transparent 55%), linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } /* --- Camada de vidro reutilizavel ---------------------------------------- */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--glass-shadow), var(--glass-inner); } /* --- Aurora de fundo ------------------------------------------------------ */ .aurora { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; } .orb-1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, #35e0f5, transparent 70%); } .orb-2 { width: 480px; height: 480px; bottom: -180px; right: -100px; background: radial-gradient(circle, #4ea8ff, transparent 70%); } .orb-3 { width: 380px; height: 380px; top: 45%; left: 55%; background: radial-gradient(circle, #8b5cf6, transparent 70%); opacity: 0.25; } /* --- Tipografia ----------------------------------------------------------- */ h1 { font-size: 1.55rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.02em; } h2 { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } .muted { color: var(--text-muted); font-size: 0.875rem; } .dim { color: var(--text-dim); font-size: 0.8125rem; } /* --- Botoes --------------------------------------------------------------- */ .btn { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--glass-border); background: var(--glass-bg-strong); color: var(--text); cursor: pointer; transition: var(--transition); } .btn:hover { border-color: var(--glass-border-strong); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent-gradient); border-color: transparent; color: #041017; box-shadow: 0 6px 20px var(--accent-glow); } .btn-primary:hover { box-shadow: 0 10px 28px var(--accent-glow); } .btn-ghost { background: transparent; } /* --- Campos --------------------------------------------------------------- */ .input, .select { font: inherit; font-size: 0.875rem; width: 100%; padding: 9px 12px; color: var(--text); background: rgba(8, 14, 24, 0.6); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); transition: var(--transition); } .input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .select option { background: #0b1320; color: var(--text); } .field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 14px; } input[type='date'] { color-scheme: dark; } /* --- Scrollbar ------------------------------------------------------------ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(53, 224, 245, 0.35); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }