/**
 * StayNomad Design Tokens
 *
 * The single source of truth for the visual system.
 *
 * IMPORTANT: --sn-orange is confirmed from the supplied logo artwork.
 * All green and neutral values are WORKING tokens derived from the supplied
 * visual direction, not official client brand values. They are centralised
 * here so the whole site can be re-skinned by editing this file alone.
 * Never write a raw hex value into a component stylesheet.
 *
 * @see docs/DESIGN-SYSTEM.md
 * @see docs/BRAND-GUIDELINES.md
 */

:root {
  /* --- Brand ------------------------------------------------------- */
  --sn-orange: #CC5500;
  --sn-orange-hover: #9E4200;
  --sn-orange-soft: rgba(204, 85, 0, 0.08);

  /* Orange as *ink*. The logo orange reads 4.31:1 on white and 4.12:1 on
     Deep Green, under the 4.5:1 WCAG AA needs for small text (eyebrows,
     labels, button text), and it misses in both directions, so no single
     shade fixes it. Small text and the primary button fill use these two
     derivatives; --sn-orange itself stays for the logo, large display
     text, rules, dots and other accents. Dark grounds swap the ink to the
     lighter tint by redefining --sn-orange-ink (see the end of this file).
     Ratios: ink 5.49 on white / 4.73 on sand; inverse 5.93 on Deep Green. */
  --sn-orange-ink: #B04A00;
  --sn-orange-ink-inverse: #E8743A;
  /* Primary button fill under white text: the dark ink on every ground, so
     it must not follow the container swap below. */
  --sn-orange-fill: #B04A00;

  /* --- Hospitality dark --------------------------------------------- */
  --sn-green: #002820;
  --sn-green-dark: #001C17;

  /* --- Light surfaces ----------------------------------------------- */
  --sn-ivory: #F9F8F4;
  --sn-sand: #F1EEE6;
  --sn-white: #FFFFFF;

  /* --- Text --------------------------------------------------------- */
  --sn-text: #17201D;
  --sn-text-muted: #59615D;
  --sn-text-inverse: #F9F8F4;
  --sn-text-inverse-muted: rgba(249, 248, 244, 0.72);

  /* --- Lines -------------------------------------------------------- */
  --sn-border: #DCDDD7;
  --sn-border-inverse: rgba(249, 248, 244, 0.18);

  /* --- Radius ------------------------------------------------------- */
  --sn-radius-sm: 4px;
  --sn-radius-md: 8px;
  --sn-radius-lg: 12px;
  --sn-radius-pill: 999px; /* metadata chips only — never buttons or cards */

  /* --- Layout ------------------------------------------------------- */
  /*
   * The supplied logo is a stacked lockup — compass mark over the wordmark
   * over the tagline — and is very nearly square. A wordmark could sit at
   * 34px; this cannot, because at that height the tagline is unreadable.
   */
  --sn-logo-h: 68px;
  --sn-logo-h-scrolled: 56px;
  --sn-logo-h-footer: 84px;

  --sn-container: 1440px;
  --sn-container-narrow: 780px;
  --sn-gutter: clamp(20px, 4vw, 56px);

  /* Header height is a token because the hero has to clear it: the
     transparent header overlays the hero, so the hero's top padding and the
     header's own min-height must not drift apart. */
  --sn-header-height: 88px;

  /* --- Spacing scale ------------------------------------------------ */
  --sn-space-1: 4px;
  --sn-space-2: 8px;
  --sn-space-3: 12px;
  --sn-space-4: 16px;
  --sn-space-5: 24px;
  --sn-space-6: 32px;
  --sn-space-7: 48px;
  --sn-space-8: 64px;
  --sn-space-9: 88px;
  --sn-space-10: 120px;

  /* --- Section rhythm ----------------------------------------------- */
  --sn-section-y: clamp(48px, 8vw, 120px);
  --sn-section-y-compact: clamp(40px, 5vw, 72px);
  --sn-section-y-spacious: clamp(64px, 10vw, 160px);

  /* --- Typography families ------------------------------------------ */
  --sn-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sn-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Typography scale (fluid) ------------------------------------- */
  /* Scale brought down a full step on client feedback (18 Sep 2026:
     "too big fonts are being used for heading"). */
  --sn-display-xxl: clamp(44px, 5.4vw, 76px);
  --sn-display-xl: clamp(40px, 4.6vw, 64px);
  --sn-display-l: clamp(32px, 3.4vw, 48px);
  --sn-display-m: clamp(28px, 2.6vw, 38px);
  --sn-heading-l: clamp(22px, 1.9vw, 28px);
  --sn-heading-m: clamp(20px, 1.5vw, 24px);
  --sn-body-l: clamp(18px, 1.2vw, 20px);
  --sn-body: clamp(16px, 1vw, 18px);
  --sn-small: clamp(13px, 0.9vw, 15px);
  /* Primary navigation sits beside a large filled CTA; at --sn-small it read
   * as secondary chrome rather than the site's main wayfinding. Raised a
   * second time on client feedback of 9 Sep 2026. */
  --sn-nav: clamp(16px, 1.15vw, 19px);
  --sn-label: clamp(11px, 0.8vw, 13px);
  /* Heading scale (client correction, Sep 2026): one definition for H1–H6,
     consumed by base.css and the V2 title variants so every page agrees. */
  --sn-h1: var(--sn-display-xl);
  --sn-h2: var(--sn-display-l);
  --sn-h3: var(--sn-heading-l);
  --sn-h4: var(--sn-heading-m);
  --sn-h5: var(--sn-body-l);
  --sn-h6: var(--sn-body);
  --sn-weight-h1: 600;
  --sn-weight-h2: 600;

  /* --- Line heights -------------------------------------------------- */
  --sn-leading-display: 1.08;
  --sn-leading-heading: 1.22;
  --sn-leading-body: 1.65;

  /* --- Letter spacing ------------------------------------------------ */
  --sn-tracking-label: 0.12em;
  --sn-tracking-display: -0.01em;

  /* --- Weights ------------------------------------------------------- */
  --sn-weight-display: 400;
  --sn-weight-body: 400;
  --sn-weight-medium: 500;
  --sn-weight-semibold: 600;
  --sn-weight-bold: 700;   /* dm-sans-700.woff2 is already loaded by fonts.css */

  /* --- Elevation (used sparingly) ------------------------------------ */
  --sn-shadow-card: 0 1px 2px rgba(23, 32, 29, 0.04), 0 8px 24px rgba(23, 32, 29, 0.06);
  --sn-shadow-lift: 0 2px 4px rgba(23, 32, 29, 0.06), 0 16px 40px rgba(23, 32, 29, 0.10);

  /* --- Motion -------------------------------------------------------- */
  --sn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sn-duration-fast: 160ms;
  --sn-duration: 240ms;

  /* --- Focus --------------------------------------------------------- */
  --sn-focus-ring: 2px solid var(--sn-orange);
  --sn-focus-offset: 3px;

  /* --- Image ratios --------------------------------------------------- */
  --sn-ratio-hero: 16 / 9;
  --sn-ratio-property: 3 / 2;
  --sn-ratio-experience: 4 / 3;
  --sn-ratio-attraction: 16 / 10;
  --sn-ratio-square: 1 / 1;

  /* --- Controls ------------------------------------------------------- */
  --sn-tap-target: 44px;
}

/* Reduced motion: neutralise durations globally rather than per component. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sn-duration-fast: 0.01ms;
    --sn-duration: 0.01ms;
  }
}

/* Dark grounds: orange ink flips to the lighter tint. Every container that
   paints a green ground and carries orange small text belongs here. */
.sn-v2-section--dark,
.sn-v2-trust,
.sn-v2-dossier,
.sn-v2-experiences,
.sn-v2-experiences-hero,
.sn-v2-plan,
.sn-v2-planner,
.sn-v2-included,
.sn-v2-enquiry,
.sn-v2-confidence,
.sn-v2-footer,
.sn-section--green-dark,
.sn-cta-banner,
.sn-config--inverse,
.sn-property-hero,
.sn-footer {
  --sn-orange-ink: var(--sn-orange-ink-inverse);
}