/* ==========================================================================
   York Lodge No. 236 — Design tokens
   The single source of truth for colour, type, space and motion.
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
  /* --- Colour: drawn from the lodge photography -------------------------- */
  --c-ink:          #05070b;   /* deepest black-navy — page ground          */
  --c-ink-raised:   #0a0e16;   /* raised surfaces, cards                     */
  --c-ink-line:     #171d29;   /* hairline borders                           */
  --c-navy:         #101a2c;   /* the velvet blue of the tracing board       */
  --c-navy-deep:    #0b1220;

  --c-gold:         #c9a227;   /* the working tools                          */
  --c-gold-bright:  #e8cf8d;   /* lit edge                                   */
  --c-gold-deep:    #8f6d17;   /* shadowed edge                              */
  --c-gold-glow:    rgb(201 162 39 / 0.28);

  --c-parchment:    #ece6d9;   /* primary text on dark                       */
  --c-parchment-dim:#a9a396;   /* secondary text                             */
  --c-parchment-faint: #6f6b62;/* tertiary / captions                        */

  --c-crimson:      #7a1f26;   /* the dais carpet — used sparingly           */

  /* --- Semantic roles ---------------------------------------------------- */
  --bg:             var(--c-ink);
  --bg-raised:      var(--c-ink-raised);
  --fg:             var(--c-parchment);
  --fg-muted:       var(--c-parchment-dim);
  --fg-faint:       var(--c-parchment-faint);
  --accent:         var(--c-gold);
  --accent-bright:  var(--c-gold-bright);
  --border:         var(--c-ink-line);
  --border-gold:    rgb(201 162 39 / 0.30);

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.0625rem, 0.30vw + 1rem, 1.1875rem);
  --t-xl:   clamp(1.25rem,  0.60vw + 1.1rem, 1.5rem);
  --t-2xl:  clamp(1.6rem,   1.30vw + 1.3rem, 2.25rem);
  --t-3xl:  clamp(2.1rem,   2.40vw + 1.5rem, 3.25rem);
  --t-4xl:  clamp(2.6rem,   4.20vw + 1.6rem, 4.75rem);

  --tracking-wide:  0.08em;
  --tracking-wider: 0.18em;
  --tracking-widest:0.30em;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.7;

  /* --- Space (8px rhythm) ------------------------------------------------ */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Cut ~85%+ from the original clamp(4rem, 8vw, 8rem) per Paul's request —
     reuses the same tight value already validated on the homepage (see the
     former .home .section override this replaced, in site.css). */
  --section-y: clamp(0.75rem, 1.5vw, 1.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure:      68ch;      /* comfortable reading width                    */
  --width-narrow: 44rem;
  --width-page:   76rem;
  --gutter:       clamp(1.25rem, 5vw, 3rem);

  /* --- Hero -------------------------------------------------------------- */
  /* The gold links sit 12.5% down the first view — half the original 25%.
     The rem floor governs on almost every real browser window (12.5% only
     overtakes it above ~1536px of viewport height), so it was tightened
     too, from 13rem to 12rem — the tightest safe value verified live
     against the actual rendered height of the eyebrow+title+nav block
     (172.5px at max width, with the eyebrow/title/nav margins trimmed in
     site.css) plus a ~20px buffer. Going lower clips the eyebrow off the
     top of the screen; the block's own text height is the hard limit on
     how far up this can safely go without shrinking the font sizes
     themselves, which was not part of this change. */
  --hero-nav-top: max(12.5%, 12rem);

  /* --- Depth & motion ---------------------------------------------------- */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 30px rgb(0 0 0 / 0.35);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.5), 0 18px 50px rgb(0 0 0 / 0.5);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 620ms;

  --z-base: 1; --z-nav: 100; --z-overlay: 200; --z-skip: 300;
}

/* The site is dark by design. If a visitor's OS prefers light we keep the
   moody treatment but lift contrast slightly rather than inverting — the
   photography is the brand and it only works on a dark ground. */
@media (prefers-contrast: more) {
  :root {
    --fg-muted: #cfc9bc;
    --fg-faint: #a8a297;
    --border: #2b3342;
  }
}