/* ==========================================================================
   YOKE design tokens
   This is the ONLY file that contains color values and font names.
   Change a value here and it updates everywhere on the site.
   Brand source: /brand-source/YOKE-Brand Sheet.pdf
   ========================================================================== */

/* ---------- Self-hosted fonts (files live in /src/assets/fonts) ---------- */
@font-face {
  font-family: "Noto Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-serif-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-serif-latin-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}

:root {
  /* ---------- The four brand colors ---------- */
  --clay-red: #A3301E;   /* RGB 163 48 30  : accents, highlights, values band, focus ring */
  --soft-black: #262626; /* RGB 38 38 38   : text, dark sections, Core tier card */
  --soft-sage: #DBE2D5;  /* RGB 219 226 213: primary buttons, tier cards, callouts */
  --soft-white: #F2F2F2; /* RGB 242 242 242: page background, text on dark */

  /* ---------- Tints mixed only from the brand colors ---------- */
  /* Muted text: 70% Soft Black. 5.4:1 on Soft White, 4.9:1 on Soft Sage (AA). */
  --text-muted: color-mix(in srgb, var(--soft-black) 70%, var(--soft-white));
  /* Muted text on dark: 75% Soft White over Soft Black. 8.2:1 (AA). */
  --text-muted-on-dark: color-mix(in srgb, var(--soft-white) 75%, var(--soft-black));
  --line: color-mix(in srgb, var(--soft-black) 16%, transparent);
  --line-on-dark: color-mix(in srgb, var(--soft-white) 18%, transparent);
  --clay-red-dark: color-mix(in srgb, var(--clay-red) 82%, var(--soft-black));
  --soft-sage-dark: color-mix(in srgb, var(--soft-sage) 82%, var(--soft-black));
  --clay-red-wash: color-mix(in srgb, var(--clay-red) 7%, var(--soft-white));
  --shadow: color-mix(in srgb, var(--soft-black) 22%, transparent);
  /* Video fade masks only read the alpha channel */
  --mask-solid: var(--soft-black);
  --mask-40: color-mix(in srgb, var(--soft-black) 40%, transparent);
  --scrim: color-mix(in srgb, var(--soft-black) 88%, transparent);

  /* Five Community Tenets wheel: shades of Clay Red, darkest to lightest */
  --tenet-1: color-mix(in srgb, var(--clay-red) 70%, var(--soft-black));
  --tenet-2: var(--clay-red);
  --tenet-3: color-mix(in srgb, var(--clay-red) 88%, var(--soft-white));
  --tenet-4: color-mix(in srgb, var(--clay-red) 60%, var(--soft-white));
  --tenet-5: color-mix(in srgb, var(--clay-red) 42%, var(--soft-white));

  /* ---------- Roles ---------- */
  --page-bg: var(--soft-white);
  --text: var(--soft-black);
  --accent: var(--clay-red);
  --focus-ring: var(--clay-red);

  /* Buttons (brand guide: primary = filled Soft Sage, secondary = outlined,
     tertiary = underlined link; all DM Sans Semibold).
     The site uses filled Clay Red for primary buttons instead of the guide's
     Soft Sage, for stronger contrast. Soft White on Clay Red is 6.3:1 (AA). */
  --btn-primary-bg: var(--clay-red);
  --btn-primary-text: var(--soft-white);
  --btn-primary-border: transparent;
  --btn-primary-bg-hover: var(--clay-red-dark);
  /* On dark backgrounds Clay Red's edge is only 2.2:1 against Soft Black,
     so primary buttons switch to the brand's Soft Sage (11.4:1). */
  --btn-primary-bg-on-dark: var(--soft-sage);
  --btn-primary-text-on-dark: var(--soft-black);
  --btn-primary-bg-hover-on-dark: var(--soft-sage-dark);

  /* ---------- Typography ---------- */
  --font-serif: "Noto Serif", Georgia, "Times New Roman", serif; /* headlines, callouts */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* body, buttons */

  /* Type scale (taken from the new homepage) */
  --fs-display: clamp(40px, 6vw, 78px);    /* page h1 */
  --fs-h2-xl: clamp(32px, 4.6vw, 62px);    /* closing CTA */
  --fs-h2-lg: clamp(30px, 3.8vw, 52px);    /* membership heading */
  --fs-h2: clamp(26px, 3.2vw, 42px);       /* section h2 */
  --fs-h3: clamp(24px, 2.7vw, 36px);       /* sub-section h3 */
  --fs-h4: clamp(20px, 2.1vw, 26px);       /* card titles */
  --fs-lead: 18px;
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-xs: 14px;
  --fs-eyebrow: 12px;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 840px;
  --gutter: 24px;
  --section-space: clamp(44px, 5.25vw, 72px); /* space above and below each section */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --header-h: 76px;
}