/* ClaritasZ brand layer v1
   Source: brand/README.md (knockout set, palette) and the agreed typography.
   Shared by claritasz.com and its subdomains; change the brand here, not per site. */

/* Typography: self hosted, SIL Open Font License (see fonts/). */
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/barlow-latin-600-normal.woff2") format("woff2");
  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: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/barlow-latin-ext-600-normal.woff2") format("woff2");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  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: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  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: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  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: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Palette */
  --cz-green-1: #00613D;
  --cz-green-2: #00492E;
  --cz-green-3: #013A22;
  --cz-yellow-1: #FFD526;
  --cz-yellow-2: #FCCC01;
  --cz-yellow-3: #F6BE00;
  --cz-green-surface: linear-gradient(135deg, var(--cz-green-1) 0%, var(--cz-green-2) 55%, var(--cz-green-3) 100%);

  --cz-ink: #14201A;
  --cz-ink-soft: #4A5A52;
  --cz-on-green: #E3EEE7;
  --cz-paper: #FFFFFF;
  --cz-paper-soft: #F4F6F4;
  --cz-rule: #DDE3DF;

  /* Type */
  --cz-font-heading: "Barlow", "IBM Plex Sans", system-ui, sans-serif;
  --cz-font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cz-font-code: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Rhythm */
  --cz-measure: 68ch;
  --cz-width: 1040px;
  --cz-gutter: clamp(16px, 4vw, 40px);
  --cz-radius: 10px;

  /* Wordmark: the SVG carries built-in whitespace (left ≈ 5.9 %, top ≈ 23.3 % of its box).
     These offsets align the visible letters optically with the text edge. */
  --cz-logo-h: 76px;
}
@media (max-width: 600px) { :root { --cz-logo-h: 46px; } }