/* ========================================================================== MaisCredit - theme.css (tokens de tema + base compartilhada) Claro/escuro via [data-theme] no . ASCII puro. ========================================================================== */ :root{ /* marca */ --brand:#2D3080; --brand-strong:#23265f; --brand-2:#C8D400; /* superficie e texto (CLARO) */ --bg:#eef0f6; --surface:#ffffff; --surface-2:#f6f7fb; --surface-3:#eef0f6; --ink:#191d29; --muted:#6b7280; --line:#e5e7f0; /* estados */ --ok:#1CA64C; --warn:#B4610A; --err:#dc2626; /* horas */ --logado:#2D3080; --ocioso:#E6A700; --pausa:#C7CBD3; /* material / sombra */ --glass:rgba(255,255,255,.68); --shadow-sm:0 1px 2px rgba(20,22,60,.06), 0 1px 3px rgba(20,22,60,.05); --shadow-md:0 10px 30px rgba(20,22,60,.10); --shadow-lg:0 24px 60px rgba(20,22,60,.22); --radius:14px; color-scheme: light; } :root[data-theme="dark"]{ --bg:#0e0f1c; --surface:#181a2c; --surface-2:#1f2138; --surface-3:#141628; --ink:#eef0f8; --muted:#9aa0bb; --line:#2a2d47; --glass:rgba(24,26,44,.62); --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 12px 34px rgba(0,0,0,.5); --shadow-lg:0 26px 64px rgba(0,0,0,.6); --pausa:#3a3e5c; color-scheme: dark; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; transition:background-color .3s ease, color .3s ease; } /* tipografia: tracking negativo em titulos, leading justo */ h1,h2,h3{letter-spacing:-.02em; line-height:1.15; margin:0} /* botao de tema (canto) */ .theme-toggle{ border:0; cursor:pointer; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); color:#fff; font-size:16px; line-height:1; transition:transform .1s ease, background-color .2s ease; } .theme-toggle:hover{background:rgba(255,255,255,.26)} .theme-toggle:active{transform:scale(.94)} /* variante para fundo claro (fora do header) */ .theme-toggle.on-light{background:var(--surface-2); color:var(--ink); box-shadow:var(--shadow-sm)} .theme-toggle.on-light:hover{background:var(--surface-3)} /* logo: img se houver, senao o monograma MC */ .brandmark{display:inline-flex; align-items:center; justify-content:center; overflow:hidden} .brandmark img{width:100%; height:100%; object-fit:contain; display:block} /* botoes base */ .btn{ border:0; border-radius:11px; cursor:pointer; font-weight:650; font-size:15px; padding:12px 16px; background:var(--brand); color:#fff; transition:transform .1s ease, filter .2s ease, background-color .2s ease; } .btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)} .btn:disabled{opacity:.6; cursor:not-allowed} .btn.ghost{background:var(--surface-2); color:var(--ink); box-shadow:var(--shadow-sm)} .btn.ghost:hover{background:var(--surface-3); filter:none} /* botao pequeno para cabecalhos (estilo vidro sobre o header da marca) */ .btn.hdr{background:rgba(255,255,255,.14); color:#fff; font-size:13px; font-weight:600; padding:7px 13px; border-radius:10px; box-shadow:none} .btn.hdr:hover{background:rgba(255,255,255,.26); filter:none} .btn.hdr.accent{background:var(--brand-2); color:var(--brand-strong); font-weight:700} .btn.hdr.accent:hover{background:var(--brand-2); filter:brightness(1.05)} /* campos */ .field label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin:14px 0 6px} .field input, .field select{ width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px; font-size:15px; background:var(--surface); color:var(--ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field select:focus{ border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); } /* acessibilidade: movimento e transparencia reduzidos */ @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} } @media (prefers-reduced-transparency: reduce){ .glass{backdrop-filter:none !important} }