/* Sky Pal — the coming-soon page. Generated by scripts/build_site.py from
   .claude/design-kit/skypal/: change the kit, then run it again. */
/* Sky Pal — generated from tokens.json */
:root, [data-theme="light"] {
  color-scheme: light;
  --sp-ground: #fff8ec;
  --sp-ink: #14213d;
  --sp-link-hover: #1f3a93;
  --sp-arc-1: #1f3a93;
  --sp-arc-2: #5c7aea;
  --sp-arc-3: #a9b9f5;
  --sp-dot-warm: #f25c3b;
  --sp-dot-sun: #f7b500;
}
[data-theme="dark"] {
  color-scheme: dark;
  --sp-ground: #0f1a38;
  --sp-ink: #fff8ec;
  --sp-link-hover: #c7d1fa;
  --sp-arc-1: #5c7aea;
  --sp-arc-2: #8fa3f2;
  --sp-arc-3: #c7d1fa;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --sp-ground: #0f1a38;
    --sp-ink: #fff8ec;
    --sp-link-hover: #c7d1fa;
    --sp-arc-1: #5c7aea;
    --sp-arc-2: #8fa3f2;
    --sp-arc-3: #c7d1fa;
  }
}
:root {
  --sp-space-8: 8px;
  --sp-space-10: 10px;
  --sp-space-12: 12px;
  --sp-space-14: 14px;
  --sp-space-16: 16px;
  --sp-space-20: 20px;
  --sp-space-24: 24px;
  --sp-space-28: 28px;
  --sp-space-32: 32px;
  --sp-space-40: 40px;
  --sp-space-72: 72px;
  --sp-space-96: 96px;
  --sp-font-brand: "Bricolage Grotesque", system-ui, sans-serif;
}
.sp-text-mark { font-family: var(--sp-font-brand); font-size: 22px; line-height: 28px; font-weight: 800; margin: 0; }
.sp-text-mark-wide { font-family: var(--sp-font-brand); font-size: 26px; line-height: 32px; font-weight: 800; margin: 0; }
.sp-text-mark-large { font-family: var(--sp-font-brand); font-size: 44px; line-height: 52px; font-weight: 800; margin: 0; }
.sp-text-name { font-family: var(--sp-font-brand); font-size: 76px; line-height: 76px; font-weight: 800; margin: 0; }
.sp-text-name-wide { font-family: var(--sp-font-brand); font-size: 148px; line-height: 148px; font-weight: 800; margin: 0; }
.sp-text-soon { font-family: var(--sp-font-brand); font-size: 24px; line-height: 30px; font-weight: 400; margin: 0; }
.sp-text-soon-wide { font-family: var(--sp-font-brand); font-size: 34px; line-height: 42px; font-weight: 400; margin: 0; }
.sp-text-body { font-family: var(--sp-font-brand); font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; }
.sp-text-body-wide { font-family: var(--sp-font-brand); font-size: 17px; line-height: 24px; font-weight: 400; margin: 0; }
.sp-text-small { font-family: var(--sp-font-brand); font-size: 14px; line-height: 20px; font-weight: 400; margin: 0; }
/* Sky Pal — bundle.css. Load after tokens.css.
   The prelude is generated by .claude/design-kit/sync_system.py: the text styles as
   font shorthands, and the motion; then the kit. */
:root, .sp-app {
  --sp-text-mark: 800 22px/28px var(--sp-font-brand);
  --sp-text-mark-wide: 800 26px/32px var(--sp-font-brand);
  --sp-text-mark-large: 800 44px/52px var(--sp-font-brand);
  --sp-text-name: 800 76px/76px var(--sp-font-brand);
  --sp-text-name-wide: 800 148px/148px var(--sp-font-brand);
  --sp-text-soon: 400 24px/30px var(--sp-font-brand);
  --sp-text-soon-wide: 400 34px/42px var(--sp-font-brand);
  --sp-text-body: 400 16px/24px var(--sp-font-brand);
  --sp-text-body-wide: 400 17px/24px var(--sp-font-brand);
  --sp-text-small: 400 14px/20px var(--sp-font-brand);
}

/* ===== The Sky Pal kit ====================================================
   The parts of the public coming-soon page, as CSS classes over the Sky Pal tokens.
   A value here is a token; the only literal numbers are stroke widths, letter
   spacing and outline widths. One markup serves both layouts: .sp-page is the phone,
   .sp-page--wide the wide screen.

   A drawing sets data-theme on its root; a page sets none and follows the device. */

/* ---- The ground ---- */
.sp-app {
  box-sizing: border-box;
  background: var(--sp-ground);
  color: var(--sp-ink);
  font: var(--sp-text-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
.sp-app *, .sp-app *::before, .sp-app *::after { box-sizing: border-box; }
.sp-app a { color: var(--sp-ink); }
.sp-app a:hover { color: var(--sp-link-hover); }
.sp-app :focus-visible { outline: 3px solid var(--sp-ink); outline-offset: 2px; }

/* ---- The page: the mark at the top, the shapes and the name in the middle, the line to write to at the foot ---- */
.sp-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto 1fr auto;
  grid-template-areas: "mark" "." "shapes" "title" "." "contact";
  padding: var(--sp-space-32) var(--sp-space-24);
  overflow: hidden;
}
.sp-page--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto 1fr auto;
  grid-template-areas: "mark shapes" ". shapes" "title shapes" ". shapes" "contact shapes";
  padding: 0;
}

/* ---- The mark: the symbol beside the name ---- */
.sp-mark { grid-area: mark; display: flex; align-items: center; gap: var(--sp-space-10); }
.sp-mark__name { font: var(--sp-text-mark); }
.sp-page--wide .sp-mark { gap: var(--sp-space-12); padding: var(--sp-space-72) 0 0 var(--sp-space-96); }
.sp-page--wide .sp-mark__name { font: var(--sp-text-mark-wide); }
.sp-mark--large { gap: var(--sp-space-14); }
.sp-mark--large .sp-mark__name { font: var(--sp-text-mark-large); letter-spacing: -1px; }

/* ---- The symbol: one arc over two dots, in a 64 by 64 box ---- */
.sp-symbol { flex: none; }
.sp-symbol__arc { fill: none; stroke: var(--sp-arc-1); stroke-width: 7; stroke-linecap: round; }
.sp-symbol--fine .sp-symbol__arc { stroke-width: 6; }
.sp-symbol--bold .sp-symbol__arc { stroke-width: 8; }
.sp-dot--warm { fill: var(--sp-dot-warm); }
.sp-dot--sun { fill: var(--sp-dot-sun); }

/* ---- The shapes: the symbol blown up, three arcs dark to light, in a 560 by 560 box ---- */
.sp-shapes { grid-area: shapes; justify-self: center; align-self: center; }
.sp-shapes__arc { fill: none; stroke-width: 30; stroke-linecap: round; }
.sp-shapes__arc--1 { stroke: var(--sp-arc-1); }
.sp-shapes__arc--2 { stroke: var(--sp-arc-2); }
.sp-shapes__arc--3 { stroke: var(--sp-arc-3); }

/* ---- The name and "Coming soon." ---- */
.sp-title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-8);
  margin-top: var(--sp-space-20);
}
.sp-title__name { margin: 0; font: var(--sp-text-name); letter-spacing: -2px; }
.sp-title__soon { margin: 0; font: var(--sp-text-soon); }
.sp-page--wide .sp-title { align-items: flex-start; gap: var(--sp-space-12); margin-top: 0; padding-left: var(--sp-space-96); }
.sp-page--wide .sp-title__name { font: var(--sp-text-name-wide); letter-spacing: -4px; }
.sp-page--wide .sp-title__soon { font: var(--sp-text-soon-wide); }

/* ---- The line to write to ---- */
.sp-contact { grid-area: contact; margin: 0; font: var(--sp-text-body); text-align: center; }
.sp-page--wide .sp-contact { font: var(--sp-text-body-wide); text-align: left; padding: 0 0 var(--sp-space-72) var(--sp-space-96); }

/* ---- The mark sheet: the symbol and the mark at the sizes they are used ---- */
.sp-sheet { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-space-28); padding: var(--sp-space-40); }
.sp-sheet__row { display: flex; align-items: center; gap: var(--sp-space-40); }
.sp-sheet__sizes { display: flex; align-items: center; gap: var(--sp-space-16); font: var(--sp-text-small); }

/* ---- The served page (scripts/build_site.py) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
}
html, body { margin: 0; background: var(--sp-ground); }
.sp-page { min-height: 100vh; min-height: 100svh; }
.sp-shapes { width: 310px; max-width: 100%; height: auto; }
@media (min-width: 1024px) {
  .sp-page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto 1fr auto; grid-template-areas: "mark shapes" ". shapes" "title shapes" ". shapes" "contact shapes"; padding: 0; }
  .sp-page .sp-mark { gap: var(--sp-space-12); padding: var(--sp-space-72) 0 0 var(--sp-space-96); }
  .sp-page .sp-mark__name { font: var(--sp-text-mark-wide); }
  .sp-page .sp-title { align-items: flex-start; gap: var(--sp-space-12); margin-top: 0; padding-left: var(--sp-space-96); }
  .sp-page .sp-title__name { font: var(--sp-text-name-wide); letter-spacing: -4px; }
  .sp-page .sp-title__soon { font: var(--sp-text-soon-wide); }
  .sp-page .sp-contact { font: var(--sp-text-body-wide); text-align: left; padding: 0 0 var(--sp-space-72) var(--sp-space-96); }
  .sp-page .sp-symbol { width: 44px; height: 44px; }
  .sp-page .sp-shapes { width: min(560px, 43.75vw); }
  .sp-page .sp-title__name { font-size: min(148px, 11.5625vw); line-height: 1; }
}