/* ============================================================================
   DOMUS OS design foundation (Phase 1, 2026-08-04)
   The ONE place tokens live. Surfaces link this BEFORE their inline <style>,
   so a page can override, but new work should consume tokens, never raw hex.
   Two skins, one system:
     HOME (portals, website, setup): light, calm, cool grey. Defaults below.
     OPS  (the builder HUD): dark industrial. index.html still owns its own
     palette vars; it consumes the shared radius/motion/state layer here and
     gets its full token pass in the HUD phase.
   Rules this file enforces (Architecture — Design Language 2026):
     concentric radii (outer 16 / nested 10 / pills capsule), color = meaning,
     all six control microstates, motion with a director.
   ========================================================================== */

:root {
  /* -- concentric radius scale ------------------------------------------- */
  --r-card: 14px;   /* outer surfaces: airy cards, match iPhone */
  --r-inner: 2px;   /* nested: inputs, buttons, thumbnails, toasts */
  --r-pill: 999px;  /* chips, badges, capsule actions */

  /* -- motion: fast, eased, physical -------------------------------------- */
  --t-fast: 140ms;
  --t-med: 220ms;
  --ease-out: cubic-bezier(.2, .8, .25, 1);

  /* -- HOME skin: the portal palette, formalized (A2: cool grey kept) ----- */
  --ink: #4F7394;        /* primary text — phone ink */
  --ink-soft: #4A525C;   /* secondary text */
  --muted: #6C757E;      /* tertiary text, labels */
  --faint: #9BA3AB;      /* placeholders, timestamps */
  --surface: #FFFFFF;    /* cards */
  --surface-dim: #F4F6F9;/* wells, inactive fills */
  --canvas: #FFFFFF;     /* page background — phone white */
  --line: #E0E0E0;       /* hairline */
  --line-soft: #D9DDE2;  /* quiet borders */

  /* the ONE accent per screen — phone ink, never brown */
  --accent: #4F7394;
  --accent-soft: #E4E8EE;

  /* -- status: the only colors that are allowed to mean anything ---------- */
  --ok: #0F7B4F;   --ok-bg: #E6F4EC;
  --warn: #A8620A; --warn-bg: #FCF1E0;
  --bad: #B42318;  --bad-bg: #FCEBE9;

  /* -- elevation ----------------------------------------------------------- */
  --shadow-card: 0 6px 20px -18px rgba(16, 19, 23, .4);
  --shadow-float: 0 20px 60px -20px rgba(16, 19, 23, .5);

  /* -- floating-button dock ------------------------------------------------
     Every fixed bottom-right button (ask FAB, tour ?) stands on this ledge.
     Pages with a phone tab bar RAISE the ledge in their own media query
     (e.g. --dock-clear: calc(84px + env(safe-area-inset-bottom))) so floats
     never cover the tabs, and stack above each other, never on each other. */
  --dock-clear: 18px;

  /* legacy aliases: portal pages historically say "bronze"; keep them wired
     to the accent tokens so old markup and ask.js resolve correctly. */
  --bronze: var(--accent);
  --bronze-soft: var(--accent-soft);
}

/* ---- microstates: every control gets all six, once, here ----------------
   :where() keeps specificity at zero so any page rule still wins. */
:where(button, [role="button"], input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--accent, #4da3ff);
  outline-offset: 2px;
}
:where(button, [role="button"]):disabled {
  opacity: .45;
  cursor: not-allowed;
}
:where(button, [role="button"]):not(:disabled):active {
  transform: translateY(1px);
}
:where(button, a, input, select, textarea, summary) {
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
/* loading: any control carrying .busy quiets itself; busySweep sets/clears it */
:where(.busy) {
  opacity: .6;
  pointer-events: none;
}

/* ---- calm motion everywhere, respectfully off when asked ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---- the one working spinner (2026-08-09): a comet ring with eased rotation.
   Defined ONCE for every surface (HUD + all three portals) — the old per-page
   12px border-circle read as "a broken square" at small sizes and the portals
   had no spinner rule at all, so busy buttons showed a blank gap. ---- */
.fr-spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 50deg, currentColor 355deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
  color:var(--blue, #4a9eff);
  animation:frSpin .85s cubic-bezier(.55,.15,.45,.85) infinite;
  vertical-align:-2px;
}
.fr-spinner.lg{width:22px; height:22px; vertical-align:-4px;}
@keyframes frSpin{to{transform:rotate(360deg)}}

/* .spin (ask modal) and .runspin (rail run-state) were the OLD border-circle
   spinners — the "square with one line" Paul kept seeing after .fr-spinner was
   replaced (2026-08-10: the class fix had missed the siblings). One family now:
   same comet ring, sized and colored per role. */
.spin{
  display:inline-block; width:14px; height:14px; border-radius:50%; flex:none;
  background:conic-gradient(from 0deg, transparent 0 50deg, currentColor 355deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2px));
  color:var(--blue, #4a9eff);
  animation:frSpin .85s cubic-bezier(.55,.15,.45,.85) infinite;
}
.runspin{
  display:inline-block; width:11px; height:11px; border-radius:50%; flex:none; vertical-align:-1px;
  background:conic-gradient(from 0deg, transparent 0 50deg, currentColor 355deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.3px), #000 calc(100% - 1.8px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.3px), #000 calc(100% - 1.8px));
  color:var(--amber, #d9a441);
  animation:frSpin .85s cubic-bezier(.55,.15,.45,.85) infinite;
}