/* ==========================================================================
   The Wider Scope — Design tokens
   Single source of truth for colour, type, spacing, borders and motion.
   These names map 1:1 to theme.json for the WordPress block-theme build,
   so changing a value here changes it everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted typefaces — Cormorant Garamond (display) + Manrope (text).
   Both SIL Open Font Licence; licence texts live beside the files.
   Variable fonts, latin + latin-ext only, so only the required axis loads.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ------------------------------------------------------------------------
     Colour — brand palette, exactly as specified in the brief.
     Proportion target: 60% Limestone / 25% Graphite / 10% Atlantic / 5% Oxblood.
     ------------------------------------------------------------------------ */
  --ws-limestone: #efeae3;
  --ws-graphite: #17232b;
  --ws-atlantic: #1f5b6e;
  --ws-oxblood: #9a3b2e;
  --ws-slate: #6e7b82;

  /* Derived support tones. Each is a tint or shade of a brand colour — no new
     hues are introduced, so the palette stays disciplined. */
  --ws-limestone-lift: #f6f3ee; /* raised surfaces on a Limestone page */
  --ws-limestone-sink: #e6dfd5; /* recessed / alternating bands */
  --ws-graphite-lift: #22323d; /* hover state on Graphite fields */
  --ws-atlantic-deep: #17444f; /* Atlantic button hover */
  --ws-atlantic-wash: #e7eef0; /* faintest Atlantic tint */
  --ws-oxblood-deep: #7f2f24; /* Oxblood hover */
  /* Oxblood lifted for use on Graphite. Brand Oxblood on Graphite is only
     2.30:1; this reaches 4.55:1, so brackets and rules stay visible on dark
     fields without introducing a new hue. */
  --ws-oxblood-lift: #c9705f;
  --ws-white: #ffffff;

  /* Text roles. --ws-text-muted is a deliberately darkened Slate: pure Slate
     is 3.64:1 on Limestone, which fails WCAG 2.2 AA for body-sized text.
     It is darkened far enough to pass on the RECESSED band too, not just on
     Limestone — #5a666c cleared Limestone at 4.94:1 but failed the darker
     --ws-limestone-sink at 4.47:1, and secondary text appears on both.
     Undarkened Slate is kept for rules, borders and disabled states only —
     never for small copy. Verified by tools/check-contrast.ps1. */
  --ws-text: #17232b; /* 13.4:1 on Limestone */
  --ws-text-muted: #576369; /* 5.11:1 on Limestone, 4.68:1 on the sink band */
  --ws-text-on-dark: #ffffff; /* 16.0:1 on Graphite, 7.6:1 on Atlantic */
  --ws-text-on-dark-muted: #c3ccd1; /* 9.0:1 on Graphite */

  /* Rules and borders — the brief asks for thin rules rather than shadows. */
  --ws-rule: rgba(110, 123, 130, 0.3);
  --ws-rule-strong: rgba(23, 35, 43, 0.16);
  --ws-rule-on-dark: rgba(255, 255, 255, 0.18);
  --ws-rule-width: 1px;

  /* Focus ring — visible on every interactive element, both themes. */
  --ws-focus: var(--ws-oxblood);
  --ws-focus-on-dark: #f0c9c1;
  --ws-focus-width: 3px;
  --ws-focus-offset: 3px;

  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */
  --ws-font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype',
    'Book Antiqua', Georgia, 'Times New Roman', serif;
  --ws-font-text: 'Manrope', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale. Hero resolves to 46px at 375px and 88px at 1440px, matching
     the 46–56 mobile / 72–88 desktop range in the brief. */
  /* Resolves to 47px at 375px, 58px at tablet and 75px from 1440px up — inside
     the brief's 46–56 mobile and 72–88 desktop ranges. The 75px cap is the
     largest size at which the mockup's third line, "demands a wider scope.",
     still sits on one line inside the 54% content panel at every width above
     1440px, including very wide displays where the centred frame takes more
     of the panel back as gutter, with ~28px of slack for font fallback. */
  --ws-size-hero: clamp(2.875rem, 2.34rem + 2.68vw, 4.5rem);
  --ws-size-display: clamp(2.375rem, 1.35rem + 3.6vw, 4rem);
  --ws-size-h2: clamp(1.875rem, 1.15rem + 2.1vw, 3rem);
  --ws-size-h3: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem);
  --ws-size-h4: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --ws-size-lead: clamp(1.125rem, 1rem + 0.55vw, 1.4375rem);
  --ws-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  --ws-size-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --ws-size-micro: 0.8125rem;

  --ws-lh-tight: 1.02;
  --ws-lh-display: 1.08;
  --ws-lh-heading: 1.18;
  --ws-lh-body: 1.62;
  --ws-lh-snug: 1.45;

  --ws-weight-regular: 400;
  --ws-weight-medium: 500;
  --ws-weight-semibold: 600;
  --ws-weight-bold: 700;

  --ws-track-hero: -0.015em;
  --ws-track-display: -0.01em;
  --ws-track-eyebrow: 0.17em;
  --ws-track-nav: 0.06em;

  /* Readable line length: the brief caps text at 65–75 characters. */
  --ws-measure: 68ch;
  --ws-measure-narrow: 56ch;
  --ws-measure-wide: 78ch;

  /* ------------------------------------------------------------------------
     Space — a 4px-based scale
     ------------------------------------------------------------------------ */
  --ws-space-1: 0.25rem;
  --ws-space-2: 0.5rem;
  --ws-space-3: 0.75rem;
  --ws-space-4: 1rem;
  --ws-space-5: 1.5rem;
  --ws-space-6: 2rem;
  --ws-space-7: 2.5rem;
  --ws-space-8: 3rem;
  --ws-space-9: 4rem;
  --ws-space-10: 5rem;
  --ws-space-11: 6.5rem;
  --ws-space-12: 8rem;

  /* Vertical rhythm between full-width sections, and the page gutter. */
  --ws-section-y: clamp(3.5rem, 7vw, 7.5rem);
  --ws-section-y-tight: clamp(2.5rem, 4.5vw, 4.5rem);
  /* Measured from the approved mockup: at 1440px the content sits at x=56 and
     runs to x=1384, so the frame is effectively full-width with a 56px gutter
     rather than a narrower centred column. */
  --ws-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --ws-container: 1440px;
  --ws-container-narrow: 860px;

  /* ------------------------------------------------------------------------
     Shape — restrained. The signature radius belongs to the hero panel only;
     ordinary components stay square-edged with thin rules.
     ------------------------------------------------------------------------ */
  /* Measured from the approved mockup: the single softened corner where the
     content panel meets the imagery is a modest ~20px, not a large card radius. */
  --ws-radius-panel: clamp(0.875rem, 1.7vw, 1.5rem);
  --ws-radius-control: 2px;
  --ws-radius-pill: 999px;

  /* ------------------------------------------------------------------------
     Motion — restrained, and disabled entirely under reduced-motion.
     ------------------------------------------------------------------------ */
  --ws-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ws-dur-fast: 140ms;
  --ws-dur: 240ms;
  --ws-dur-slow: 520ms;

  /* Depth is used sparingly and only where an element genuinely floats. */
  --ws-shadow-panel: 0 1px 2px rgba(23, 35, 43, 0.04),
    0 12px 36px -18px rgba(23, 35, 43, 0.16);
  --ws-shadow-menu: 0 18px 48px -24px rgba(23, 35, 43, 0.32);

  --ws-header-h: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ws-dur-fast: 1ms;
    --ws-dur: 1ms;
    --ws-dur-slow: 1ms;
  }
}