/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-dark: #121212;
  --color-text: #202020;
  --color-text-light: #ffffff;
  --color-text-muted: rgba(32, 32, 32, 0.65);
  --color-text-light-muted: rgba(255, 255, 255, 0.8);
  --color-accent: #2196f3;
  --color-accent-2: #00d2ff;
  --color-highlight: #3a47d5;

  /* Typography */
  --font-heading: "Barlow Condensed", sans-serif;
  --font-body: "Nunito", sans-serif;

  /* Layout */
  --container-max-width: 1240px;
  --container-padding: 20px;
  --header-height: 90px;
  --content-indent: 100px;

  /* Project grid */
  --project-gap: 20px;
  --project-columns: 3;

  /* Motion */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 0.5s cubic-bezier(0.55, 0.05, 0.35, 0.95);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Project pages */
  --project-hero-overlay: 0.5;

  /* Header */
  --color-header-on-light: #9a9a9a;

  /* Border radius */
  --radius-image: 4px;

  /* Header backdrop gradient (0 = off, try 0.4-0.6 for a soft scrim) */
  --header-box-opacity: 0.5;
}

@media (max-width: 1024px) {
  :root {
    --project-columns: 2;
    --header-height: 76px;
    --content-indent: 0px;
  }
}

@media (max-width: 600px) {
  :root {
    --project-columns: 1;
    --project-gap: 12px;
  }
}