/* brand.css — Carlo.AI design system (from the identity deck).
   Light, friendly, modern. Palette: slate-blue primary, cream/white surfaces,
   lime + amber accents, ink text. Type: Saira (display) + Inter (body). */
:root{
  --bg:#F3F3F3;            /* app background */
  --cream:#EDE6DF;         /* warm surface */
  --surface:#FFFFFF;
  --ink:#17171F;           /* primary text */
  --muted:#677A89;         /* slate gray text */
  --soft:#8b97a6;
  --line:#E3E8EE;
  --line2:#D5DEE8;

  --primary:#94B1CD;       /* PRIMARY (slate blue) */
  --primary-700:#5E7E9E;   /* deeper slate for contrast */
  --lime:#CADB2B;          /* accent */
  --amber:#F2BD1A;         /* accent / CTA */
  --sky:#3EACE2;
  --coral:#F0576A;
  --orange:#F36C40;
  --purple:#A7509F;

  --on-primary:#10202f;
  --dr:#2f6fb0;            /* debit (blue) */
  --cr:#c47a1e;            /* credit (amber-brown) */
  --good:#2faa6a; --warn:#c9851a; --bad:#d8453f;
  --grad:linear-gradient(135deg,var(--primary-700),var(--sky));   /* blue brand gradient */
  --grad-warm:linear-gradient(120deg,var(--amber),var(--orange)); /* amber→orange */
  --grad-mesh:radial-gradient(680px 420px at 84% -8%,rgba(62,172,226,.26),transparent 60%),radial-gradient(560px 380px at 2% 4%,rgba(148,177,205,.34),transparent 58%),radial-gradient(520px 380px at 55% 112%,rgba(242,189,26,.16),transparent 60%),radial-gradient(420px 320px at 100% 60%,rgba(240,87,106,.12),transparent 60%);
  --radius:16px;
  --shadow:0 14px 40px rgba(30,45,70,.10);
  --shadow-sm:0 4px 16px rgba(30,45,70,.07);
  --ff-display:'Saira',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--ff-body);color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--primary-700);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.display{font-family:var(--ff-display);letter-spacing:-.01em}

/* the Carlo.AI wordmark (two-tone): "Carlo" ink, ".AI" slate-blue */
.wordmark{font-family:var(--ff-display);font-weight:800;letter-spacing:.005em;color:var(--ink);line-height:1}
.wordmark b{color:var(--primary-700);font-weight:800}
.logo-lockup{display:inline-flex;align-items:center;gap:10px}
.logo-ico{flex:none}

/* buttons */
button,.btn{font-family:var(--ff-body);cursor:pointer;border:none;border-radius:12px;font-weight:700;transition:.15s;font-size:14.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(62,172,226,.28)}
.btn:hover{filter:brightness(1.07);color:#fff;text-decoration:none}
.btn.amber{background:var(--grad-warm);color:#3a2d00;box-shadow:0 6px 16px rgba(242,189,26,.32)}
.btn.amber:hover{filter:brightness(1.05);color:#3a2d00}
.btn.lime{background:var(--lime);color:#2b3000;box-shadow:0 6px 16px rgba(202,219,43,.32)}
.btn.coral{background:linear-gradient(135deg,var(--coral),var(--orange));color:#fff}
.btn.ghost{background:#fff;border:1px solid var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--primary);background:#fff;color:var(--ink)}
.btn.block{width:100%}
.btn.lg{padding:14px 26px;font-size:15.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.loading{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--primary-700);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#fff;border:1px solid var(--line);padding:12px 18px;border-radius:13px;box-shadow:var(--shadow);font-size:13.5px;opacity:0;transition:.3s;z-index:60;color:var(--ink)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{border-color:#aee0c5} .toast.bad{border-color:#f2c0bd}