/* ОК ГАРРИ - токены и базовые компоненты для сайта.
   Подключение: <link rel="stylesheet" href="brand/ok-garry/ok-garry.css">
   Тёмная тема «Кабинет»: <html data-theme="dark"> */

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@1,900&family=Unbounded:wght@600;700;900&family=Space+Grotesk:wght@400;500;700&family=PT+Mono&display=swap");

:root {
  /* цвет */
  --okg-paper: #E7E1D2;        /* фон */
  --okg-panel: #F3EFE4;        /* панели, карточки */
  --okg-panel-2: #EDE8DA;      /* вложенные плитки */
  --okg-ink: #1A1813;          /* основной текст */
  --okg-sub: #6E6A5F;          /* подписи (не длинный текст) */
  --okg-line: #D3CCBB;
  --okg-line-2: #C4BCA8;       /* бордюры */
  --okg-orange: #EE5A24;       /* единственный акцент UI */
  --okg-orange-deep: #D14A18;  /* цвет Гарри */
  --okg-orange-shadow: #B84416;
  --okg-on-orange: #FFFFFF;
  --okg-dark: #17160F;         /* тёмные панели */
  --okg-on-dark: #E7E1D2;

  /* шрифты */
  --okg-font-wordmark: 'Rubik', Arial, sans-serif;            /* только надпись ОК ГАРРИ, 900 italic */
  --okg-font-headline: 'Unbounded', Arial, sans-serif;        /* заголовки 900/700 */
  --okg-font-body: 'Space Grotesk', system-ui, Arial, sans-serif;
  --okg-font-mono: 'PT Mono', 'Courier New', monospace;      /* метки, номера, кнопки */

  /* отступы */
  --okg-space-xs: 10px;
  --okg-space-s: 14px;
  --okg-space-m: 20px;
  --okg-space-l: 30px;
  --okg-space-xl: 56px;
  --okg-wrap-max: 1160px;

  /* формы: UI без скруглений, круглый только Гарри */
  --okg-radius-ui: 0;
  --okg-radius-detail: 3px;

  /* объём */
  --okg-shadow-panel: 0 10px 24px rgba(40,26,6,.12), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,105,80,.14);
  --okg-shadow-card: 0 12px 24px rgba(40,26,6,.18), 0 2px 4px rgba(40,26,6,.12), inset 0 2px 0 rgba(255,255,255,.85), inset 0 -5px 0 rgba(120,105,80,.16);
  --okg-shadow-btn: 0 3px 0 #B84416, 0 7px 14px rgba(120,50,10,.28), inset 0 1px 0 rgba(255,220,190,.55);
  --okg-shadow-btn-pressed: inset 0 2px 5px rgba(90,30,0,.4);
  --okg-shadow-dark: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.35);

  /* Гарри */
  --okg-tilt: 15deg;
  --okg-swing: 1.6s;
}

[data-theme="dark"] {
  --okg-paper: #17160F;
  --okg-panel: #22211A;
  --okg-panel-2: #2A281F;
  --okg-ink: #E7E1D2;
  --okg-sub: #A39E90;
  --okg-line: #3A372D;
  --okg-line-2: #4A463A;
  --okg-orange-deep: #EE5A24;
  --okg-orange-shadow: #9C3A12;
  --okg-dark: #0E0D09;
}

/* база */
.okg { background: var(--okg-paper); color: var(--okg-ink); font-family: var(--okg-font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.okg-wrap { max-width: var(--okg-wrap-max); margin: 0 auto; padding: 0 24px; }

/* логотип и локап */
.okg-logo { display: inline-flex; align-items: center; gap: .35em; text-decoration: none; }
.okg-logo img { height: 2.3em; width: auto; display: block; }
.okg-wordmark { font-family: var(--okg-font-wordmark); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.02em; line-height: 1; color: var(--okg-orange-deep); white-space: nowrap; }

/* типографика */
.okg-h1 { font-family: var(--okg-font-headline); font-weight: 900; font-size: clamp(46px, 9vw, 96px); line-height: .9; letter-spacing: -3px; margin: 0; }
.okg-label { font-family: var(--okg-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--okg-sub); }

/* заголовок секции */
.okg-sec-h { display: flex; align-items: baseline; gap: var(--okg-space-s); margin-bottom: var(--okg-space-l); }
.okg-sec-h .num { font-family: var(--okg-font-mono); color: var(--okg-orange-deep); font-size: 13px; letter-spacing: 2px; }
.okg-sec-h .t { font-family: var(--okg-font-headline); font-weight: 900; font-size: clamp(22px, 3.6vw, 40px); text-transform: uppercase; letter-spacing: -1px; }
.okg-sec-h .line { flex: 1; height: 1px; background: var(--okg-line-2); align-self: center; }

/* панели */
.okg-panel { background: var(--okg-panel); border: 1px solid var(--okg-line-2); border-radius: var(--okg-radius-ui); box-shadow: var(--okg-shadow-panel); padding: var(--okg-space-l) 32px; }
.okg-dark-panel { background: var(--okg-dark); color: var(--okg-on-dark); border-radius: var(--okg-radius-ui); box-shadow: var(--okg-shadow-dark); padding: var(--okg-space-l) 32px; }

/* кнопки */
.okg-btn { font-family: var(--okg-font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 22px; border-radius: var(--okg-radius-ui); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 1px solid var(--okg-line-2); transition: transform .08s, box-shadow .12s, background .15s; }
.okg-btn:focus-visible { outline: 2px solid var(--okg-ink); outline-offset: 3px; }
.okg-btn-o { background: linear-gradient(180deg, #F3733C, #E14E1B); color: var(--okg-on-orange); border-color: var(--okg-orange-shadow); box-shadow: var(--okg-shadow-btn); }
.okg-btn-o:hover { background: linear-gradient(180deg, #F07E48, #D9491A); }
.okg-btn-o:active { transform: translateY(3px); box-shadow: var(--okg-shadow-btn-pressed); }
.okg-btn-g { background: linear-gradient(180deg, #F6F2E9, #E4DECC); color: #1A1813; border-color: #C9C1AE; box-shadow: 0 3px 0 #C9C1AE, 0 7px 14px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.7); }
.okg-btn-g:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(0,0,0,.15); }

/* статус-строка */
.okg-readout { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-family: var(--okg-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--okg-sub); }
.okg-readout .k { color: var(--okg-ink); }
.okg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--okg-orange); animation: okg-pulse 1.8s infinite; }
@keyframes okg-pulse { 0% { box-shadow: 0 0 0 0 rgba(238,90,36,.5); } 70% { box-shadow: 0 0 0 7px rgba(238,90,36,0); } 100% { box-shadow: 0 0 0 0 rgba(238,90,36,0); } }

/* качание Гарри: повесь .okg-swing на <img> знака (файл уже наклонён на 15°) */
.okg-swing { transform-origin: 50% 85%; animation: okg-swing var(--okg-swing) ease-out 1; }
@keyframes okg-swing { 0% { transform: rotate(0); } 25% { transform: rotate(-23deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) { .okg-dot, .okg-swing { animation: none; } .okg-btn { transition: none; } }