/* @import "tailwindcss";

@layer theme, utilities; */
@tailwind base;
@tailwind components;

@layer base {
  html:not(.dark) {
    --color-yellow-50: #FFFFF2;
    --color-yellow-100: #FFFFC7;
    --color-yellow-200: #FFFFA3;
    --color-yellow-300: #FFFF5C;
    --color-yellow-400: #FFF921;
    --color-yellow-500: #fff500;
    --color-yellow-600: #C7BF00;
    --color-yellow-700: #8F8A00;
    --color-yellow-800: #5C5900;
    --color-yellow-900: #333200;
    --color-yellow-950: #1A1A00;

    --color-navy-50: #F2F6FA;
    --color-navy-100: #E1EBF5;
    --color-navy-200: #C3D5E6;
    --color-navy-300: #9FC0D9;
    --color-navy-400: #709FC7;
    --color-navy-500: #233C5A;
    --color-navy-600: #1A2F4A;
    --color-navy-700: #112135;
    --color-navy-800: #0A1523;
    --color-navy-900: #040A12;
    --color-navy-950: #020509;

    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;

    --warning: var(--color-yellow-500);
    --warning-100: var(--color-yellow-100);
    --warning-600: var(--color-yellow-600);
    --universe-50: var(--color-navy-50);
    --universe-100: var(--color-navy-100);
    --universe-500: var(--color-navy-500);
    --universe-600: var(--color-navy-600);
    --universe-800: var(--color-navy-800);
    --neutral-50: var(--color-neutral-50);
    --neutral-100: var(--color-neutral-100);
    --neutral-200: var(--color-neutral-200);
  }

  /* Dark Mode */
  html.dark,
  .dark {
    --color-yellow-50: #1C1B00;
    --color-yellow-100: #2B2B00;
    --color-yellow-200: #4A4900;
    --color-yellow-300: #737000;
    --color-yellow-400: #ADAA00;
    --color-yellow-500: #fff500;
    --color-yellow-600: #FFFF47;
    --color-yellow-700: #FFFF8F;
    --color-yellow-800: #FFFFC2;
    --color-yellow-900: #FFFFEB;
    --color-yellow-950: #FFFFF7;

    --color-navy-50: #080F18;
    --color-navy-100: #0D1623;
    --color-navy-200: #162436;
    --color-navy-300: #1C3048;
    --color-navy-400: #223A57;
    --color-navy-500: #233C5A;
    --color-navy-600: #456385;
    --color-navy-700: #6F8CAE;
    --color-navy-800: #9BB4D4;
    --color-navy-900: #CBE0F5;
    --color-navy-950: #F2F7FC;

    --color-neutral-50: #0a0a0a;
    --color-neutral-100: #171717;
    --color-neutral-200: #262626;

    --warning: var(--color-yellow-500);
    --warning-100: var(--color-yellow-100);
    --warning-600: var(--color-yellow-600);
    --universe-50: var(--color-navy-50);
    --universe-100: var(--color-navy-100);
    --universe-500: var(--color-navy-500);
    --universe-600: var(--color-navy-600);
    --universe-800: var(--color-navy-800);
    --neutral-50: var(--color-neutral-50);
    --neutral-100: var(--color-neutral-100);
    --neutral-200: var(--color-neutral-200);
  }
}