/* =========================================
   ============== COLOR SYSTEM ==============
   ========================================= */

:root {
  /* ---- BRAND COLORS ---- */
  --brand-primary: #DE3341;
  --brand-primary-hover: #C12A36;
  --brand-secondary: #111111;
  --brand-secondary-hover: #4f4f4f;
  --brand-accent: #FAF0DA;
  --brand-bg: #FFFFFF;

  /* ---- TYPOGRAPHY COLORS ---- */
  --color-heading: #111111;
  --color-body: #333333;
  --color-link: #15727A;
  --color-link-hover: #5AA8AE;

  /* ---- NEUTRAL SCALE ---- */
  --gray-light: rgba(34, 34, 34, 0.1);
  --gray-medium: #6B6B6B;

  /* ---- FEEDBACK COLORS ---- */
  --color-success: #FAF0DA; /* cream */
  --color-alert: #f2f2f2;   /* light gray */

  /* ---- RADIUS ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
}

/* ---- Background Utility Classes ---- */
.bg-cream { background-color: var(--brand-accent); }
.bg-lightgray { background-color: var(--gray-light); }
.bg-dark { background-color: var(--brand-secondary); color: #fff; }