:root {
  /* Colors */
  --color-white: #ffffff;
  --color-off-white: #f0f1fa;
  --color-black: #000000;
  --color-dark-white: #e4e6ef;
  --color-green: #c1ff00;
  --color-blue: #1a2ffb;
  --color-dark-blue: #071bdf;
  --color-purple: #8832f7;
  --color-red: #ff4c41;
  --color-grey-blue: #2b2e3a;

  /* Semantic color aliases (change per theme) */
  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-accent: var(--color-blue);
  --color-accent-2: var(--color-purple);
  --color-border: rgba(0, 0, 0, 0.12);

  /* Spacing & Layout */
  --base-padding-x: max(5vw, 40px);
  --base-padding-y: clamp(30px, 4vw, 50px);
  --grid-gap: 2vw;
  --grid-space: calc((100% - 11 * var(--grid-gap)) / 12);
  --global-border-radius: 20px;

  /* Typography */
  --header-size: clamp(1rem, 1vw, 2rem);

  /* Z-index layers */
  --z-canvas: 0;
  --z-sections: 10;
  --z-ui: 50;
  --z-preloader: 100;

  /* Animations */
  --transition-fast: 0.3s cubic-bezier(0.35, 0, 0, 1);
  --transition-normal: 0.6s cubic-bezier(0.35, 0, 0, 1);
  --transition-slow: 1s cubic-bezier(0.35, 0, 0, 1);
}

@media (max-width: 812px) {
  :root {
    --grid-gap: 4vw;
    --global-border-radius: 15px;
    --base-padding-x: 25px;
    --base-padding-y: 25px;
  }
}

@media (max-width: 400px) {
  :root {
    --base-padding-x: 15px;
    --base-padding-y: 15px;
    --global-border-radius: 10px;
  }
}