/**
 * WhisperNet CSS Variables
 * Part of PEACELINK 360 - Developed by Kisii University Flamingo Kings
 */

:root {
  /* WhisperNet Blue Scale (from twine.net palette) */
  --wn-50:  #F0F3FA;   /* Page background (extremely clean pale blue-gray) */
  --wn-100: #D5DEEF;   /* Card backgrounds, section fills */
  --wn-200: #B1C9EF;   /* Borders, dividers, hover wash */
  --wn-400: #8AAEE0;   /* Secondary text, input borders */
  --wn-600: #628ECB;   /* Active / Accent blue */
  --wn-900: #395886;   /* Brand Primary / Deep Steel Blue */

  /* Functional aliases */
  --color-bg:           var(--wn-50);
  --color-surface:      rgba(255, 255, 255, 0.85); /* Glassmorphic base */
  --color-surface-alt:  var(--wn-100);
  --color-border:       rgba(255, 255, 255, 0.5);
  --color-text-muted:   #5b6b80;
  --color-text-body:    #1c2836;
  --color-text-heading: var(--wn-900);
  --color-accent:       var(--wn-600);
  --color-accent-hover: #4e77ad;
  --color-brand:        var(--wn-900);

  /* Peace / Success Green (used when green communicates best) */
  --peace-green-100: #e8f5e9;
  --peace-green-600: #2e7d32;
  --peace-green-900: #1b5e20;

  /* Terracotta / Action Warning Scale */
  --terracotta-100: #fbe6dd;
  --terracotta-400: #e78e6d;
  --terracotta-600: #d46a43;
  --terracotta-900: #863d22;

  /* Report status indicators */
  --status-submitted: var(--wn-400);
  --status-review:    var(--terracotta-600);
  --status-verified:  var(--peace-green-600);
  --status-published: var(--wn-900);
  --status-rejected:  #c62828;

  /* Fonts */
  --font-headings: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-base: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-section: 80px;
  
  /* Transitions */
  --transition-default: 300ms cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Glassmorphic Shadows & Glows */
  --shadow-sm: 0 4px 6px -1px rgba(57, 88, 134, 0.05), 0 2px 4px -1px rgba(57, 88, 134, 0.03);
  --shadow-md: 0 10px 15px -3px rgba(57, 88, 134, 0.08), 0 4px 6px -2px rgba(57, 88, 134, 0.04);
  --shadow-lg: 0 20px 25px -5px rgba(57, 88, 134, 0.1), 0 10px 10px -5px rgba(57, 88, 134, 0.04);
  --shadow-glow: 0 0 20px rgba(98, 142, 203, 0.15);
  --shadow-glow-accent: 0 0 25px rgba(212, 106, 67, 0.25);
}