/* ═══════════════════════════════════════════════════════════════════
   tokens.css — the design system every page loads (index, chat,
   privacy, terms): tokens first, then the few components that more
   than one page shares.

   Built on Apple's interface foundations:
     • The system font (SF Pro on Apple devices, Segoe UI / Roboto
       elsewhere): optical sizing and legibility tuning for free, and no
       font file to download before text can render.
     • Semantic colours that follow the device's light / dark setting.
     • Translucent materials for floating chrome; content scrolls under.
     • One tint, the mascot's orange: primary action, selection, and
       "this lives on your device".
     • Motion on a critically damped spring (Apple's default, damping
       1.0). --motion drops to 0 under reduced motion, which turns every
       CSS enter/exit into a plain cross-fade.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light dark;

  /* Backgrounds */
  --bg:        #ffffff;   /* the page */
  --bg-2:      #f5f5f7;   /* grouped surfaces: sidebar, code, cards */
  --elevated:  #ffffff;   /* sheets and toasts above the page */
  --bubble:    #efeff2;   /* your own messages */

  /* Fills: translucent greys that read on any background */
  --fill:   rgba(118,118,128,0.12);
  --fill-2: rgba(118,118,128,0.18);
  --fill-3: rgba(118,118,128,0.26);

  /* Labels: every step passes WCAG AA (4.5:1) on --bg and --bg-2 */
  --label:   #1d1d1f;
  --label-2: #424245;
  --label-3: #6e6e73;

  --separator: rgba(60,60,67,0.2);
  --hairline:  1px;

  /* Tint: the mascot’s warm orange; darker text keeps light mode readable. */
  --tint:      #ff8a3d;              /* fills: send button, brand dot */
  --on-tint:   #1d1d1f;              /* glyphs on a tint fill */
  --tint-text: #a3440b;              /* orange as text on light backgrounds */
  --tint-fill: rgba(255,138,61,0.18);
  --focus:     var(--tint-text);

  --red:       #d70015;              /* destructive text (5.4:1) */
  --red-fill:  #d70015;              /* destructive buttons, white text */
  --green:     #34c759;              /* switch on */
  --green-text:#248a3d;

  /* Materials: floating chrome is translucent and blurs what's beneath */
  --material:       rgba(255,255,255,0.72);
  --material-thick: rgba(252,252,253,0.96); /* menus may sit over other glass: near-opaque */
  --bar:            rgba(255,255,255,0.8); /* page-coloured glass: invisible until content passes under */
  --blur:           saturate(180%) blur(20px);
  --scrim:          rgba(0,0,0,0.22);
  --shadow-float: 0 0 0 0.5px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04), 0 8px 28px -6px rgba(0,0,0,0.12);
  --shadow-pop:   0 0 0 0.5px rgba(0,0,0,0.1), 0 20px 50px -12px rgba(0,0,0,0.3);

  /* Type: system font; sizes in rem so the user's text size is honoured */
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs:   0.75rem;    /* 12 caption  */
  --text-sm:   0.8125rem;  /* 13 footnote */
  --text-md:   0.9375rem;  /* 15 controls */
  --text-base: 1.0625rem;  /* 17 body     */

  /* Radius: nested corners are concentric (inner = outer − padding) */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px; --r-full: 999px;

  /* Motion: one spring shape, durations from Apple's "response" */
  --motion: 1;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-fast: 0.41s;   /* response 0.30 */
  --spring-med:  0.54s;   /* response 0.40 */
  --press: 90ms;          /* press-down feedback: near-instant */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* Critically damped spring, x(t) = 1 − (1 + ωt)·e^(−ωt), sampled */
    --spring: linear(0, 0.0377 3.6%, 0.1243 7.1%, 0.2314 10.7%, 0.3425 14.3%, 0.4481 17.9%,
      0.5435 21.4%, 0.6268 25%, 0.6977 28.6%, 0.7571 32.1%, 0.8061 35.7%, 0.8461 39.3%,
      0.8785 42.9%, 0.9044 46.4%, 0.9251 50%, 0.9415 53.6%, 0.9545 57.1%, 0.9647 60.7%,
      0.9726 64.3%, 0.9788 67.9%, 0.9837 71.4%, 0.9874 75%, 0.9903 78.6%, 0.9926 82.1%,
      0.9943 85.7%, 0.9957 89.3%, 0.9967 92.9%, 0.9975 96.4%, 1);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #000000;
    --bg-2:      #1c1c1e;
    --elevated:  #1c1c1e;
    --bubble:    #262628;

    --fill:   rgba(118,118,128,0.24);
    --fill-2: rgba(118,118,128,0.32);
    --fill-3: rgba(118,118,128,0.4);

    --label:   #f5f5f7;
    --label-2: #c7c7cc;
    --label-3: #98989d;

    --separator: rgba(84,84,88,0.6);

    --tint-text: #ff8a3d;
    --tint-fill: rgba(255,138,61,0.2);
    --red:       #ff6961;
    --green:     #30d158;
    --green-text:#30d158;

    --material:       rgba(30,30,32,0.72);
    --material-thick: rgba(44,44,46,0.96);
    --bar:            rgba(0,0,0,0.8);
    --scrim:          rgba(0,0,0,0.5);
    --shadow-float: 0 0 0 0.5px rgba(255,255,255,0.12), 0 8px 28px -6px rgba(0,0,0,0.6);
    --shadow-pop:   0 0 0 0.5px rgba(255,255,255,0.14), 0 24px 60px -12px rgba(0,0,0,0.8);
  }
}

/* Accessibility settings, each honoured on its own */
@media (prefers-reduced-motion: reduce) { :root { --motion: 0; } }
@media (prefers-reduced-transparency: reduce) {
  :root { --material: var(--elevated); --material-thick: var(--elevated); --bar: var(--bg); --blur: none; }
}
@media (prefers-contrast: more) {
  :root { --label-2: var(--label); --label-3: var(--label); --separator: var(--label-3); --fill: var(--fill-3); }
}
@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }

/* ── Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--label);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, textarea, select { font: inherit; color: inherit; }
a, button, label, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
button, a, label { touch-action: manipulation; }
button { -webkit-user-select: none; user-select: none; }

::selection { background: var(--tint-fill); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Brand: app icon + wordmark ───────────────────────────────────── */
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--label); text-decoration: none; white-space: nowrap;
  font-size: var(--text-base); font-weight: 650; letter-spacing: -0.02em;
}
.brand-mascot { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.brand img { display: block; width: 32px; height: 32px; object-fit: contain; }
.mascot { object-fit: contain; image-rendering: pixelated; }
.brand-dot { color: var(--tint); }

/* ── Site navigation (landing + legal): a translucent bar ─────────── */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  background: var(--bar);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.site-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1080px, 100%); height: 52px; margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
}
.site-nav nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 8px 12px; border-radius: var(--r-full);
  color: var(--label-2); text-decoration: none; font-size: var(--text-sm);
  transition: color 0.15s;
}
.pill-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 16px; border-radius: var(--r-full);
  background: var(--label); color: var(--bg);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  transition: transform var(--spring-fast) var(--spring), opacity 0.15s;
}
.pill-btn:active { transform: scale(0.95); transition-duration: var(--press); }
@media (hover: hover) {
  .nav-link:hover { color: var(--label); }
  .pill-btn:hover { opacity: 0.85; }
}

/* ── Site footer ──────────────────────────────────────────────────── */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  width: min(1080px, 100%); margin: 0 auto;
  padding: 20px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  color: var(--label-3); font-size: var(--text-xs);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { color: var(--label-2); text-decoration: none; }
.site-footer .me a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--separator); }
@media (hover: hover) { .site-footer a:hover { color: var(--label); text-decoration: underline; } }
@media (max-width: 600px) {
  .site-footer { flex-direction: column-reverse; text-align: center; }
  .site-footer nav { justify-content: center; }
}