/* CSS Variables (Design System Tokens) */
:root {
  /* Brand Colors */
  --color-primary: #00ac9b;
  --color-primary-hover: #009384;
  --color-secondary: #e8ad22;
  --color-secondary-hover: #cf9a1e;
  --color-tertiary: #019dd8;
  --color-yellow: #e8ad22;
  --color-yellow-hover: #cf9a1e;
  --color-magenta: #cf375a;
  --color-magenta-hover: #b32d4b;
  --color-red: #f13c46;
  --color-green: #168944;
  --color-green-hover: #127a3b;
  --color-topbar: #e8ad22;

  /* Neutral Colors */
  --color-text-heading: #1e293b;
  --color-text-body: #475569;
  --color-bg-light: #f8fafc;
  --color-bg-dark: #0f172a;
  --color-border: #e2e8f0;
  --color-white: #ffffff;

  /* Typography */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-family-serif: 'Playfair Display', Georgia, serif;

  /* Sizing */
  --container-max-width: 1200px;

  /* UI Elements */
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --transition-fast: all 0.2s ease-in-out;
  --transition-standard: all 0.3s ease-in-out;
  --box-shadow: 0 10px 40px rgba(0, 172, 155, 0.08);
  --box-shadow-hover: 0 20px 40px rgba(0, 172, 155, 0.15);
}