@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Light theme colors (default) */
:root {
  --color-primary: #4285f4;
  --color-primary-hover: #357ae8;
  --color-primary-light: #60a5fa;

  --color-text-primary: #212529;
  --color-text-secondary: #555;
  --color-text-inverse: #ffffff;

  --color-bg-body: #ffffff;
  --color-bg-hero-start: rgba(239, 246, 255, 1);
  --color-bg-hero-end: rgba(224, 231, 255, 1);
  --color-bg-secondary: #ffffff;
  --color-bg-secondary-hover: #f8f9fa;
  --color-bg-footer: #f5f5f5;

  --color-border: #ced4da;
  --color-border-hover: #adb5bd;

  --color-accent-line: #4285f4;
  --color-logo-outline: rgba(0, 0, 0, 0.5);
  --color-logo-shadow: rgba(0, 0, 0, 0.15);
  --color-theme-toggle-bg: linear-gradient(135deg, #4285f4 0%, #357ae8 100%);
  --color-theme-toggle-inner: #ffd700;
  --color-theme-toggle-shadow: rgba(66, 133, 244, 0.3);
  --color-theme-toggle-shadow-color: #002659;
  --color-theme-toggle-shadow-color-hover: #011c3f;
}

/* Dark theme colors */
[data-theme="dark"] {
  --color-primary: #4285f4;
  --color-primary-hover: rgb(57, 116, 211);
  --color-primary-light: #60a5fa;

  --color-text-primary: #e2e8f0;
  --color-text-secondary: #cbd5e0;
  --color-text-inverse: #ffffff;

  --color-bg-body: #1a202c;
  --color-bg-hero-start: rgba(26, 32, 44, 1);
  --color-bg-hero-end: rgba(45, 55, 72, 1);
  --color-bg-secondary: #2d3748;
  --color-bg-secondary-hover: #374151;
  --color-bg-footer: #2d3748;

  --color-border: #4a5568;
  --color-border-hover: #60a5fa;

  --color-accent-line: #60a5fa;
  --color-logo-outline: rgb(255, 255, 255);
  --color-logo-shadow: rgba(0, 0, 0, 0.3);
  --color-theme-toggle-bg: linear-gradient(135deg, #60a5fa 0%, #4285f4 100%);
  --color-theme-toggle-inner: #ffd700;
  --color-theme-toggle-shadow: rgba(96, 165, 250, 0.4);
  --color-theme-toggle-shadow-color: rgba(255, 215, 0, 0.6);
  --color-theme-toggle-shadow-color-hover: rgba(255, 215, 0, 0.7);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: var(--color-bg-body);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}