/**
 * AW Online Hypnotherapy — design tokens
 * Source: VD2 (identity/typography) · VD3 (chrome shells) · CSS-shell-sizes.tsv · VD2–VD7 specs
 *
 * Breakpoints (see breakpoints.css for @media overrides):
 *   --bp-chrome  1250px  header/footer chrome layout
 *   --bp-shell   767px   shell gutters, H2/H3 scale
 *   --bp-narrow  560px   tight grids
 *   --bp-sanctuary 1024px  Soul Sanctuary sidebar collapse
 *   --bp-progress-compact 600px  progress bar compact stepper
 */

:root {
  /* Breakpoint contract (use same px values in @media across all CSS) */
  --bp-chrome: 1250px;
  --bp-shell: 767px;
  --bp-narrow: 560px;
  --bp-sanctuary: 1024px;
  --bp-progress-compact: 600px;

  /* Palette — VD2 */
  --night: #1a1a2e;
  --night-deep: #101024;
  --sand: #e8dfd0;
  --gold: #c3853a;
  --blue: #6787c2;
  --grey: #7a6f5e;
  --ink: #1a1a2e;
  --rc-grey-card: rgba(122, 111, 94, 0.18);
  --rc-grey-disclaimer: rgba(122, 111, 94, 0.18);

  /* Layout shells — VD3 / CSS-shell-sizes.tsv */
  --shell-max: 1120px;
  --prose-max: 920px;
  --shell-gutter: 16px;
  --shell-gutter-double: 32px;
  --shell-gutter-mobile: 12px;
  --shell-gutter-mobile-double: 24px;
  --header-gutter-left: 11px;
  --header-gutter-right: 16px;
  --header-gutter-mobile: 11px;
  --header-height: 130px;
  --header-height-mobile: 72px;
  --mobile-menu-padding-y: 20px;
  --mobile-menu-padding-x: 24px;

  /* Nested / component widths */
  --hero-text-max: 760px;
  --hero-video-max: 760px;
  --cta-content-max: 640px;
  --intro-max: 680px;
  --home-portal-inner-max: 720px;
  --onboarding-layout-max: 960px;
  --onboarding-card-max: 760px;
  --onboarding-form-max: 520px;
  --onboarding-form-narrow-max: 420px;
  --progress-bar-max: 720px;
  --progress-modal-max: 420px;
  --visitors-book-max: 480px;
  --member-dashboard-card-max: 480px;
  --session-popup-max: 360px;
  --session-image-max: 420px;
  --form-card-max: 420px;
  --shop-overlay-max: 340px;
  --sanctuary-player-max: 220px;
  --blog-sidebar-col: 280px;
  --hero-grid-col-min: 280px;

  /* Typography — VD2 */
  --font-serif: "Cormorant Garamond", serif;
  --font-sans: "DM Sans", sans-serif;

  --body-size: 15px;
  --body-weight: 400;
  --body-leading: 1.7;
  --body-tracking: 0.01em;

  --h1-size: 48px;
  --h1-weight: 300;
  --h1-tracking: -0.02em;
  --h1-leading: 1.15;

  --h2-size: 32px;
  --h2-weight: 400;
  --h2-tracking: -0.01em;
  --h2-leading: 1.25;

  --h3-size: 18px;
  --h3-weight: 500;
  --h3-leading: 1.35;

  --pull-quote-size: 22px;
  --pull-quote-weight: 400;
  --pull-quote-leading: 1.4;
  --pull-quote-style: italic;

  --button-min-height: 44px;

  --hero-tagline-size: 48px;
  --hero-tagline-weight: 300;
  --hero-primary-offset: 13px;
  /* Home hero visual symmetry — box margins ≠ visual baselines; see CSS-shell-sizes.tsv */
  --hero-visual-gap: 91px;
  --hero-tagline-descent: 20px;
  --hero-cta-height: var(--button-min-height);
  --hero-tagline-to-cta-bottom: calc(var(--hero-visual-gap) + var(--hero-cta-height));
  --hero-headline-to-tagline-gap: 48px;
  --hero-tagline-to-cta-gap: calc(var(--hero-visual-gap) - var(--hero-tagline-descent));

  --nav-size: 13px;
  --nav-weight: 500;
  --nav-tracking: 0.05em;

  --label-size: 11px;
  --label-weight: 500;
  --label-tracking: 0.1em;

  /* Prose rhythm — VD5 sand sections (.aw-prose) */
  --prose-h2-margin-top: 3.25rem;
  --prose-h2-margin-bottom: 1rem;
  --prose-h2-rule-gap: 1.35rem;
  --prose-section-break: calc(var(--prose-h2-margin-top) + var(--prose-h2-rule-gap));
  --prose-paragraph-gap: 1rem;
  --prose-h3-margin-top: 2rem;
  --prose-h3-margin-bottom: 0.75rem;
  --prose-inline-cta-margin: 1.25rem;

  /* RC component spacing */
  --rc-doxy-margin-y: 28px;
  --home-section-padding-y: 56px;

  --ui-small-size: 12px;
  --ui-small-weight: 500;
  --ui-small-tracking: 0.05em;

  /* Chrome lockup — VD3 */
  --lockup-mark-size: 108px;
  --wordmark-size: 48px;
  --credentials-size: 11px;
  --tagline-size: 32px;
  --social-icon-size: 32px;
}