@tailwind base;
@layer base {
  :root {
    --color-text-base: 0, 0, 0;
    --color-text-muted: 120, 120, 120;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 245, 245, 245;
    --muted: 200, 200, 200;
    --color: 249, 115, 22;
    --color-button-accent: 249, 115, 22;
    --color-button-accent-hover: 55, 55, 55;
    --color-button-muted: 244, 239, 238;
    [data-theme="blue"] {
      --color-text-base: 15, 23, 42;
      --color-text-muted: 100, 116, 139;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 203, 213, 225;
      --muted: 148, 163, 184;
      --color: 59, 130, 246;
      --color-button-accent: 59, 130, 246;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 226, 232, 240;
    }
    [data-theme="red"] {
      --color-text-base: 28, 25, 23;
      --color-text-muted: 100, 100, 100;
      --color-text-inverted: 245, 245, 245;
      --color-fill: 231, 229, 228;
      --muted: 220, 220, 220;
      --color: 239, 68, 68;
      --color-button-accent: 239, 68, 68;
      --color-button-accent-hover: 220, 50, 70;
      --color-button-muted: 245, 245, 245;
    }
    [data-theme="green"] {
      --color-text-base: 40, 40, 40;
      --color-text-muted: 110, 110, 110;
      --color-text-inverted: 230, 230, 230;
      --color-fill: 236, 252, 203;
      --muted: 189, 220, 147;
      --color: 101, 163, 13;
      --color-button-accent: 101, 163, 13;
      --color-button-accent-hover: 120, 220, 120;
      --color-button-muted: 211, 235, 173;
    }
    [data-theme="cyber"] {
      --color-text-base: 15, 15, 15;
      --color-text-muted: 144, 135, 5;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 252, 255, 64;
      --muted: 50, 50, 50;
      --color: 235, 21, 43;
      --color-button-accent: 235, 21, 43;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 249, 239, 6;
    }
  }
  .dark {
    --color-text-base: 255, 255, 255;
    --color-text-muted: 150, 150, 150;
    --color-text-inverted: 255, 255, 255;
    --color-fill: 18, 18, 18;
    --muted: 36, 36, 36;
    --color: 227, 77, 10;
    --color-button-accent: 227, 77, 10;
    --color-button-accent-hover: 231, 121, 43;
    --color-button-muted: 26, 26, 26;
    [data-theme="blue"] {
      --color-text-base: 248, 250, 252;
      --color-text-muted: 148, 163, 184;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 2, 6, 23;
      --muted: 51, 65, 85;
      --color: 59, 130, 246;
      --color-button-accent: 59, 130, 246;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 30, 41, 59;
    }
    [data-theme="red"] {
      --color-text-base: 231, 229, 228;
      --color-text-muted: 168, 162, 158;
      --color-text-inverted: 245, 245, 245;
      --color-fill: 28, 25, 23;
      --muted: 45, 45, 45;
      --color: 248, 113, 113;
      --color-button-accent: 248, 113, 113;
      --color-button-accent-hover: 220, 50, 70;
      --color-button-muted: 120, 113, 108; 
    }
    [data-theme="green"] {
      --color-text-base: 230, 230, 230;
      --color-text-muted: 104, 124, 104;
      --color-text-inverted: 230, 230, 230;
      --color-fill: 10, 20, 10;
      --muted: 54, 64, 54;
      --color: 132, 204, 22;
      --color-button-accent: 132, 204, 22;
      --color-button-accent-hover: 120, 220, 120;
      --color-button-muted: 34, 44, 34;
    }
    [data-theme="cyber"] {
      --color-text-base: 252, 255, 64;
      --color-text-muted: 125, 125, 125;
      --color-text-inverted: 240, 240, 240;
      --color-fill: 15, 15, 15;
      --muted: 50, 50, 50;
      --color: 90, 237, 251;
      --color-button-accent: 90, 237, 251;
      --color-button-accent-hover: 0, 185, 255;
      --color-button-muted: 25, 81, 86;
    }
}

[data-theme="purple"] {
  --color-text-base: 44, 1, 62;
  --color-text-muted: 107, 63, 124;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 237, 220, 245;
  --muted: 203, 162, 221;
  --color: 147, 51, 234;
  --color-button-accent: 147, 51, 234;
  --color-button-accent-hover: 126, 34, 206;
  --color-button-muted: 233, 213, 255;
}

.dark [data-theme="purple"] {
  --color-text-base: 250, 245, 255;
  --color-text-muted: 216, 180, 254;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 88, 28, 135;
  --muted: 107, 33, 168;
  --color: 192, 132, 252;
  --color-button-accent: 192, 132, 252;
  --color-button-accent-hover: 216, 180, 254;
  --color-button-muted: 91, 33, 182;
}
[data-theme="orange"] {
  --color-text-base: 51, 30, 0;
  --color-text-muted: 154, 92, 0;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 245, 245, 245;
  --muted: 200, 200, 200;
  --color: 249, 115, 22;
  --color-button-accent: 249, 115, 22;
  --color-button-accent-hover: 234, 88, 12;
  --color-button-muted: 244, 239, 238;
}

[data-theme="teal"] {
  --color-text-base: 19, 78, 74;
  --color-text-muted: 17, 94, 89;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 245, 245, 245;
  --muted: 200, 200, 200;
  --color: 20, 184, 166;
  --color-button-accent: 20, 184, 166;
  --color-button-accent-hover: 13, 148, 136;
  --color-button-muted: 244, 239, 238;
}

[data-theme="pink"] {
  --color-text-base: 76, 5, 25;
  --color-text-muted: 157, 23, 77;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 245, 245, 245;
  --muted: 200, 200, 200;
  --color: 236, 72, 153;
  --color-button-accent: 236, 72, 153;
  --color-button-accent-hover: 219, 39, 119;
  --color-button-muted: 244, 239, 238;
}

.dark [data-theme="orange"] {
  --color-text-base: 255, 255, 255;
  --color-text-muted: 150, 150, 150;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 18, 18, 18;
  --muted: 36, 36, 36;
  --color: 253, 186, 116;
  --color-button-accent: 253, 186, 116;
  --color-button-accent-hover: 254, 215, 170;
  --color-button-muted: 26, 26, 26;
}

.dark [data-theme="teal"] {
  --color-text-base: 255, 255, 255;
  --color-text-muted: 150, 150, 150;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 18, 18, 18;
  --muted: 36, 36, 36;
  --color: 94, 234, 212;
  --color-button-accent: 94, 234, 212;
  --color-button-accent-hover: 153, 246, 228;
  --color-button-muted: 26, 26, 26;
}

.dark [data-theme="pink"] {
  --color-text-base: 255, 255, 255;
  --color-text-muted: 150, 150, 150;
  --color-text-inverted: 255, 255, 255;
  --color-fill: 18, 18, 18;
  --muted: 36, 36, 36;
  --color: 244, 114, 182;
  --color-button-accent: 244, 114, 182;
  --color-button-accent-hover: 251, 207, 232;
  --color-button-muted: 26, 26, 26;
}