/* Northrift Wealth demo — design tokens, v1.0.0
 * Every value below is taken verbatim from the source prototype:
 *   light  ← "Northrift Wealth.dc.html"
 *   dark   ← "Northrift Wealth Dark.dc.html"
 * The two files are structurally identical, so the pairing is positional and
 * exact. See docs/design-brief.md for the full table and docs/brand-decision.md
 * for the one accepted deviation (the spacing scale is not a strict 4-grid).
 */

:root {
  /* --- family + type scale ------------------------------------------------ */
  --font-sans: -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  --fs-9: 9px;    --fs-10: 10px;  --fs-11: 11px;  --fs-12: 12px;
  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;  --fs-17: 17px;
  --fs-18: 18px;  --fs-19: 19px;  --fs-20: 20px;  --fs-21: 21px;
  --fs-22: 22px;  --fs-24: 24px;  --fs-26: 26px;  --fs-27: 27px;
  --fs-30: 30px;  --fs-32: 32px;  --fs-34: 34px;  --fs-40: 40px;

  /* --- spacing scale (prototype's own steps) ------------------------------ */
  --sp-2: 2px;   --sp-3: 3px;   --sp-4: 4px;   --sp-5: 5px;   --sp-6: 6px;
  --sp-7: 7px;   --sp-8: 8px;   --sp-9: 9px;   --sp-10: 10px; --sp-11: 11px;
  --sp-12: 12px; --sp-13: 13px; --sp-14: 14px; --sp-16: 16px; --sp-18: 18px;
  --sp-20: 20px; --sp-22: 22px; --sp-24: 24px; --sp-26: 26px; --sp-28: 28px;
  --sp-30: 30px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-76: 76px;

  /* --- radius ------------------------------------------------------------- */
  --r-6: 6px;   --r-7: 7px;   --r-8: 8px;   --r-9: 9px;   --r-10: 10px;
  --r-11: 11px; --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-18: 18px;
  --r-20: 20px; --r-22: 22px; --r-24: 24px; --r-26: 26px; --r-38: 38px;
  --r-46: 46px; --r-pill: 9999px;

  /* --- motion ------------------------------------------------------------- */
  --d-fast: 140ms;
  --d-base: 200ms;
  --d-slow: 280ms;   /* nothing exceeds 300ms */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- surfaces + structure ---------------------------------------------- */
  --canvas: #D3DEE0;
  --surface: #fff;
  --surface-soft: #F1F6F7;
  --surface-muted: #F4F5F6;
  --surface-raised: #fff;
  --ink: #10303C;
  --ink-text: #10303C;        /* ink as a foreground: dark file maps it to #E8EEF2 */
  --ink-solid: #10303C;
  --on-ink-solid: #fff;
  --border: #DDE3E8;
  --border-input: #D3DEE0;
  --rule: #D9D9D9;

  /* --- text -------------------------------------------------------------- */
  --text-strong: #000;
  --text: #464646;
  --text-muted: #5B5E61;      /* was #8D8E8F — AA also on the canvas, see design-review D-05 */
  --text-faint: #B9BBBE;
  --text-disabled: #6E7174;   /* was #B9BBBE — completed tasks are still text */
  --text-on-ink: #fff;

  /* --- accents ----------------------------------------------------------- */
  --accent: #44A7F2;
  --on-accent: #10303C;
  --accent-link-hover: #2E86C9;
  --teal: #1F5B70;
  --on-teal: #fff;
  --mint: #C0E2E7;
  --on-mint: #10303C;
  --mint-strong: #A9D8E0;
  --bar-fill: #10303C;
  --status-chrome: #10303C;
  --positive: #3B7A38;        /* was #4D9C49 — AA at 11-13px */
  --negative: #B22C2C;        /* was #EE4747 — AA at 11-13px, also on the canvas */
  --tab-active-bg: #E8F4FC;
  --tab-active-fg: #1B5E8C;
  --nav-badge-bg: #F1F6F7;
  --nav-badge-fg-on: #C0E2E7;

  /* --- chip pairs -------------------------------------------------------- */
  --chip-blue-bg: #CFE8F6;    --chip-blue-fg: #1B5E8C;
  --chip-teal-bg: #A9D8E0;    --chip-teal-fg: #1F5B70;
  --chip-mint-bg: #C0E2E7;    --chip-mint-fg: #2B5C63;
  --chip-mint2-bg: #C0E2E7;   --chip-mint2-fg: #1F5B70;
  --chip-green-bg: #D5EAD0;   --chip-green-fg: #3D6B36;
  --chip-green2-bg: #E3EFE0;  --chip-green2-fg: #3D6B36;
  --chip-red-bg: #F5DCDC;     --chip-red-fg: #8C2F2F;
  --chip-slate-bg: #DDE3E8;   --chip-slate-fg: #2E4257;
  --chip-violet-bg: #EBD5EA;  --chip-violet-fg: #6E3C6B;
  --chip-neutral-bg: #EAEFF1; --chip-neutral-fg: #464646;
  --chip-mute-bg: #F4F5F6;    --chip-mute-fg: #5F6265;

  /* --- event kinds ------------------------------------------------------- */
  --kind-meeting: #44A7F2;  --kind-meeting-bg: #C0E2E7;
  --kind-call: #2E4257;     --kind-call-bg: #DDE3E8;
  --kind-review: #4D9C49;   --kind-review-bg: #D5EAD0;
  --kind-task: #1F5B70;     --kind-task-bg: #F1F6F7;

  /* --- elevation + veils ------------------------------------------------- */
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.10);
  --shadow-3: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
  --shadow-frame: 0 8px 40px 0 rgba(0, 0, 0, 0.16);
  --overlay: rgba(0, 0, 0, 0.4);
  --tabbar-bg: rgba(255, 255, 255, 0.9);
  --chart-fill: rgba(68, 167, 242, 0.26);
  --chart-fill-soft: rgba(68, 167, 242, 0.24);
  --on-ink-veil-07: rgba(255, 255, 255, 0.07);
  --on-ink-veil-08: rgba(255, 255, 255, 0.08);
  --on-ink-veil-10: rgba(255, 255, 255, 0.1);
  --on-ink-veil-14: rgba(255, 255, 255, 0.14);
  --on-ink-veil-16: rgba(255, 255, 255, 0.16);
  --spinner-track: rgba(16, 48, 60, 0.5);

  /* --- focus ring (added by the demo; the prototype had none) ------------ */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

:root[data-theme="dark"] {
  --canvas: #070C11;
  --surface: #161F28;
  --surface-soft: #0E151C;
  --surface-muted: #1E2932;
  --surface-raised: #24384A;
  --ink: #122B44;
  --ink-text: #E8EEF2;
  --ink-solid: #58A9F0;
  --on-ink-solid: #06121C;
  --border: #26333E;
  --border-input: #26333E;
  --rule: #33424E;

  --text-strong: #E8EEF2;
  --text: #A9B8C2;
  --text-muted: #8B9BA6;      /* dark theme: AA on --surface-muted too */
  --text-faint: #9DAEB8;      /* dark theme: AA on the veiled pill track */
  --text-disabled: #5B6B75;
  --text-on-ink: #fff;

  --accent: #58A9F0;
  --on-accent: #06121C;
  --accent-link-hover: #2E86C9;
  --teal: #7FD1D6;
  --on-teal: #06121C;
  --mint: #12363B;
  --on-mint: #E8EEF2;
  --mint-strong: #17414D;
  --bar-fill: #93C9F5;
  --status-chrome: #4A5D6B;
  --positive: #4FBE8A;
  --negative: #F0616B;
  --tab-active-bg: #16324A;
  --tab-active-fg: #93C9F5;
  --nav-badge-bg: #1E2932;
  --nav-badge-fg-on: #06121C;

  --chip-blue-bg: #16324A;    --chip-blue-fg: #93C9F5;
  --chip-teal-bg: #17414D;    --chip-teal-fg: #7FD1D6;
  --chip-mint-bg: #12363B;    --chip-mint-fg: #7FD1D6;
  --chip-mint2-bg: #12363B;   --chip-mint2-fg: #7FD1D6;
  --chip-green-bg: #133329;   --chip-green-fg: #79D6A5;
  --chip-green2-bg: #133329;  --chip-green2-fg: #79D6A5;
  --chip-red-bg: #3A1F22;     --chip-red-fg: #F2A0A5;
  --chip-slate-bg: #26333E;   --chip-slate-fg: #9FC0DE;
  --chip-violet-bg: #2A2340;  --chip-violet-fg: #B9A8EE;
  --chip-neutral-bg: #1E2932; --chip-neutral-fg: #A9B8C2;
  --chip-mute-bg: #1E2932;    --chip-mute-fg: #93A3AE;

  --kind-meeting: #58A9F0;  --kind-meeting-bg: #12363B;
  --kind-call: #9FC0DE;     --kind-call-bg: #26333E;
  --kind-review: #4FBE8A;   --kind-review-bg: #133329;
  --kind-task: #7FD1D6;     --kind-task-bg: #0E151C;

  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.55);
  --shadow-3: 0 2px 6px 0 rgba(0, 0, 0, 0.55);
  --shadow-frame: 0 8px 40px 0 rgba(0, 0, 0, 0.6);
  --overlay: rgba(0, 0, 0, 0.72);
  --tabbar-bg: rgba(22, 31, 40, 0.94);
  --chart-fill: rgba(88, 169, 240, 0.32);
  --chart-fill-soft: rgba(88, 169, 240, 0.3);
  --on-ink-veil-16: rgba(6, 18, 28, 0.24);
}

/* --- base ---------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  font-family: var(--font-sans);
  color: var(--text-strong);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--accent-link-hover); }
input, button, textarea, select { font-family: inherit; }
button { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
.nr-noscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.nr-noscroll { scrollbar-width: none; }

/* --- keyframes (nrSpin / nrPulse / nrRise are the prototype's) ----------- */
@keyframes nrSpin { to { transform: rotate(360deg); } }
@keyframes nrPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes nrRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nrSlideIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nrSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes nrBar { from { width: var(--from-w); } to { width: var(--to-w); } }
@keyframes nrStamp { from { opacity: 0; transform: scale(0.9) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* --- focus ring ---------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-8);
}

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- screen-reader only -------------------------------------------------- */
.nr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}