/* css/theme-variables.css */
/* ==========================================================================
   GWAGA THEME: COLOR & FONT DEFINITIONS
   ========================================================================== */

/* --- FONT IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   COLOR VARIABLES
   ========================================================================== */
:root {
  /* LIGHT MODE (DEFAULT) */
  --color-primary: #008080; /* Teal from GWAGA logo */
  --color-primary-hover: #006666; /* Darker teal for hover */
  --color-background: #F8F9FA; /* Light gray page background */
  --color-surface: #FFFFFF; /* Card, modal, and component backgrounds */
  --color-surface-alt: #F1F3F5; /* Alternate surface (e.g., table headers) */
  --color-border: #DEE2E6; /* Borders and dividers */
  --color-text-primary: #181c20; /* Dark charcoal from GWAGA logo text */
  --color-text-secondary: #6C757D; /* Muted text for subtitles, placeholders */
  --color-text-on-primary: #FFFFFF; /* Text for on top of primary color */

  /* --- Status Colors --- */
  --color-success: #28a745;
  --color-success-soft: #d4edda;
  --color-warning: #ffc107;
  --color-warning-soft: #fff3cd;
  --color-danger: #dc3545;
  --color-danger-soft: #f8d7da;
  --color-info: #17a2b8;
  --color-info-soft: #d1ecf1;
}

html.dark {
  /* DARK MODE */
  --color-primary: #20C997; /* Brighter teal for better contrast on dark */
  --color-primary-hover: #1BAB80;
  --color-background: #181c20; /* Dark charcoal from logo for the background */
  --color-surface: #212529; /* Slightly lighter for cards and modals */
  --color-surface-alt: #2c3136;
  --color-border: #495057;
  --color-text-primary: #F8F9FA; /* Off-white for main text */
  --color-text-secondary: #ADB5BD;
  --color-text-on-primary: #181c20; /* Dark text for on top of the light primary */

  /* --- Status Colors (Dark) --- */
  --color-success: #20c997;
  --color-success-soft: rgba(32, 201, 151, 0.15);
  --color-warning: #fdc43e;
  --color-warning-soft: rgba(253, 196, 62, 0.15);
  --color-danger: #e74c3c;
  --color-danger-soft: rgba(231, 76, 60, 0.15);
  --color-info: #3498db;
  --color-info-soft: rgba(52, 152, 219, 0.15);
}