/* Yukti Stay design tokens: "Shoreline" (docs/stay/PLAN.md §2).
   Morning sea mist, deep water, dusk lilac, a little sunset for welcome moments. No greens:
   "handled" is sea blue. Amber = waiting for the host, coral = urgent. Shared by the guest
   page and the host console. Light follows the device; dark is "night swim". */

:root {
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #EAEFF5;
  --ink: #1A2433;
  --muted: #5A6678;
  --line: #D9E0EA;
  --sea: #2D5F8F;
  --sea-ink: #FFFFFF;
  --sea-soft: #E0E9F3;
  --dusk: #6E63A8;
  --dusk-soft: #ECE9F6;
  --sun: #D9825A;
  --sun-soft: #FBE8DD;
  --amber: #A8681A;
  --amber-soft: #F7EAD6;
  --coral: #B4473D;
  --coral-soft: #F6E0DC;
  --shadow: 0 1px 2px rgba(26, 36, 51, .06), 0 14px 36px -14px rgba(26, 36, 51, .22);
  --focus: 0 0 0 3px color-mix(in srgb, var(--sea) 35%, transparent);

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-text: "Onest", "Avenir Next", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --f-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem): 0.75 · 0.875 · 1 · 1.125 · 1.375 · 1.75 · 2.25 */
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem;
  --r-chip: 999px; --r-bubble: 20px; --r-card: 14px; --r-input: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F141D;
    --surface: #161D29;
    --surface-2: #1D2633;
    --ink: #E6EBF2;
    --muted: #9AA6B7;
    --line: #2A3445;
    --sea: #8DB8E6;
    --sea-ink: #0F141D;
    --sea-soft: #1D2D42;
    --dusk: #B3A9E3;
    --dusk-soft: #262340;
    --sun: #EFA383;
    --sun-soft: #3A261E;
    --amber: #E3A75C;
    --amber-soft: #39291A;
    --coral: #E8877C;
    --coral-soft: #3C2220;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 36px -14px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-md)/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: var(--f-display);
  font-variation-settings: "SOFT" 100;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: var(--sea); }
code, .code { font-family: var(--f-code); }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}