/* =====================================================================
   Plumbline · design tokens
   Home builders and renovators. Light is "Daylight"; dark is "Site lights".
   --plan is the one accent (buttons, links, the chosen stage, dimension lines, the timeline).
   --vis is hi-vis lime, for fills only (the plumb bob, progress, highlights, the estimate band); text on it is ink. --vis-ink is its text colour.
   --ok marks what's covered and done; --alert marks invalid fields and payments that break the rules.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f0efeb;
  --card: #ffffff;
  --well: #e6e4de;
  --line: #d3d0c8;
  --ink: #16191d;
  --ink-2: #363b42;
  --muted: #5a6068;
  --plan: #1e4f9c;
  --plan-2: #173e7b;
  --on-plan: #ffffff;
  --plan-soft: #e1e9f6;
  --vis: #c8e24a;
  --vis-soft: #eef5cf;
  --vis-ink: #4d5e05;
  --ok: #2a6b3c;
  --alert: #b3261e;
  --focus: #1e4f9c;
  --shadow-card: 0 1px 2px rgba(22, 25, 29, 0.06), 0 14px 30px -22px rgba(22, 25, 29, 0.45);
  --shadow-lift: 0 26px 54px -28px rgba(22, 25, 29, 0.5);

  --display: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --body: "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Cousine", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(50px, 7vw, 108px);
  --fs-h2: clamp(36px, 4.4vw, 64px);
  --fs-h3: 22px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Site lights ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101215;
    --card: #181b20;
    --well: #13161a;
    --line: #2b3038;
    --ink: #eef0f2;
    --ink-2: #cdd2d8;
    --muted: #9aa1aa;
    --plan: #9dbcf5;
    --plan-2: #c0d4f8;
    --on-plan: #0b1a36;
    --plan-soft: #172338;
    --vis: #d4ec5c;
    --vis-soft: #222812;
    --vis-ink: #d4ec5c;
    --ok: #7fd39a;
    --alert: #ff9a90;
    --focus: #9dbcf5;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101215;
  --card: #181b20;
  --well: #13161a;
  --line: #2b3038;
  --ink: #eef0f2;
  --ink-2: #cdd2d8;
  --muted: #9aa1aa;
  --plan: #9dbcf5;
  --plan-2: #c0d4f8;
  --on-plan: #0b1a36;
  --plan-soft: #172338;
  --vis: #d4ec5c;
  --vis-soft: #222812;
  --vis-ink: #d4ec5c;
  --ok: #7fd39a;
  --alert: #ff9a90;
  --focus: #9dbcf5;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}