/* css/variables.css */
:root {
  /* Color Palette Tokens */
  --index-bg: #02162E;
  --divider-color: #143760;
  --active-box: #0A5960;
  --text-primary: #D5EEFF;
  --block-maroon: #8B0625;

  /* Motion System Rectangle Colors */
  --rect-purple: #3B2E58;
  --rect-mustard: #D4A038;
  --rect-maroon: #8B0625;
  --rect-teal: #0A5960;
  --square-accent: #E3F0FF;

  /* Mass & Physics Easing Functions */
  --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1);        /* Slower, heavy mass ease */
  --ease-overshoot: cubic-bezier(0.34, 1.3, 0.64, 1);   /* Tiny overshoot scale ease */
  --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);   /* Small square snap spring */
  --ease-fluid: cubic-bezier(0.25, 1, 0.5, 1);

  /* Spatial Z-Layering Architecture */
  --z-canvas-bg: 0;
  --z-grain: 1;
  --z-rect-purple: 2;
  --z-rect-mustard: 3;
  --z-rect-maroon: 4;
  --z-rect-squares: 5;
  --z-hero-content: 10;
  --z-nav: 50;
}