/* Custom Fonts */
@font-face {
  font-family: 'Forevs';
  src: url('../css/ForevsDemo-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors - Light theme */
  --color-background: #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-text: #000000;
  --color-text-muted: #666666;
  --color-border: #000000;
  --color-border-light: #dddddd;
  --color-accent: #2563eb;
  --color-accent-hover: #ffffff;
  --color-timeline-line: #dddddd;
  --color-timeline-dot: #2563eb;
  --color-timeline-dot-secondary: #999999;

  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 60px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: 'Forevs', Georgia, "Times New Roman", serif;
  --font-size-base: 1em;
  --font-size-sm: 0.875em;
  --font-size-lg: 1.2em;
  --font-size-xl: 1.5em;
  --font-size-xxl: 2em;
  --font-size-xxxl: 2.5em;
  --line-height: 1.5;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-light: 300;
  --letter-spacing-heading: 0.1em;

  /* Layout */
  --max-width: 800px;
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Animation durations (can be set to 0 if prefers-reduced-motion) */
  --animation-duration: 0.3s;
  --animation-duration-slow: 0.5s;
}

/* Dark theme */
[data-theme="dark"] {
  --color-background: #1a1a1a;
  --color-background-secondary: #242424;
  --color-text: #ffffff;
  --color-text-muted: #a0a0a0;
  --color-border: #ffffff;
  --color-border-light: #444444;
  --color-accent: #60a5fa;
  --color-accent-hover: #1a1a1a;
  --color-timeline-line: #444444;
  --color-timeline-dot: #60a5fa;
  --color-timeline-dot-secondary: #666666;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-duration: 0s;
    --animation-duration-slow: 0s;
    --transition-fast: 0s;
    --transition-medium: 0s;
    --transition-slow: 0s;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-background: #1a1a1a;
    --color-background-secondary: #242424;
    --color-text: #ffffff;
    --color-text-muted: #a0a0a0;
    --color-border: #ffffff;
    --color-border-light: #444444;
    --color-accent: #60a5fa;
    --color-accent-hover: #1a1a1a;
    --color-timeline-line: #444444;
    --color-timeline-dot: #60a5fa;
    --color-timeline-dot-secondary: #666666;
  }
}