/**
 * CSS custom properties for colors, spacing, timing, and breakpoints.
 * Centralized configuration for easy theme adjustments.
 */

:root {
  /* Colors - Black and white base with accent capability */
  --color-bg-hero: #000000;
  --color-bg-gallery: #1a1a1a;
  --color-bg-about: #0a0a0a;
  --color-bg-resume: #151515;
  --color-text-primary: #ffffff;
  --color-text-secondary: #cccccc;
  --color-line: #ffffff;
  --color-accent: #ffffff; /* Future-proofing for color accents */

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Typography */
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;

  /* Line widths */
  --line-width-thin: 1px;
  --line-width-medium: 2px;
  --line-width-thick: 3px;

  /* Timing */
  --duration-fast: 200ms;
  --duration-medium: 400ms;
  --duration-slow: 800ms;
  --easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);

  /* Z-index layers */
  --z-background: 1;
  --z-content: 10;
  --z-lines: 5;
  --z-navigation: 100;

  /* Breakpoints (for use in JavaScript and comments) */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1440px;

  /* Section dimensions */
  --section-min-width: 100vw;
  --section-height: 100vh;

  /* Hero section specific */
  --hero-headshot-position: 60%;
  --hero-line-max-position: 45%;

  /* Gallery specific */
  --gallery-columns: 3;
  --gallery-gap: var(--spacing-md);
  --gallery-image-width: 300px;
}