/* Токены бренда ГМ 2026 */

/* Tilda Sans — открытая лицензия, https://tilda.cc/ru/lp/tildasans/ */
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/TildaSans-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/TildaSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/TildaSans-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/TildaSans-Semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/TildaSans-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/TildaSans-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Tilda Sans';
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/TildaSans-Black.woff2') format('woff2');
}

:root {
  --gm-teal: #76acac;
  --gm-teal-dark: #4f8888;
  --gm-teal-soft: #e3efef;
  --gm-lilac: #cbb1d1;
  --gm-lilac-soft: #f2eaf4;
  --gm-purple: #8e5e93;
  --gm-yellow: #fac301;
  --gm-yellow-soft: #fccf5a;
  --gm-black: #010101;
  --gm-gray: #e2e1e1;
  --gm-gray-dark: #6f6e6e;
  --gm-white: #ffffff;
  --gm-red: #e0251c;

  --font: 'Tilda Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --shadow: 0 1px 2px rgb(1 1 1 / 0.06), 0 8px 24px rgb(1 1 1 / 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--gm-black);
  background: #f6f6f4;
  line-height: 1.4;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  background: var(--gm-yellow);
  color: var(--gm-black);
  transition: transform 0.08s ease, background-color 0.15s ease, opacity 0.15s ease;
}
.btn:hover {
  background: var(--gm-yellow-soft);
}
.btn:active {
  transform: scale(0.97);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn--teal {
  background: var(--gm-teal);
  color: var(--gm-white);
}
.btn--teal:hover {
  background: var(--gm-teal-dark);
}
.btn--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gm-gray);
}
.btn--ghost:hover {
  background: var(--gm-gray);
}
.btn--small {
  min-height: 34px;
  padding: 0 14px;
  font-size: 14px;
}

.field {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1.5px solid var(--gm-gray);
  border-radius: var(--radius-s);
  background: var(--gm-white);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field:focus {
  border-color: var(--gm-teal);
  box-shadow: 0 0 0 3px rgb(118 172 172 / 0.25);
}

:focus-visible {
  outline: 2px solid var(--gm-purple);
  outline-offset: 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.chip--pending {
  background: var(--gm-gray);
  color: var(--gm-gray-dark);
}
.chip--approved {
  background: var(--gm-yellow);
}
.chip--archived {
  background: var(--gm-teal-soft);
  color: var(--gm-teal-dark);
}
.chip--rejected {
  background: var(--gm-lilac-soft);
  color: var(--gm-purple);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}