/* =========================================================================
   PicoSonde — base.css  (shared design system: tokens, reset, components, a11y)
   Owned by the lead. Page-specific CSS lives in gate.css / site.css / legal.css.
   Do not duplicate these rules in page CSS — extend with new classes instead.
   ========================================================================= */

/* ---- Design tokens ----------------------------------------------------- */
:root {
  /* Brand palette: night sky -> daytime sky, with a hot-air-balloon flame accent */
  --ps-navy:      #0b1f3a;   /* deep night sky / primary dark */
  --ps-navy-2:    #122c52;
  --ps-blue:      #2f80ed;   /* sky blue / primary action */
  --ps-blue-600:  #1c66c9;
  --ps-cyan:      #36c5f0;   /* telemetry / data accent */
  --ps-amber:     #ff8c42;   /* balloon flame / preorder accent */
  --ps-amber-600: #f2701f;

  /* Neutrals (light theme) */
  --ps-bg:        #f6f9fc;
  --ps-surface:   #ffffff;
  --ps-surface-2: #eef3f9;
  --ps-border:    #d9e2ec;
  --ps-text:      #14202e;
  --ps-muted:     #56697d;

  /* Effects */
  --ps-shadow:    0 1px 2px rgba(11,31,58,.06), 0 8px 24px rgba(11,31,58,.08);
  --ps-radius:    14px;
  --ps-radius-sm: 9px;

  /* Type */
  --ps-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ps-font-head: "Space Grotesk", var(--ps-font);

  /* Layout */
  --ps-maxw: 1120px;
  --ps-gutter: clamp(18px, 4vw, 48px);

  /* Gradients */
  --ps-hero-grad: radial-gradient(1200px 600px at 70% -10%, #1d4f9c 0%, transparent 55%),
                  linear-gradient(160deg, var(--ps-navy) 0%, var(--ps-navy-2) 60%, #0a2547 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ps-bg:        #0a1426;
    --ps-surface:   #0f1d34;
    --ps-surface-2: #142845;
    --ps-border:    #243a5e;
    --ps-text:      #e8eef6;
    --ps-muted:     #9fb2cc;
    --ps-shadow:    0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.45);
  }
}

/* ---- Reset / base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--ps-font);
  font-size: clamp(16px, 1rem + .15vw, 18px);
  line-height: 1.65;
  color: var(--ps-text);
  background: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--ps-font-head); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
p  { margin: 0 0 1em; }
a  { color: var(--ps-blue); text-underline-offset: 3px; }
a:hover { color: var(--ps-blue-600); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 700; }

/* ---- Accessibility utilities ------------------------------------------ */
/* Visible focus for keyboard users everywhere */
:focus-visible {
  outline: 3px solid var(--ps-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  background: var(--ps-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }
/* Screen-reader-only text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Layout ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--ps-maxw);
  margin-inline: auto;
  padding-inline: var(--ps-gutter);
}
.section { padding-block: clamp(48px, 7vw, 96px); }
.section--tint { background: var(--ps-surface-2); }
.lede { font-size: 1.15em; color: var(--ps-muted); max-width: 60ch; }
.eyebrow {
  display: inline-block;
  font-family: var(--ps-font-head);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ps-blue);
  margin-bottom: .6em;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--ps-cyan); } }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--ps-font-head); font-weight: 600; font-size: 1rem;
  padding: .75em 1.4em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ps-blue); color: #fff; }
.btn--primary:hover { background: var(--ps-blue-600); color: #fff; }
.btn--accent { background: var(--ps-amber); color: #2a1300; }
.btn--accent:hover { background: var(--ps-amber-600); color: #2a1300; }
.btn--ghost { background: transparent; color: var(--ps-text); border-color: var(--ps-border); }
.btn--ghost:hover { border-color: var(--ps-blue); color: var(--ps-blue); }
.btn--on-dark { color: #fff; border-color: rgba(255,255,255,.5); }
.btn--on-dark:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* ---- Cards ------------------------------------------------------------- */
.card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  padding: clamp(20px, 3vw, 32px);
}

/* ---- Site header / nav (shared by full site + legal pages) ------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ps-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ps-border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .55em; font-family: var(--ps-font-head); font-weight: 700; font-size: 1.15rem; color: var(--ps-text); text-decoration: none; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.site-nav a { color: var(--ps-text); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--ps-blue); }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-nav { gap: 14px; }
  .site-nav .nav-link { display: none; }
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--ps-navy);
  color: #c9d6e8;
  padding-block: clamp(36px, 5vw, 56px);
}
.site-footer a { color: #cfe0f5; }
.site-footer a:hover { color: #fff; }
.site-footer__grid { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.site-footer small { color: #8fa6c4; }

/* ---- Accessibility controls (toggles persisted via a11y.js) ------------ */
html.a11y-large-text { font-size: 118.75%; }           /* ~19px base */
html.a11y-contrast {
  --ps-bg:      #ffffff;
  --ps-surface: #ffffff;
  --ps-surface-2:#ffffff;
  --ps-border:  #000000;
  --ps-text:    #000000;
  --ps-muted:   #1a1a1a;
  --ps-blue:    #0b4fbf;
  --ps-blue-600:#08347d;
}
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .btn { border-color: #000 !important; }

.a11y { position: relative; }
.a11y__btn {
  display: inline-flex; align-items: center; gap: .4em;
  background: transparent; border: 1px solid var(--ps-border);
  color: var(--ps-text); border-radius: 999px;
  padding: .4em .8em; font: inherit; font-size: .9rem; cursor: pointer;
}
.a11y__btn:hover { border-color: var(--ps-blue); color: var(--ps-blue); }
.a11y__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; background: var(--ps-surface);
  border: 1px solid var(--ps-border); border-radius: var(--ps-radius-sm);
  box-shadow: var(--ps-shadow); padding: 10px; z-index: 200;
}
.a11y__menu[hidden] { display: none; }
.a11y__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: transparent; border: 0; color: var(--ps-text);
  font: inherit; padding: 9px 8px; border-radius: 7px; cursor: pointer; text-align: left;
}
.a11y__item:hover { background: var(--ps-surface-2); }
.a11y__item[aria-pressed="true"] { color: var(--ps-blue); font-weight: 600; }
.a11y__state { font-size: .85rem; color: var(--ps-muted); }
.a11y__item[aria-pressed="true"] .a11y__state { color: var(--ps-blue); }

/* ---- Email signup form (MailStack) ------------------------------------- */
.signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 480px; }
.signup__input {
  flex: 1 1 220px;
  font: inherit;
  padding: .72em 1em;
  color: var(--ps-text);
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 999px;
}
.signup__input::placeholder { color: var(--ps-muted); }
.signup__status {
  flex-basis: 100%;
  margin: 4px 2px 0;
  font-size: .95rem;
  color: var(--ps-muted);
  min-height: 1.2em;
}
.signup__status.is-error { color: #d6452c; }
@media (prefers-color-scheme: dark) { .signup__status.is-error { color: #ff9b86; } }

/* ---- Concept-rendering note under product images ----------------------- */
.render-note { margin: 10px 2px 0; font-size: .82rem; font-style: italic; color: var(--ps-muted); }