/* CueBlu app styles. Same design tokens as cueblu.com. No framework, no external files. */

/* Inter (SIL Open Font License, see fonts/OFL.txt), served from this app. Variable font: weights 400-800. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-alt: #0d0d10;
  --surface: #111114;
  --surface-2: #141418;
  --border: #1f1f25;
  --border-strong: #2a2a32;
  --divider: #17171c;
  --text: #f4f4f5;
  --text-strong: #fafafa;
  --muted: #a1a1aa;
  --subtle: #8b8b94;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-line: #4f86f7;
  --accent-text: #7aa7ff;
  --accent-soft: rgba(79, 134, 247, .12);
  --amber: #f5b454;
  --error: #f87171;
  --radius: 1rem;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #a9c6ff; }
h1, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 0.1875rem; border-radius: 0.375rem; }

.skip-link {
  position: absolute; left: 1rem; top: -3.75rem; z-index: 20;
  background: var(--accent); color: #fff; padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-weight: 600;
}
.skip-link:focus { top: 0.75rem; color: #fff; }

.wrap { max-width: 75rem; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .wrap { padding: 0 1rem; } }

.header { border-bottom: 1px solid var(--divider); }
.header .wrap { height: 4.25rem; display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.logo:hover { color: var(--text); }
.logo .blu { color: var(--accent-text); }
.badge {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .08em; color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid rgba(79, 134, 247, .3); border-radius: 62.4375rem; padding: 0.125rem 0.5rem;
}

main { flex: 1; }
.placeholder { max-width: 36rem; margin: 0 auto; padding: 6rem 0; display: flex; flex-direction: column; gap: 1rem; text-align: center; }
.placeholder h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-strong); }
.placeholder p { color: var(--muted); line-height: 1.6; }

.footer { border-top: 1px solid var(--divider); }
.footer .wrap { padding-top: 2rem; padding-bottom: 2.5rem; }
.footer p { font-size: 0.875rem; color: var(--subtle); }