@custom-variant dark (&:is(.dark *));

:root,
.light {
  /* Color primitives */
  --color-white: 255 255 255; /* #ffffff */
  --color-black: 0 0 0; /* #000000 */

  --color-text-primary: 23 23 23; /* 171717 */
  --color-text-secondary: 102 102 102; /* 666666 */
  --color-text-tertiary: 201 201 201; /* c9c9c9 */

  /* Background color of the app */
  --color-bg-app: 250 250 250; /* #fafafa */

  /* There are two background colors for pages and UI components.
  In most instances, you should use Background 1—especially when color is being placed on top of the background.
  Background 2 should be used sparingly when a subtle background differentiation is needed. */
  --color-bg-primary: 255 255 255; /* #ffffff */
  --color-bg-secondary: 250 250 250; /* #fafafa */

  /* These three colors are designed for UI component backgrounds. */
  --color-bg-additional-1: 242 242 242; /* #f2f2f2 */
  --color-bg-additional-2: 235 235 235; /* #ebebeb */
  --color-bg-additional-3: 230 230 230; /* #e6e6e6 */

  /* These two colors are designed for high contrast UI component backgrounds. */
  --color-bg-contrast-1: 143 143 143; /* #8f8f8f */
  --color-bg-contrast-2: 128 128 128; /* #808080 */

  /* These three colors are designed for UI component borders. */
  --color-border-1: 235 235 235; /* #ebebeb */
  --color-border-2: 220 220 220; /* #dcdcdc */
  --color-border-3: 201 201 201; /* #c9c9c9 */

  /* Grayscale Transparent variants of the background colors. This only changes in dark mode.*/
  --color-bg-primary-transparent: rgb(var(--color-bg-primary));
  --color-bg-secondary-transparent: rgb(var(--color-bg-secondary));

  --color-bg-additional-1-transparent: rgb(var(--color-bg-additional-1));
  --color-bg-additional-2-transparent: rgb(var(--color-bg-additional-2));
  --color-bg-additional-3-transparent: rgb(var(--color-bg-additional-3));

  --color-bg-contrast-1-transparent: rgb(var(--color-bg-contrast-1));
  --color-bg-contrast-2-transparent: rgb(var(--color-bg-contrast-2));

  --color-border-1-transparent: rgb(var(--color-border-1));
  --color-border-2-transparent: rgb(var(--color-border-2));
  --color-border-3-transparent: rgb(var(--color-border-3));
  --color-border-special-inset-1: rgb(var(--color-black) / 8%);

  /* These colors have the same values in both dark & light mode and are primarily used in places like the Collection header */
  --color-frosted-1: rgb(var(--color-white) / 4%);
  --color-frosted-2: rgb(var(--color-white) / 8%);
  --color-frosted-3: rgb(var(--color-white) / 12%);
  --color-frosted-4: rgb(var(--color-white) / 16%);
  --color-frosted-5: rgb(var(--color-white) / 24%);

  --color-overlay: rgb(var(--color-black) / 40%);

  /* These colors are used to indicate the rarity of an item */
  --color-legendary: 255 138 0; /* ff8a00 */
  --color-legendary-transparent: rgb(var(--color-legendary) / 30%);
  --color-legendary-transparent-1: rgb(var(--color-legendary) / 8%);

  --color-epic: 163 53 238; /* a335ee */
  --color-epic-transparent: rgb(var(--color-epic) / 30%);
  --color-epic-transparent-1: rgb(var(--color-epic) / 8%);

  --color-rare: 0 102 255; /* 06f */
  --color-rare-transparent: rgb(var(--color-rare) / 30%);
  --color-rare-transparent-1: rgb(var(--color-rare) / 8%);

  --color-common: 143 143 143; /* #8F8F8F */
  --color-common-transparent: rgb(var(--color-common) / 30%);
  --color-common-transparent-1: rgb(var(--color-common) / 8%);

  /* Opensea Blue. This color is used for primary buttons, links and anything that is an action or is connected to the OS brand. */
  --color-blue-1: 131 195 255; /* 8FC7FF */
  --color-blue-2: 32 146 255; /* 2E8DEE */
  --color-blue-3: 7 134 255; /* 0786FF */
  --color-blue-4: 6 121 230; /* 0679E6 */
  --color-blue-5: 5 94 179; /* 055EB3 */
  --color-link: var(--color-blue-3);
  --color-link-hover: var(--color-blue-5);

  /* Semantic green, yellow, orange and red colors. */
  --color-success: 40 169 72; /* 28A948 */
  --color-success-transparent-1: rgb(var(--color-success) / 8%);
  --color-success-transparent-2: rgb(var(--color-success) / 16%);

  --color-warning: 230 184 0; /* E6B800 */
  --color-warning-transparent-1: rgb(var(--color-warning) / 8%);
  --color-warning-transparent-2: rgb(var(--color-warning) / 16%);

  --color-caution: 244 113 0; /* F47100 */
  --color-caution-transparent-1: rgb(var(--color-caution) / 8%);
  --color-caution-transparent-2: rgb(var(--color-caution) / 16%);

  --color-error: 234 57 67; /* EA3943 */
  --color-error-transparent-1: rgb(var(--color-error) / 8%);
  --color-error-transparent-2: rgb(var(--color-error) / 16%);

  /* Z-INDEX VARIABLES */
  --z-inset-border: 10;
  --z-sidebar: 110;
  --z-fixed-bottom-sheet: 210;
  --z-takeover-modal-overlay: 310;
  --z-takeover-modal: 410;
  --z-overlay: 510;
  --z-sheet: 610;
  --z-modal: 710;
  --z-tooltip: 810;
  --z-toast: 910;
  --z-top: 1010;

  /* MISC */
  --ios-inset-bottom: 0px;

  color: rgb(var(--color-text-primary));
}

.dark {
  /* Color primitives */
  --color-white: 255 255 255; /* #ffffff */
  --color-black: 0 0 0; /* #000000 */

  --color-text-primary: 255 255 255; /* #ffffff */
  --color-text-secondary: 172 173 174; /* #ACADAE */
  --color-text-tertiary: 67 68 71; /* #434447 */

  /* Background color of the app */
  --color-bg-app: 16 16 17; /* #101011 */

  /* There are two background colors for pages and UI components.
  In most instances, you should use Background 1—especially when color is being placed on top of the background.
  Background 2 should be used sparingly when a subtle background differentiation is needed. */
  --color-bg-primary: 20 20 21; /* #141415 */
  --color-bg-secondary: 23 24 26; /* #17181A */

  /* These three colors are designed for UI component backgrounds. */
  --color-bg-additional-1: 27 29 31; /* #1B1D1F */
  --color-bg-additional-2: 38 39 45; /* #26272D */
  --color-bg-additional-3: 60 61 64; /* #3C3D40 */

  /* These two colors are designed for high contrast UI component backgrounds. */
  --color-bg-contrast-1: 137 138 140; /* #898A8C */
  --color-bg-contrast-2: 149 149 151; /* #959597 */

  /* These three colors are designed for UI component borders. */
  --color-border-1: 38 39 45; /* #26272D */
  --color-border-2: 52 53 60; /* #34353C */
  --color-border-3: 67 68 71; /* #434447 */

  /* Grayscale Transparent variants of the background colors. This only changes in dark mode.*/
  --color-bg-primary-transparent: rgb(var(--color-white) / 2%);
  --color-bg-secondary-transparent: rgb(var(--color-white) / 4%);

  --color-bg-additional-1-transparent: rgb(var(--color-white) / 8%);
  --color-bg-additional-2-transparent: rgb(var(--color-white) / 12%);
  --color-bg-additional-3-transparent: rgb(var(--color-white) / 16%);

  --color-bg-contrast-1-transparent: rgb(var(--color-white) / 24%);
  --color-bg-contrast-2-transparent: rgb(var(--color-white) / 32%);

  --color-border-1-transparent: rgb(var(--color-white) / 8%);
  --color-border-2-transparent: rgb(var(--color-white) / 12%);
  --color-border-3-transparent: rgb(var(--color-white) / 16%);
  --color-border-special-inset-1: rgb(var(--color-white) / 8%);

  --color-overlay: rgb(var(--color-black) / 60%);

  /* These colors are used to indicate the rarity of an item */
  --color-legendary: 255 138 0; /* #FF8A00 */
  --color-legendary-transparent: rgb(var(--color-legendary) / 30%);
  --color-legendary-transparent-1: rgb(var(--color-legendary) / 8%);

  --color-epic: 211 88 255; /* #D358FF */
  --color-epic-transparent: rgb(var(--color-epic) / 30%);
  --color-epic-transparent-1: rgb(var(--color-epic) / 8%);

  --color-rare: 0 163 255; /* #00A3FF */
  --color-rare-transparent: rgb(var(--color-rare) / 30%);
  --color-rare-transparent-1: rgb(var(--color-rare) / 8%);

  --color-common: 137 138 140; /* #898A8C */
  --color-common-transparent: rgb(var(--color-common) / 30%);
  --color-common-transparent-1: rgb(var(--color-common) / 8%);

  --color-link: var(--color-blue-1);
  --color-link-hover: var(--color-blue-3);

  /* Semantic green, yellow, orange and red colors. */
  --color-success: 71 187 100; /* #47BB64 */
  --color-success-transparent-1: rgb(var(--color-success) / 8%);
  --color-success-transparent-2: rgb(var(--color-success) / 16%);

  --color-warning: 255 204 0; /* #FFCC00 */
  --color-warning-transparent-1: rgb(var(--color-warning) / 8%);
  --color-warning-transparent-2: rgb(var(--color-warning) / 16%);

  --color-caution: 244 113 0; /* #F47100 */
  --color-caution-transparent-1: rgb(var(--color-caution) / 8%);
  --color-caution-transparent-2: rgb(var(--color-caution) / 16%);

  --color-error: 226 71 86; /* #E24756 */
  --color-error-transparent-1: rgb(var(--color-error) / 8%);
  --color-error-transparent-2: rgb(var(--color-error) / 16%);

  color: rgb(var(--color-text-primary));
}

@theme inline {
  /* FONTS */
  --font-*: initial;
  --font-sans: var(--font-family-sans);
  --font-mono: var(--font-family-mono);

  /* FONT SIZES */
  --text-*: initial;
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-heading-xs: 18px;
  --text-heading-sm: 20px;
  --text-heading-md: 24px;
  --text-heading-lg: 32px;
  --text-display-sm: 24px;
  --text-display-md: 32px;
  --text-display-lg: 48px;
  --text-display-xl: 60px;

  /* FONT WEIGHT */
  --font-weight-inherit: inherit;

  /* COLORS */
  --color-*: initial;
  --color-transparent: transparent;
  --color-current: currentColor;
  --color-inherit: inherit;
  --color-white: rgb(var(--color-white));
  --color-black: rgb(var(--color-black));

  --color-text-primary: rgb(var(--color-text-primary));
  --color-text-secondary: rgb(var(--color-text-secondary));
  --color-text-tertiary: rgb(var(--color-text-tertiary));

  --color-bg-primary: rgb(var(--color-bg-primary));
  --color-bg-secondary: rgb(var(--color-bg-secondary));
  --color-bg-app: rgb(var(--color-bg-app));

  --color-bg-additional-1: rgb(var(--color-bg-additional-1));
  --color-bg-additional-2: rgb(var(--color-bg-additional-2));
  --color-bg-additional-3: rgb(var(--color-bg-additional-3));

  --color-bg-contrast-1: rgb(var(--color-bg-contrast-1));
  --color-bg-contrast-2: rgb(var(--color-bg-contrast-2));

  --color-border-1: rgb(var(--color-border-1));
  --color-border-2: rgb(var(--color-border-2));
  --color-border-3: rgb(var(--color-border-3));

  --color-bg-primary-transparent: var(--color-bg-primary-transparent);
  --color-bg-secondary-transparent: var(--color-bg-secondary-transparent);

  --color-bg-additional-1-transparent: var(--color-bg-additional-1-transparent);
  --color-bg-additional-2-transparent: var(--color-bg-additional-2-transparent);
  --color-bg-additional-3-transparent: var(--color-bg-additional-3-transparent);

  --color-bg-contrast-1-transparent: var(--color-bg-contrast-1-transparent);
  --color-bg-contrast-2-transparent: var(--color-bg-contrast-2-transparent);

  --color-border-1-transparent: var(--color-border-1-transparent);
  --color-border-2-transparent: var(--color-border-2-transparent);
  --color-border-3-transparent: var(--color-border-3-transparent);

  --color-frosted-1: var(--color-frosted-1);
  --color-frosted-2: var(--color-frosted-2);
  --color-frosted-3: var(--color-frosted-3);
  --color-frosted-4: var(--color-frosted-4);
  --color-frosted-5: var(--color-frosted-5);

  --color-overlay: var(--color-overlay);

  --color-legendary: rgb(var(--color-legendary));
  --color-legendary-transparent: var(--color-legendary-transparent);
  --color-legendary-transparent-1: var(--color-legendary-transparent-1);

  --color-epic: rgb(var(--color-epic));
  --color-epic-transparent: var(--color-epic-transparent);
  --color-epic-transparent-1: var(--color-epic-transparent-1);

  --color-rare: rgb(var(--color-rare));
  --color-rare-transparent: var(--color-rare-transparent);
  --color-rare-transparent-1: var(--color-rare-transparent-1);

  --color-common: rgb(var(--color-common));
  --color-common-transparent: var(--color-common-transparent);
  --color-common-transparent-1: var(--color-common-transparent-1);

  --color-blue-1: rgb(var(--color-blue-1));
  --color-blue-2: rgb(var(--color-blue-2));
  --color-blue-3: rgb(var(--color-blue-3));
  --color-blue-4: rgb(var(--color-blue-4));
  --color-blue-5: rgb(var(--color-blue-5));
  --color-link: rgb(var(--color-link));
  --color-link-hover: rgb(var(--color-link-hover));
  --color-success: rgb(var(--color-success));
  --color-success-transparent-1: var(--color-success-transparent-1);
  --color-success-transparent-2: var(--color-success-transparent-2);

  --color-warning: rgb(var(--color-warning));
  --color-warning-transparent-1: var(--color-warning-transparent-1);
  --color-warning-transparent-2: var(--color-warning-transparent-2);

  --color-caution: rgb(var(--color-caution));
  --color-caution-transparent-1: var(--color-caution-transparent-1);
  --color-caution-transparent-2: var(--color-caution-transparent-2);

  --color-error: rgb(var(--color-error));
  --color-error-transparent-1: var(--color-error-transparent-1);
  --color-error-transparent-2: var(--color-error-transparent-2);

  /* BOX SHADOW */
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0px 1px 2px -1px rgba(0, 0, 0, 0.1),
    0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  /* INSET SHADOW */
  --inset-shadow-*: initial;
  --inset-shadow-border: inset 0 0 0 1px var(--color-border-special-inset-1);

  /* DROP SHADOW */
  --drop-shadow-*: initial;

  /* BREAKPOINTS */
  --breakpoint-*: initial;
  --breakpoint-xs: 0px;
  --breakpoint-sm: 393px;
  --breakpoint-md: 768px;
  /* This is one larger than the highest tablet breakpoint (iPad pro, which is 1024px) */
  --breakpoint-lg: 1025px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
  --breakpoint-3xl: 1728px;
  --breakpoint-4xl: 1920px;
  --breakpoint-5xl: 2560px;

  /* BORDER RADIUS */
  --radius-inherit: inherit;
  --radius-initial: initial;

  /* EASINGS */
  --ease-*: initial;
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-in-quad: cubic-bezier(0.11, 0, 0.5, 0);
  --ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-quart: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-linear: cubic-bezier(0, 0, 1, 1);

  /* ANIMATIONS */
  --animate-wiggle: wiggle 10s ease-in-out infinite;
  --animate-live-animation-bg: live-animation-bg 2s var(--ease-out-cubic) 0s 1;
  --animate-change-animation-bg: blink 0.8s var(--ease-out) 0s 1 normal none
    running;
  --animate-positive-change-bg: positive-change-bg 0.8s var(--ease-out) 1;
  --animate-negative-change-bg: negative-change-bg 0.8s var(--ease-out) 1;

  @keyframes live-animation-bg {
    0% {
      background: rgb(var(--color-bg-additional-3));
    }
    100% {
      background: initial;
    }
  }

  @keyframes blink {
    0% {
      background: rgb(var(--color-bg-additional-3));
    }
  }

  @keyframes positive-change-bg {
    0% {
      background: rgb(var(--color-success) / 0.2);
    }
    100% {
      background: current;
    }
  }

  @keyframes negative-change-bg {
    0% {
      background: rgb(var(--color-error) / 0.2);
    }
    100% {
      background: current;
    }
  }

  @keyframes slideDown {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes slideUp {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }

  @keyframes wiggle {
    "0%, 100%": {
      transform: "rotate(-3deg)";
    }
    "50%": {
      transform: "rotate(3deg)";
    }
  }
}

@utility z-inset-border {
  z-index: var(--z-inset-border);
}

@utility z-sidebar {
  z-index: var(--z-sidebar);
}

@utility z-fixed-bottom-sheet {
  z-index: var(--z-fixed-bottom-sheet);
}

@utility z-takeover-modal-overlay {
  z-index: var(--z-takeover-modal-overlay);
}

@utility z-takeover-modal {
  z-index: var(--z-takeover-modal);
}

@utility z-overlay {
  z-index: var(--z-overlay);
}

@utility z-sheet {
  z-index: var(--z-sheet);
}

@utility z-modal {
  z-index: var(--z-modal);
}

@utility z-tooltip {
  z-index: var(--z-tooltip);
}

@utility z-toast {
  z-index: var(--z-toast);
}

@utility z-top {
  z-index: var(--z-top);
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}