/* Color System */
:root {
  /* Base Colors */
  --color-black: #111;
  --color-dark: #222;
  --color-gray-dark: #444;
  --color-gray: #666;
  --color-gray-light: #999;
  --color-gray-lighter: #ccc;
  --color-gray-lightest: #e0e0e0;
  --color-white: #fff;
  --color-background: #f7f7f9;

  /* Opacity Levels */
  --opacity-full: 1;
  --opacity-high: 0.9;
  --opacity-medium: 0.7;
  --opacity-low: 0.5;
  --opacity-subtle: 0.3;
  --opacity-faint: 0.1;

  /* Colors with Opacity (using rgba for better browser support) */
  --color-black-full: rgba(17, 17, 17, 1);
  --color-black-high: rgba(17, 17, 17, 0.9);
  --color-black-medium: rgba(17, 17, 17, 0.7);
  --color-black-low: rgba(17, 17, 17, 0.5);
  --color-black-subtle: rgba(17, 17, 17, 0.3);
  --color-black-faint: rgba(17, 17, 17, 0.1);

  --color-dark-full: rgba(34, 34, 34, 1);
  --color-dark-high: rgba(34, 34, 34, 0.9);
  --color-dark-medium: rgba(34, 34, 34, 0.7);
  --color-dark-low: rgba(34, 34, 34, 0.5);
  --color-dark-subtle: rgba(34, 34, 34, 0.3);
  --color-dark-faint: rgba(34, 34, 34, 0.1);

  --color-white-full: rgba(255, 255, 255, 1);
  --color-white-high: rgba(255, 255, 255, 0.9);
  --color-white-medium: rgba(255, 255, 255, 0.7);
  --color-white-low: rgba(255, 255, 255, 0.5);
  --color-white-subtle: rgba(255, 255, 255, 0.3);
  --color-white-faint: rgba(255, 255, 255, 0.1);
}

/* Utility Classes for Colors */
.text-black { color: var(--color-black); }
.text-dark { color: var(--color-dark); }
.text-gray { color: var(--color-gray); }
.text-gray-light { color: var(--color-gray-light); }
.text-white { color: var(--color-white); }

/* Utility Classes for Opacity */
.opacity-full { opacity: var(--opacity-full); }
.opacity-high { opacity: var(--opacity-high); }
.opacity-medium { opacity: var(--opacity-medium); }
.opacity-low { opacity: var(--opacity-low); }
.opacity-subtle { opacity: var(--opacity-subtle); }
.opacity-faint { opacity: var(--opacity-faint); }

/* Background Colors */
.bg-black { background-color: var(--color-black); }
.bg-dark { background-color: var(--color-dark); }
.bg-white { background-color: var(--color-white); }
.bg-gray-light { background-color: var(--color-background); }