/**
 * Color Utilities - Shared background and text color classes
 * Used across all content blocks for consistent styling
 * Aligned with Publideals/Publibox Design System
 *
 * Background Color Options:
 * - primary: Primary Orange (#DA6630)
 * - accent: Primary Purple (#68468F)
 * - tertiary: Light Purple (#f5f3f7)
 * - info: Info Blue (#3b82f6)
 * - warning: Warning (#f59e0b)
 * - light: Light BG (#f9fafb)
 * - 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 Publideals Colors === */
:root {
  /* Brand Colors */
  --color-primary-orange: #DA6630;
  --color-primary-purple: #68468F;
  --color-light-orange: #fef3ee;
  --color-light-purple: #f5f3f7;
  --color-orange-hover: #c55828;
  --color-purple-hover: #563a75;

  /* Neutral Colors */
  --color-dark-text: #1a1a2e;
  --color-gray-text: #6b7280;
  --color-light-gray: #9ca3af;
  --color-light-bg: #f9fafb;
  --color-white: #ffffff;
  --color-border: #e5e7eb;

  /* Status Colors */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;

  /* Background Colors */
  --block-bg-primary: var(--color-primary-orange, #DA6630);
  --block-bg-accent: var(--color-primary-purple, #68468F);
  --block-bg-tertiary: var(--color-light-purple, #f5f3f7);
  --block-bg-info: var(--color-info, #3b82f6);
  --block-bg-warning: var(--color-warning, #f59e0b);
  --block-bg-light: var(--color-light-bg, #f9fafb);
  --block-bg-white: var(--color-white, #ffffff);

  /* Text Colors */
  --block-text-white: var(--color-white, #ffffff);
  --block-text-dark: var(--color-dark-text, #1a1a2e);
  --block-text-secondary: var(--color-gray-text, #6b7280);

  /* Content on backgrounds */
  --block-content-on-primary: var(--color-white, #ffffff);
  --block-content-on-accent: var(--color-white, #ffffff);
  --block-content-on-tertiary: var(--color-dark-text, #1a1a2e);
  --block-content-on-info: var(--color-white, #ffffff);
  --block-content-on-warning: var(--color-dark-text, #1a1a2e);
  --block-content-on-light: var(--color-dark-text, #1a1a2e);
  --block-content-on-white: var(--color-dark-text, #1a1a2e);

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   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 */
}