@tailwind base;
@layer base {
  :root {
    --color-text-base: 26, 33, 47; /* Dark Gunmetal */
    --color-text-muted: 109, 115, 125; /* Sonic Silver */
    --color-text-inverted: 249, 251, 252; /* Ghost White */
    --color-fill: 233, 239, 242; /* Bright Gray */
    --muted: 109, 115, 125; /* Sonic Silver again for muted */
    --color: 244, 105, 77; /* Outrageous Orange */
    --color-button-accent: 244, 105, 77; /* Outrageous Orange */
    --color-button-accent-hover: 200, 85, 65; /* Darker Orange */
    --color-button-muted: 233, 239, 242; /* Bright Gray */

    [data-theme="gradient"] {
      --color-text-base: 26, 33, 47; /* Dark Gunmetal */
      --color-text-muted: 109, 115, 125; /* Sonic Silver */
      --color-text-inverted: 249, 251, 252; /* Ghost White */
      --color-fill: 233, 239, 242; /* Bright Gray */
      --muted: 109, 115, 125; /* Sonic Silver */
      --color: 244, 105, 77; /* Outrageous Orange */
      --color-button-accent: 109, 115, 125; /* Sonic Silver */
      --color-button-accent-hover: 90, 100, 110; /* Darker Silver */
      --color-button-muted: 233, 239, 242; /* Bright Gray */
    }
  }

  .dark {
    --color-text-base: 249, 251, 252; /* Ghost White */
    --color-text-muted: 109, 115, 125; /* Sonic Silver */
    --color-text-inverted: 26, 33, 47; /* Dark Gunmetal */
    --color-fill: 26, 33, 47; /* Dark Gunmetal */
    --muted: 36, 36, 50; /* Custom darker muted */
    --color: 244, 105, 77; /* Outrageous Orange */
    --color-button-accent: 244, 105, 77; /* Outrageous Orange */
    --color-button-accent-hover: 200, 85, 65; /* Darker Orange */
    --color-button-muted: 109, 115, 125; /* Sonic Silver */

    [data-theme="gradient"] {
      --color-text-base: 249, 251, 252; /* Ghost White */
      --color-text-muted: 233, 239, 242; /* Bright Gray */
      --color-text-inverted: 26, 33, 47; /* Dark Gunmetal */
      --color-fill: 14, 14, 18; /* Deep dark */
      --muted: 109, 115, 125; /* Sonic Silver */
      --color: 244, 105, 77; /* Outrageous Orange */
      --color-button-accent: 233, 239, 242; /* Bright Gray */
      --color-button-accent-hover: 200, 200, 210; /* Softer Gray */
      --color-button-muted: 26, 33, 47; /* Dark Gunmetal */
    }
  }
}