/* Site tokens (CLAUDE.md rule 3). theme.json mirrors them for the editor.

   Type scale: the designer's (2026-09-29). Each role has a phone value (at
   375) and a desktop value (at 1440); the size and line height used on the
   page grow fluidly between the two (Prompt 2: type fluid between
   breakpoints) and hold outside them. Shown on /styleguide/; the pages
   adopt it once it is approved there. Phones: Body XL 18/26, Body L 16/24,
   Body Base 14/22, Body S 12/20. There is no Body XS: nothing on the site
   is below 12px, and small text is Body S at 12 (designer, 2026-09-30).

   The fluid formula: clamp(phone, phone + (desktop - phone) * (100vw -
   375px) / 1065, desktop), 1065 being 1440 - 375. */

:root {
	/* Headings: Hobo Std, uppercase. Phone / desktop, size / line height. */
	--acs-h1-size-mobile: 2.25rem;      /* 36px */
	--acs-h1-lh-mobile: 2.75rem;        /* 44px */
	--acs-h1-size-desktop: 4.375rem;    /* 70px */
	--acs-h1-lh-desktop: 4.875rem;      /* 78px */
	--acs-h2-size-mobile: 2rem;         /* 32px */
	--acs-h2-lh-mobile: 2.5rem;         /* 40px */
	--acs-h2-size-desktop: 3.25rem;     /* 52px */
	--acs-h2-lh-desktop: 3.75rem;       /* 60px */
	--acs-h3-size-mobile: 1.75rem;      /* 28px */
	--acs-h3-lh-mobile: 2.25rem;        /* 36px */
	--acs-h3-size-desktop: 2.5rem;      /* 40px */
	--acs-h3-lh-desktop: 3rem;          /* 48px */
	--acs-h4-size-mobile: 1.5rem;       /* 24px */
	--acs-h4-lh-mobile: 2rem;           /* 32px */
	--acs-h4-size-desktop: 2.25rem;     /* 36px */
	--acs-h4-lh-desktop: 2.875rem;      /* 46px */
	--acs-h5-size-mobile: 1.25rem;      /* 20px */
	--acs-h5-lh-mobile: 1.75rem;        /* 28px */
	--acs-h5-size-desktop: 1.5rem;      /* 24px */
	--acs-h5-lh-desktop: 2rem;          /* 32px */

	/* H1 / Blog: the blog's own H1, on the blog page (the featured story's
	   title), category pages (the category name) and the article page (the
	   story title); also Find your shack on Locations B and the shack title
	   on Location B. Every other page keeps H1 above. */
	--acs-h1-blog-size-mobile: 2rem;       /* 32px */
	--acs-h1-blog-lh-mobile: 2.5rem;       /* 40px */
	--acs-h1-blog-size-desktop: 2.375rem;  /* 38px */
	--acs-h1-blog-lh-desktop: 2.875rem;    /* 46px */
	/* H2 / Blog: the headings inside a story (the article's h2) */
	--acs-h2-blog-size-mobile: 1.375rem;   /* 22px */
	--acs-h2-blog-lh-mobile: 1.875rem;     /* 30px */
	--acs-h2-blog-size-desktop: 1.625rem;  /* 26px */
	--acs-h2-blog-lh-desktop: 2.125rem;    /* 34px */
	/* H3 / Blog: a sub-heading under a story's H2 / Blog heading (the
	   article's h3 and h4: the steps of a guide, the questions of an FAQ) */
	--acs-h3-blog-size-mobile: 1.125rem;   /* 18px */
	--acs-h3-blog-lh-mobile: 1.625rem;     /* 26px */
	--acs-h3-blog-size-desktop: 1.25rem;   /* 20px */
	--acs-h3-blog-lh-desktop: 1.75rem;     /* 28px */

	/* Body: Century Gothic Pro */
	--acs-text-xl-size-mobile: 1.125rem;    /* 18px */
	--acs-text-xl-lh-mobile: 1.625rem;      /* 26px */
	--acs-text-xl-size-desktop: 1.25rem;    /* 20px */
	--acs-text-xl-lh-desktop: 1.75rem;      /* 28px */
	--acs-text-lg-size-mobile: 1rem;        /* 16px */
	--acs-text-lg-lh-mobile: 1.5rem;        /* 24px */
	--acs-text-lg-size-desktop: 1.125rem;   /* 18px */
	--acs-text-lg-lh-desktop: 1.625rem;     /* 26px */
	--acs-text-base-size-mobile: 0.875rem;  /* 14px */
	--acs-text-base-lh-mobile: 1.375rem;    /* 22px */
	--acs-text-base-size-desktop: 1rem;     /* 16px */
	--acs-text-base-lh-desktop: 1.5rem;     /* 24px */
	--acs-text-sm-size-mobile: 0.75rem;     /* 12px */
	--acs-text-sm-lh-mobile: 1.25rem;       /* 20px */
	--acs-text-sm-size-desktop: 0.875rem;   /* 14px */
	--acs-text-sm-lh-desktop: 1.375rem;     /* 22px */

	/* What the page uses: fluid from 375 to 1440 */
	--acs-h1-size: clamp(2.25rem, calc(2.25rem + 34 * (100vw - 23.4375rem) / 1065), 4.375rem);
	--acs-h1-lh: clamp(2.75rem, calc(2.75rem + 34 * (100vw - 23.4375rem) / 1065), 4.875rem);
	--acs-h2-size: clamp(2rem, calc(2rem + 20 * (100vw - 23.4375rem) / 1065), 3.25rem);
	--acs-h2-lh: clamp(2.5rem, calc(2.5rem + 20 * (100vw - 23.4375rem) / 1065), 3.75rem);
	--acs-h3-size: clamp(1.75rem, calc(1.75rem + 12 * (100vw - 23.4375rem) / 1065), 2.5rem);
	--acs-h3-lh: clamp(2.25rem, calc(2.25rem + 12 * (100vw - 23.4375rem) / 1065), 3rem);
	--acs-h4-size: clamp(1.5rem, calc(1.5rem + 12 * (100vw - 23.4375rem) / 1065), 2.25rem);
	--acs-h4-lh: clamp(2rem, calc(2rem + 14 * (100vw - 23.4375rem) / 1065), 2.875rem);
	--acs-h5-size: clamp(1.25rem, calc(1.25rem + 4 * (100vw - 23.4375rem) / 1065), 1.5rem);
	--acs-h5-lh: clamp(1.75rem, calc(1.75rem + 4 * (100vw - 23.4375rem) / 1065), 2rem);
	--acs-h1-blog-size: clamp(2rem, calc(2rem + 6 * (100vw - 23.4375rem) / 1065), 2.375rem);
	--acs-h1-blog-lh: clamp(2.5rem, calc(2.5rem + 6 * (100vw - 23.4375rem) / 1065), 2.875rem);
	--acs-h2-blog-size: clamp(1.375rem, calc(1.375rem + 4 * (100vw - 23.4375rem) / 1065), 1.625rem);
	--acs-h2-blog-lh: clamp(1.875rem, calc(1.875rem + 4 * (100vw - 23.4375rem) / 1065), 2.125rem);
	--acs-h3-blog-size: clamp(1.125rem, calc(1.125rem + 2 * (100vw - 23.4375rem) / 1065), 1.25rem);
	--acs-h3-blog-lh: clamp(1.625rem, calc(1.625rem + 2 * (100vw - 23.4375rem) / 1065), 1.75rem);
	--acs-text-xl-size: clamp(1.125rem, calc(1.125rem + 2 * (100vw - 23.4375rem) / 1065), 1.25rem);
	--acs-text-xl-lh: clamp(1.625rem, calc(1.625rem + 2 * (100vw - 23.4375rem) / 1065), 1.75rem);
	--acs-text-lg-size: clamp(1rem, calc(1rem + 2 * (100vw - 23.4375rem) / 1065), 1.125rem);
	--acs-text-lg-lh: clamp(1.5rem, calc(1.5rem + 2 * (100vw - 23.4375rem) / 1065), 1.625rem);
	--acs-text-base-size: clamp(0.875rem, calc(0.875rem + 2 * (100vw - 23.4375rem) / 1065), 1rem);
	--acs-text-base-lh: clamp(1.375rem, calc(1.375rem + 2 * (100vw - 23.4375rem) / 1065), 1.5rem);
	--acs-text-sm-size: clamp(0.75rem, calc(0.75rem + 2 * (100vw - 23.4375rem) / 1065), 0.875rem);
	--acs-text-sm-lh: clamp(1.25rem, calc(1.25rem + 2 * (100vw - 23.4375rem) / 1065), 1.375rem);
}