/* Art-direction tokens for the Human Trainer canvas.
 *
 * GROUP A — tokens the live site already has. Names and HSL triplets are
 * copied from src/index.css + tailwind.config.ts, so a value changed here
 * maps 1:1 onto a real CSS variable and the exported code is paste-ready.
 *
 * GROUP B — canvas-only knobs. These do NOT exist on the site today; the
 * panel marks them as such. Exporting them produces a proposal, not a patch.
 */

:root {
  /* ---- GROUP A: on the site ------------------------------------------ */
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;
  --primary: 0 0% 0%;
  --primary-foreground: 0 0% 100%;
  --secondary: 59 100% 82%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 40%;
  --accent: 59 100% 82%;
  --accent-foreground: 0 0% 0%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 0%;
  --input: 0 0% 0%;
  --ring: 0 0% 0%;

  --radius: 0rem;          /* site identity: sharp corners */
  --border-w: 2px;         /* site identity: border-2, 30 uses in DynamicPage */

  --font-display: "Gobold", "Arial Black", sans-serif;
  --font-body: "Montserrat", "Arial", sans-serif;

  /* ---- GROUP B: canvas-only (not on the site) ------------------------- */
  --scale-ratio: 1.25;     /* typographic scale step */
  --density: 1;            /* multiplies section padding */
  --shadow-1: none;
  --shadow-2: none;
  --content-max: 1400px;   /* matches the tailwind container 2xl today */
}

/* Resolved colours. Blocks use these, never raw hex, so the panel drives
 * every page at once. */
:root {
  --c-bg: hsl(var(--background));
  --c-fg: hsl(var(--foreground));
  --c-card: hsl(var(--card));
  --c-card-fg: hsl(var(--card-foreground));
  --c-primary: hsl(var(--primary));
  --c-primary-fg: hsl(var(--primary-foreground));
  --c-secondary: hsl(var(--secondary));
  --c-secondary-fg: hsl(var(--secondary-foreground));
  --c-muted: hsl(var(--muted));
  --c-muted-fg: hsl(var(--muted-foreground));
  --c-accent: hsl(var(--accent));
  --c-accent-fg: hsl(var(--accent-foreground));
  --c-border: hsl(var(--border));
}

/* Montserrat is the site's own (OFL), not Google's: latin and latin-ext of
 * the variable font, 300 to 900 (F4.4). The canvas draws with the same files. */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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: "Montserrat";
  src: url("assets/fonts/Montserrat-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Gobold";
  src: url("assets/fonts/Gobold-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gobold";
  src: url("assets/fonts/Gobold-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Site surface. Scoped so the canvas chrome around it keeps its own look. */
.ht-site {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-body);
}
/* :where() keeps this at zero specificity so any block rule wins. As a plain
 * selector it outranked .benefits-item-title and .notfound-code, which set
 * Montserrat — and the site really does render those in Montserrat, so the
 * headings were coming out in Gobold here and nowhere else. This is only a
 * default for headings no block styles. */
.ht-site :where(h1, h2, h3) {
  font-family: var(--font-display);
  font-weight: 700;
}

/* The reset the site gets from Tailwind's preflight. `all: initial` on the
 * surface strips the page's defaults, and the browser's own would otherwise
 * creep back in — heading margins, line-height: normal instead of 1.5 —
 * changing spacing everywhere even with the controls at neutral. */
/* line-height lives in index.html's .ht-site rule: `all: initial` there
 * comes after this file and would reset it back to normal. */
.ht-site { -webkit-text-size-adjust: 100%; }
.ht-site :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, hr, pre) { margin: 0; }
.ht-site :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
.ht-site :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.ht-site :where(img, svg, video, canvas) { display: block; max-width: 100%; }
.ht-site :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
.ht-site :where(a) { color: inherit; text-decoration: inherit; }
.ht-site :where(hr) { border: 0; border-top: 1px solid; }
.ht-site img { max-width: 100%; display: block; }

/* ---- GROUP B wiring ---------------------------------------------------
 * The knobs below do not exist on the site, so they are applied centrally
 * here rather than edited into 16 block files. At their neutral values
 * (scale 1.25, density 1, shadows none, radius 0) the output is byte-for-
 * byte the site's own look — the controls add range, not a redesign.
 */

/* Type scale. Blocks size text in rem; the workbench chrome is px-only, so
 * moving the root size scales the site surface and leaves the chrome put. */
html { font-size: calc(100% * var(--scale-ratio) / 1.25); }

/* Corner rounding and shadow, applied to the elements that actually draw a
 * box — the same set that carries the site's border token. Approximate by
 * construction: the site has no shadow scale to be faithful to. A radius
 * that comes from the database stays inline and still wins over this. */
.ht-site :is(
  .hb-card--hover, .hb-card--plain, .locations-card, .tm-card, .hiw-item,
  .cf-card, .features-item, .faq-item, .pr-card, .location-media-box,
  .benefits-image--default-border, .cf-input
) {
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.ht-site :is(.cta-button, .hh-hero__cta, .cf-submit, .pr-cta, .location-social-link, .location-badge) {
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}