/**
 * Color Utilities - Shared background and text color classes
 * Used across all content blocks for consistent styling
 *
 * Background Color Options:
 * - primary: Forest Green (#002823)
 * - accent: Coral (#ff6b6b)
 * - tertiary: Aqua (#4db8c4)
 * - info: Blue (#0678be)
 * - warning: Mustard (#F5A623)
 * - light: Off-white (#F7F6F1)
 * - white: Pure white (#ffffff)
 * - custom: Custom color via inline style
 *
 * Text Color Options:
 * - white: White text
 * - dark: Dark text
 * - custom: Custom color via inline style
 */

/* === CSS Custom Properties for Colors === */
:root {
  /* Background Colors */
  --block-bg-primary: var(--background-primary, #002823);
  --block-bg-accent: var(--background-accent, #ff6b6b);
  --block-bg-tertiary: var(--background-tertiary, #4db8c4);
  --block-bg-info: #0678be;
  --block-bg-warning: var(--color-mustard-100, #F5A623);
  --block-bg-light: var(--background-surface, #F7F6F1);
  --block-bg-white: #ffffff;

  /* Text Colors */
  --block-text-white: #ffffff;
  --block-text-dark: var(--content-on-surface, #1F2937);
  --block-text-secondary: var(--color-text-secondary, #6b7280);

  /* Content on backgrounds */
  --block-content-on-primary: var(--content-on-primary, #ffffff);
  --block-content-on-accent: var(--content-on-accent, #ffffff);
  --block-content-on-tertiary: var(--content-on-tertiary, #002823);
  --block-content-on-info: #ffffff;
  --block-content-on-warning: var(--content-on-surface, #1F2937);
  --block-content-on-light: var(--content-on-surface, #1F2937);
  --block-content-on-white: var(--content-on-surface, #1F2937);
}

/* ============================================
   BACKGROUND COLOR UTILITIES
   These classes can be extended by block-specific selectors
   ============================================ */

/* Primary (Forest Green) */
[class*="--bg-primary"] {
  background-color: var(--block-bg-primary);
  color: var(--block-content-on-primary);
}

/* Accent (Coral) */
[class*="--bg-accent"] {
  background-color: var(--block-bg-accent);
  color: var(--block-content-on-accent);
}

/* Tertiary (Aqua) */
[class*="--bg-tertiary"] {
  background-color: var(--block-bg-tertiary);
  color: var(--block-content-on-tertiary);
}

/* Info (Blue) */
[class*="--bg-info"] {
  background-color: var(--block-bg-info);
  color: var(--block-content-on-info);
}

/* Warning (Mustard) */
[class*="--bg-warning"] {
  background-color: var(--block-bg-warning);
  color: var(--block-content-on-warning);
}

/* Light (Off-white) */
[class*="--bg-light"] {
  background-color: var(--block-bg-light);
  color: var(--block-content-on-light);
}

/* White */
[class*="--bg-white"] {
  background-color: var(--block-bg-white);
  color: var(--block-content-on-white);
}

/* Custom - background set via inline style */
[class*="--bg-custom"] {
  /* Background color applied via inline style */
}

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */

/* White text - applies to container and common child elements */
[class*="--text-white"] {
  color: var(--block-text-white);
}

/* Dark text */
[class*="--text-dark"] {
  color: var(--block-text-dark);
}

/* Custom text - inherits from inline style */
[class*="--text-custom"] {
  /* Color applied via inline style, children inherit */
}