/* ============================================================================
   GESDA ANTICIPATION EXPERIENCES — base
   Page-wide rules every section relies on: the page, the skip link, the
   buttons, the band themes, the shared headings and the open-item markers.
   Built against designv2.1.md. Loads after fonts.css and tokens.css.

   designv2.1 §0, answered for the whole page:
   1. Surface class — A, landing page.
   2. Theme — light page. The alumni band, close and footer are local
      dark theme contexts (.theme-brand, .theme-dark), each re-declaring the
      full §10.4 token set, so .btn and every text colour follow them.
   3. Analytical claim — no. The hub is a decorative figure and the Radar
      canvas reproduces a published GESDA figure, so §3.3 / §15 do not bind.

   Band rhythm (§11.1): the hero, a local dark context on the aurora (the
   close's, mirrored) → band-tinted offerings → the figure sections (3 to 5)
   and the reach map are one white canvas, joined by the conduit
   (section 5's four lines, running
   down to the alumni band) → band-brand, a rounded insert that opens
   downwards → band-canvas → band-tinted → mesh close → band-deep footer.

   Load order (index.html): fonts, tokens, this file, the components
   (components/), then one stylesheet per section in page order
   (sections/). Each section's recorded design-system exceptions are listed
   in its own stylesheet's header.

   Naming: flat kebab-case, BEM-style elements. Every colour is a token.
   ========================================================================= */

html { scroll-padding-top: calc(var(--layout-topbar) + var(--space-4)); }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-action-primary); color: var(--color-on-action);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }
.skip-link:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

/* --- buttons (§10.1), all five states, on a light canvas ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 var(--space-8);
  border: 0; border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--type-button);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast), box-shadow var(--motion-fast);
}
.btn:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.btn[aria-disabled="true"] {
  background: var(--color-disabled); color: var(--color-on-disabled);
  box-shadow: none; cursor: not-allowed;
}

.btn--primary { background: var(--color-action-primary); color: var(--color-on-action); }
.btn--primary:hover  { background: var(--color-action-primary-hover); box-shadow: var(--shadow-sm); }
.btn--primary:active { background: var(--color-action-primary-active); box-shadow: none; }

.btn--secondary {
  background: transparent;
  color: var(--color-action-primary);
  box-shadow: inset 0 0 0 1px var(--color-action-primary);
}
.btn--secondary:hover  { background: var(--color-canvas-tinted); }
.btn--secondary:active { background: var(--color-canvas-pressed); }

/* The arrow after a label that says the link leaves the page (lib/render.js). */
.btn__offsite {
  width: 10px; height: 10px; margin-left: var(--space-2);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* button-primary-gradient: one per page, on "Request Experience". White holds
   6.1:1 across the whole sweep (§3.7). */
.btn--gradient { background: var(--gradient-signature); color: var(--color-on-action); }
.btn--gradient:hover  { filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn--gradient:active { filter: none; box-shadow: none; }

/* ============================================================================
   SHARED
   ========================================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap {
  max-width: var(--layout-container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
  box-sizing: border-box;
}

/* §10.4 — a band is a complete local theme context. */
.theme-dark,
.theme-brand {
  --color-canvas:                var(--color-canvas-dark);
  --color-canvas-tinted:         var(--color-wash-on-band);
  --color-canvas-pressed:        var(--color-wash-on-band-strong);
  --color-hairline:              var(--color-hairline-on-dark);
  --color-hairline-soft:         var(--color-hairline-on-band-soft);
  --color-disabled:              var(--color-wash-on-band);
  --color-on-disabled:           var(--color-on-disabled-dark);
  --color-ink:                   var(--color-ink-on-dark);
  --color-body:                  var(--color-body-on-dark);
  --color-muted:                 var(--color-muted-on-dark);
  --color-action-primary:        var(--color-white);
  --color-action-primary-hover:  var(--purple-050);
  --color-action-primary-active: var(--purple-100);
  --color-on-action:             var(--purple-900);
  --color-focus-ring:            var(--color-focus-ring-dark);
  --shadow-sm: none;   /* §3.6: no shadows on dark */
  --shadow-md: none;
  background: var(--color-canvas);
  color: var(--color-body);
}
/* band-brand: purple-300 drops to 3.7:1 on purple-700, so muted text takes
   purple-100 (6.9:1) and the focus ring goes white. */
.theme-brand {
  --color-canvas:     var(--purple-700);
  --color-muted:      var(--color-body-on-dark);
  --color-focus-ring: var(--color-white);
}

.kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-action-primary);
}
.theme-dark .kicker,
.theme-brand .kicker { color: var(--color-muted); }

.section-head { max-width: 720px; margin: 0 0 var(--space-12); }
.section-head__title,
.reach__title,
.alumni__title,
.close__title {
  margin: 0;
  font-size: var(--type-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.btn--sm { min-height: 44px; padding: 0 var(--space-6); font-size: var(--type-body-sm); }

/* The placeholder tile: says what it stands in for, so a reviewer can tell a
   missing asset from a design decision. */
.ph {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  box-sizing: border-box;
  background-color: var(--purple-800);
  background-image: repeating-linear-gradient(45deg, var(--color-hairline-on-band-soft) 0 1px, transparent 1px var(--space-4));
}
.ph::after {
  content: attr(data-ph);
  max-width: 34ch;
  font-family: var(--font-accent);
  font-size: var(--type-caption);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--purple-100);
}

/* The open-item marker (v2): anything that blocks copy is marked rather than
   quietly filled in. Soft tone on dark, per the tone rule. */
.todo {
  border-bottom: 2px dotted var(--color-warning);
  color: var(--color-warning);
  font-weight: 600;
  cursor: help;
}
.theme-dark .todo,
.theme-brand .todo { color: var(--p4-orange); border-bottom-color: var(--p4-orange); }

@media (max-width: 719px) {
  .wrap { padding: 0 var(--space-4); }
}