@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F4F5F8;
  --surface:#FFFFFF;
  --surface-2:#ECEEF3;
  --ink:#1B2430;
  --ink-soft:#4B5563;
  --ink-faint:#8992A3;
  --border:#DFE2E8;
  --border-soft:#EAECF1;
  --accent:#5B4FE5;
  --accent-ink:#4432B0;
  --accent-soft:#ECEAFB;
  --amber:#B8790F;
  --amber-soft:#FBF0DD;
  --blue:#2F6FB0;
  --blue-soft:#E7F0FA;
  --red:#C4433D;
  --red-soft:#FBE7E6;
  --slate:#6B7280;
  --slate-soft:#EEF0F3;
  /* ---------- 4Business brand accents (independent of status colors above) ---------- */
  --brand-navy:#0B1220;
  --brand-navy-2:#161F35;
  --brand-orange:#F5A623;
  --brand-orange-soft:#FCEDD2;
  --cyan:#2FA8D6;
  --cyan-soft:#E4F4FA;
  /* cor fixa do status "Concluído" — não muda com a marca */
  --status-done:#0E7C74;
  --status-done-ink:#08514C;
  --status-done-soft:#E3F2F0;
  --shadow: 0 1px 2px rgba(20,26,38,.04), 0 6px 20px -8px rgba(20,26,38,.12);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 7px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12161D; --surface:#1A2029; --surface-2:#212836;
    --ink:#EAEDF3; --ink-soft:#AEB6C4; --ink-faint:#727C8C;
    --border:#2B3342; --border-soft:#242B38;
    --accent:#9C8CFF; --accent-ink:#D9D3FF; --accent-soft:#241D4A;
    --amber:#E3A83E; --amber-soft:#332714;
    --blue:#6FA8E0; --blue-soft:#182636;
    --red:#EA8783; --red-soft:#3A1E1D;
    --slate:#9AA3B2; --slate-soft:#242B38;
    --brand-orange:#F6B94D; --brand-orange-soft:#3A2C12;
    --cyan:#5FC3EA; --cyan-soft:#122C36;
    --status-done:#3FCBBB; --status-done-ink:#B7F0E7; --status-done-soft:#173430;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12161D; --surface:#1A2029; --surface-2:#212836;
  --ink:#EAEDF3; --ink-soft:#AEB6C4; --ink-faint:#727C8C;
  --border:#2B3342; --border-soft:#242B38;
  --accent:#9C8CFF; --accent-ink:#D9D3FF; --accent-soft:#241D4A;
  --amber:#E3A83E; --amber-soft:#332714;
  --blue:#6FA8E0; --blue-soft:#182636;
  --red:#EA8783; --red-soft:#3A1E1D;
  --slate:#9AA3B2; --slate-soft:#242B38;
  --brand-orange:#F6B94D; --brand-orange-soft:#3A2C12;
  --cyan:#5FC3EA; --cyan-soft:#122C36;
  --status-done:#3FCBBB; --status-done-ink:#B7F0E7; --status-done-soft:#173430;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -10px rgba(0,0,0,.5);
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,.display{ font-family:'Fraunces', Georgia, serif; text-wrap:balance; letter-spacing:-.01em; }
.mono{ font-family:'IBM Plex Mono', 'SF Mono', monospace; }
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:var(--accent-soft); color:var(--accent-ink); }
[hidden]{ display:none !important; }

/* ---------- buttons / inputs (shared) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.15s ease; line-height:1.2;
}
.btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover{ filter:brightness(1.06); color:#fff; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost:hover{ background:var(--surface-2); border-color:var(--border-soft); color:var(--ink); }
.btn.danger{ color:var(--red); }
.btn.danger:hover{ background:var(--red-soft); border-color:var(--red); color:var(--red); }
.btn.small{ padding:6px 11px; font-size:12.5px; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--paper); color:var(--ink); font-size:13.5px; font-family:inherit;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px;
  font-size:13px; font-weight:600; box-shadow:var(--shadow); z-index:400;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

/* ---------- status colors (shared across app) ----------
   Independentes das cores de marca acima: cada status tem seu próprio par
   de tokens para que uma futura mudança de identidade visual (--accent,
   --brand-*) nunca altere sem querer a cor de um status. */
.st-planejado{ --st-c:var(--slate); --st-bg:var(--slate-soft); }
.st-iniciado{ --st-c:var(--blue); --st-bg:var(--blue-soft); }
.st-em_andamento{ --st-c:var(--amber); --st-bg:var(--amber-soft); }
.st-concluido{ --st-c:var(--status-done-ink); --st-bg:var(--status-done-soft); }
.st-atrasado{ --st-c:var(--red); --st-bg:var(--red-soft); }
.st-cancelado{ --st-c:var(--ink-faint); --st-bg:var(--surface-2); }