/*
 * tokens.css — single source of truth for ctg_site colors, fonts, breakpoint.
 *
 * Source provenance: extracted from dev/from_kate/donors/about-the-process-v3.html
 * (Kate's style donor) via templates/base.html.j2 inline :root block.
 *
 * Rule: do NOT duplicate these values as literals in any *.j2 template or
 * other CSS file. Reference them as var(--name).
 *
 * Acceptance check: `grep -E '#[0-9a-fA-F]{6}' templates/*.j2` must return 0.
 */

:root {
  /* Purples */
  --purple-deep:   #3C1560;  /* primary deep — backgrounds, hero CTAs */
  --purple-mid:    #5C2A90;  /* mid — section bg, hover states */
  --purple-warm:   #6B3A9A;  /* warmer variant */
  --purple-light:  #9B72BB;  /* drop cap accents, subtle elements */

  /* Lavenders */
  --lavender:       #C4AED8;
  --lavender-pale:  #EDE6F5;  /* highlighted testimonials */
  --lavender-mid:   #BBA8CF;

  /* Golds */
  --gold:        #C8900A;  /* deep — section labels */
  --gold-bright: #E8A820;  /* bright — nav logo, callouts, CTAs */
  --gold-pale:   #F5E8C0;
  --gold-light:  #FAF0D8;

  /* Neutrals */
  --cream:     #FAF8F5;  /* body bg, modal bg */
  --parchment: #F3ECE2;  /* alt sections, testimonial cards */
  --ink:       #1E0A30;  /* darkest text */
  --ink-mid:   #4A2D6A;  /* body text */
  --ink-light: #7A5A9A;  /* secondary text */
  --white:     #FFFFFF;

  /* RGB-triple companions for alpha-tinted uses
   * Use as: rgb(var(--purple-deep-rgb) / 0.93)
   * Only the values used by chrome's rgba() literals are defined here;
   * extend as new alpha-tinted uses appear. */
  --purple-deep-rgb: 60 21 96;       /* matches --purple-deep #3C1560 */
  --lavender-rgb:    196 174 216;    /* matches --lavender #C4AED8 */
  --ink-rgb:         30 10 48;       /* matches --ink #1E0A30 */

  /* Font stacks */
  --serif: "Playfair Display", Georgia, serif;        /* display headings */
  --body:  "Cormorant Garamond", Georgia, serif;      /* body copy */
  --sans:  "Jost", system-ui, sans-serif;             /* UI / nav / labels */

  /* Breakpoint
   * Native CSS @media queries cannot consume var(), so the value 640px is
   * still hardcoded in @media (max-width: 640px) blocks. This var exists
   * for documentation and JS use (e.g. matchMedia). Keep the two in sync. */
  --bp-mobile: 640px;
}