@tailwind utilities;

@font-face {
  font-family: "RockfordSansLight";
  src:
    local("RockfordSansLight"),
    url(./assets/fonts/RockfordSans-Light.otf) format("opentype");
}

@font-face {
  font-family: "RockfordSansRegular";
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-Regular.otf) format("opentype");
}

@font-face {
  font-family: "RockfordSansMedium";
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-Medium.otf) format("opentype");
}

@font-face {
  font-family: "RockfordSansBold";
  font-weight: 900;
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-Bold.otf) format("opentype");
}

@font-face {
  font-family: "RockfordSansExtraBold";
  font-weight: 900;
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-ExtraBold.otf) format("opentype");
}

@font-face {
  font-family: "UberMove";
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-Light.otf) format("opentype");
}

@font-face {
  font-family: "UberMoveText";
  src:
    local("RockfordSans"),
    url(./assets/fonts/RockfordSans-Regular.otf) format("opentype");
}

body {
  margin: 0;
  font-family:
    RockfordSansLight, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: hidden;
}

:root {
  --color-background: #ffffff;
  --color-text: #000000;
  --color-primary: #ff2876;
  --color-text-muted: #42576ca6;
  --color-border: #ffffff;
  --color-input-background: #f3f3f3;
  --color-placeholder: #3b3b3bb4;
  --color-clear-input: #000000;
  --color-menu-hover: #f7f7f7;
  --color-default-button: rgba(0, 0, 0, 0.05);
  --color-purple: oklch(0.5478 0.201 296.07);
  --color-blue: oklch(0.789 0.154 211.53);
  --color-pink: oklch(0.6372 0.229 346.83);
  --color-bar: rgba(255, 40, 118, 0.1);
  --color-play-button: #f4f4f4;
  --color-toggle-track: #c7b2e9;
  --color-button-text: #fff;
  --color-skeleton-background: #f3f3f3;
  --color-skeleton-foreground: #ecebeb;
}

.dark {
  --color-background: #130825;
  --color-text: oklch(95.07% 0.028 338.58);
  --color-primary: #ff2876;
  --color-text-muted: rgb(191 174 195 / 65%);
  --color-border: #310e64;
  --color-input-background: #221538;
  --color-placeholder: #ffffffb4;
  --color-clear-input: #ffffff;
  --color-menu-hover: #1f0d3c;
  --color-default-button: rgba(255, 255, 255, 0.05);
  --color-purple: oklch(0.5478 0.201 296.07);
  --color-blue: oklch(0.789 0.154 211.53);
  --color-pink: oklch(0.6372 0.229 346.83);
  --color-bar: rgb(255, 129, 175);
  --color-play-button: var(--color-primary);
  --color-toggle-track: #341b5c;
  --color-button-text: #000;
  --color-skeleton-background: #221538;
  --color-skeleton-foreground: #2b1a4c;
}

::placeholder {
  color: var(--color-text-muted) !important;
}

td > div {
  color: var(--color-text-muted) !important;
}

* {
  transition:
    background-color 0.1s ease,
    color 0.1s ease;
}