@tailwind base;

/* SEMANTIC TOKEN DECLARATIONS: Abstracted from color palettes for theming */

@layer base {
  /* Light mode (default) token declarations */
  :root {
    --background: var(--green-100);
    --background-highlight: var(--green-200);
    --background-active: var(--green-300);
    --background-accent: var(--blue-200);
    --background-modal: var(--green-50);

    --primary: var(--green-700);
    --primary-light: var(--green-600);
    --primary-dark: var(--green-800);
    --primary-visited: var(--green-600);
    --primary-border: var(--green-800);

    --light-source-color: var(--primary);
    --light-source-intensity: 0.75;
    --light-source-secondary-intensity: 0.15;
    --light-source-spread: 60%;
    --light-source-secondary-spread: 90%;

    --body: var(--gray-700);
    --body-secondary: var(--gray-400);

    --sidebar: var(--teal-100);

    --border: var(--gray-200), 0.2;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --chart-border: var(--teal-200);

    --level-best: 136, 100%, 38%; /* #1DC200 */
    --level-middle: 54, 100%, 50%; /* #FFF200 */
    --level-worst: 0, 100%, 40%; /* #CC0000 */
  }

  /* Dark mode token declarations */
  .dark {
    --background: var(--blue-900);
    --background-highlight: var(--green-900);
    --background-active: var(--green-800);
    --background-accent: var(--blue-800);
    --background-modal: var(--green-950);

    --primary: var(--green-500);
    --primary-light: var(--green-400);
    --primary-dark: var(--green-700);
    --primary-visited: var(--green-600);

    --light-source-color: var(--primary);
    --light-source-intensity: 0.6;
    --light-source-secondary-intensity: 0.1;
    --light-source-spread: 60%;
    --light-source-secondary-spread: 75%;

    --body: var(--gray-200);

    --sidebar: var(--teal-900);

    --chart-1: 220, 70%, 50%;
    --chart-2: 160, 60%, 45%;
    --chart-3: 30, 80%, 55%;
    --chart-4: 280, 65%, 60%;
    --chart-5: 340, 75%, 55%;
    --chart-border: var(--teal-800);

    --level-worst: 0, 100%, 60%; /* #FF3333 */
  }
}
