:root {
  --os-bg: #0D0D0D;
  --os-yellow: #FFD100;
  --os-fuchsia: #ff184c;
  --os-cream: #F5F0E8;
  --os-text: #D8D2C8;
  --os-muted: #A9A39A;
  --os-font-heading: 'Anton', Impact, sans-serif;
  --os-font-body: 'Inter', 'Switzer', sans-serif;
  --os-text-xs: 12px;
  --os-text-sm: 14px;
  --os-text-base: 16px;
  --os-text-lg: 18px;
  --os-text-xl: 20px;
  --os-text-2xl: 24px;
  --os-text-3xl: 30px;
  --os-text-4xl: 36px;
  --os-text-5xl: 48px;
  --os-text-6xl: 60px;
}

html,
body {
  background-color: var(--os-bg) !important;
  color: var(--os-text) !important;
  font-family: var(--os-font-body);
  font-size: var(--os-text-base);
}

body {
  min-height: 100vh;
}

#topnav {
  background-color: var(--os-bg) !important;
  border-bottom-color: var(--os-bg) !important;
  box-shadow: none !important;
}

#topnav .logo,
#topnav .navigation-menu > li > a,
#topnav .navbar-toggle,
#topnav .menu-arrow,
#topnav .text-slate-700 {
  color: var(--os-cream) !important;
}

#topnav .navigation-menu > li > a:hover,
#topnav .navigation-menu > li > a:focus-visible,
#topnav .logo:hover,
#topnav .logo:focus-visible {
  color: var(--os-yellow) !important;
}

#topnav .dropdown-menu,
#topnav .shadow,
#topnav .shadow-sm,
#topnav .shadow-md,
#topnav .shadow-lg,
#topnav .shadow-xl,
#topnav [class*='shadow-'] {
  box-shadow: none !important;
}

#topnav .dropdown-menu,
#topnav .submenu {
  background-color: var(--os-bg) !important;
  border-color: #2A2A2A !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  color: var(--os-cream) !important;
  font-family: var(--os-font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

h1 { font-size: var(--os-text-6xl); line-height: 1.05; }
h2 { font-size: var(--os-text-5xl); line-height: 1.08; }
h3 { font-size: var(--os-text-4xl); line-height: 1.1; }
h4 { font-size: var(--os-text-3xl); line-height: 1.15; }
h5 { font-size: var(--os-text-2xl); line-height: 1.2; }
h6 { font-size: var(--os-text-xl); line-height: 1.25; }

p,
li,
label,
input,
textarea,
select,
button {
  font-family: var(--os-font-body);
}

p,
li {
  color: var(--os-text);
}

a {
  color: var(--os-fuchsia);
}

a:hover,
a:focus-visible {
  color: var(--os-yellow);
}

button,
.btn,
input[type='submit'],
input[type='button'],
input[type='reset'] {
  background-color: var(--os-fuchsia) !important;
  border-color: var(--os-fuchsia) !important;
  color: var(--os-cream) !important;
}

button:hover,
button:focus-visible,
.btn:hover,
.btn:focus-visible,
input[type='submit']:hover,
input[type='submit']:focus-visible,
input[type='button']:hover,
input[type='button']:focus-visible,
input[type='reset']:hover,
input[type='reset']:focus-visible {
  background-color: var(--os-yellow) !important;
  border-color: var(--os-yellow) !important;
  color: var(--os-bg) !important;
}

.os-accent,
.text-yellow-400,
.text-yellow-500,
.text-amber-500 {
  color: var(--os-yellow) !important;
}

.os-action,
.text-violet-600,
.text-fuchsia-600,
.text-fuchsia-500 {
  color: var(--os-fuchsia) !important;
}

.bg-violet-600,
.bg-violet-700,
.bg-fuchsia-500,
.bg-fuchsia-600 {
  background-color: var(--os-fuchsia) !important;
}

.bg-white,
.bg-black,
.bg-gray-50,
.bg-slate-50,
.bg-slate-100 {
  background-color: var(--os-bg) !important;
}

.text-black,
.text-slate-900,
.text-dark {
  color: var(--os-cream) !important;
}

.text-white {
  color: var(--os-cream) !important;
}

.text-base { font-size: var(--os-text-base) !important; }
.text-lg { font-size: var(--os-text-lg) !important; }
.text-xl { font-size: var(--os-text-xl) !important; }
.text-2xl { font-size: var(--os-text-2xl) !important; }
.text-3xl { font-size: var(--os-text-3xl) !important; }
.text-4xl { font-size: var(--os-text-4xl) !important; }
.text-5xl { font-size: var(--os-text-5xl) !important; }
.text-6xl { font-size: var(--os-text-6xl) !important; }

@media (max-width: 767px) {
  h1 { font-size: var(--os-text-4xl); }
  h2 { font-size: var(--os-text-3xl); }
  h3 { font-size: var(--os-text-2xl); }
}