/* UbyHost design tokens
   -------------------------------------------------------------------------
   One system serves both host and guest surfaces. Neutral tokens carry the
   interface; coral is reserved for primary actions and focus. Semantic hues
   communicate state, urgency, or stable property identity — never decoration.
   Spacing follows a 4px grid. Controls use small radii; large radii belong to
   page-level surfaces. Shadows are reserved for floating UI.
*/
:root {
  color-scheme: light dark;

  /* Neutral canvas and ink */
  --canvas: #f7f7f5;
  --canvas-subtle: #f1f1ef;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f3f3f1;
  --surface-active: #ececea;
  --ink: #20201e;
  --ink-secondary: #50504c;
  --ink-muted: #73736e;
  --ink-faint: #92928c;
  --border: #deded9;
  --border-strong: #c9c9c2;

  /* Brand and interaction */
  --brand: #c85a52;
  --brand-hover: #ad4942;
  --brand-pressed: #963e38;
  --brand-soft: #f9e9e7;
  --brand-ink: #963e38;
  --focus-ring: rgba(200, 90, 82, 0.28);
  --on-brand: #ffffff;

  /* Semantic and identity palette: readable ink + quiet tint */
  --red: #b42318;    --red-bg: #fcebea;
  --orange: #a34408; --orange-bg: #fff0e5;
  --amber: #8a5200;  --amber-bg: #fff4d6;
  --green: #167044;  --green-bg: #e6f5ec;
  --teal: #08736b;   --teal-bg: #e1f5f2;
  --blue: #245cb5;   --blue-bg: #e9f0fc;
  --indigo: #4f4aae; --indigo-bg: #eeedfb;
  --purple: #7840a2; --purple-bg: #f3eafa;
  --pink: #a33c72;   --pink-bg: #faeaf2;
  --brown: #79533d;  --brown-bg: #f3ece7;
  --gray: #5f625f;   --gray-bg: #eceeec;

  /* Type scale */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.625rem, 3vw, 2rem);

  /* 4px spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-popover: 0 8px 24px rgba(20, 20, 18, 0.12), 0 2px 6px rgba(20, 20, 18, 0.08);
  --shadow-dialog: 0 20px 60px rgba(20, 20, 18, 0.2);
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --z-sticky: 20;
  --z-drawer: 40;
  --z-popover: 60;
  --z-toast: 80;
  --z-dialog: 100;
  --sidebar-width: 248px;

  /* Compatibility aliases while legacy templates move onto primitives. */
  --bg: var(--canvas);
  --bg-tint: var(--canvas-subtle);
  --surface-2: var(--canvas);
  --surface-3: var(--surface-hover);
  --ink-2: var(--ink-secondary);
  --muted: var(--ink-muted);
  --faint: var(--ink-faint);
  --line: var(--border);
  --line-2: var(--border-strong);
  --brand-ring: var(--focus-ring);
  --ok: var(--green); --ok-soft: var(--green-bg);
  --warn: var(--amber); --warn-soft: var(--amber-bg);
  --bad: var(--red); --bad-soft: var(--red-bg);
  --radius: var(--radius-md);
  --pill: var(--radius-pill);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: var(--shadow-popover);
  --shadow-pop: var(--shadow-popover);
  --sidebar: var(--sidebar-width);
  --ease: var(--ease-standard);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #191918;
    --canvas-subtle: #20201f;
    --surface: #242423;
    --surface-raised: #2a2a28;
    --surface-hover: #30302e;
    --surface-active: #393936;
    --ink: #f1f1ed;
    --ink-secondary: #d0d0ca;
    --ink-muted: #a4a49d;
    --ink-faint: #85857e;
    --border: #3b3b38;
    --border-strong: #50504b;
    --brand: #dc746d;
    --brand-hover: #e58983;
    --brand-pressed: #c86059;
    --brand-soft: #482a28;
    --brand-ink: #f3aaa5;
    --focus-ring: rgba(220, 116, 109, 0.38);
    --red: #ff9b92;    --red-bg: #482421;
    --orange: #f6a36c; --orange-bg: #432b1e;
    --amber: #e8bd62;  --amber-bg: #3f321a;
    --green: #72ce9c;  --green-bg: #1d392a;
    --teal: #69cec4;   --teal-bg: #183b38;
    --blue: #8ab4f8;   --blue-bg: #20334f;
    --indigo: #aaa6f6; --indigo-bg: #2d2b50;
    --purple: #c89be7; --purple-bg: #392649;
    --pink: #ed9bc4;   --pink-bg: #47253a;
    --brown: #d2aa8f;  --brown-bg: #3b2e27;
    --gray: #c1c4bf;   --gray-bg: #343633;
  }
}

:root[data-theme="dark"] {
  --canvas: #191918;
  --canvas-subtle: #20201f;
  --surface: #242423;
  --surface-raised: #2a2a28;
  --surface-hover: #30302e;
  --surface-active: #393936;
  --ink: #f1f1ed;
  --ink-secondary: #d0d0ca;
  --ink-muted: #a4a49d;
  --ink-faint: #85857e;
  --border: #3b3b38;
  --border-strong: #50504b;
  --brand: #dc746d;
  --brand-hover: #e58983;
  --brand-pressed: #c86059;
  --brand-soft: #482a28;
  --brand-ink: #f3aaa5;
  --focus-ring: rgba(220, 116, 109, 0.38);
  --red: #ff9b92; --red-bg: #482421;
  --orange: #f6a36c; --orange-bg: #432b1e;
  --amber: #e8bd62; --amber-bg: #3f321a;
  --green: #72ce9c; --green-bg: #1d392a;
  --teal: #69cec4; --teal-bg: #183b38;
  --blue: #8ab4f8; --blue-bg: #20334f;
  --indigo: #aaa6f6; --indigo-bg: #2d2b50;
  --purple: #c89be7; --purple-bg: #392649;
  --pink: #ed9bc4; --pink-bg: #47253a;
  --brown: #d2aa8f; --brown-bg: #3b2e27;
  --gray: #c1c4bf; --gray-bg: #343633;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0.01ms; --motion-base: 0.01ms; }
}

/* A forced theme must also switch the browser's own rendering. Without this a
   guest who picks Light on a dark phone gets our light card with the browser's
   dark autofill boxes and scrollbars. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Autofilled fields keep the surface and ink of the page. Chrome ignores
   background-color here, so the fill is painted with an inset shadow and the
   colour transition is parked far enough out to never run. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 100px var(--surface);
  transition: background-color 600000s 0s;
}

input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 100px var(--surface), 0 0 0 3px var(--focus-ring);
}