@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
/* ============================================================
   Ramos Law — Firm Dashboard Hub · shared theme  ·  "CLAY"
   Slate-blue + terracotta on warm cream. Bright, soft, bubbly,
   low-contrast, professional. Loaded LAST so it repaints every
   page by overriding the per-page :root palette + fonts.
   ============================================================ */

:root{
  /* ---- Clay palette (overrides each page's inline :root) ---- */
  --bg:#F7F1E8; --card:#FFFFFF; --ink:#3A352F; --ink2:#5F574D; --muted:#9A9082;
  --line:#ECE4D6; --line2:#E1D8C8;
  --accent:#4A6385; --accent-ink:#FFFFFF; --accent-soft:#E8EDF4; --accent-text:#3F5778;
  --red:#C96A4B; --redbg:#F5E7DD; --redline:#E7C9B8;          /* terracotta = overdue / litigation */
  --amber:#A9781F; --amberbg:#F7EFDA; --amberline:#E8D6A8;     /* honey/ochre = warnings */
  --green:#4F805F; --greenbg:#E6F0E8; --greenline:#C7DECD;     /* sage = resolved / ok */
  --neutralbg:#F1EADC;
  /* people dots */
  --p-eric:#4A6385; --p-ron:#C96A4B; --p-sandra:#4F805F; --p-irene:#8A77A8;
  --p-amanda:#4F805F; --p-ida:#8A77A8; --p-kimberly:#C96A4B;
  /* type */
  --serif:"Sora",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* elevation + shape + motion (bubbly, soft, slate-tinted) */
  --shadow-sm:0 6px 16px -10px rgba(74,99,133,.30), 0 2px 6px -6px rgba(58,53,47,.10);
  --shadow-md:0 12px 26px -12px rgba(74,99,133,.32), 0 4px 10px -6px rgba(58,53,47,.10);
  --shadow-lg:0 22px 48px -16px rgba(74,99,133,.36), 0 6px 14px -8px rgba(58,53,47,.12);
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --navh:50px;
}

/* headings render in Sora; tighten tracking a touch */
header h1,.case,.dash h2,.greet,.casehdr h3,.sheet h3,.h2,h1,h2,h3{font-family:var(--serif);letter-spacing:-.3px}
body{font-weight:500;-webkit-font-smoothing:antialiased}

/* warm cream glow — slate top-right, terracotta lower-left */
body{
  background-image:
    radial-gradient(1100px 540px at 103% -8%, rgba(74,99,133,.08), transparent 60%),
    radial-gradient(880px 520px at -10% 8%, rgba(201,106,75,.06), transparent 55%);
  background-attachment:fixed;
}

/* ---------- Dark mode (warm slate charcoal) ---------- */
[data-theme="dark"]{
  --bg:#23262E; --card:#2C313B; --ink:#ECE7DE; --ink2:#C8C1B5; --muted:#979084;
  --line:#363B45; --line2:#454B57;
  --accent:#7C97C2; --accent-ink:#191D24; --accent-soft:#2E3744; --accent-text:#AAC1E1;
  --red:#E08C6B; --redbg:#3A2A22; --redline:#5E4031;
  --amber:#D7A85F; --amberbg:#39301C; --amberline:#5A4A2A;
  --green:#83B597; --greenbg:#22322A; --greenline:#3C5446;
  --neutralbg:#333843;
  --p-eric:#7FA2D0; --p-ron:#E08C6B; --p-sandra:#6DBE9E; --p-irene:#B69AD2;
  --p-amanda:#6DBE9E; --p-ida:#B69AD2; --p-kimberly:#E08C6B;
}
[data-theme="dark"] body{
  background-image:
    radial-gradient(1100px 540px at 103% -8%, rgba(124,151,194,.12), transparent 60%),
    radial-gradient(880px 520px at -10% 8%, rgba(224,140,107,.07), transparent 55%);
}
[data-theme="dark"] header,
[data-theme="dark"] .appnav{background:rgba(35,38,46,.92) !important}
[data-theme="dark"] .skel,[data-theme="dark"] .skn{
  background:linear-gradient(90deg,#2E333D,#363C47,#2E333D) !important;background-size:200% 100% !important}

/* ---------- elevation / shape refresh ---------- */
.card,.dash,.qrow,.kanban .col{
  box-shadow:var(--shadow-sm);
  transition:box-shadow .18s var(--ease), transform .12s var(--ease), border-color .18s var(--ease), background .2s;
}
.card,.dash{border-radius:var(--r-lg)}
.card:hover,.dash:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.card:active,.dash:active,.qrow:active{transform:translateY(0) scale(.995)}
.btn{transition:transform .06s var(--ease), box-shadow .15s, background .15s, border-color .15s}
.btn.primary{box-shadow:0 2px 8px -3px rgba(74,99,133,.5)}
.btn.primary:hover{box-shadow:var(--shadow-md);filter:saturate(1.03)}
.sheet{box-shadow:var(--shadow-lg)}
.modal{animation:fadein .16s var(--ease) both}
.sheet{animation:sheetin .24s var(--ease) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes sheetin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(min-width:780px){@keyframes sheetin{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}}

/* ---------- Global tracker switcher (injected by nav.js into <header>) ---------- */
.appnav{display:flex;gap:5px;justify-content:center;align-items:center;margin:0 auto 2px;padding-bottom:10px;max-width:820px}
.appnav a{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;
  padding:8px 14px;border-radius:999px;min-height:40px;transition:background .15s var(--ease),color .15s,border-color .15s;white-space:nowrap}
.appnav a:hover{color:var(--ink);background:var(--neutralbg)}
.appnav a.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px -3px rgba(74,99,133,.5)}
.appnav a .ic{font-size:15px;line-height:1}
@media(max-width:560px){.appnav a .tx{display:none}.appnav a{padding:8px 13px}.appnav a .ic{font-size:18px}}

/* theme toggle button (injected into header .hbtns) */
.themebtn{background:transparent;border:0;color:var(--muted);font-size:19px;cursor:pointer;
  min-width:44px;min-height:44px;border-radius:11px;touch-action:manipulation}
.themebtn:active{transform:scale(.92)} .themebtn:hover{color:var(--ink)}

/* ---------- Add-lead FAB (injected by nav.js) ---------- */
.fab{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:46;
  display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-family:inherit;font-weight:700;font-size:16px;
  height:58px;padding:0 22px;border-radius:999px;box-shadow:var(--shadow-lg);
  transition:transform .15s var(--ease), box-shadow .15s, filter .15s;touch-action:manipulation}
.fab .plus{font-size:24px;line-height:1;margin-top:-2px}
.fab:hover{transform:translateY(-2px);filter:saturate(1.04)}
.fab:active{transform:translateY(0) scale(.96)}
.fab:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:560px){.fab{height:60px;padding:0;width:60px;justify-content:center}.fab .lab{display:none}.fab .plus{margin:0;font-size:28px}}
@media(prefers-reduced-motion:reduce){.modal,.sheet{animation:none !important}
  .card:hover,.dash:hover,.fab:hover{transform:none !important}}