/* ==========================================================================
   global.css — design tokens + shared base
   Shane Parreco personal site
   --------------------------------------------------------------------------
   Load this ONCE per page, before any component stylesheet.
   Every custom class is namespaced `sp-` so nothing collides with
   WordPress, Elementor or a theme.
   ========================================================================== */

:root {
  /* ---- Colour: the night-to-dawn climb ------------------------------- */
  --sp-c-night:      #070A14;  /* page floor, darkest                     */
  --sp-c-deep:       #0B1B2B;  /* near ridges                             */
  --sp-c-ridge:      #15314A;  /* mid ridges                              */
  --sp-c-afterglow:  #27506B;  /* glow at the horizon                     */
  --sp-c-mist:       #2A5A78;  /* valley haze, always low opacity         */
  --sp-c-dawn:       #3E5C70;  /* lower sections lighten toward this      */

  /* ---- Colour: light sources ----------------------------------------- */
  --sp-c-lamp:       #FFC46B;  /* warm: places things get made            */
  --sp-c-beacon:     #8FE3C8;  /* cool: places he goes                    */

  /* ---- Colour: text and lines ---------------------------------------- */
  --sp-c-bright:     #F4F9FD;
  --sp-c-text:       #DDE6F2;
  --sp-c-muted:      #9CB3C6;
  --sp-c-dim:        #7E9AB0;
  --sp-c-faint:      #5E7488;
  --sp-c-line:       #1C3246;
  --sp-c-line-soft:  rgba(143, 227, 200, 0.16);
  --sp-c-panel:      rgba(8, 16, 28, 0.92);

  /* ---- Type ----------------------------------------------------------- */
  --sp-font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --sp-text-2xs:  0.625rem;   /* 10px — waypoint sublabels               */
  --sp-text-xs:   0.6875rem;  /* 11px — eyebrows, nav                    */
  --sp-text-sm:   0.8125rem;  /* 13px                                     */
  --sp-text-base: 1rem;
  --sp-text-md:   1.0625rem;
  --sp-text-lg:   1.3125rem;
  --sp-text-xl:   1.75rem;
  --sp-text-2xl:  2.25rem;
  --sp-text-hero: clamp(2.25rem, 5.2vw, 4.375rem);

  --sp-tracking-wide: 0.16em;  /* all small caps labels                   */
  --sp-leading-tight: 1.06;
  --sp-leading-body:  1.65;

  /* ---- Space (8px base) ------------------------------------------------ */
  --sp-space-1: 0.25rem;
  --sp-space-2: 0.5rem;
  --sp-space-3: 0.75rem;
  --sp-space-4: 1rem;
  --sp-space-5: 1.5rem;
  --sp-space-6: 2rem;
  --sp-space-7: 2.75rem;
  --sp-space-8: 3.5rem;
  --sp-space-9: 5rem;
  --sp-space-10: 7rem;

  --sp-gutter: clamp(1.25rem, 4vw, 2rem);
  --sp-measure: 68ch;
  --sp-max:    1240px;

  /* ---- Shape ----------------------------------------------------------- */
  --sp-radius-sm: 2px;
  --sp-radius:    4px;
  --sp-radius-lg: 8px;

  /* ---- Motion ---------------------------------------------------------- */
  --sp-dur-fast:  160ms;
  --sp-dur:       320ms;
  --sp-dur-slow:  900ms;
  --sp-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --sp-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Focus ----------------------------------------------------------- */
  --sp-focus-ring: 2px solid var(--sp-c-beacon);
  --sp-focus-offset: 3px;
}

/* --------------------------------------------------------------------------
   Breakpoints (documented here; CSS variables cannot be used in media
   queries, so these numbers are repeated literally in component files)
   --------------------------------------------------------------------------
     sm   480px   large phone
     md   768px   tablet
     lg   900px   terrain switches from map mode to list mode BELOW this
     xl  1200px
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Base — deliberately minimal so it never fights a WordPress theme.
   Scoped to .sp-page and the sp- components rather than bare elements.
   ========================================================================== */

.sp-page {
  margin: 0;
  background: var(--sp-c-night);
  color: var(--sp-c-text);
  font-family: var(--sp-font-display);
  font-weight: 300;
  line-height: var(--sp-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sp-page *,
.sp-page *::before,
.sp-page *::after { box-sizing: border-box; }

.sp-page img,
.sp-page svg { display: block; max-width: 100%; }

.sp-page a { color: inherit; }

/* ---- Shared primitives ---------------------------------------------- */

.sp-shell {
  width: 100%;
  max-width: var(--sp-max);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.sp-label {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-xs);
  letter-spacing: var(--sp-tracking-wide);
  text-transform: uppercase;
  font-weight: 400;
}

.sp-rule {
  flex: 1;
  height: 1px;
  background: var(--sp-c-line);
  border: 0;
  margin: 0;
}

.sp-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  margin-bottom: var(--sp-space-6);
}

/* Visible only to assistive technology */
.sp-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.sp-skip {
  position: absolute;
  left: var(--sp-space-4);
  top: -100px;
  z-index: 999;
  background: var(--sp-c-lamp);
  color: var(--sp-c-night);
  padding: var(--sp-space-3) var(--sp-space-5);
  border-radius: var(--sp-radius);
  transition: top var(--sp-dur-fast) var(--sp-ease);
}
.sp-skip:focus { top: var(--sp-space-4); }

/* One consistent focus treatment everywhere */
.sp-page :focus-visible {
  outline: var(--sp-focus-ring);
  outline-offset: var(--sp-focus-offset);
  border-radius: var(--sp-radius-sm);
}

/* ==========================================================================
   Reduced motion — global opt-out. Components add their own rules too.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sp-page *,
  .sp-page *::before,
  .sp-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}