/* Sleepy — public site shared chrome */

:root {
  /* dark first */
  --bg:        oklch(9% 0.018 252);
  --bg-2:      oklch(12% 0.022 252);
  --surface:   oklch(15% 0.024 252);
  --surface-2: oklch(19% 0.026 252);
  --fg:        oklch(96% 0.006 250);
  --fg-2:      oklch(82% 0.012 250);
  --muted:     oklch(60% 0.018 250);
  --muted-2:   oklch(44% 0.018 250);
  --border:    oklch(22% 0.022 252);
  --border-2:  oklch(28% 0.024 252);
  --accent:    oklch(70% 0.155 258);
  --accent-2:  oklch(76% 0.13 215);
  --grad: linear-gradient(135deg, oklch(70% 0.18 285) 0%, oklch(72% 0.13 215) 100%);
  --grad-soft: linear-gradient(135deg, oklch(70% 0.18 285 / 0.18) 0%, oklch(72% 0.13 215 / 0.18) 100%);

  --font-d: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-b: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        oklch(98% 0.004 250);
  --bg-2:      oklch(96% 0.006 250);
  --surface:   oklch(100% 0 0);
  --surface-2: oklch(97% 0.005 250);
  --fg:        oklch(17% 0.018 252);
  --fg-2:      oklch(30% 0.018 252);
  --muted:     oklch(48% 0.014 250);
  --muted-2:   oklch(62% 0.012 250);
  --border:    oklch(92% 0.006 250);
  --border-2:  oklch(86% 0.008 250);
  --accent:    oklch(50% 0.18 265);
  --accent-2:  oklch(54% 0.14 215);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-b);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

/* ── Top nav ─────────────────────────────────────────────────────────── */
.b-nav {
  position: sticky; top: 0; z-index: 60;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px clamp(20px, 5vw, 56px);
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.b-nav > .b-brand { justify-self: start; }
.b-nav > .b-nav-links { justify-self: center; }
.b-nav > .b-nav-right { justify-self: end; }
.b-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-d); font-weight: 700;
  font-size: 17px; letter-spacing: -0.02em; color: var(--fg);
}
.b-brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px oklch(60% 0.18 270 / 0.35);
  position: relative; overflow: hidden;
}
.b-brand-mark::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 22% 78%, oklch(100% 0 0 / 0.85) 0%, oklch(100% 0 0 / 0) 26%),
    radial-gradient(circle at 70% 28%, oklch(100% 0 0 / 0.6) 0%, oklch(100% 0 0 / 0) 8%);
}
.b-nav-right { display: flex; align-items: center; gap: 8px; }
.b-nav-links { display: flex; gap: 24px; }
.b-nav-link {
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color 0.15s;
}
.b-nav-link:hover { color: var(--fg); }
.b-nav-link.is-active { color: var(--fg); }
.b-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px;
  font-family: var(--font-d); font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer; transition: opacity 0.15s, background 0.15s;
}
.b-btn:hover { opacity: 0.92; }
.b-btn-solid { background: var(--fg); color: var(--bg); }
.b-btn-ghost { background: transparent; border-color: var(--border-2); color: var(--fg); }
.b-btn-grad {
  background: var(--grad); color: oklch(98% 0.004 250);
  box-shadow: 0 8px 28px oklch(60% 0.18 270 / 0.4);
}

/* theme toggle */
.b-theme {
  display: inline-flex; padding: 3px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface);
}
.b-theme button {
  width: 28px; height: 26px; border-radius: 6px;
  border: 0; background: transparent; color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}
.b-theme button[aria-pressed="true"] { background: var(--border-2); color: var(--fg); }

/* mobile hamburger */
.b-nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.b-nav-toggle svg { width: 18px; height: 18px; }
.b-nav-toggle .x { display: none; }
.b-nav[data-mobile-open="true"] .b-nav-toggle .x { display: block; }
.b-nav[data-mobile-open="true"] .b-nav-toggle .burger { display: none; }

.b-nav-drawer {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 12px clamp(20px, 5vw, 56px) 18px;
  flex-direction: column;
  gap: 2px;
  z-index: 65;
}
.b-nav[data-mobile-open="true"] .b-nav-drawer { display: flex; }
.b-nav-drawer a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px; font-weight: 500;
  color: var(--fg-2);
}
.b-nav-drawer a:hover,
.b-nav-drawer a.is-active { background: var(--surface); color: var(--fg); }
.b-nav-drawer .b-btn { margin-top: 8px; align-self: stretch; justify-content: center; }

.b-nav-drawer-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.b-nav-drawer-controls .b-lang,
.b-nav-drawer-controls .b-theme { flex-shrink: 0; }

@media (max-width: 900px) {
  .b-nav { grid-template-columns: 1fr auto; }
  .b-nav-toggle { display: inline-flex; }
  .b-nav > .b-nav-links { display: none; }
  .b-nav-right > .b-btn,
  .b-nav-right > .b-lang,
  .b-nav-right > .b-theme { display: none; }
}

/* language picker */
.b-lang {
  position: relative;
  display: inline-flex;
}
.b-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg-2);
  font-family: var(--font-m); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.b-lang-btn:hover { color: var(--fg); }
.b-lang-btn svg { width: 11px; height: 11px; opacity: 0.7; }
.b-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 132px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.35);
  display: none;
  z-index: 70;
}
.b-lang[data-open="true"] .b-lang-menu { display: block; }
.b-lang-menu button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 7px;
  font-family: var(--font-d); font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  text-align: left; cursor: pointer;
}
.b-lang-menu button:hover { background: var(--surface-2); color: var(--fg); }
.b-lang-menu button[aria-pressed="true"] { background: var(--border-2); color: var(--fg); }
.b-lang-menu button .flag { font-size: 14px; line-height: 1; }
.b-lang-menu button .code {
  margin-left: auto;
  font-family: var(--font-m); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--muted-2);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.b-foot {
  border-top: 1px solid var(--border);
  padding: 48px clamp(20px, 5vw, 56px) 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  background: var(--bg);
}
.b-foot-brand { max-width: 320px; }
.b-foot-tag {
  margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.6;
}
.b-foot-col h4 {
  font-family: var(--font-m); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 16px;
}
.b-foot-col a {
  display: block; padding: 4px 0;
  font-size: 14px; color: var(--fg-2);
  transition: color 0.15s;
}
.b-foot-col a:hover { color: var(--fg); }
.b-foot-bottom {
  grid-column: 1 / -1;
  margin-top: 12px; padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--muted-2);
  font-family: var(--font-m); letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .b-foot { grid-template-columns: 1fr 1fr; }
  .b-foot-brand { grid-column: 1 / -1; }
  .b-foot-bottom { flex-direction: column; gap: 12px; }
}

/* ── Star field (decorative) ─────────────────────────────────────────── */
.b-stars {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  mask-image: linear-gradient(to bottom, oklch(0% 0 0) 0%, oklch(0% 0 0) 70%, transparent 100%);
}
.b-stars::before, .b-stars::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, oklch(96% 0 0 / 0.85), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, oklch(96% 0 0 / 0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 48% 22%, oklch(96% 0 0 / 0.9), transparent 60%),
    radial-gradient(1px 1px at 62% 78%, oklch(96% 0 0 / 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 36%, oklch(96% 0 0 / 0.95), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, oklch(96% 0 0 / 0.5), transparent 60%),
    radial-gradient(1px 1px at 36% 86%, oklch(96% 0 0 / 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 44%, oklch(96% 0 0 / 0.7), transparent 60%);
}
.b-stars::after {
  background-image:
    radial-gradient(1px 1px at 21% 31%, oklch(96% 0 0 / 0.4), transparent 60%),
    radial-gradient(1px 1px at 55% 12%, oklch(96% 0 0 / 0.55), transparent 60%),
    radial-gradient(1px 1px at 72% 56%, oklch(96% 0 0 / 0.35), transparent 60%),
    radial-gradient(1px 1px at 92% 22%, oklch(96% 0 0 / 0.55), transparent 60%);
  opacity: 0.8;
}
:root[data-theme="light"] .b-stars { display: none; }