@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,600;1,400&display=swap');

:root {
  /* Fonts */
  --smai-font-sans: 'IBM Plex Sans', sans-serif;
  --smai-font-serif: 'IBM Plex Serif', serif;

  /* Colors */
  --smai-bg: #0F1117;
  --smai-surface: #1A1D2E;
  --smai-text: #E8ECF0;
  --smai-primary: #60A8FF;
  --smai-primary-glow: rgba(96, 168, 255, 0.4);
  --smai-muted: #8892A4;
  --smai-border: rgba(255, 255, 255, 0.1);
  --smai-header-bg: #080A12;
  --smai-footer-bg: #060810;
  --smai-accent-green: #00C896;
  --smai-accent-red: #FF4D4D;
  --smai-hover: rgba(255, 255, 255, 0.05);

  /* Spacing */
  --smai-spacing-xs: 0.5rem;
  --smai-spacing-sm: 1rem;
  --smai-spacing-md: 2rem;
  --smai-spacing-lg: 3rem;
  --smai-spacing-xl: 5rem;
  --smai-spacing-xxl: 8rem;

  /* Layout */
  --smai-max-width-article: 780px;
  --smai-max-width-wide: 1200px;
  --smai-max-width-full: 1440px;
  --smai-header-height: 80px;

  /* Effects */
  --smai-transition: all 0.3s ease;
  --smai-border-radius: 8px;
}