@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Inter:wght@400;500&display=swap');

:root {
  /* Tech Innovation Theme Palette */
  --color-bg-primary: #050505;
  --color-bg-secondary: #0a0a0f;
  --color-bg-card: #16161f;
  --color-text-primary: #ffffff; /* Contrast white */
  --color-text-secondary: #8a8a9a; /* Muted gray for labels */
  --color-accent: #4f46e5; /* Deep Professional Indigo */
  --color-accent-glow: rgba(79, 70, 229, 0.1);
  
  /* Additional neutral colors */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.15);
  --color-white: #ffffff;

  /* Typography */
  --font-family-display: 'DM Sans', sans-serif;
  --font-family-body: 'Inter', sans-serif;
  --font-family-mono: 'monospace';

  /* Font Sizes */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 2rem; /* 32px */
  --font-size-4xl: 2.5rem; /* 40px */
  --font-size-5xl: 3.5rem; /* 56px */

  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  
  /* Shadows */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 15px var(--color-accent-glow);
  
  /* Effects */
  --transition-normal: 0.3s ease;
  --gradient-signature: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

body {
  font-family: var(--font-family-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
}

h1 { font-size: var(--font-size-5xl); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-4xl); letter-spacing: -0.01em; }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }

@media (max-width: 768px) {
  h1 { font-size: var(--font-size-4xl); }
  h2 { font-size: var(--font-size-3xl); }
  h3 { font-size: var(--font-size-2xl); }
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: #818cf8; /* Softer indigo on hover */
}

img {
  max-width: 100%;
  height: auto;
}