/* =========================================================================
   Still Point Pages, Design Tokens
   Lifted from brand/BRAND-KIT-PLAN.md and brand/_brand-html/(C) brand-guidelines.html
   The palette and type are LOCKED. Layout, motion, and information
   architecture are the only things this site explores.
   ========================================================================= */

:root {
  /* ---- Color: surface & ink ---------------------------------------------- */
  --bg:           #1A1A1A;   /* primary background, charcoal */
  --bg-elev-1:    #222221;   /* slight lift (callout fills, card surfaces) */
  --bg-elev-2:    #2A2A28;   /* second lift (hover, selected nav) */
  --bone:         #ECE8E1;   /* optional light surface, used sparingly */

  --ink:          #F5F5F0;   /* primary text on dark */
  --ink-soft:     #D9D6CE;   /* secondary text */
  --muted:        #A8A39B;   /* captions, disclaimers, page numbers */

  /* ---- Color: accent (the one) ------------------------------------------ */
  --accent:       #2A6F6B;   /* deep teal, the only bright color in the system */
  --accent-soft:  #5C9A95;   /* soft teal, secondary, hovers, fills */
  --accent-fg:    #F5F5F0;   /* foreground on top of accent fills */

  /* ---- Color: rules & hairlines ----------------------------------------- */
  --rule:         rgba(245, 245, 240, 0.08);
  --rule-strong:  rgba(245, 245, 240, 0.18);
  --rule-accent:  rgba(42, 111, 107, 0.55);

  /* ---- Typography -------------------------------------------------------- */
  --display:  "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --heading:  "Archivo", system-ui, sans-serif;
  --body:     "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale, a calm 1.250 (major third) for headings, 1.125 for body.
     Locked at the sizes a long-read article needs. */
  --fs-eyebrow:   0.75rem;   /* 12px, eyebrows, kickers */
  --fs-caption:   0.8125rem; /* 13px, captions, meta */
  --fs-body-sm:   0.9375rem; /* 15px */
  --fs-body:      1.0625rem; /* 17px, default body */
  --fs-body-lg:   1.1875rem; /* 19px, lead paragraphs */
  --fs-h4:        1.25rem;   /* 20px */
  --fs-h3:        1.5rem;    /* 24px */
  --fs-h2:        2rem;      /* 32px */
  --fs-h1:        2.75rem;   /* 44px */
  --fs-display:   4rem;      /* 64px, hero only */

  --lh-tight:     1.1;
  --lh-snug:      1.25;
  --lh-normal:    1.5;
  --lh-relaxed:   1.7;
  --lh-loose:     1.85;

  --ls-eyebrow:   0.18em;
  --ls-wordmark:  0.16em;
  --ls-tight:    -0.01em;
  --ls-snug:     -0.015em;

  /* ---- Spacing (8pt scale) ---------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  2.5rem;   /* 40px */
  --space-8:  3rem;     /* 48px */
  --space-9:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6rem;     /* 96px */
  --space-12: 8rem;     /* 128px */

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 640ms;

  /* ---- Layout ---------------------------------------------------------- */
  --content-narrow: 68ch;   /* article body */
  --content-mid:    80ch;
  --content-page:   1120px; /* page shell */
  --content-wide:   1280px;
  --header-h:       72px;

  /* ---- Z-index --------------------------------------------------------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
}

/* ---- Global resets that respect the brand --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Focus: visible, calm, on-brand. Never the default blue ring. */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection: subtle teal */
::selection { background: var(--accent); color: var(--accent-fg); }

/* Reduced motion: disable non-essential motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}