/* ─────────────────────────────────────────────────────────────────────────── */
/* OPONYTOMY — design tokens                                                   */
/*                                                                             */
/* Джерело: `специфікація 1. OponyToMy.md` + `кнопки. OponyToMy 2.html`        */
/*         (дизайнерський handoff, mobile-390 prototype).                      */
/*                                                                             */
/* Sibling до Inforeisen. Імена токенів збігаються з `new/css/main.css :root`  */
/* v44 набором — той самий шаблон працює під обома брендами, змінюється        */
/* тільки цей файл під siteId=2.                                               */
/*                                                                             */
/* Ключова відмінність від Inforeisen'івської teal-системи:                    */
/*   - палітра тільки на 3 кольорах (чорний / білий / accent-red)              */
/*   - accent зарезервований ВИКЛЮЧНО під Primary CTA                          */
/*   - «Кольорові лінки» / другорядні дії → --text-muted, ніколи accent        */
/*   - --status-success (зелений) — єдиний виняток, тільки для «в наявності»   */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── ACCENT (Primary CTA states) ───────────────────────────────────────── */
  /* 2026-08-05: --accent-hover повернуто за design system §9.1 — OTM Primary
     hover робить background swap на цей токен (не filter, як INFR). */
  --accent-primary:       #B41522;   /* default */
  --accent-hover:         #CC1A28;   /* :hover — світліший за default (design system §9.1, §2.2) */
  --accent-pressed:       #8A0F19;   /* :active — темніший */
  --accent-disabled-bg:   #C8A3A6;   /* :disabled — десатурований */
  --accent-disabled-text: rgba(250, 250, 250, 0.65);
  --on-accent:            #FAFAFA;   /* текст поверх accent */

  /* ── TEXT ──────────────────────────────────────────────────────────────── */
  --text-default:     #282424;   /* аліас до on-light (Inforeisen main.css узує обидва) */
  --text-on-light:    #282424;
  --text-muted:       #8A8A8A;
  --text-placeholder: #8A8A8A;
  --text-subtle:      #8A8A8A;
  --text-inverted:    #FAFAFA;

  /* ── SURFACES ──────────────────────────────────────────────────────────── */
  --bg-page:          #F5F5F5;
  --bg-surface-light: #FAFAFA;
  --bg-input:         #FAFAFA;
  --bg-chip:          #282424;   /* темні заливки чипів + EU-бейджів */
  --bg-subtle:        #FAFAFA;

  /* ── BORDERS ───────────────────────────────────────────────────────────── */
  --border-default:   #D9D9D9;   /* обводка полів + роздільники в картці */
  --border-subtle:    #ECECEC;   /* design system §2.4 (2026-08-10) — hover непофарбованих outline-елементів (Qty-степер §9.3) */
  --card-border:      #E5E5E7;   /* зовнішня обводка карток (замість тіні) */
  --border-surface:   #E5E5E7;   /* аліас — Inforeisen main.css узує це ім'я */
  --border-module:    rgba(107, 114, 128, 0.4);   /* legacy — не в спеці, лишаю */

  /* ── STATUS (семантика, поза брендом) ──────────────────────────────────── */
  /* 2026-08-05: приглушені значення per design system §2.5 (2026-08-04 note).
     Вихідні (#2E9E44/#D69A2B/#E23C1B/#3E6B9E) читались занадто candy-like,
     не пасували до стриманого чорно-білого голосу бренду. */
  --status-success:      #4F7A52;   /* «в наявності», термін доставки */
  --status-success-soft: #EDF2EC;
  --status-success-ink:  #375C3A;

  --status-warning:      #8C6A34;
  --status-warning-soft: #F5EEDD;
  --status-warning-ink:  #6B4F24;

  --status-danger:       #9E4A34;   /* валідація форм / статуси помилок */
  --status-danger-soft:  #F5E3DC;
  --status-danger-ink:   #7A3323;

  --status-info:         #4E6C86;
  --status-info-soft:    #E7ECF1;
  --status-info-ink:     #37506A;

  /* ── FOCUS RING ────────────────────────────────────────────────────────── */
  --focus-ring:       0 0 0 3px rgba(180, 21, 34, 0.32);
  --focus-ring-inset: inset 0 0 0 2px rgba(180, 21, 34, 0.55);

  /* ── SHADOWS ───────────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(40, 36, 36, 0.06), 0 1px 1px rgba(40, 36, 36, 0.04);
  --shadow-2: 0 8px 24px rgba(40, 36, 36, 0.10), 0 2px 6px rgba(40, 36, 36, 0.05);
  --shadow-3: 0 20px 48px rgba(40, 36, 36, 0.14), 0 6px 12px rgba(40, 36, 36, 0.08);

  /* ── RADII / SPACING / TYPOGRAPHY (перенесено з Inforeisen 1:1) ────────── */
  --radius-sm:   8px;
  --radius-lg:   8px;
  --radius-pill: 100px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;

  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Outfit', sans-serif;


  /* ─────────────────────────────────────────────────────────────────────── */
  /* COMPONENT GEOMETRY (override Inforeisen main.css defaults)              */
  /* Джерело: `кнопки. OponyToMy 2.html`                                     */
  /* ─────────────────────────────────────────────────────────────────────── */

  /* Page-level Primary CTA (Pokaż opony, login submit, orders empty CTA) */
  /* 2026-08-05: height 56→52 за design system §7 (спека оновлена в цей же день) */
  --btn-cta-height:      52px;
  --btn-cta-radius:      30px;
  --btn-cta-padding:     18px 24px;
  --btn-cta-font-size:   18px;

  /* Smaller Primary (Zapisz, Dodaj do koszyka в картці) */
  /* 2026-08-10: radius 30→999 (pill) per design system §9.1 — узгоджено з
     --btn-cta-radius pill і з --qty-stepper-radius OP (теж 999). Попереднє
     значення 30px (2026-08-05) було експериментом «той самий радіус, що й у
     головних», скасовано на користь спекованого pill. */
  --btn-md-height:       52px;
  --btn-md-radius:       999px;
  --btn-md-padding:      0 20px;
  --btn-md-font-size:    15px;

  /* Compact Primary (tablet/desktop 112×36 add-btn) — height locked by
     row layout; adopt brand-language: pill + bold + compact typography.
     NOT in designer spec (mobile-390 only); extrapolated.
     2026-08-10: radius 30→999 (pill) per design system §9.1. */
  --btn-sm-height:       36px;
  --btn-sm-radius:       999px;
  --btn-sm-font-size:    15px;
  --btn-sm-font-weight:  700;

  --btn-font-weight:     700;

  /* Chip / EU-badge */
  --chip-radius:         8px;
  --chip-font-size:      14px;

  /* Qty stepper — design system §7 + §9.3 (2026-08-10 pill-outline редизайн).
     Height 44px (2026-08-10) — раніше було 52px.
     Radius 999px pill — узгоджено з CTA-кнопкою поруч (--btn-md-radius OP теж 999px,
     повернуто до spec 2026-08-10 в цьому ж коміті). */
  --qty-stepper-height:       44px;
  --qty-stepper-radius:       999px;
  --qty-stepper-width:        104px;  /* mobile target */
  --qty-stepper-width-tablet: 120px;
  --qty-stepper-width-desktop:132px;
  --qty-btn-width:             28px;
  --qty-btn-font-size:         20px;  /* символ − / + */
  --qty-value-font-size:       18px;
  --qty-value-weight:          700;

  /* accent-tinted surfaces — cardinal замість teal.
     --shadow-hover-cta прибрано 2026-08-10 per design system §9.1 (hover ефект-тіні
     на Primary CTA скасовано — hover тепер тільки background swap на --accent-hover). */
  --bg-accent-tint-soft:    rgba(180, 21, 34, 0.06);
  --bg-accent-tint-medium:  rgba(180, 21, 34, 0.12);


  /* Note: --color-old-blue навмисно НЕ перевизначаємо — під oponytomy
     показуємо той самий Inforeisen'івський блакитний, що й на siteId=1
     (див. utils/variables.css). Якщо колись треба буде змінити — bridge тут. */
}