/* lalle design system */
:root {
  --canvas: oklch(0.9776 0.009 78.28);
  --ink: oklch(0.2161 0.0061 56.04);
  --muted: oklch(0.5491 0.0195 61.71);
  --apricot: oklch(0.7414 0.1446 53.16);
  --apricot-deep: oklch(0.62 0.15 48);
  --apricot-tint: oklch(0.9497 0.0309 67.44);
  --lilac: oklch(0.8723 0.0804 313.37);
  --lilac-deep: oklch(0.55 0.12 313);
  --lilac-tint: oklch(0.9427 0.031 317.71);
  --signal: oklch(0.6019 0.1869 24.73);
  --oat: oklch(0.9373 0.0171 76.11);
  --line: oklch(0.88 0.015 70);
  --glass-rgb: 255 255 255;
  --shadow-rgb: 70 50 40;
  --on-accent: oklch(0.2161 0.0061 56.04);

  --glass-bg: linear-gradient(160deg, rgb(var(--glass-rgb) / 0.65), rgb(var(--glass-rgb) / 0.40));
  --glass-border: rgb(var(--glass-rgb) / 0.6);
  --glass-shadow: inset 0 1px 0 rgb(var(--glass-rgb) / 0.6), 0 20px 50px -20px rgb(var(--shadow-rgb) / 0.15);

  --r-card: 20px;
  --r-sheet: 24px;
  --r-pill: 999px;

  --font-head: "Outfit", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* night: the 3am palette. Dusky plum, warm cream type, glows turned low. */
:root[data-theme="night"] {
  --canvas: oklch(0.215 0.03 298);
  --ink: oklch(0.93 0.016 78);
  --muted: oklch(0.74 0.025 300);
  --apricot: oklch(0.76 0.13 56);
  --apricot-deep: oklch(0.8 0.12 60);
  --apricot-tint: oklch(0.34 0.055 50);
  --lilac: oklch(0.66 0.1 313);
  --lilac-deep: oklch(0.8 0.08 313);
  --lilac-tint: oklch(0.31 0.05 312);
  --oat: oklch(0.3 0.025 300);
  --line: oklch(0.36 0.03 300);
  --glass-rgb: 74 62 96;
  --shadow-rgb: 8 4 18;
  --glass-border: rgb(255 255 255 / 0.09);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 60px -24px rgb(8 4 18 / 0.6);
  color-scheme: dark;
}
:root[data-theme="night"] body::before { opacity: 0.5; filter: saturate(0.8); }
:root[data-theme="night"] body::after { filter: saturate(0.9) brightness(0.7); }
.night-sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s ease;
}
:root[data-theme="night"] .night-sky { opacity: 1; }
.night-sky i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: oklch(0.95 0.03 80);
  animation: twinkle var(--d, 5s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* the switch to night spreads out from the moon you tapped */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: dusk 0.9s cubic-bezier(.4,0,.2,1); }
@keyframes dusk {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0%)); }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0%)); }
}

/* canvas wash: apricot top-left, lilac top-right and bottom-left.
   The glows breathe slowly, a 10 second cycle (about six calm breaths a minute),
   apricot filling as lilac eases out. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}
body::before {
  background: radial-gradient(52vmax 44vmax at 10vmax 10vmax, color-mix(in oklch, var(--apricot) 28%, transparent), transparent 70%);
  transform-origin: 10vmax 10vmax;
  animation: breathe-in 10s ease-in-out infinite;
}
body::after {
  background:
    radial-gradient(46vmax 40vmax at calc(100% - 10vmax) 12vmax, color-mix(in oklch, var(--lilac) 44%, transparent), transparent 70%),
    radial-gradient(44vmax 42vmax at 10vmax calc(100% - 10vmax), color-mix(in oklch, var(--lilac) 36%, transparent), transparent 70%);
  animation: breathe-out 10s ease-in-out infinite;
}
@keyframes breathe-in {
  0%, 100% { transform: scale(1); opacity: 0.78; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes breathe-out {
  0%, 100% { transform: scale(1.06); opacity: 1; }
  50% { transform: scale(0.98); opacity: 0.8; }
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--apricot-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* glass */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(36px) saturate(150%);
  backdrop-filter: blur(36px) saturate(150%);
  border-radius: var(--r-card);
}
.sheet { border-radius: var(--r-sheet); }

/* glass catches the light where you touch or point */
:where(.glass) { position: relative; }
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.55), transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .5s ease;
}
.glass.lit::after { opacity: 1; transition-duration: .15s; }

/* a soft squish for things you press */
@keyframes boing {
  0% { transform: scale(1); }
  30% { transform: scale(0.86, 0.8); }
  55% { transform: scale(1.12, 1.08); }
  75% { transform: scale(0.97, 1); }
  100% { transform: scale(1); }
}
.boing { animation: boing .5s cubic-bezier(.3,.7,.4,1); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--apricot);
  color: var(--on-accent);
  box-shadow: 0 12px 28px -14px color-mix(in oklch, var(--apricot-deep) 80%, transparent);
}
.btn-primary:hover { background: color-mix(in oklch, var(--apricot) 88%, white); }
.btn-ghost {
  background: rgb(var(--glass-rgb) / 0.55);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgb(var(--glass-rgb) / 0.6);
}
.btn-ghost:hover { background: rgb(var(--glass-rgb) / 0.85); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 15px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  background: rgb(var(--glass-rgb) / 0.6);
  border: 1px solid var(--glass-border);
}
.chip-apricot { background: var(--apricot-tint); border-color: transparent; }
.chip-lilac { background: var(--lilac-tint); border-color: transparent; }

/* wordmark */
.wordmark {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.wordmark .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--apricot);
  display: inline-block;
  transform: translateY(-1px);
}

/* night mode switch: a moon that becomes a sun */
.theme-toggle {
  width: 40px; height: 40px; padding: 0; flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgb(var(--glass-rgb) / 0.55);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  transition: background-color .2s, transform .3s;
}
.theme-toggle:hover { background: rgb(var(--glass-rgb) / 0.85); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle svg { width: 20px; height: 20px; transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.theme-toggle .sun { display: none; }
:root[data-theme="night"] .theme-toggle .moon { display: none; }
:root[data-theme="night"] .theme-toggle .sun { display: block; }
.theme-toggle[aria-pressed="true"] svg { transform: rotate(-30deg); }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--canvas);
  font-weight: 500;
  font-size: 15px;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 50;
  max-width: calc(100% - 32px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}