/* ========================================================================== AuroraVera Ágora — App Design System Um arquivo, dois temas. Claro = "Aço", Escuro = "Meia-noite". Troca via . Default: dark. Prefixo --av-* pra conviver com o CSS legado das páginas durante o rollout. ========================================================================== */ :root, :root[data-theme="dark"] { /* ---- MEIA-NOITE (dark, default) ---- */ --av-bg: #0E1030; --av-bg-2: #141636; --av-surface: #191B3D; --av-surface-2: #1F2147; --av-chrome: #090A20; --av-chrome-ink: #ECEAF5; --av-chrome-mut: #6E71A0; --av-ink: #ECEAF5; --av-ink-2: #B8BAD6; --av-muted: #8A8CB0; --av-line: rgba(255,255,255,.09); --av-line-2: rgba(255,255,255,.05); --av-gold: #E8C877; --av-gold-ink: #E8C877; --av-gold-tint: rgba(232,200,119,.15); --av-accent: #E8C877; /* CTA primário no dark = ouro */ --av-accent-ink: #2A2208; --av-danger: #EC8A80; --av-danger-tint: rgba(224,80,60,.17); --av-success: #7FC9A0; --av-success-tint: rgba(60,170,115,.16); --av-teal: #7FBFB8; --av-teal-tint: rgba(90,170,160,.15); --av-purple: #C6B8F0; --av-purple-tint: rgba(120,100,205,.20); --av-avatar-bg: #332C55; --av-avatar-ink: #C6B8F0; --av-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --av-shadow: 0 2px 6px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.35); --av-shadow-lg: 0 24px 60px rgba(0,0,0,.50); --av-radius: 13px; --av-radius-sm: 9px; --av-radius-lg: 16px; --av-serif: 'Playfair Display', 'Tiempos Headline', Georgia, serif; --av-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --av-t: 160ms cubic-bezier(.2,.8,.2,1); } :root[data-theme="light"] { /* ---- AÇO (light) ---- */ --av-bg: #F4F5F8; --av-bg-2: #ECEEF3; --av-surface: #FFFFFF; --av-surface-2: #FAFBFC; --av-chrome: #12132E; /* chrome (topo/menu) segue escuro no claro */ --av-chrome-ink: #EDEEF6; --av-chrome-mut: #8A8DB5; --av-ink: #1A1B3A; --av-ink-2: #4A4C6B; --av-muted: #8789A8; --av-line: #E4E6EC; --av-line-2: #EEF0F4; --av-gold: #C9A24B; --av-gold-ink: #8A6D2A; --av-gold-tint: #F6EDD6; --av-accent: #1A1B3A; /* CTA primário no claro = indigo */ --av-accent-ink: #FFFFFF; --av-danger: #C0492F; --av-danger-tint: #FBEAE6; --av-success: #2D7A55; --av-success-tint: #E6F1EA; --av-teal: #2D5A56; --av-teal-tint: #E1EEEC; --av-purple: #534AB7; --av-purple-tint: #EDEBF8; --av-avatar-bg: #E7E0F0; --av-avatar-ink: #534AB7; --av-shadow-sm: 0 1px 2px rgba(16,20,40,.06); --av-shadow: 0 1px 2px rgba(16,20,40,.05), 0 6px 20px rgba(16,20,40,.07); --av-shadow-lg: 0 20px 50px rgba(16,20,40,.18); } /* ---- Base ---- */ .av-app{ margin:0; background:var(--av-bg); color:var(--av-ink); font-family:var(--av-sans); font-size:14px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--av-t), color var(--av-t); } .av-app *{box-sizing:border-box} .av-serif{font-family:var(--av-serif)} /* Scrollbar discreta e temada */ .av-app ::-webkit-scrollbar{width:10px;height:10px} .av-app ::-webkit-scrollbar-thumb{background:var(--av-line);border:3px solid transparent;background-clip:padding-box;border-radius:20px} .av-app ::-webkit-scrollbar-thumb:hover{background:var(--av-muted);border:3px solid transparent;background-clip:padding-box} /* Campos de formulário */ .av-app input,.av-app select,.av-app textarea{ border:1px solid var(--av-line); background:var(--av-surface); color:var(--av-ink); border-radius:var(--av-radius-sm); padding:9px 12px; font:inherit; outline:none; transition:border-color var(--av-t), box-shadow var(--av-t); } .av-app input::placeholder,.av-app textarea::placeholder{color:var(--av-muted)} .av-app input:focus,.av-app select:focus,.av-app textarea:focus{ border-color:var(--av-gold); box-shadow:0 0 0 3px var(--av-gold-tint); } /* Botões */ .av-btn{border:none;border-radius:var(--av-radius-sm);padding:9px 15px;font-weight:600;font-size:13px;cursor:pointer; display:inline-flex;align-items:center;gap:7px;transition:all var(--av-t);line-height:1} .av-btn--primary{background:var(--av-accent);color:var(--av-accent-ink)} .av-btn--primary:hover{filter:brightness(1.08)} .av-btn--ghost{background:var(--av-surface);color:var(--av-ink);border:1px solid var(--av-line)} .av-btn--ghost:hover{border-color:var(--av-muted)} /* Tags / chips / avatar (reutilizáveis no rollout) */ .av-tag{font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:6px;display:inline-block} .av-tag--gold{background:var(--av-gold-tint);color:var(--av-gold-ink)} .av-tag--teal{background:var(--av-teal-tint);color:var(--av-teal)} .av-tag--purple{background:var(--av-purple-tint);color:var(--av-purple)} .av-tag--danger{background:var(--av-danger-tint);color:var(--av-danger)} .av-tag--neutral{background:var(--av-bg-2);color:var(--av-muted)} .av-avatar{width:22px;height:22px;border-radius:50%;background:var(--av-avatar-bg);color:var(--av-avatar-ink); font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} /* Toggle de tema (sol/lua) */ .av-theme{width:34px;height:34px;border-radius:9px;border:1px solid var(--av-line-2); background:rgba(255,255,255,.06);color:var(--av-chrome-ink);cursor:pointer; display:inline-flex;align-items:center;justify-content:center;transition:all var(--av-t)} .av-theme:hover{background:rgba(255,255,255,.14)} .av-theme svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ic-sun{display:inline-flex} .ic-moon{display:none} :root[data-theme="light"] .ic-sun{display:none} :root[data-theme="light"] .ic-moon{display:inline-flex}