/*
  Aims Community College — 2026 Brand Guidelines, encoded as design tokens.
  Source: Aims Brand Guidelines 2026.pdf (Primary Color Palette, Typography,
  Color Accessibility).

  Project decision (2026-10-27): this site uses ONLY the primary palette —
  red / black / slate / white — no secondary or tertiary brand colors, and
  no gradients anywhere. Status/severity meaning is carried by value
  (light vs. dark) and motion instead of hue; see components.css. The
  gray-100/200/300 tints below are plain grayscale, derived from Aims
  Black for borders and surfaces — they're not a brand-guide color family,
  just neutral steps between black and white.
*/

:root {
  /* --- Primary palette (brand guide p.33) — the only brand hues in use --- */
  --aims-red: #DA1418;
  --aims-black: #231F20;
  --aims-slate: #636466;
  --white: #FFFFFF;

  /* --- Neutral gray tints (grayscale only — no hue) --- */
  --gray-100: #F4F3F3;
  --gray-200: #E4E2E2;
  --gray-300: #C7C4C4;

  /* --- Surfaces --- */
  --surface-page: var(--white);
  --surface-muted: var(--gray-100);
  --surface-dark: var(--aims-black);

  /* --- Text --- */
  --text-primary: var(--aims-black);
  --text-secondary: var(--aims-slate);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.65);
  --text-link: var(--aims-red);

  /* --- Status: value + motion carry meaning, not hue (see components.css) --- */
  --status-done-bg: var(--aims-black);
  --status-done-text: var(--white);
  --status-progress-bg: var(--white);
  --status-progress-text: var(--aims-black);
  --status-blocked-bg: var(--aims-red);
  --status-blocked-text: var(--white);
  --status-notstarted-bg: var(--gray-100);
  --status-notstarted-text: var(--aims-black);
  --status-caution-bg: var(--white);
  --status-caution-text: var(--aims-red);

  /* --- Type (brand guide p.28: Merriweather display, Inter corporate/body) --- */
  --font-display: 'Merriweather', Georgia, serif;
  --font-body: 'Inter', Arial, Helvetica, sans-serif;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Shape / elevation (kept soft — "practical, but not uninspiring") --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-soft: 0 2px 8px rgba(35, 31, 32, 0.08);
  --shadow-card: 0 6px 20px rgba(35, 31, 32, 0.10);
  --shadow-lift: 0 10px 28px rgba(35, 31, 32, 0.16);

  /* --- Motion --- */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.35s ease;

  --container-width: 1120px;
}