/*
 * RE2 Design System — brand tokens
 *
 * These are custom properties only. Declaring them on :root is safe: nothing is
 * styled until a component or section actually references a variable, so this
 * file cannot change the appearance of a theme on its own.
 */

:root {
  /* Brand — derived from the RE2 logo, softened for a learning environment */
  --red: #FC8A7B;        /* soft pink — primary action */
  --red-dark: #F4705F;
  --blue: #BADA55;       /* green (legacy variable name, kept so existing markup still matches) */
  --blue-dark: #5C8718;
  --blue-ink: #171717;
  --yellow: #EEFF42;     /* neon — sparing accent use only */
  --yellow-soft: #F6FF8A;
  --teal: #71D6C0;       /* hover state for every filled button */
  --teal-dark: #2C6B5D;

  /* Neutrals */
  --white: #FFFFFF;
  --surface: #F1FAE8;    /* soft green page tint */
  --border: #C4C4C4;
  --grey-light: #B0B0B0;
  --grey: #727272;
  --ink: #383838;
  --black: #000;

  /* Type */
  --font-head: 'Poppins', sans-serif;
  --font-body: 'Avenir', 'Nunito Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --sz-caption: 12px;
  --sz-sm: 15px;
  --sz-ui: 16px;
  --sz-body: 18px;
  --sz-lead: 20px;
  --sz-h4: 26px;
  --sz-h3: 30px;
  --sz-h2: 40px;
  --sz-display: 55px;

  /* Shape and motion */
  --r-sm: 3px;
  --r-lg: 24px;
  --r-pill: 300px;
  --dur: 400ms;
  --stagger: 100ms;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --shadow-card: 0 10px 30px rgba(38, 66, 30, .10);
  --shadow-card-hover: 0 18px 44px rgba(38, 66, 30, .18);

  --re2-content-width: 1180px;
}