/* ==========================================================================
   MAST design tokens — the single source of truth.
   Phase 1: tokens are DEFINED here but not yet APPLIED. The site renders
   exactly as before. Components start consuming these in Phase 2.

   Rule: no colour, font or size literal anywhere else in the theme.
   If a value isn't in this file, it doesn't exist.
   ========================================================================== */

/* --- Typefaces: self-hosted, variable, subset to latin -------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"),
       url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2-variations"),
       url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Colour ------------------------------------------------------------
     Five values. Every colour on the site resolves to one of these.
     Drawn from the Arun valley, not from stock travel-blue:
     rhododendron is Nepal's national flower and lines the Makalu trail. */

  --mast-ink:        #16191A;  /* text, headers — cold slate-black          */
  /* Was #6B7578, which measured 4.35:1 on the page ground — under WCAG AA's
     4.5:1 for body text. Darkened two steps, keeping the same cyan bias, to
     4.82:1 on the ground and 5.24:1 on cards. Still clearly "muted". */
  --mast-slate:      #646E71;  /* secondary text, meta — grey, cyan bias    */
  --mast-snowfield:  #E7EAE7;  /* page ground — cool, deliberately not cream */
  --mast-rhodo:      #B32D2E;  /* THE accent. Spend boldness only here.     */
  --mast-barley:     #C4913C;  /* altitude & data highlights. Sparingly.    */

  /* Derived — tints and shades. Never invent new hues, only steps of these. */
  --mast-paper:      #F4F6F4;  /* lifted ground (cards on snowfield)        */
  --mast-white:      #FFFFFF;
  --mast-rule:       #D2D7D3;  /* hairlines, borders                        */
  --mast-rhodo-dark: #9C2426;  /* accent :hover                             */
  --mast-ink-hover:  #333A3C;  /* secondary button :hover — ink, one step up */
  --mast-ink-muted:  #3A4143;  /* body copy on light ground                 */

  /* Semantic aliases — components reference THESE, not the raw values above,
     so a palette change is a one-line edit. */
  --mast-bg:            var(--mast-paper);
  --mast-bg-alt:        var(--mast-snowfield);
  --mast-surface:       var(--mast-white);
  --mast-text:          var(--mast-ink);
  --mast-text-muted:    var(--mast-slate);
  --mast-border:        var(--mast-rule);
  --mast-accent:        var(--mast-rhodo);
  --mast-accent-hover:  var(--mast-rhodo-dark);
  --mast-accent-quiet:  var(--mast-barley);
  --mast-on-accent:     var(--mast-white);

  /* --- Type --------------------------------------------------------------
     A squared grotesque over a serif. Numbers get a mono face because on a
     trekking site the numbers ARE the product: altitude, duration, price. */

  --mast-font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --mast-font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mast-font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Scale — 1.25 major third, 18px base. Stay on it. */
  --mast-text-xs:   0.694rem;  /* 11px — mono labels, eyebrows  */
  --mast-text-sm:   0.833rem;  /* 13px — meta, captions         */
  --mast-text-base: 1rem;      /* 18px — body                   */
  --mast-text-md:   1.25rem;   /* 22px                          */
  --mast-text-lg:   1.563rem;  /* 28px — h4                     */
  --mast-text-xl:   1.953rem;  /* 35px — h3                     */
  --mast-text-2xl:  2.441rem;  /* 44px — h2                     */
  --mast-text-3xl:  3.052rem;  /* 55px — h1                     */
  --mast-text-4xl:  4.5rem;    /* 81px — hero                   */

  --mast-weight-body:    400;
  --mast-weight-strong:  600;
  --mast-weight-display: 800;

  --mast-leading-tight: 1.04;  /* display                       */
  --mast-leading-snug:  1.25;  /* subheads                      */
  --mast-leading-body:  1.62;  /* running prose                 */

  --mast-tracking-display: -0.03em;
  --mast-tracking-label:    0.09em;  /* uppercase mono labels    */

  --mast-measure: 65ch;              /* running text never wider */

  /* --- Space — 4px base, powers of the same rhythm ----------------------- */
  --mast-space-1:  0.25rem;
  --mast-space-2:  0.5rem;
  --mast-space-3:  0.75rem;
  --mast-space-4:  1rem;
  --mast-space-6:  1.5rem;
  --mast-space-8:  2rem;
  --mast-space-12: 3rem;
  --mast-space-16: 4rem;
  --mast-space-24: 6rem;

  /* --- Form ------------------------------------------------------------- */
  --mast-radius:    2px;   /* near-square. Cartographic, not bubbly.        */
  --mast-radius-lg: 5px;
  --mast-shadow:    0 1px 2px rgba(22, 25, 26, 0.06),
                    0 8px 24px rgba(22, 25, 26, 0.05);
  --mast-container: 1200px;
  --mast-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* Respect users who don't want motion. Applies from Phase 2 onward. */
@media (prefers-reduced-motion: reduce) {
  :root { --mast-ease: step-end; }
}