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

@layer base {
  :root {
    --background: rgba(255, 252, 249, 1);
    --foreground: rgba(247, 243, 234, 1);
    --accent: rgba(141, 113, 76, 1);
    --accent-light: rgb(183, 158, 99, 1);
    --primary-font: rgba(0, 0, 0, 1);
    --secondary-font: rgba(255, 255, 255, 1);
    --muted: rgb(76, 68, 66);
    --muted-font: rgba(120, 120, 120, 1);
    --accent-secondary: rgba(87, 87, 87, 1);
    --primary-border: rgba(255, 255, 255, 1);
    --accent-border: rgba(141, 113, 76, 1);
    --muted-border: rgba(124, 124, 124, 1);
    --background-gradient: linear-gradient(180deg,
        rgb(1, 16, 20) 0%,
        rgb(0, 33, 51) 100%);
    --premium-color: rgba(180, 151, 89, 1);
    --secondary-black: rgba(0, 18, 26, 1);
    --disabled: rgba(188, 188, 188, 1);
    --tertiary: rgba(135, 135, 135, 1);
    --blur-background: rgba(0, 0, 0, 0.37);
    --transparent-text: rgba(72, 64, 61, 0.1);
    --muted-dark: rgba(120, 120, 120, 1);
    --muted-light: rgba(171, 171, 171, 1);
    --background-invert: rgba(0, 0, 0, 1);
    --transparent-primary: rgba(251, 251, 251);
    --transparent-white-50: rgba(251, 251, 251, 0.5);
    --transparent-white-13: rgba(251, 251, 251, 0.13);
    --transparent-white-12: rgba(151, 151, 151, 0.13);
    --transparent-white-25: rgba(248, 234, 221, 0.25);
    --teritiary-black: rgba(37, 37, 37, 0.9);
    --muted-brown-gray: rgba(72, 64, 61);
    --error: rgba(179, 39, 39, 1);
    --image-overlay-gradient: linear-gradient(181.4deg,
        rgba(0, 0, 0, 0.7) 21.87%,
        rgba(0, 0, 0, 0) 91.89%);
    --muted-light-secondary: rgba(110, 110, 110, 0.5);
    --muted-light-tertiary: rgba(189, 189, 189);
    --muted-light-quaternary: rgba(109, 109, 109);
    --foreground-border: rgba(225, 213, 199, 1);
    --muted-dark-secondary: rgba(53, 53, 53, 1);
    --muted-dark-tertiary: rgb(13, 31, 37, 94%);
    --muted-dark-quaternary: rgba(178, 178, 178);
    --image-overlay-gradient-secondary: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 54.43%,
        rgba(0, 0, 0, 0.85) 88.38%,
        #000000 99.93%);
    --blur-background-secondary: rgba(38, 38, 38, 0.4);
    --image-overlay-gradient-tertiary: linear-gradient(180deg,
        rgb(0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 49.66%,
        rgb(0, 0, 0) 99.93%);
    --image-overlay-fading: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 19.46%,
        rgb(0, 0, 0) 97.31%);
    --slate-gray: rgba(128, 128, 128);
    --soft-ivory: rgba(255, 248, 241);
    --peach-tint-transparent: rgba(247, 225, 206, 0.25);
    --subtle-highlight: rgba(83, 83, 83);
    --peach-transparent: rgba(246, 234, 221, 0.75);
    --peach-transparent-primary: rgba(246, 238, 213);
    --peach-transparent-secondary: rgba(246, 238, 213, 0.4);
    --slate-gray-secondary: rgba(106, 106, 106, 1);
    --accent-secondary-premium: rgba(154, 154, 154, 1);
    --background-invert-secondary: rgba(31, 31, 31, 1);
    --background-invert-tertiary: rgba(42, 42, 42, 1);
    --background-invert-quaternary: rgba(24, 24, 24, 1);
    --background-invert-quinary: rgba(28, 28, 28);
    --background-invert-senary: rgba(14, 14, 14);
    --background-invert-septenary: rgba(32, 32, 32);
    --background-invert-octonary: rgba(15, 15, 15);
    --background-invert-nonary: rgba(63, 63, 63);
    --background-invert-denary: rgba(41, 41, 41);
    --accent-secondary-light: rgba(154, 154, 154, 1);
    --charcoal-primary: rgba(51, 51, 51, 1);
    --charcoal-secondary: rgba(62, 62, 62);
    --foreground-secondary: rgba(250, 245, 230, 1);
    --primary-pink: rgba(229, 94, 152, 1);
    --foreground-tertiary: rgba(255, 245, 235, 0.85);
    --slate-gray-tertiary: rgba(92, 92, 92, 1);
    --peach-primary: rgba(232, 219, 200, 1);
    --danger: rgba(165, 14, 14, 1);
    --accent-tertiary: rgba(222, 170, 101);
  }

  .dark {
    --background: rgba(0, 0, 0, 1);
    --foreground: rgba(0, 0, 0, 1);
    --accent: rgba(141, 113, 76, 1);
    --primary-font: rgba(255, 255, 255, 1);
    --secondary-font: rgba(255, 255, 255, 1);
    --muted: rgba(124, 124, 124, 1);
    --muted-font: rgba(171, 171, 171, 1);
    --primary-border: rgba(154, 154, 154, 1);
    --accent-border: rgba(141, 113, 76, 1);
    --muted-border: rgba(124, 124, 124, 1);
    --background-gradient: linear-gradient(180deg,
        rgb(1, 16, 20) 0%,
        rgb(0, 33, 51) 100%);
    --premium-color: rgba(191, 162, 83, 1);
    --secondary-black: rgba(0, 18, 26, 1);
    --disabled: rgba(188, 188, 188, 1);
    --tertiary: rgba(135, 135, 135, 1);
    --blur-background: rgba(0, 0, 0, 0.37);
    --transparent-text: rgba(154, 154, 154, 1);
    --transparent-primary: rgba(251, 251, 251);
    --transparent-white-50: rgba(251, 251, 251, 0.5);
    --transparent-white-13: rgba(251, 251, 251, 0.13);
    --transparent-white-12: rgba(151, 151, 151, 0.13);
    --transparent-white-25: rgba(248, 234, 221, 0.25);
    --teritiary-black: rgba(37, 37, 37, 0.9);
    --muted-brown-gray: rgba(154, 154, 154, 1);
    --image-overlay-gradient: linear-gradient(181.4deg,
        rgba(0, 0, 0, 0.7) 21.87%,
        rgba(0, 0, 0, 0) 91.89%);
    --muted-dark: rgba(154, 154, 154, 1);
    --muted-dark-secondary: rgba(53, 53, 53, 1);
    --muted-dark-tertiary: rgb(13, 31, 37, 94%);
    --image-overlay-gradient-secondary: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 54.43%,
        rgba(0, 0, 0, 0.85) 88.38%,
        #000000 99.93%);
    --blur-background-secondary: rgba(38, 38, 38, 0.4);
    --image-overlay-gradient-tertiary: linear-gradient(180deg,
        rgb(0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 49.66%,
        rgb(0, 0, 0) 99.93%);
    --image-overlay-fading: linear-gradient(180deg,
        rgba(0, 0, 0, 0) 19.46%,
        rgb(0, 0, 0) 97.31%);
    --slate-gray: rgba(128, 128, 128);
    --soft-ivory: rgba(255, 248, 241);
    --background-invert: rgba(0, 0, 0, 1);
    --peach-tint-transparent: rgba(247, 225, 206, 0.25);
    --subtle-highlight: rgba(83, 83, 83, 1);
    --peach-transparent: rgba(247, 225, 206, 0.25);
    --peach-transparent-primary: rgba(246, 238, 213);
    --charcoal-primary: rgba(51, 51, 51, 1);
    --slate-gray-secondary: rgba(106, 106, 106, 1);
    --foreground-secondary: rgba(250, 245, 230, 1);
    --foreground-tertiary: rgba(255, 245, 235, 0.85);
    --slate-gray-tertiary: rgba(92, 92, 92, 1);
    --peach-primary: rgba(232, 219, 200, 1);
    --danger: rgba(165, 14, 14, 1);
    --background-invert-nonary: rgba(63, 63, 63);
    --background-invert-denary: rgba(41, 41, 41);
    --accent-tertiary: rgba(222, 170, 101);
  }
}

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

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}