/* ==========================================================================
   WASL — design tokens
   Palette and type extracted from kesatay.com (Elementor kit CSS + Typekit).
   Source colours: #32602F, #C2A453, #000000, #FFFFFF, #E6E6E6, #555555, #505050
   Source faces:   the-seasons (display serif), avenir-next-lt-pro (UI sans)
   Substitutes:    Instrument Serif / Work Sans — both SIL OFL, self-hosted.
   The client's own faces are Adobe Fonts, licence-bound to their Typekit
   domain, so they cannot be redistributed in this prototype. Swapping them
   back in later is a two-line change in this file.
   Self-hosted rather than CDN-linked so the walkthrough survives a bad
   connection in the room.
   ========================================================================== */

@font-face {
  font-family: "Work Sans L";
  src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans L";
  src: url("../fonts/WorkSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif L";
  src: url("../fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif L";
  src: url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* -- Brand primitives (verbatim from the client's stylesheet) ----------- */
  --kes-green:        #32602F;
  --kes-gold:         #C2A453;
  --kes-black:        #000000;
  --kes-white:        #FFFFFF;
  --kes-grey-100:     #E6E6E6;
  --kes-grey-500:     #555555;

  /* -- Derived steps (mixed from the two brand hues only) ----------------- */
  --green-900:        #1B3419;
  --green-700:        #264A24;
  --green-600:        #32602F;
  --green-200:        #C8D6C6;
  --green-50:         #F1F5F0;
  --gold-700:         #8A7436;
  --gold-400:         #C2A453;
  --gold-100:         #F2EAD4;

  /* -- Semantic ---------------------------------------------------------- */
  --ground:           var(--kes-white);
  --ground-sunk:      #FAFAF8;
  --ink:              var(--kes-black);
  --ink-soft:         var(--kes-grey-500);
  --rule:             var(--kes-grey-100);
  --rule-strong:      #CFCFCB;

  --brand:            var(--green-600);
  --brand-deep:       var(--green-900);
  --on-brand:         var(--kes-white);

  /* Gold is reserved for money: Partner Credit and nothing else. */
  --value:            var(--gold-400);
  --value-ink:        var(--gold-700);
  --value-wash:       var(--gold-100);

  --ok:               #2E6B43;
  --warn:             #8A5A16;
  --stop:             #8E2C2C;

  /* -- Type -------------------------------------------------------------- */
  --face-display: "Instrument Serif L", "the-seasons", "Hoefler Text", Garamond, serif;
  --face-ui: "Work Sans L", "avenir-next-lt-pro", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale — classical 1.25 (major third), rounded to whole px */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   20px;
  --t-lg:   25px;
  --t-xl:   31px;
  --t-2xl:  39px;
  --t-3xl:  49px;
  --t-4xl:  61px;

  /* -- Space — 4px base -------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* -- Structure --------------------------------------------------------- */
  --measure: 64ch;
  --shell: 1180px;
  --r-sharp: 0;
  --r-soft: 3px;
  --focus: 2px solid var(--green-600);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 500; }
p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Numbers in tables and money must never shift width between states. */
.num { font-variant-numeric: tabular-nums; }

@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;
  }
}

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

.skip-link {
  position: absolute; left: var(--s-4); top: -60px;
  background: var(--brand); color: var(--on-brand);
  padding: var(--s-3) var(--s-4); z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--s-4); }