:root {
  /* Default / Light Mode variables */

  --gray-100-fixed: #ffffff;
  --gray-97-fixed: #f7f7f7;
  --gray-89-fixed: #e2e2e2;
  --gray-77-fixed: #c5c4c4;
  --gray-41-fixed: #686868;
  --gray-16-fixed: #24252c;
  --gray-12-fixed: #1f1f1f;
  --gray-0-fixed: #000;

  --gray-100: var(--gray-100-fixed);
  --gray-97: var(--gray-97-fixed);
  --gray-89: var(--gray-89-fixed);
  --gray-77: var(--gray-77-fixed);
  --gray-41: var(--gray-41-fixed);
  --gray-16: var(--gray-16-fixed);
  --gray-12: var(--gray-12-fixed);
  --gray-0: var(--gray-0-fixed);

  --gray-100-a0-fixed: rgba(255, 255, 255, 0);
  --gray-100-a02-fixed: rgba(255, 255, 255, 0.02);
  --gray-100-a03-fixed: rgba(255, 255, 255, 0.03);

  --gray-100-a1-fixed: rgba(255, 255, 255, 0.1);
  --gray-100-a2-fixed: rgba(255, 255, 255, 0.2);
  --gray-100-a3-fixed: rgba(255, 255, 255, 0.3);
  --gray-100-a4-fixed: rgba(255, 255, 255, 0.4);
  --gray-100-a6-fixed: rgba(255, 255, 255, 0.6);

  --gray-100-a0: var(--gray-100-a0-fixed);
  --gray-100-a2: var(--gray-100-a2-fixed);
  --gray-100-a3: var(--gray-100-a3-fixed);
  --gray-100-a4: var(--gray-100-a4-fixed);

  --gray-0-a0-fixed: rgba(0, 0, 0, 0);
  --gray-0-a02-fixed: rgba(0, 0, 0, 0.02);
  --gray-0-a03-fixed: rgba(0, 0, 0, 0.03);

  --gray-0-a1-fixed: rgba(0, 0, 0, 0.1);
  --gray-0-a2-fixed: rgba(0, 0, 0, 0.2);
  --gray-0-a3-fixed: rgba(0, 0, 0, 0.3);
  --gray-0-a4-fixed: rgba(0, 0, 0, 0.4);
  --gray-0-a6-fixed: rgba(0, 0, 0, 0.6);
  --gray-0-a8-fixed: rgba(0, 0, 0, 0.8);
  
  --gray-0-a0: var(--gray-0-a0-fixed);
  --gray-0-a1: var(--gray-0-a1-fixed);
  --gray-0-a2: var(--gray-0-a2-fixed);
  --gray-0-a3: var(--gray-0-a3-fixed);
  --gray-0-a6: var(--gray-0-a6-fixed);
  --gray-0-a8: var(--gray-0-a8-fixed);

  --athena-color-bone-90: #E6E7DE;
  --athena-color-bone-10: #E6E7DE;

  --athena-color-10: #101c14;
  --athena-color-25: #264330;
  --athena-color-50: #64856B;
  --athena-color-80: #B3CBB9;
  --athena-color-90: #D8E5DB;

  --athena-color-10-a8: rgba(16, 28, 20, 0.8);

  --athena-color-sand-50: #AB8854;
  --athena-color-sand-70: #DCBA79;
}

/* System preference auto-detect (optional fallback) */
@media (prefers-color-scheme: dark) {
  :root {
    --gray-100: #121214;
    --gray-97: #1c1d22;
    --gray-89: #2e2f38;
    --gray-77: #3f404b;
    --gray-41: #a0a0a0;
    --gray-16: #f0f0f3;
    --gray-12: #e2e2e8;

    --gray-100-a0: rgba(0, 0, 0, 0);
    --gray-100-a2: rgba(0, 0, 0, 0.2);
    --gray-100-a3: rgba(0, 0, 0, 0.3);

    --gray-0-a0: rgba(255, 255, 255, 0);
    --gray-0-a2: rgba(255, 255, 255, 0.2);
    --gray-0-a3: rgba(255, 255, 255, 0.3);
    --gray-0-a6: rgba(255, 255, 255, 0.6);

    --athena-color-bone-90: #292a25;
  }
}