/**
 * Lake Frances Retreats: design tokens.
 *
 * Every primitive lives here. Component stylesheets consume these and never
 * declare a raw value. Attach from the theme's global library so it loads ahead
 * of the auto-attached component libraries.
 *
 * Values extracted from the legacy global.css, with Adobe families substituted
 * for open source equivalents.
 */

:root {

  /* --------------------------------------------------------------------
     Color
     Ratios are measured against --color-surface (white).
     -------------------------------------------------------------------- */

  --color-accent: #ed1c24;         /* 4.4:1  large text only */
  --color-accent-strong: #d4141b;  /* 5.4:1  use for links and small text */
  --color-link: #ec1e27;         /* legacy .content a. 4.4:1, large text only */
  --color-brand: #558d96;          /* 3.7:1  large text only */
  --color-brand-strong: #3f6b73;   /* 5.9:1  use for links and small text */

  --color-ink: #525252;            /* 7.8:1  body copy */
  --color-ink-strong: #242424;
  --color-ink-muted: #878787;      /* 3.6:1  large text only, never body */

  --color-surface: #fff;
  --color-surface-alt: #f6f6f6;
  --color-section: #ededed;   /* legacy .content-discover background */
  --color-shell: #262626;
  --color-border: #ddd;
  --color-rule: #a7a6a6;   /* legacy heading underline */

  --color-focus: var(--color-accent-strong);

  /* --------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */

  /* The legacy site set every heading in Brandon Grotesque, so headings and UI
     share a face. Kept as a separate token so a distinct display face can be
     introduced in one place later. */
  --font-display: "Jost", "Century Gothic", system-ui, sans-serif;
  --font-text: "Libre Caslon Text", "Libre Baskerville", Georgia, serif;
  --font-ui: "Jost", "Century Gothic", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /*
   * Fluid scale, 320px to 1280px viewport.
   * Replaces the legacy sheet's per-breakpoint font-size overrides.
   */
  --step--1: clamp(0.8rem,   0.767rem + 0.167vw, 0.9rem);    /* 12.8 - 14.4 */
  --step-0:  clamp(1rem,     0.958rem + 0.208vw, 1.125rem);  /* 16   - 18   */
  --step-1:  clamp(1.25rem,  1.167rem + 0.417vw, 1.5rem);    /* 20   - 24   */
  --step-2:  clamp(1.5rem,   1.333rem + 0.833vw, 2rem);      /* 24   - 32   */
  --step-3:  clamp(1.75rem,  1.5rem   + 1.25vw,  2.5rem);    /* 28   - 40   */
  --step-4:  clamp(2rem,     1.75rem  + 1.25vw,  2.75rem);   /* 32   - 44   */
  --step-5:  clamp(2.25rem,  1.833rem + 2.083vw, 3.5rem);    /* 36   - 56   */
  --step-6:  clamp(2rem,     1.25rem  + 3.75vw,  4rem);      /* 32   - 64   */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  --tracking-wide: 0.06em;   /* Jost is wider than the legacy Brandon Grotesque */
  --tracking-normal: 0;

  /* --------------------------------------------------------------------
     Space
     -------------------------------------------------------------------- */

  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --space-2xs: clamp(0.5rem,  0.47rem + 0.15vw, 0.6rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.21vw, 0.9rem);
  --space-s:   clamp(1rem,    0.94rem + 0.31vw, 1.2rem);
  --space-m:   clamp(1.5rem,  1.4rem  + 0.5vw,  1.8rem);
  --space-l:   clamp(2rem,    1.79rem + 1.04vw, 2.625rem);
  --space-xl:  clamp(3rem,    2.58rem + 2.08vw, 4.25rem);

  /* Section rhythm. Legacy was 100px desktop, 60px under 767px. */
  --space-section: clamp(3.75rem, 2.917rem + 4.167vw, 6.25rem);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */

  --measure: 620px;        /* legacy .content-column-wrapper.count-1 */
  --container: 1000px;     /* legacy .content-column-wrapper.count-2 */
  --container-wide: 1280px;
  --gutter: var(--space-m);

  /* Column floor for auto-fit grids. Below this, columns stack. */
  --column-min: 20rem;

  /* --------------------------------------------------------------------
     Other
     -------------------------------------------------------------------- */

  --radius: 2px;
  --radius-button: 999px;   /* pill. Drop to 0.375rem for gently rounded. */
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;

  --duration-fast: 120ms;
  --duration: 240ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);
}

/**
 * Motion is opt-in. Anything animated must gate on this, including the
 * anchor-scroll behaviour in the site header.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
  }
}

/* ----------------------------------------------------------------------
   Element defaults
   The only place bare element selectors are allowed. Everything else is BEM.
   ---------------------------------------------------------------------- */

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

html {
  /* Gated so hash navigation does not animate for reduced-motion users. */
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

/**
 * Links.
 *
 * Global baseline so links are styled wherever they appear, including editor
 * rich text and anywhere a component does not override. Components may set
 * their own colour, but should not need to restate the rest.
 *
 * --color-accent-strong rather than --color-accent: the legacy link colour
 * #ec1e27 measures 4.4:1 on white and fails AA for body text.
 */
a,
a:visited {
  color: var(  --color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
  transition: color var(--duration) var(--easing);
}

a:hover,
a:visited:hover {
  color: var(--color-accent-strong);
}

/**
 * Focus. The legacy sheet applied outline:none globally, which removed focus
 * indication site-wide and is a WCAG 2.4.7 failure. This is the replacement.
 * Do not override it per component without providing an equivalent.
 */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/**
 * Anchor offset. The sticky header would otherwise cover the heading a hash
 * link jumps to. Every component exposing an anchor id inherits this.
 */
[id] {
  scroll-margin-top: var(--header-height, 6rem);
}