@import 'tailwindcss';

@import './font.css';

@theme {
  --color-black: #000;
  --color-white: #fff;

  --color-primary: #ffff00;
  --color-primary-dark: #504e18;
  --color-primary-light: #ffff7b;

  --color-secondary: #404040;
  --color-secondary-light: #6b6b6b;
  --color-secondary-dark: #2a2800;

  --color-alive: oklch(69.6% 0.17 162.48); /* Tailwind emerald-500*/

  --color-green: oklch(62.7% 0.194 149.214); /* Tailwind green-600 */
  --color-yellow: oklch(68.1% 0.162 75.834); /* Tailwind yellow-600 */
  --color-red: oklch(57.7% 0.245 27.325); /* Tailwind red-600 */

  --color-on-primary: var(--color-secondary);
  --color-on-secondary: var(--color-white);
  --color-hover: var(--color-primary-dark);

  --font-limelight: 'Open Sans';
  --default-font-family: var(--font-limelight);
  --breakpoint-3xl: 112rem;
  --breakpoint-4xl: 128rem;
}