/* =====================================================================
   FreeSurvey brand tokens.
   Warm paper, near-black ink, one highlighter lime. Loaded by every layout,
   which is why the @font-face rules live here rather than in site.css.

   --brand-600 is the DEEP lime, not the bright one: links, buttons and focus
   rings are painted from it, and the bright lime fails contrast on white.
   Bright lime is fill and highlight only.
   ===================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/InstrumentSerif.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Karla.latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* One hue, oklch 118. The steps below are that hue lightened and darkened,
     so nothing on screen is a second green. */
  --brand-50:  #FAFCEF;
  --brand-100: #F2F7DC;   /* wash: plan panels, hover rows, the new answer */
  --brand-200: #E8F2B8;   /* focus halo */
  --brand-300: #D9F24B;   /* THE highlight. Marker pen, chart fill, progress */
  --brand-400: #B9CE3F;
  --brand-500: #8FAA33;   /* mid: borders, small marks, eyebrow labels */
  --brand-600: #566E15;   /* anchor: links, buttons, anything read as text */
  --brand-700: #475A11;
  --brand-800: #38470E;
  --brand-900: #29340A;

  --brand-accent: #D9F24B;

  --brand-font: 'Karla', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  --bs-primary-rgb: 86, 110, 21;

  /* ---- FSV-only extras (not in the shared tokens.css scale) ---------------
     Warm paper and four ink steps. Named for what they are rather than for a
     number, because the marketing pages read better that way. */
  --paper:      #FBFAF7;   /* page */
  --card:       #FFFFFF;   /* anything raised off the page */
  --tint:       #F3F1E8;   /* quiet band, pull quotes, empty states */
  --rule:       #E4E2D8;   /* hairline. There are no shadows in this brand */
  --rule-firm:  #C7C5B8;
  --ink-1:      #1A1A18;   /* headlines, primary buttons */
  --ink-2:      #45453F;   /* lead paragraphs */
  --ink-3:      #55554D;   /* body */
  --ink-4:      #8A8A80;   /* captions, meta */
  --clay:       #B4451F;   /* trouble */
  --amber:      #C98A0C;   /* careful */

  --display-font: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}