/* css/variables.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&family=Permanent+Marker&display=swap');

:root {
  /* Pop-Art Agency Palette */
  --bg-body: #000000;
  --bg-surface: #ffffff;
  
  --color-primary: #FF3399; /* Vibrant Pink / Fuchsia */
  --color-secondary: #000000;
  --color-tertiary: #f0f0f0; /* Light grey for image background */
  
  --text-main: #000000;
  --text-muted: #888888;
  --text-inverse: #ffffff;
  
  --border-color: #000000;
  --border-width: 2px;
  
  /* Typography */
  --font-family-sans: 'Poppins', sans-serif;
  --font-family-marker: 'Permanent Marker', cursive;
  
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;
  --font-size-2xl: 48px;
  --font-size-3xl: 64px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 100px;

  /* Effects */
  --transition-fast: 0.2s ease;
}

/* We force light theme base because the design is mainly white content with black header/footer */
[data-theme="dark"] {
  /* Ignored for this specific aesthetic to maintain the high-contrast pink/black/white look */
}