/* ==========================================================================
   MUSKOKA HOT TUB - DESIGN SYSTEM FOUNDATIONS
   Tier 1 of 4 - v1.0 - "Deep Water"
   This document uses the tokens it documents.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOUR
     Deep Water. Lake at night, not pool at noon. The retired cyan (#10adfe)
     appears nowhere in this system and must not be reintroduced.
     Every pairing below is verified against WCAG 2.1; see the accessibility
     section for measured ratios.
     -------------------------------------------------------------------- */

  /* Water grounds - dark surfaces, darkest first */
  /* ---- FOREST FLOOR, NAVY GROUND ----------------------------------------
     Decision 61. The achromatic version read as too mono, so the dark grounds
     are navy again while the light surfaces stay warm stone. Navy against
     warm stone is a deliberate temperature contrast; navy against cool grey,
     which is what Deep Water was, is not.

     Still no accent hue. The photography supplies every bit of colour and
     the primary action is the darkest navy, not an orange.

     Token NAMES are kept from Deep Water so every downstream rule keeps
     working. "ember" is the primary-action fill and "ember-ink" is the text
     on it. Read the role, not the name.
     ------------------------------------------------------------------------ */

  /* Dark grounds */
  --mht-abyss:        #0E1C26;   /* deepest ground. Hero scrims, footer, dark bands */
  --mht-deep:         #17303D;   /* secondary dark ground, panels on abyss */
  --mht-tide:         #2E4E5C;   /* links and hover on light grounds. 8.9 on white */
  --mht-steel:        #7E939C;   /* borders on dark, small labels on dark. 5.4 on abyss */

  /* Text on dark grounds */
  --mht-mist:         #CDD7DB;   /* body copy on dark grounds. 11.8 on abyss */
  --mht-steam:        #FFFFFF;   /* headings on dark grounds */
  --mht-white:        #FFFFFF;

  /* Primary action. Darkest navy fill, white text. No accent hue. */
  --mht-ember:        #13212A;
  --mht-ember-strong: #2E4E5C;   /* hover step */
  --mht-ember-deep:   #2E4E5C;   /* small TEXT on light grounds. 8.9 on white */
  --mht-ember-soft:   #E7EAEA;   /* tint fill for callouts and badges */
  --mht-ember-ink:    #FFFFFF;   /* text on the primary fill. 16.4 */

  /* Text on light grounds */
  --mht-ink:          #13212A;   /* headings. 16.4 on white */
  --mht-ink-2:        #33474F;   /* body. 9.0 on surface-1 */
  --mht-muted:        #546369;   /* captions, meta. 5.3 on surface-2 */
  --mht-muted-2:      #A3ADB1;   /* NON-TEXT ONLY. Dividers, disabled marks, icons */

  /* Light surfaces. Warm stone against the navy, not cool grey. */
  --mht-surface-1:    #F7F5F1;
  --mht-surface-2:    #EFEBE4;
  --mht-border:       #D6D1C8;
  --mht-border-2:     #A3ADB1;

  /* Status. The only hues in the system. */
  --mht-success:      #2E6B45;
  --mht-success-bg:   #EEF4EF;
  --mht-warning:      #7A5A1E;
  --mht-warning-bg:   #F7F0E2;
  --mht-error:        #A8352A;
  --mht-error-bg:     #F8EDEB;
  --mht-error-light:  #E9A39C;   /* error text/border on DARK grounds */
  --mht-error-bg-dark:#2A1614;   /* error tint on DARK grounds */

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     Two families, not three. DM Serif Display is the display face: one
     weight only, high contrast, wide. Because it ships a single weight the
     display weight token is 400 and size carries the hierarchy instead.
     Instrument Sans is the plain workhorse underneath it.
     Numbers use tabular figures rather than a separate mono family, which
     is the whole reason a third face is not needed.
     -------------------------------------------------------------------- */
  --mht-display: 'DM Serif Display', 'DM Serif Display Fallback', Georgia, 'Times New Roman', serif;
  --mht-body:    'Instrument Sans', 'Instrument Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Editorial scale. Display sizes are large and the weight is LIGHT, which
     is what makes a serif read as premium rather than loud. A 300 at 5rem is
     quieter than a 500 at 3rem and says considerably more. */
  --mht-h1:      clamp(2.25rem, 1.1rem + 4.4vw, 4.4rem);
  --mht-h2:      clamp(1.8rem, 1.05rem + 2.6vw, 3.15rem);
  --mht-h3:      clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  --mht-h4:      clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --mht-lead:    clamp(1.1rem, 1rem + .5vw, 1.4rem);
  --mht-body-sz: 1rem;
  --mht-small:   .875rem;
  --mht-micro:   .75rem;

  --mht-lh-tight: 1.02;
  --mht-lh-head:  1.08;
  --mht-lh-body:  1.7;

  --mht-wt-display: 400;   /* DM Serif Display has no other weight */
  --mht-ls-display: -0.012em;
  --mht-ls-eyebrow:  0.18em;

  /* ----------------------------------------------------------------------
     SPACING AND LAYOUT
     -------------------------------------------------------------------- */
  --mht-gap-2:   4px;
  --mht-gap-3:   8px;
  --mht-gap-4:   12px;
  --mht-gap-5:   16px;
  --mht-gap-6:   24px;
  --mht-gap-7:   32px;
  --mht-gap-8:   48px;
  --mht-gap-9:   64px;

  --mht-section-y-xs: 32px;
  --mht-section-y-sm: 48px;
  --mht-section-y-md: 104px;
  --mht-section-y-lg: 152px;
  --mht-section-y-xl: 200px;
  --mht-section-x:        24px;
  --mht-section-x-mobile: 20px;

  --mht-container-narrow:  720px;
  --mht-container-default: 1080px;
  --mht-container-wide:    1280px;

  /* ----------------------------------------------------------------------
     RADIUS - modest. Water is soft, but this is not a consumer app.
     -------------------------------------------------------------------- */
  --mht-r-sm:   2px;
  --mht-r-md:   6px;
  --mht-r-btn:  2px;     /* controls are square-ish. Reference: Walden */
  --mht-r-card: 16px;
  --mht-r-pill: 999px;

  /* ----------------------------------------------------------------------
     ELEVATION - shadows are tinted with the deep water hue, never neutral
     black, so they read as part of the palette rather than as grey haze.
     -------------------------------------------------------------------- */
  --mht-shadow-1: 0 1px 2px rgba(6,32,43,.06);
  --mht-shadow-2: 0 4px 12px -2px rgba(6,32,43,.10);
  --mht-shadow-3: 0 12px 28px -8px rgba(6,32,43,.16);
  --mht-shadow-4: 0 24px 48px -16px rgba(6,32,43,.22);

  /* ----------------------------------------------------------------------
     MOTION - one easing curve. Everything animated uses it.
     -------------------------------------------------------------------- */
  --mht-ease:   cubic-bezier(.4, 0, .2, 1);
  --mht-t-fast: .15s;
  --mht-t-base: .22s;
  --mht-t-slow: .4s;

  /* ----------------------------------------------------------------------
     LOGO GEOMETRY
     -------------------------------------------------------------------- */
  --mht-logo-clear-ratio:     0.5;    /* clear space = 50% of mark height, all sides */
  --mht-logo-min-px:          24px;   /* mark only, on screen */
  --mht-logo-min-px-lockup:   32px;   /* horizontal lockup, on screen */
  --mht-logo-min-pt:          12pt;   /* mark only, in print */
  --mht-logo-min-in-lockup:   0.5in;  /* horizontal lockup, in print */
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--mht-body);
  font-size: var(--mht-body-sz);
  line-height: var(--mht-lh-body);
  color: var(--mht-ink);
  background: var(--mht-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--mht-display);
  font-weight: 500;
  line-height: var(--mht-lh-head);
  letter-spacing: var(--mht-ls-display);
  color: var(--mht-ink);
  margin: 0 0 var(--mht-gap-6);
}
h1 { font-size: var(--mht-h1); line-height: var(--mht-lh-tight); font-weight: var(--mht-wt-display); }
h2 { font-size: var(--mht-h2); line-height: var(--mht-lh-head); font-weight: var(--mht-wt-display); }
h3 { font-size: var(--mht-h3); line-height: var(--mht-lh-head); font-weight: 400; }
h4 { font-size: var(--mht-h4); font-family: var(--mht-body); font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 var(--mht-gap-5); }

:where(a) { color: var(--mht-tide); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:where(a:hover) { color: var(--mht-ink); }
/* :where() keeps these at zero specificity: any classed component that sets its
   own colour wins outright, on rest and on hover. The previous plain a:hover
   rule outranked variant classes and repainted button text mid-hover. */

/* Numbers align in spec tables without a mono family. */
.mht-nums, table td, table th { font-variant-numeric: tabular-nums; }

/* --- Eyebrow: the recurring signature device ------------------------------ */
.mht-eyebrow {
  display: inline-flex; align-items: center; gap: var(--mht-gap-4);
  font-family: var(--mht-body);
  font-size: var(--mht-micro);
  font-weight: 600;
  letter-spacing: var(--mht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mht-muted);
  margin-bottom: var(--mht-gap-4);
}
.mht-eyebrow::before {
  content: ""; width: 28px; height: 2px; background: var(--mht-ember); border-radius: 2px;
}
.on-dark .mht-eyebrow { color: var(--mht-mist); }
/* On navy the ember line (also navy) was invisible. Cream there, and in any
   dark section or hero, whichever way the eyebrow got its colour. */
.on-dark .mht-eyebrow::before,
.mht-section--dark .mht-eyebrow::before,
.mht-hero .mht-eyebrow::before,
.mht-band--overlay .mht-eyebrow::before,
.mht-eyebrow[style*="mist"]::before { background: var(--mht-surface-1); }

/* ==========================================================================
   DOCUMENT CHROME - styling for this guideline page only.
   Everything below consumes the tokens above.
   ========================================================================== */

.doc-shell { max-width: var(--mht-container-wide); margin: 0 auto; padding: 0 var(--mht-section-x); }
.doc-head {
  background: var(--mht-abyss); color: var(--mht-steam);
  padding: var(--mht-section-y-lg) var(--mht-section-x) var(--mht-section-y-md);
}
.doc-head h1 { color: var(--mht-steam); max-width: 18ch; }
.doc-head p { color: var(--mht-mist); max-width: 62ch; font-size: var(--mht-lead); }
.doc-head img,
.doc-head svg { height: 64px; width: auto; margin-bottom: var(--mht-gap-7); display: block; }

.doc-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247,250,250,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mht-border);
  padding: var(--mht-gap-4) var(--mht-section-x);
  display: flex; gap: var(--mht-gap-5); flex-wrap: wrap;
  font-size: var(--mht-small);
}
.doc-nav a { color: var(--mht-ink-2); text-decoration: none; }
.doc-nav a:hover { color: var(--mht-ember-deep); text-decoration: underline; }

section[id] { padding: var(--mht-section-y-md) 0; border-top: 1px solid var(--mht-border); scroll-margin-top: 70px; }
section[id]:first-of-type { border-top: 0; }
.sec-num {
  font-size: var(--mht-micro); font-weight: 600; letter-spacing: var(--mht-ls-eyebrow);
  text-transform: uppercase; color: var(--mht-muted); display: block; margin-bottom: var(--mht-gap-3);
}
.lede { font-size: var(--mht-lead); color: var(--mht-ink-2); max-width: 66ch; }

.grid { display: grid; gap: var(--mht-gap-5); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.card {
  background: var(--mht-white); border: 1px solid var(--mht-border);
  border-radius: var(--mht-r-card); padding: var(--mht-gap-6);
}

/* Colour swatches */
.sw { border: 1px solid var(--mht-border); border-radius: var(--mht-r-md); overflow: hidden; background: var(--mht-white); }
.sw i { display: block; height: 76px; }
.sw b { display: block; font-size: var(--mht-small); font-weight: 600; padding: var(--mht-gap-4) var(--mht-gap-4) 2px; }
.sw code { display: block; font-size: var(--mht-micro); color: var(--mht-muted); padding: 0 var(--mht-gap-4) var(--mht-gap-3); }
.sw em { display: block; font-size: var(--mht-micro); color: var(--mht-muted); font-style: normal;
         padding: 0 var(--mht-gap-4) var(--mht-gap-4); line-height: 1.45; }

/* Dark band */
.band-dark {
  background: var(--mht-abyss); color: var(--mht-mist);
  border-radius: var(--mht-r-card); padding: var(--mht-gap-8) var(--mht-gap-7);
}
.band-dark h3, .band-dark h2 { color: var(--mht-steam); }

/* Type specimens */
.spec { border-left: 3px solid var(--mht-ember); padding-left: var(--mht-gap-6); margin: var(--mht-gap-6) 0; }
.spec-meta { font-size: var(--mht-micro); color: var(--mht-muted); letter-spacing: .06em; text-transform: uppercase; }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: var(--mht-small); margin: var(--mht-gap-5) 0; }
th, td { text-align: left; padding: var(--mht-gap-4) var(--mht-gap-4); border-bottom: 1px solid var(--mht-border); vertical-align: top; }
th { font-weight: 600; color: var(--mht-ink); background: var(--mht-surface-2); }
td code { font-size: var(--mht-micro); background: var(--mht-surface-2); padding: 2px 6px; border-radius: var(--mht-r-sm); }

/* Do / Don't */
.rule { border-radius: var(--mht-r-md); padding: var(--mht-gap-5); font-size: var(--mht-small); }
.rule.do   { background: var(--mht-success-bg); border-left: 3px solid var(--mht-success); }
.rule.dont { background: var(--mht-error-bg);   border-left: 3px solid var(--mht-error); }
.rule b { display: block; margin-bottom: var(--mht-gap-3); }

/* Badges */
.badge {
  display: inline-block; font-size: var(--mht-micro); font-weight: 600; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--mht-r-pill);
  background: var(--mht-ember-soft); color: var(--mht-ember-deep);
}
.badge.pass { background: var(--mht-success-bg); color: var(--mht-success); }
.badge.fail { background: var(--mht-error-bg); color: var(--mht-error); }

/* Logo plates */
.plate { border-radius: var(--mht-r-card); padding: var(--mht-gap-7); display: flex; align-items: center; justify-content: center; min-height: 150px; }
.plate img,
.plate svg { max-width: 100%; height: auto; width: auto; }
.plate.light { background: var(--mht-surface-2); border: 1px solid var(--mht-border); }
.plate.dark  { background: var(--mht-abyss); }
.plate.deep  { background: var(--mht-deep); }

pre {
  background: var(--mht-abyss); color: var(--mht-mist);
  padding: var(--mht-gap-6); border-radius: var(--mht-r-card);
  overflow-x: auto; font-size: var(--mht-micro); line-height: 1.7;
}
pre .k { color: var(--mht-ember); }

.doc-foot { background: var(--mht-surface-2); padding: var(--mht-section-y-sm) var(--mht-section-x); color: var(--mht-muted); font-size: var(--mht-small); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Visually hidden, still read aloud. WordPress core's class name, which some
   templates already use (the brands table corner, the test strip labels) but
   the theme never defined, so those labels were showing. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; }