@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Light Theme */
  :root {
    --color-text-primary: 15, 15, 15;
    --color-text-primary-muted: 50, 50, 50;
  
    --color-text-secondary: 252, 252, 252;
    --color-text-secondary-muted: 200, 200, 200;

    --color-text-accent: 255, 199, 44;
    --color-text-accent-muted: 240, 184, 34;


    --color-background-primary: 252, 252, 252;
    --color-background-primary-muted: 240, 240, 240;

    --color-background-secondary: 244, 237, 237;
    --color-background-secondary-muted: 230, 230, 230;

    --color-background-accent: 255, 199, 44;
    --color-background-accent-muted: 240, 184, 34;

    --color-shadow: 200, 200, 200;
    --color-border: 200, 200, 200;
  }

  /* Dark Theme */
  .theme-dark {
    --color-text-primary: 252, 252, 252;
    --color-text-primary-muted: 170, 170, 170;

    --color-text-secondary: 15, 15, 15;
    --color-text-secondary-muted: 100, 100, 100;

    --color-text-accent: 255, 180, 50;
    --color-text-accent-muted: 230, 160, 40;


    --color-background-primary: 15, 15, 15;
    --color-background-primary-muted: 34, 34, 34;

    --color-background-secondary: 39, 39, 42;
    --color-background-secondary-muted: 49, 49, 52;

    --color-background-accent: 255, 180, 50;
    --color-background-accent-muted: 230, 160, 40;


    --color-shadow: 120, 120, 120;
    --color-border: 120, 120, 120;
  }
}