/* ==========================================================================
   Citizens for Responsible AI — design tokens (Civic Green)
   Import once, before crai.css. Every value here is referenced by name in
   crai.css, so re-theming means editing this file only.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --crai-evergreen:        #1C5A43;  /* Primary: buttons, links, the mark, dark bands */
  --crai-evergreen-hover:  #164B37;
  --crai-evergreen-active: #113A2B;
  --crai-marigold:         #F2B134;  /* Accent: FILL ONLY (highlights, badges, accent button). Never text on light grounds. */
  --crai-marigold-hover:   #E09F22;
  --crai-marigold-soft:    #FBE7BE;  /* Text selection, soft emphasis */

  /* ---- Neutrals ---------------------------------------------------------- */
  --crai-paper:   #F6F5EF;  /* Page background */
  --crai-surface: #FFFFFF;  /* Cards, inputs, the message editor */
  --crai-mist:    #EDF3EE;  /* Tint: pills, quiet sections (the current site's theme color) */
  --crai-wash:    #DEE4DC;  /* Decorative only (background motifs) */
  --crai-line:    #D3DCD5;  /* Dividers and card outlines (decorative, not for form fields) */
  --crai-border:  #728278;  /* Form-control borders: 4.1:1 on white */
  --crai-ink:     #13241C;  /* Body text: 14.8:1 on paper */
  --crai-muted:   #4B5B52;  /* Secondary text: 6.6:1 on paper */

  /* ---- On dark (evergreen) grounds -------------------------------------- */
  --crai-on-evergreen:       #F6F5EF;  /* 7.4:1 */
  --crai-on-evergreen-muted: #CFDBD2;  /* 5.7:1 */

  /* ---- Functional -------------------------------------------------------- */
  --crai-focus:          #1C5A43;  /* Focus ring on light grounds */
  --crai-focus-on-dark:  #F2B134;  /* Focus ring on evergreen */
  --crai-error:          #B3261E;  /* Error text, icons, field borders: 6.5:1 on white */
  --crai-error-bg:       #FCEDEB;
  --crai-warning-text:   #6E4A00;
  --crai-warning-bg:     #FDF1D6;
  --crai-success-text:   #1C5A43;
  --crai-success-bg:     #E3EFE6;
  --crai-info-bg:        #EDF3EE;
  --crai-disabled-bg:    #E4E9E5;
  --crai-disabled-text:  #6D7B73;
  --crai-placeholder:    #6E6E6E;  /* 5.1:1 on white */

  /* ---- Typography -------------------------------------------------------- */
  --crai-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --crai-font-sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --crai-size-display-xl: clamp(2.75rem, 1.55rem + 4.4vw, 4.875rem);   /* 44 → 78px  hero h1 */
  --crai-size-display-l:  clamp(2rem, 1.55rem + 1.8vw, 3rem);           /* 32 → 48px  section h2 */
  --crai-size-display-m:  clamp(1.5rem, 1.33rem + 0.7vw, 1.875rem);     /* 24 → 30px  card / h3 */
  --crai-size-title:      1.125rem;                                     /* 18px  sans heading */
  --crai-size-lede:       clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);   /* 17 → 20px */
  --crai-size-body:       1.0625rem;                                    /* 17px */
  --crai-size-body-s:     0.9375rem;                                    /* 15px */
  --crai-size-caption:    0.8125rem;                                    /* 13px */
  --crai-size-eyebrow:    0.75rem;                                      /* 12px, uppercase */
  --crai-size-button:     1.0625rem;                                    /* 17px */

  --crai-leading-tight: 1.02;
  --crai-leading-snug:  1.12;
  --crai-leading-body:  1.6;
  --crai-tracking-display: -0.02em;
  --crai-tracking-eyebrow: 0.14em;

  /* ---- Space (4px base) -------------------------------------------------- */
  --crai-space-1: 4px;
  --crai-space-2: 8px;
  --crai-space-3: 12px;
  --crai-space-4: 16px;
  --crai-space-5: 20px;
  --crai-space-6: 24px;
  --crai-space-8: 32px;
  --crai-space-10: 40px;
  --crai-space-12: 48px;
  --crai-space-16: 64px;
  --crai-space-20: 80px;
  --crai-space-24: 96px;

  /* ---- Radius ------------------------------------------------------------ */
  --crai-radius-s: 6px;      /* checkboxes, small chips */
  --crai-radius-m: 10px;     /* buttons, inputs, alerts */
  --crai-radius-l: 18px;     /* cards */
  --crai-radius-pill: 999px; /* pills */

  /* ---- Elevation --------------------------------------------------------- */
  --crai-shadow-card: 0 28px 56px -36px rgba(19, 36, 28, 0.45);
  --crai-shadow-raise: 0 1px 2px rgba(19, 36, 28, 0.08);

  /* ---- Layout ------------------------------------------------------------ */
  --crai-container: 1200px;
  --crai-measure: 68ch;               /* max line length for prose */
  --crai-gutter: clamp(20px, 5vw, 64px);
  --crai-tap: 44px;                   /* minimum touch target */

  /* ---- Motion ------------------------------------------------------------ */
  --crai-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --crai-dur-fast: 120ms;
  --crai-dur: 200ms;
  --crai-dur-slow: 320ms;
}

/* Breakpoints (for reference; CSS variables can't be used in media queries):
   sm 480px · md 768px · lg 1024px · xl 1280px — crai.css uses 768px and 1024px. */