/* CSS Variables (Design Tokens)
   Prepared for future Tailwind migration */

:root {
  /* Typography */
  --font-main: 'Inter-Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-accent: "PressStart2P", 'Courier New', monospace;
  
  /* Aliases for consistency */
  --font-body: var(--font-main);
  --font-menu: var(--font-main);
  
  /* Font weights (for variable font) */
  --text-weight: 400;
  --heading-weight: 700;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* Font sizes */
  --font-size-base: 18px;
  --title-font-size: clamp(49px, 3vw + 20px, 65px);
  --subtitle-font-size: clamp(14px, 1.2vw + 10px, 23px);
  
  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  
  /* Spacing */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 3.75rem;  /* 60px */
  --space-12: 6.25rem;  /* 100px */
  
  /* Fluid spacing */
  --fluid-padding: clamp(10px, 4vw, 40px);
  --fluid-width: clamp(320px, 100%, 700px);
  
  /* Border radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  
  /* Layout proportions */
  --header-aspect-ratio: calc(700 / 368);
  
  /* Colors - Legacy (retro style) */
  --page-background-color: rgb(171, 169, 169);
  --block-background-color: rgb(255, 255, 255);
  --accent-color: black;
  --contour-color: black;
  --animation-fill-color: red;
  
  /* Colors - Modern aliases (for compatibility with colors.css) */
  --color-bg-primary: var(--page-background-color);
  --color-bg-secondary: var(--block-background-color);
  --color-text-primary: var(--accent-color);
  --color-text-secondary: #374151;
  --color-text-muted: #4b5563;
  --color-border-light: #e9ecef;
  --color-primary: #007bff;
  
  /* Gradients & backgrounds */
  --bg-gradient: 
    /* Horizontal stripes */
    repeating-linear-gradient(
      to right,
      #d3d3d3 0px,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Vertical stripes */
    repeating-linear-gradient(
      to bottom,
      #d3d3d3 0px,
      #d3d3d3 2px,
      transparent 2px,
      transparent 4px
    ),
    /* Gradient background */
    linear-gradient(
      to bottom,
      #e7e7e7 0.01%,
      #1a1a1a 100%
    );
}

/* Responsive adjustments */
@media (max-width: 375px) {
  :root {
    --header-aspect-ratio: calc(375 / 327);
  }
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors - Legacy */
    --page-background-color: rgb(26, 26, 26);
    --block-background-color: rgb(42, 42, 42);
    --accent-color: rgb(220, 220, 220);
    --contour-color: rgb(220, 220, 220);
    
    /* Dark mode colors - Modern aliases */
    --color-bg-primary: var(--page-background-color);
    --color-bg-secondary: var(--block-background-color);
    --color-text-primary: var(--accent-color);
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-border-light: #334155;
    --color-primary: #60a5fa;
    
    /* Adjusted gradient for dark mode */
    --bg-gradient: 
      /* Horizontal stripes (darker) */
      repeating-linear-gradient(
        to right,
        #2a2a2a 0px,
        #2a2a2a 2px,
        transparent 2px,
        transparent 4px
      ),
      /* Vertical stripes (darker) */
      repeating-linear-gradient(
        to bottom,
        #2a2a2a 0px,
        #2a2a2a 2px,
        transparent 2px,
        transparent 4px
      ),
      /* Dark gradient */
      linear-gradient(
        to bottom,
        #1a1a1a 0.01%,
        #0a0a0a 100%
      );
  }
}