/* Buddy design system: tokens, background field, liquid-glass components. */

/* Metric-matched fallbacks so web fonts don't shift layout when they arrive. */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* colour */
  --sky: #dfeaff; --lilac: #e9e1ff; --peach: #ffe6dc; --mint: #dcf6ec; --base: #f7f8fc;
  --ink: #14142b; --ink-2: #4a4a68;
  /* Brief asked for #7a7a96; that is 3.7:1 on white and fails AA for small text, so it is darkened to 5.4:1. */
  --ink-3: #66668a;
  --accent: #4f5bff; --accent-ink: #3c47e6; --coral: #ff7a5c;
  --line: rgba(20, 20, 43, .12);

  /* glass */
  --glass-bg: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.34));
  --glass-bg-solid: #fff;
  --glass-border: rgba(255,255,255,.8);
  --glass-blur: blur(22px) saturate(180%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(79,91,255,.07), 0 24px 60px -20px rgba(79,91,255,.25);

  /* shape + motion */
  --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: clamp(44px, 6vw, 88px);
  --fs-h2: clamp(32px, 4.4vw, 56px);
  --fs-h3: clamp(20px, 2vw, 24px);

  --mx: 30%; --my: 0%;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--base); color: var(--ink);
  font: 400 18px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--r-pill); transition: top .2s; }
.skip:focus { top: 12px; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- background field ---------- */
.field { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--base); pointer-events: none; }
.blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; will-change: transform; }
.blob.b1 { left: -15vmax; top: -18vmax; background: radial-gradient(closest-side, var(--sky), transparent); animation: drift1 28s ease-in-out infinite alternate; }
.blob.b2 { right: -20vmax; top: 4vmax; background: radial-gradient(closest-side, var(--lilac), transparent); animation: drift2 34s ease-in-out infinite alternate; }
.blob.b3 { left: 5vmax; bottom: -30vmax; background: radial-gradient(closest-side, var(--peach), transparent); animation: drift3 31s ease-in-out infinite alternate; }
.blob.b4 { right: -8vmax; bottom: -26vmax; background: radial-gradient(closest-side, var(--mint), transparent); animation: drift1 37s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate3d(12vmax, 9vmax, 0) scale(1.1); } }
@keyframes drift2 { to { transform: translate3d(-14vmax, 6vmax, 0) scale(.92); } }
@keyframes drift3 { to { transform: translate3d(10vmax, -8vmax, 0) scale(1.08); } }

/* ---------- glass panel ---------- */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
}
/* specular highlight that follows the pointer (set by JS via --mx/--my) */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 60%);
  opacity: .9;
}
/* bright rim: strong top-left and bottom-right, clear between */
.glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,1), rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass--sm { border-radius: var(--r-md); }
.glass--pill { border-radius: var(--r-pill); }
.glass--text { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); }

/* Chromium-only refraction (JS adds .refract-ok after feature detection) */
.refract-ok .refract {
  -webkit-backdrop-filter: url(#refract) blur(6px) saturate(160%);
  backdrop-filter: url(#refract) blur(6px) saturate(160%);
}
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(5px) saturate(190%); backdrop-filter: blur(5px) saturate(190%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.95), inset 0 -8px 18px rgba(79,91,255,.18), 0 18px 40px -14px rgba(79,91,255,.35);
  border: 1px solid rgba(255,255,255,.85);
  animation: bob 7s ease-in-out infinite alternate;
}
@keyframes bob { to { transform: translate3d(0, -14px, 0) rotate(4deg); } }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(20,20,43,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .45s var(--spring), box-shadow .3s, background .2s, opacity .2s;
}
.btn--accent { --bg: var(--accent); box-shadow: 0 10px 28px -10px rgba(79,91,255,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--glass { --bg: rgba(255,255,255,.55); --fg: var(--ink); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .7s linear infinite; display: none; }
.btn[data-loading] .spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .spring:not(:disabled):hover { transform: scale(1.02); }
}
.spring:not(:disabled):active { transform: scale(.98); transition-duration: .15s; }

/* ---------- inputs ---------- */
.input {
  width: 100%; min-height: 52px; padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid rgba(20,20,43,.18); background: rgba(255,255,255,.85); color: var(--ink);
  font: 400 17px/1.2 var(--font-body);
  box-shadow: inset 0 1px 2px rgba(20,20,43,.06);
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--ink-3); }
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: #c4281c; }

/* ---------- small bits ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.7); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 #fff;
  font: 500 14px/1 var(--font-body); color: var(--ink-2);
}
.kbd { font: 600 13px/1 var(--font-mono); padding: 5px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; color: var(--ink); }
.sketch-underline { background: linear-gradient(var(--coral), var(--coral)) 0 100% / 100% 4px no-repeat; padding-bottom: 2px; }

/* ---------- fallbacks ---------- */
/* No backdrop-filter, or the user asks for less transparency: solid white panels with a hairline. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass--text, .orb, .btn--glass { background: var(--glass-bg-solid) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--text, .btn--glass, .pill { background: var(--glass-bg-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--line); box-shadow: none; }
  .glass::before, .glass::after { display: none; }
  .orb { display: none; }
}
/* Same thing, forceable on a subtree (used by /styleguide to show both modes side by side). */
[data-transparency="reduce"] .glass, [data-transparency="reduce"] .glass--text, [data-transparency="reduce"] .btn--glass, [data-transparency="reduce"] .pill {
  background: var(--glass-bg-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--line); box-shadow: none;
}
[data-transparency="reduce"] .glass::before, [data-transparency="reduce"] .glass::after { display: none; }

@media (prefers-contrast: more) {
  :root { --ink-2: #2b2b45; --ink-3: #40405e; --glass-border: rgba(20,20,43,.55); --line: rgba(20,20,43,.5); }
  .glass { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--ink); }
  .glass::before, .glass::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .blob, .orb { animation: none !important; }
}