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

@layer base {
  :root {
    /* Accents */
    --accent: #fafafa;
    --accent-foreground: #111111;
    --primary: #111111;
    --primary-foreground: #ffffff;
    --brand: var(--blue9);
    --brand-foreground: var(--blue11);

    --gray1: hsl(0 0% 99%);
    --gray2: hsl(0 0% 97.3%);
    --gray3: hsl(0 0% 95.1%);
    --gray4: hsl(0 0% 93%);
    --gray5: hsl(0 0% 90.9%);
    --gray6: hsl(0 0% 88.7%);
    --gray7: hsl(0 0% 85.8%);
    --gray8: hsl(0 0% 78%);
    --gray9: hsl(0 0% 56.1%);
    --gray10: hsl(0 0% 52.3%);
    --gray11: hsl(0 0% 43.5%);
    --gray12: hsl(0 0% 9%);

    --tomato1: hsl(10, 100%, 99.4%);
    --tomato2: hsl(8, 100%, 98.4%);
    --tomato3: hsl(8, 100%, 96.6%);
    --tomato4: hsl(8, 100%, 94.3%);
    --tomato5: hsl(8, 92.8%, 91%);
    --tomato6: hsl(9, 84.7%, 86.3%);
    --tomato7: hsl(10, 77.3%, 79.5%);
    --tomato8: hsl(10, 71.6%, 71%);
    --tomato9: hsl(10, 78%, 54%);
    --tomato10: hsl(10, 71.4%, 49.4%);
    --tomato11: hsl(10, 82%, 42%);
    --tomato12: hsl(8, 50%, 24%);

    --grass1: hsl(116, 50%, 98.9%);
    --grass2: hsl(120, 60%, 97.1%);
    --grass3: hsl(120, 53.6%, 94.8%);
    --grass4: hsl(121, 47.5%, 91.4%);
    --grass5: hsl(122, 42.6%, 86.5%);
    --grass6: hsl(124, 39%, 79.7%);
    --grass7: hsl(126, 37.1%, 70.2%);
    --grass8: hsl(131, 38.1%, 56.3%);
    --grass9: hsl(131, 41%, 46.5%);
    --grass10: hsl(132, 43.1%, 42.2%);
    --grass11: hsl(133, 50%, 32.5%);
    --grass12: hsl(131, 30%, 18%);

    --blue1: hsl(206, 100%, 99.2%);
    --blue2: hsl(210, 100%, 98%);
    --blue3: hsl(209, 100%, 96.5%);
    --blue4: hsl(210, 98.8%, 94%);
    --blue5: hsl(209, 95%, 90.1%);
    --blue6: hsl(209, 81.2%, 84.5%);
    --blue7: hsl(208, 77.5%, 76.9%);
    --blue8: hsl(206, 81.9%, 65.3%);
    --blue9: hsl(206, 100%, 50%);
    --blue10: hsl(208, 93.5%, 47.4%);
    --blue11: hsl(211, 90%, 42%);
    --blue12: hsl(216, 71%, 23%);

    --amber1: hsl(39, 70%, 99%);
    --amber2: hsl(40, 100%, 96.5%);
    --amber3: hsl(45, 100%, 90.8%);
    --amber4: hsl(44, 100%, 85.8%);
    --amber5: hsl(40, 100%, 81.5%);
    --amber6: hsl(39, 83.6%, 75.4%);
    --amber7: hsl(37, 66.9%, 68.2%);
    --amber8: hsl(35, 59.8%, 60%);
    --amber9: hsl(42, 100%, 62%);
    --amber10: hsl(42, 100%, 55%);
    --amber11: hsl(25, 50%, 38%);
    --amber12: hsl(25, 40%, 22%);

    --violet1: hsl(255, 65%, 99.4%);
    --violet2: hsl(252, 100%, 99%);
    --violet3: hsl(252, 96.9%, 97.4%);
    --violet4: hsl(252, 91.5%, 95.5%);
    --violet5: hsl(252, 85.1%, 93%);
    --violet6: hsl(252, 77.8%, 89.4%);
    --violet7: hsl(252, 71%, 83.7%);
    --violet8: hsl(252, 68.6%, 76.3%);
    --violet9: hsl(252, 56%, 57.5%);
    --violet10: hsl(251, 48.1%, 53.5%);
    --violet11: hsl(250, 43%, 48%);
    --violet12: hsl(250, 43%, 26%);

    --cyan1: hsl(185, 60%, 98.7%);
    --cyan2: hsl(185, 73.3%, 97.1%);
    --cyan3: hsl(186, 70.2%, 94.4%);
    --cyan4: hsl(186, 63.8%, 90.6%);
    --cyan5: hsl(187, 58.3%, 85.4%);
    --cyan6: hsl(188, 54.6%, 78.4%);
    --cyan7: hsl(189, 53.7%, 68.7%);
    --cyan8: hsl(189, 60.3%, 52.5%);
    --cyan9: hsl(190, 95%, 39%);
    --cyan10: hsl(191, 91.2%, 36.8%);
    --cyan11: hsl(192, 85%, 31%);
    --cyan12: hsl(192, 70%, 16.5%);

    /* General */
    --background: #ffffff;
    --foreground: #000000;

    /* Error */
    --error: var(--tomato9);
    --error-light: var(--tomato4);
    --error-lighter: var(--tomato2);
    --error-foreground: var(--tomato11);
    --error-hover: var(--tomato10);

    /* Success */
    --success: var(--blue9);
    --success-light: var(--blue4);
    --success-lighter: var(--blue2);
    --success-foreground: var(--blue11);
    --success-hover: var(--blue10);

    /* Warning */
    --warning: var(--amber9);
    --warning-light: var(--amber4);
    --warning-lighter: var(--amber2);
    --warning-foreground: var(--amber11);
    --warning-hover: var(--amber10);

    /* Info */
    --info: var(--gray9);
    --info-light: var(--gray4);
    --info-lighter: var(--gray2);
    --info-foreground: var(--gray11);
    --info-hover: var(--gray10);

    /* Cyan */
    --cyan: var(--cyan9);
    --cyan-light: var(--cyan4);
    --cyan-lighter: var(--cyan2);
    --cyan-foreground: var(--cyan11);
    --cyan-hover: var(--cyan10);

    /* Violet */
    --violet: var(--violet9);
    --violet-light: var(--violet4);
    --violet-lighter: var(--violet2);
    --violet-foreground: var(--violet11);
    --violet-hover: var(--violet10);

    /* Shadows */
    --shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-border-small: var(--shadow-border), var(--shadow-small);
    --shadow-medium: 0px 2px 2px rgba(0, 0, 0, 0.04),
      0px 8px 8px -8px rgba(0, 0, 0, 0.04);
    --shadow-border-medium: var(--shadow-border), var(--shadow-medium);
    --shadow-large: 0px 2px 2px rgba(0, 0, 0, 0.04),
      0px 8px 16px -4px rgba(0, 0, 0, 0.04);
    --shadow-border-large: var(--shadow-border), var(--shadow-large);
    --shadow-tooltip: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02),
      0px 4px 8px rgba(0, 0, 0, 0.04);
    --shadow-dialog: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02),
      0px 4px 8px -4px rgba(0, 0, 0, 0.04),
      0px 16px 24px -8px rgba(0, 0, 0, 0.06);
    --shadow-dialog: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02),
      0px 8px 16px -4px rgba(0, 0, 0, 0.04),
      0px 24px 32px -8px rgba(0, 0, 0, 0.06);
    --shadow-fullscreen: var(--shadow-border), 0px 1px 1px rgba(0, 0, 0, 0.02),
      0px 8px 16px -4px rgba(0, 0, 0, 0.04),
      0px 24px 32px -8px rgba(0, 0, 0, 0.06);

    /* Radius */
    --radius: 0.6rem;
    --radius-small: 0.375rem;
    --radius-medium: calc(var(--radius) - 2px);
    --radius-large: 0.75rem;
    --radius-xlarge: 1rem;

    --card: var(--background);
    --popover: var(--gray4);
    --secondary: var(--gray3);
    --secondary-foreground: var(--gray9);
    --muted: var(--gray2);
    --muted-foreground: var(--gray11);
    --border: var(--gray5);
    --input: var(--gray5);
    --ring: var(--blue10);

    /* Opacity */
    --opacity-overlay: 0.9;
    --opacity-disabled: 0.5;
  }

  .dark {
    /* Accent */
    --accent: #111010;
    --accent-foreground: #fafafa;
    --primary: #ffffff;
    --primary-foreground: #111111;

    --gray1: hsl(0 0% 8.5%);
    --gray2: hsl(0 0% 11%);
    --gray3: hsl(0 0% 13.6%);
    --gray4: hsl(0 0% 15.8%);
    --gray5: hsl(0 0% 17.9%);
    --gray6: hsl(0 0% 20.5%);
    --gray7: hsl(0 0% 24.3%);
    --gray8: hsl(0 0% 31.2%);
    --gray9: hsl(0 0% 43.9%);
    --gray10: hsl(0 0% 49.4%);
    --gray11: hsl(0 0% 62.8%);
    --gray12: hsl(0 0% 93%);

    --tomato1: hsl(10, 23%, 9.4%);
    --tomato2: hsl(10, 39%, 11.6%);
    --tomato3: hsl(9, 48.3%, 15.5%);
    --tomato4: hsl(9, 53%, 18.1%);
    --tomato5: hsl(9, 57%, 20.7%);
    --tomato6: hsl(9, 61.8%, 24.5%);
    --tomato7: hsl(9, 68.4%, 31.1%);
    --tomato8: hsl(10, 80.4%, 43.9%);
    --tomato9: hsl(10, 78%, 54%);
    --tomato10: hsl(10, 88.4%, 64.1%);
    --tomato11: hsl(10, 100%, 72%);
    --tomato12: hsl(10, 85%, 89%);

    --grass1: hsl(146, 30%, 7.4%);
    --grass2: hsl(138, 20.8%, 9.4%);
    --grass3: hsl(138, 25.8%, 12.5%);
    --grass4: hsl(138, 28.4%, 14.8%);
    --grass5: hsl(137, 30.3%, 17.1%);
    --grass6: hsl(137, 32.3%, 20.6%);
    --grass7: hsl(135, 34.4%, 27.1%);
    --grass8: hsl(131, 35.3%, 40%);
    --grass9: hsl(131, 41%, 46.5%);
    --grass10: hsl(131, 41.7%, 55%);
    --grass11: hsl(131, 50%, 63%);
    --grass12: hsl(120, 60%, 85%);

    --blue1: hsl(212, 35%, 9.2%);
    --blue2: hsl(216, 50%, 11.8%);
    --blue3: hsl(214, 57.6%, 15.6%);
    --blue4: hsl(214, 62.3%, 18.4%);
    --blue5: hsl(213, 66.6%, 21.1%);
    --blue6: hsl(212, 72.6%, 25.2%);
    --blue7: hsl(211, 81.3%, 32.4%);
    --blue8: hsl(211, 85.2%, 47.8%);
    --blue9: hsl(206, 100%, 50%);
    --blue10: hsl(206, 100%, 61.8%);
    --blue11: hsl(205, 100%, 71%);
    --blue12: hsl(205, 100%, 88%);

    --amber1: hsl(36, 100%, 6.1%);
    --amber2: hsl(36, 80.5%, 8%);
    --amber3: hsl(35, 63.4%, 11.4%);
    --amber4: hsl(34, 58.8%, 14.1%);
    --amber5: hsl(34, 58.1%, 16.7%);
    --amber6: hsl(35, 58.3%, 20.5%);
    --amber7: hsl(35, 59%, 27.4%);
    --amber8: hsl(36, 60.2%, 41.4%);
    --amber9: hsl(42, 100%, 62%);
    --amber10: hsl(43, 100%, 64%);
    --amber11: hsl(43, 100%, 65%);
    --amber12: hsl(41, 100%, 85%);

    --violet1: hsl(250, 20%, 10.2%);
    --violet2: hsl(255, 30.3%, 12.9%);
    --violet3: hsl(254, 33.3%, 18.4%);
    --violet4: hsl(253, 34.6%, 22.1%);
    --violet5: hsl(253, 35.5%, 25.5%);
    --violet6: hsl(252, 36.6%, 30.5%);
    --violet7: hsl(251, 37.8%, 39%);
    --violet8: hsl(250, 46.2%, 54.1%);
    --violet9: hsl(252, 56%, 57.5%);
    --violet10: hsl(253, 63.2%, 64.1%);
    --violet11: hsl(255, 100%, 80%);
    --violet12: hsl(250, 93%, 93%);

    --cyan1: hsl(192, 60%, 7.2%);
    --cyan2: hsl(193, 51.1%, 8.8%);
    --cyan3: hsl(193, 51.9%, 11.9%);
    --cyan4: hsl(193, 52.6%, 14.1%);
    --cyan5: hsl(193, 53.4%, 16.5%);
    --cyan6: hsl(192, 54.6%, 20.1%);
    --cyan7: hsl(192, 56.6%, 26.5%);
    --cyan8: hsl(192, 59.8%, 39%);
    --cyan9: hsl(190, 95%, 39%);
    --cyan10: hsl(190, 84%, 46%);
    --cyan11: hsl(190, 90%, 54%);
    --cyan12: hsl(190, 80%, 84%);

    --grayA2: hsl(0 0% 100% / 0.026);

    --shadow-border: 0 0 0 1px hsla(0, 0%, 100%, 0.145);

    /* General */
    --background: #000000;
    --foreground: #ffffff;

    --card: var(--background);

    /* Opacity */
    --opacity-overlay: 0.8;
    --opacity-disabled: 0.5;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* selection color */
@layer base {
  ::selection {
    @apply bg-[#7AFFE1] text-black;
  }
}