/* Variables */
:root {
  --color-background: #f9fafb;
  --color-background-secondary: #e5eaf0;
  --color-background-tertiary: #dbe4ec;
  --color-background-muted: #cdd5df;
  --color-text-primary: #0a2540;
  --color-text-muted: #6b7280;
  --color-accent: #0a84ff;
  --color-accent-hover: #0066cc;
  --color-error: #ff3b30;
  --color-header-bg: rgba(249, 250, 251, 0.95);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.1);

  --font-family-primary: "League Spartan", serif;
  --font-size-base: 22px;
  --font-size-h1: 88px;
  --font-size-h1-small: 68px;
  --font-size-h2: 64px;
  --font-size-h3: 32px;
  --font-size-h4: 22px;
  --font-size-h5: 18px;
  --font-size-body: 20px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 128px;

  --container-max-width: 1440px;
  --content-max-width: 1280px;
  --form-max-width: 680px;
  --border-radius-sm: 5px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px;
  --border-radius-xl: 20px;
  --border-radius-2xl: 25px;
  --border-radius-3xl: 30px;
  --border-radius-full: 50%;

  --line-height-base: 1.5;
  --line-height-tight: 1.25;
  --line-height-none: 1;

  --transition-fast: 0.3s ease;
  --transition-slow: 1s ease;

  --z-background: -1;
  --z-dropdown: 1;
  --z-header: 2;
  --z-content: 3;

  --header-height: 60px;

  --icons-size: 45px;
  --header-icons-size: 25px;
}

/* Dark Mode Styles */
[page-theme="dark"] {
  --color-background: #0a0f1a;
  --color-background-secondary: #121826;
  --color-background-tertiary: #1d2736;
  --color-background-muted: #2c3a4f;
  --color-text-primary: #f0f4fa;
  --color-text-muted: #94a3b8;
  --color-accent-hover: #0066cc;
  --color-error: #ff453a;
  --color-header-bg: rgba(10, 15, 26, 0.95);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  :root {
    --font-size-base: 18px;
    --font-size-h1: 56px;
    --font-size-h1-small: 48px;
    --font-size-h2: 42px;
    --font-size-h3: 24px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-body: 18px;

    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;
    --spacing-5xl: 80px;

    --container-max-width: 100%;
    --content-max-width: 100vw;
    --form-max-width: 90vw;

    --icons-size: 35px;
    --header-icons-size: 20px;
  }
}