/* Authentic Sonline CRM Fonts */
@font-face {
  font-family: "Myriad Pro";
  src: url("./fonts/MyriadProRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("./fonts/MyriadProSemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("./fonts/MyriadProBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MyriadProRegular";
  src: url("./fonts/MyriadProRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MyriadProSemiBold";
  src: url("./fonts/MyriadProSemiBold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MyriadProBold";
  src: url("./fonts/MyriadProBold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "open_sanslight";
  src: url("./fonts/OpenSans-Light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Eleven Design System Tokens & Global Base */
:root {
  --black: #111315;
  --black2: #171513;
  --white: #f7f5f0;
  --paper: #f5f3ef;
  --text: #111315;
  --muted: #8b8b88;
  --muted-dark: #6e6c68;
  --line: #383632;
  --line-light: #dfddd8;
  --gold: #c98f4a;
  --gold-light: #d3a568;
  --blue: #2185d5;
  --blue-hover: #4a8bc4;
  --green: #2c7043;
  --red: #ed8585;
  --display: 'Bodoni Moda', Georgia, serif;
  --body: 'Manrope', Arial, sans-serif;

  /* Sonline CRM Typography Scale & Stacks (Source: https://new.sonline.su/main) */
  --font-primary: "Myriad Pro", "MyriadProRegular", "PT Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Myriad Pro", "MyriadProBold", "PT Sans", sans-serif;
  --font-light: "Open Sans", "open_sanslight", -apple-system, sans-serif;

  --font-2xs: 10px;
  --font-xs: 12px;
  --font-sm: 13.5px;
  --font-md: 14px;
  --font-base: 15px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 30px;
  --font-4xl: 36px;
  --font-5xl: 48px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
  max-width: 100%;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

button, input, select, textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

.button-primary {
  border: 0;
  background: var(--gold);
  color: #171513;
  padding: 13px 17px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}

.button-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px #c98f4a40;
}

.button-primary:disabled {
  background: #d4d0c9;
  color: #8b8882;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}