@import 'tailwindcss';

@theme {
  --color-background: rgba(232, 245, 233, 1);

  --color-primary-main: rgba(76, 175, 80, 1);
  --color-primary-surface: rgba(232, 245, 233, 1);
  --color-primary-border: rgba(165, 214, 167, 1);
  --color-primary-hover: rgba(56, 142, 60, 1);
  --color-primary-focus: rgba(46, 125, 50, 1);
  --color-primary-pressed: rgba(27, 94, 32, 1);
  --color-primary-text: rgba(27, 94, 32, 1);

  --color-secondary-main: rgba(255, 152, 0, 1);
  --color-secondary-surface: rgba(255, 243, 224, 1);
  --color-secondary-border: rgba(255, 193, 102, 1);
  --color-secondary-hover: rgba(255, 138, 0, 1);
  --color-secondary-focus: rgba(204, 110, 0, 1);
  --color-secondary-pressed: rgba(153, 82, 0, 1);
  --color-secondary-text: rgba(102, 55, 0, 1);

  --color-success-main: rgba(0, 155, 34, 1);
  --color-success-surface: rgba(230, 246, 235, 1);
  --color-success-border: rgba(102, 197, 126, 1);
  --color-success-hover: rgba(0, 204, 51, 1);
  --color-success-focus: rgba(0, 122, 26, 1);
  --color-success-pressed: rgba(0, 96, 20, 1);
  --color-success-text: rgba(0, 51, 11, 1);

  --color-info-main: rgba(0, 123, 255, 1);
  --color-info-surface: rgba(232, 244, 255, 1);
  --color-info-border: rgba(102, 178, 255, 1);
  --color-info-hover: rgba(0, 105, 217, 1);
  --color-info-focus: rgba(0, 85, 176, 1);
  --color-info-pressed: rgba(0, 66, 138, 1);
  --color-info-text: rgba(0, 44, 94, 1);

  --color-warning-main: rgba(255, 193, 7, 1);
  --color-warning-surface: rgba(255, 248, 225, 1);
  --color-warning-border: rgba(255, 213, 102, 1);
  --color-warning-hover: rgba(255, 179, 0, 1);
  --color-warning-focus: rgba(204, 143, 0, 1);
  --color-warning-pressed: rgba(153, 107, 0, 1);
  --color-warning-text: rgba(102, 71, 0, 1);

  --color-danger-main: rgba(220, 53, 69, 1);
  --color-danger-surface: rgba(255, 235, 238, 1);
  --color-danger-border: rgba(240, 128, 144, 1);
  --color-danger-hover: rgba(200, 35, 51, 1);
  --color-danger-focus: rgba(161, 28, 40, 1);
  --color-danger-pressed: rgba(122, 21, 30, 1);
  --color-danger-text: rgba(84, 14, 20, 1);

  --color-base-white: rgba(255, 255, 255, 1);
  --color-base-black: rgba(0, 0, 0, 1);
  --color-base-background: rgba(250, 250, 250, 1);
  --color-base-surface: rgba(245, 245, 245, 1);
  --color-base-muted: rgba(229, 229, 229, 1);
  --color-base-subtle: rgba(200, 200, 200, 1);
  --color-base-contrast: rgba(20, 20, 20, 1);

  --color-skeleton-base: rgba(220, 220, 220, 1);
  --color-skeleton-highlight: rgba(240, 240, 240, 1);

  --color-border-default: rgba(220, 220, 220, 1);
  --color-border-subtle: rgba(240, 240, 240, 1);
  --color-border-strong: rgba(180, 180, 180, 1);
  --color-border-focus-ring: rgba(0, 123, 255, 0.5);

  --color-light-background: rgba(255, 255, 255, 1);
  --color-light-surface: rgba(245, 245, 245, 1);
  --color-light-text: rgba(34, 34, 34, 1);
  --color-light-muted-text: rgba(100, 100, 100, 1);
  --color-light-divider: rgba(230, 230, 230, 1);

  --color-dark-background: rgba(18, 18, 18, 1);
  --color-dark-surface: rgba(28, 28, 28, 1);
  --color-dark-text: rgba(240, 240, 240, 1);
  --color-dark-muted-text: rgba(160, 160, 160, 1);
  --color-dark-divider: rgba(50, 50, 50, 1);

  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-scrollbar-thumb: rgba(180, 180, 180, 1);
  --color-scrollbar-track: rgba(240, 240, 240, 1);

  --breakpoint-xs: 26.25rem;
}

@layer base {
  body {
    /* color: #1a1a1a; */
    font-family: var(--font-quicksand);
    font-weight: 400;
  }

  html {
    font-family: var(--font-quicksand);
    font-size: 16px;
  }

  p {
    @apply text-base;
  }

  h1 {
    @apply text-xl sm:text-2xl md:text-2xl font-bold;
  }

  h2 {
    @apply text-lg sm:text-xl md:text-2xl font-bold;
  }

  h3 {
    @apply text-lg sm:text-xl md:text-2xl font-bold;
  }

  h4 {
    @apply text-lg sm:text-xl md:text-2xl font-medium;
  }

  h5 {
    @apply sm:text-lg md:text-xl font-medium;
  }

  h6 {
    @apply text-base sm:text-lg font-medium;
  }

  input,
  textarea {
    @apply rounded-lg border border-dark-divider focus:outline-none;
  }

  th {
    @apply font-medium text-left pb-2 sm:pb-3 md:pb-4;
  }

  ul {
    @apply grid gap-4;
  }
}