/* ==========================================================================
   Patru.design — design tokens
   --------------------------------------------------------------------------
   Custom properties only — no rules that paint anything. Every value below
   was measured from the live Squarespace 7.1 site (site.css + static.css,
   fetched 2026-07-15); source values are noted where the mapping is not
   obvious. Load this file before base.css on every page.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     Color primitives
     HSL triplets are kept verbatim from the live site.css so any
     hsl()/hsla() composition matches Squarespace to the decimal.
     ------------------------------------------------------------------ */
  --white-hsl: 0, 0%, 100%;             /* #FFFFFF */
  --black-hsl: 0, 6.06%, 12.94%;        /* #231F1F */
  --light-accent-hsl: 0, 0%, 92.94%;    /* #EDEDED */
  --dark-accent-hsl: 0, 0.96%, 40.78%;  /* #696767 */
  --accent-hsl: 5.32, 100%, 69.02%;     /* #FF6F61 (coral) */

  --color-white: hsl(var(--white-hsl));
  --color-black: hsl(var(--black-hsl));
  --color-light-accent: hsl(var(--light-accent-hsl));
  --color-dark-accent: hsl(var(--dark-accent-hsl));
  --color-accent: hsl(var(--accent-hsl));

  /* ------------------------------------------------------------------
     Typography
     The live site loads no webfonts; headings and body share one stack.
     ------------------------------------------------------------------ */
  --font-stack: "Helvetica Neue", Arial, sans-serif;

  --heading-weight: 700;
  /* Live: --heading-font-line-height: 1.2em. Kept in em on purpose:
     Squarespace multiplies it per level, see base.css. */
  --heading-line-height: 1.2em;
  --heading-letter-spacing: -0.04em;

  --body-weight: 400;
  --body-line-height: 1.4em;            /* live: --body-font-line-height */
  --body-letter-spacing: -0.004em;

  /* Fluid type scale — rem multipliers fed into Squarespace's fluid
     formula (implemented in base.css):
       portrait <=767px : (scale - 1) * 0.012 * min(100vh, 900px) + 1rem
       >=768px/landscape: min((scale - 1) * 1.2vw + 1rem,
                              max((scale - 1) * 0.012 * maxPageWidth + 1rem,
                                  scale * 1rem))
     Live sources: --heading-N-size-value, --large/normal/small-text-size-value,
     --primary-button-font-font-size-value. */
  --h1-scale: 5.5;
  --h2-scale: 3.5;
  --h3-scale: 2.75;
  --h4-scale: 1.75;
  --text-large-scale: 1.5;
  --text-normal-scale: 1.185;
  --text-small-scale: 1;
  --btn-font-scale: 1.25;

  /* ------------------------------------------------------------------
     Buttons (live tweak state: primary-button-style-solid +
     primary-button-shape-square, stroke 0 -> no border, no radius)
     ------------------------------------------------------------------ */
  --btn-weight: 700;                    /* --primary-button-font-font-weight */
  --btn-letter-spacing: 0.02em;         /* --primary-button-font-letter-spacing */
  /* Live computed line-height is `normal`: static.css
     `#siteWrapper.site-wrapper .sqs-button-element--primary { line-height: normal }`
     out-cascades site.css's var(--primary-button-font-line-height) (1.2em). */
  --btn-line-height: normal;
  /* Live winning padding rule (static.css, verified computed 1440/1280):
     `#siteWrapper.site-wrapper .sqs-button-element--primary
        { padding: var(--primary-button-padding-y) var(--primary-button-padding-x) }`
     with site.css --primary-button-padding-y: 1.2em / -x: 2em. It overrides the
     older --primaryButtonPadding: 1.4em rule, which never wins on the live site. */
  --btn-padding-y: 1.2em;
  --btn-padding-x: 2em;

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --max-page-width: 2560px;             /* live: --maxPageWidth */
  --page-gutter: 7.44vw;                /* live: --pagePadding / --sqs-site-gutter;
                                           swapped to 6vw at <=767px below
                                           (--sqs-mobile-site-gutter) */
  --header-pad-y: 2vw;                  /* live: .header-announcement-bar-wrapper
                                           padding-top/bottom */

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --anim-duration: 0.65s;               /* --tweak-global-animations-animation-duration */
  --anim-curve: ease;                   /* body class ...animation-curve-ease */
  /* Curve used by the live "flex" animation family (button wipe,
     link underline): cubic-bezier(.19,1,.22,1) */
  --anim-curve-flex: cubic-bezier(0.19, 1, 0.22, 1);
  --btn-hover-duration: 0.6s;           /* button color/clip-path transition */
  --link-underline-duration: 0.3s;      /* p a background-size transition */

  /* ------------------------------------------------------------------
     Z-index tiers
     ------------------------------------------------------------------ */
  --z-below: -1;                        /* button hover fill (::before) */
  --z-base: 0;
  --z-raised: 1;
  --z-header: 10;                       /* measured: live .header { z-index: 10 } */
  --z-overlay: 100;                     /* rebuild convention (mobile nav overlay) */
  --z-modal: 1000;                      /* rebuild convention */
}

/* Mobile gutter — Squarespace 7.1 breakpoint is 767px */
@media screen and (max-width: 767px) {
  :root {
    --page-gutter: 6vw;                 /* live: --sqs-mobile-site-gutter */
    --header-pad-y: 6vw;                /* live mobile header padding =
                                           mobile site gutter (measured 22.5px
                                           at 375) */
  }
}

/* ==========================================================================
   Section themes
   --------------------------------------------------------------------------
   The live site assigns [data-section-theme="white|light|bright|black"] per
   section; the rebuild uses data-theme. Each theme only remaps the semantic
   variables below, so components (headings, text, buttons) restyle
   automatically. Values traced from the live theme blocks:
     --siteBackgroundColor, --heading*Color, --paragraph*Color,
     --primaryButtonBackgroundColor / TextColor, --navigationLinkColor.
   All four heading color slots and all three paragraph slots are identical
   within every live theme, so one variable each suffices.
   ========================================================================== */

:root,
[data-theme="white"] {
  --theme-bg: var(--color-white);
  --theme-heading: var(--color-black);
  --theme-text: var(--color-black);
  --theme-btn-bg: var(--color-accent);  /* live: safeDarkAccent == accent */
  --theme-btn-text: var(--color-black);
  --theme-nav-link: var(--color-black);
}

[data-theme="light"] {
  --theme-bg: var(--color-light-accent);
  --theme-heading: var(--color-black);
  --theme-text: var(--color-black);
  --theme-btn-bg: var(--color-accent);  /* live: safeDarkAccent == accent */
  --theme-btn-text: var(--color-black);
  --theme-nav-link: var(--color-black);
}

[data-theme="bright"] {
  --theme-bg: var(--color-accent);
  --theme-heading: var(--color-white);  /* live: safeInverseAccent == white */
  --theme-text: var(--color-black);     /* note: paragraphs stay black on coral */
  --theme-btn-bg: var(--color-black);
  --theme-btn-text: var(--color-white);
  --theme-nav-link: var(--color-black);
}

[data-theme="black"] {
  --theme-bg: var(--color-black);
  --theme-heading: var(--color-white);
  --theme-text: var(--color-white);
  --theme-btn-bg: var(--color-accent);  /* live: safeLightAccent == accent */
  --theme-btn-text: var(--color-white); /* live: safeInverseLightAccent == white */
  --theme-nav-link: var(--color-white);
}