@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --funom-font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --funom-font-size-xs: 0.75rem;
  --funom-font-size-sm: 0.875rem;
  --funom-font-size-base: 1rem;
  --funom-font-size-lg: 1.125rem;
  --funom-font-size-xl: 1.25rem;
  --funom-font-size-2xl: 1.5rem;
  --funom-font-size-3xl: 1.875rem;
  --funom-font-size-4xl: 2.25rem;
  --funom-line-height-body: 1.6;
  --funom-line-height-heading: 1.15;
  --funom-text-on-light: #111111;
  --funom-text-muted-on-light: #374151;
  --funom-text-on-dark: #ffffff;
  --funom-text-muted-on-dark: #d1d5db;
}

html,
body {
  font-family: var(--funom-font-sans);
  font-size: var(--funom-font-size-base);
  font-style: normal;
  font-weight: 450;
  line-height: var(--funom-line-height-body);
  letter-spacing: 0;
  color: var(--funom-text-on-light);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
textarea,
select,
optgroup,
option,
label,
table,
.table,
.dropdown-menu,
.modal,
.popover,
.tooltip,
.navbar,
.sidebar,
.breadcrumb,
.pagination {
  font-family: var(--funom-font-sans);
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.modal-title,
.panel-title,
.card-title {
  font-family: var(--funom-font-sans);
  font-style: normal;
  font-weight: 750;
  line-height: var(--funom-line-height-heading);
  letter-spacing: 0;
}

h1,
.h1 { font-size: var(--funom-font-size-4xl); }
h2,
.h2 { font-size: var(--funom-font-size-3xl); }
h3,
.h3 { font-size: var(--funom-font-size-2xl); }
h4,
.h4 { font-size: var(--funom-font-size-xl); }
h5,
.h5 { font-size: var(--funom-font-size-lg); }
h6,
.h6 { font-size: var(--funom-font-size-base); }

p,
li,
dt,
dd,
blockquote,
.form-control,
.form-check-label,
.help-block,
.text-muted,
.alert,
.list-group-item {
  line-height: var(--funom-line-height-body);
  letter-spacing: 0;
  font-weight: 450;
}

.text-muted,
.help-block,
.form-text,
.card-text,
.panel-body p,
.modal-body p {
  color: var(--funom-text-muted-on-light);
  font-weight: 450;
}

/* Keep secondary copy readable on light FUNOM and Shufy surfaces. */
body:not(.body__dark) .text-gray-400,
body:not(.body__dark) .text-gray-300,
body:not(.body__dark) p[class*="coodiv-text-"],
body:not(.body__dark) .text-blackish-blue,
body:not(.body__dark) .login__register__sidebar__content__announcements__item__desc {
  color: var(--funom-text-muted-on-light) !important;
}

body:not(.body__dark) .text-gray-400:not(.font-medium):not(.font-semibold):not(.font-bold),
body:not(.body__dark) p[class*="coodiv-text-"],
body:not(.body__dark) .text-blackish-blue,
body:not(.body__dark) .login__register__sidebar__content__announcements__item__desc {
  font-weight: 500 !important;
}

body:not(.body__dark) [style*="color: rgb(156, 163, 175)"],
body:not(.body__dark) [style*="color:rgb(156, 163, 175)"],
body:not(.body__dark) [style*="color: #9ca3af"],
body:not(.body__dark) [style*="color:#9ca3af"],
body:not(.body__dark) [style*="color: rgb(107, 114, 128)"],
body:not(.body__dark) [style*="color:rgb(107, 114, 128)"],
body:not(.body__dark) [style*="color: #6b7280"],
body:not(.body__dark) [style*="color:#6b7280"] {
  color: var(--funom-text-muted-on-light) !important;
  font-weight: 500;
}

/* Explicit foreground utilities and controls must retain their intended contrast. */
[class~="text-white"],
.btn-primary,
.btn-success,
.btn-danger,
.btn-info,
.btn-dark {
  color: var(--funom-text-on-dark) !important;
}

/* The same gray utilities are used in FUNOM's dark announcement bar and footer. */
body:not(.body__dark) :is([class~="bg-[#1a1a2e]"], .bg-dark, .navbar-dark, .dark-mode-texts, .minimal__sidebar, .sidebar) :is(
  .text-gray-300,
  .text-gray-400,
  .text-muted,
  .help-block,
  .form-text,
  .card-text,
  p[class*="coodiv-text-"],
  .text-blackish-blue
) {
  color: var(--funom-text-muted-on-dark) !important;
}

body:not(.body__dark) :is([class~="bg-[#1a1a2e]"], .bg-dark, .navbar-dark, .dark-mode-texts, .minimal__sidebar, .sidebar) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .modal-title,
  .panel-title,
  .card-title
) {
  color: var(--funom-text-on-dark);
}

/* FUNOM uploads one complete wordmark into Shufy's icon and tagline fields. */
body.theme-style-three .website__identity__sidebar__link > .image__logo.icon {
  display: none !important;
}

body.theme-style-three .website__identity__sidebar__link > .image__logo__tagline {
  height: auto;
  max-height: 42px;
  max-width: 160px;
  object-fit: contain;
  width: auto;
}

@media (max-width: 768px) {
  body.theme-style-three .top__header__website__identity.website__identity__sidebar {
    display: flex !important;
  }

  body.theme-style-three .header__latest__annoncements {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.theme-style-three.horizontal__sidebar .sidebar__foot .side__bar__item__text {
    display: none !important;
  }

  body.theme-style-three.horizontal__sidebar .sidebar__foot .sidebar__item {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (min-width: 768px) and (max-width: 768.02px) {
  body.theme-style-three.horizontal__sidebar .sidebar__close {
    display: none !important;
  }
}

/* Keep the primary Shufy toolbar light at every responsive breakpoint. */
body.theme-style-three .sidebar.minimal__sidebar,
body.theme-style-three .sidebar.minimal__sidebar .sidebar__container,
body.theme-style-three .sidebar.minimal__sidebar .sidebar__foot {
  background: #ffffff !important;
  color: var(--funom-text-on-light) !important;
}

body.theme-style-three .sidebar.minimal__sidebar {
  border-bottom: 1px solid #e5e7eb;
}

body.theme-style-three .sidebar.minimal__sidebar :is(
  .sidebar__item,
  .sidebar__head,
  .side__bar__item__text,
  .side__bar__item__icon,
  .sidebar__login,
  .sidebar__login__link,
  .sidebar__logout,
  .sidebar__close,
  .sidebar__extend__toggle
) {
  color: var(--funom-text-on-light) !important;
}

body.theme-style-three .sidebar.minimal__sidebar :is(.sidebar__item, .sidebar__head):hover,
body.theme-style-three .sidebar.minimal__sidebar :is(.sidebar__item, .sidebar__head):focus {
  background-color: #f3f4f6 !important;
  color: var(--funom-text-on-light) !important;
}

body.theme-style-three .sidebar.minimal__sidebar :is(.sidebar__body, .links__with__background, .sidebar__link) {
  background-color: #ffffff !important;
  color: var(--funom-text-on-light) !important;
}

body.theme-style-three .sidebar.minimal__sidebar .sidebar__link:hover,
body.theme-style-three .sidebar.minimal__sidebar .sidebar__link:focus {
  background-color: #f3f4f6 !important;
  color: var(--funom-text-on-light) !important;
}

/* Domain search copy sits directly on a dark purple surface. */
.main__homepage__services__grid__element.domains.dark-mode-texts :is(.title, .sub-title) {
  color: var(--funom-text-on-dark) !important;
}

button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: var(--funom-font-sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

input,
textarea,
select,
.form-control,
.input-group-text {
  font-family: var(--funom-font-sans);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

input::placeholder,
textarea::placeholder {
  font-family: var(--funom-font-sans);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: #6b7280;
  opacity: 1;
}

table,
.table {
  font-size: var(--funom-font-size-sm);
  font-weight: 400;
  line-height: 1.5;
}

th,
.table th {
  font-weight: 650;
}

nav,
.navbar,
.sidebar,
.dropdown-menu,
.breadcrumb,
.pagination,
footer {
  font-family: var(--funom-font-sans);
  font-size: var(--funom-font-size-sm);
  line-height: 1.5;
  letter-spacing: 0;
}

strong,
b {
  font-weight: 750;
}

small,
.small {
  font-size: var(--funom-font-size-xs);
  line-height: 1.5;
}

code,
kbd,
pre,
samp,
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

@media (max-width: 767px) {
  h1,
  .h1 { font-size: 2rem; }
  h2,
  .h2 { font-size: 1.75rem; }
  h3,
  .h3 { font-size: 1.375rem; }
}