/* ============================================================
   МТПК / Уралиндуктор — Design Tokens
   Anchor: «DMG MORI Industrial × Уралиндуктор Brand»

   Compiled by my-uxui-designer-websaas-v1
   Date: 2026-05-10
   Source-of-truth: design/tokens/tokens.css
   Methodology: 3 layers — primitives → semantic → component
   ============================================================ */

/* ============================================================
   LAYER 1 — PRIMITIVES (raw scales, never reference in components)
   ============================================================ */

:root {
  /* ---- Brand: Teal (Уралиндуктор корпоративный тёмно-бирюзовый) ---- */
  --teal-50:  #F0F5F8;
  --teal-100: #DDE9EE;
  --teal-200: #BAD2DC;
  --teal-300: #88B0BF;
  --teal-400: #5288A0;
  --teal-500: #2C6985;
  --teal-600: #1F5E78;  /* ★ brand teal */
  --teal-700: #1A4D62;
  --teal-800: #163E4F;
  --teal-900: #122F3D;
  --teal-950: #0A1C25;

  /* ---- Brand: Living Green (Уралиндуктор — индукция/готовность) ---- */
  --green-50:  #F1F9EE;
  --green-100: #DEF0D7;
  --green-200: #BFE2B1;
  --green-300: #8FCC7B;
  --green-400: #6CBB54;
  --green-500: #4FAB3A;  /* ★ brand green — success / в наличии */
  --green-600: #3C8E33;
  --green-700: #2F702A;
  --green-800: #285923;
  --green-900: #21491D;
  --green-950: #0F260D;

  /* ---- Neutrals (warm-cool balanced, ближе к DMG MORI cool gray) ---- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAFAFA;
  --neutral-100:  #F4F5F4;
  --neutral-150:  #ECEDEC;
  --neutral-200:  #E5E5E5;
  --neutral-300:  #D4D4D8;
  --neutral-400:  #A1A1AA;
  --neutral-500:  #71717A;
  --neutral-600:  #52525B;
  --neutral-700:  #3F3F46;
  --neutral-800:  #27272A;
  --neutral-900:  #18181B;
  --neutral-950:  #101F26;  /* ★ deep — корпоративный dark accent */
  --neutral-1000: #000000;

  /* ---- Semantic raw (для warning/danger/info — НЕ использовать прямо) ---- */
  --amber-500:  #D97706;
  --amber-600:  #B45309;
  --red-500:    #DC2626;
  --red-600:    #B91C1C;
  --blue-500:   #2563EB;

  /* ---- Typography — font families ----
     v1 anchor: DMG MORI Industrial × Уралиндуктор Brand
     Inter осознанно оставлен (не Barlow) — пользовательский выбор после ревью */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Typography — type scale (DMG MORI industrial rhythm) ---- */
  /* Major scale jumps, не арифметическая прогрессия */
  --fs-micro:     11px;   /* eyebrow labels uppercase */
  --fs-caption:   12px;   /* meta, helper */
  --fs-small:     14px;   /* secondary body */
  --fs-body:      16px;   /* основной body */
  --fs-lead:      18px;   /* lead paragraph */
  --fs-h4:        20px;
  --fs-h3:        24px;
  --fs-h2:        30px;
  --fs-h1:        44px;
  --fs-display:   64px;   /* hero h1 (Hermle × ruslitteh: меньше DMG) */
  --fs-display-xl: 88px;  /* большие промо-цифры (опц.) */

  /* ---- Typography — weights ---- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ---- Typography — line-height (inverse to size) ---- */
  --lh-display: 1.0;
  --lh-h1:      1.05;
  --lh-h2:      1.12;
  --lh-h3:      1.2;
  --lh-h4:      1.3;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* ---- Typography — letter-spacing (negative on display, positive on caps) ---- */
  --ls-display:  -0.025em;
  --ls-h1:       -0.02em;
  --ls-h2:       -0.015em;
  --ls-h3:       -0.01em;
  --ls-body:     0;
  --ls-eyebrow:  0.08em;   /* uppercase labels */
  --ls-caps:     0.05em;

  /* ---- Spacing scale (4-based, generous DMG MORI rhythm) ---- */
  --sp-0:    0;
  --sp-px:   1px;
  --sp-0_5:  2px;
  --sp-1:    4px;
  --sp-1_5:  6px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    28px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-14:   56px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;     /* section padding-y small */
  --sp-32:   128px;    /* section padding-y default */
  --sp-40:   160px;    /* section padding-y large (hero) */
  --sp-48:   192px;
  --sp-64:   256px;

  /* ---- Border radius (v1 / DMG MORI: sharp, industrial precision) ---- */
  --radius-none:  0;
  --radius-xs:    2px;    /* инпуты, мелкие чипы */
  --radius-sm:    4px;    /* card-edges (минимально) */
  --radius-md:    6px;    /* selectable chips */
  --radius-lg:    8px;    /* модальные окна */
  --radius-pill:  999px;  /* badges, status pills */

  /* ---- Border width ---- */
  --border-hairline: 1px;
  --border-medium:   2px;
  --border-thick:    4px;  /* accent underline у CTA при hover */

  /* ---- Elevation (DMG MORI: hard light from above, минимальные тени) ---- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px 0 rgba(16, 31, 38, 0.04);
  --shadow-sm:    0 1px 3px 0 rgba(16, 31, 38, 0.06), 0 1px 2px -1px rgba(16, 31, 38, 0.06);
  --shadow-md:    0 4px 8px -2px rgba(16, 31, 38, 0.08), 0 2px 4px -2px rgba(16, 31, 38, 0.06);
  --shadow-lg:    0 12px 24px -8px rgba(16, 31, 38, 0.12), 0 4px 8px -4px rgba(16, 31, 38, 0.06);
  --shadow-xl:    0 24px 48px -12px rgba(16, 31, 38, 0.16);
  --shadow-focus: 0 0 0 3px rgba(31, 94, 120, 0.30); /* teal-600 alpha */

  /* ---- Motion — durations ---- */
  --duration-instant: 75ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-orchestrated: 800ms;  /* page-load reveals */

  /* ---- Motion — easing ---- */
  --ease-linear:    linear;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);     /* DMG-feel: decisive arrive */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* для acknowledge-микро */

  /* ---- Z-index scale ---- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---- Breakpoints (mirrors Tailwind для предсказуемости) ---- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ---- Container widths (DMG MORI generous, but не fluid) ---- */
  --container-narrow: 768px;   /* article, longread */
  --container-base:   1200px;  /* стандартная страница */
  --container-wide:   1440px;  /* hero, hub каталога */
  --container-full:   1600px;  /* промо-блоки edge-to-edge с padding */

  /* ---- Opacity scale ---- */
  --opacity-disabled: 0.4;
  --opacity-muted:    0.6;
  --opacity-overlay:  0.7;
  --opacity-scrim:    0.85;
}


/* ============================================================
   LAYER 2 — SEMANTIC (intent, not value — этот слой использовать в коде)
   ============================================================ */

:root {
  /* ---- Surface (фоны / поверхности) ---- */
  --surface-page:        var(--neutral-0);     /* primary page bg */
  --surface-subtle:      var(--neutral-50);    /* секции на чередовании */
  --surface-muted:       var(--neutral-100);   /* подложки карточек, форм */
  --surface-deep:        var(--neutral-950);   /* dark contrast block + footer */
  --surface-overlay:     rgba(16, 31, 38, 0.85); /* modal scrim */
  --surface-brand-soft:  var(--teal-50);       /* подложка под brand-акценты */

  /* ---- Text (по семантике, не по цвету) ---- */
  --text-primary:    var(--neutral-900);   /* H1-H3, основной body */
  --text-secondary:  var(--neutral-600);   /* lead, описания */
  --text-tertiary:   var(--neutral-500);   /* мета, helpers */
  --text-disabled:   var(--neutral-400);
  --text-inverse:    var(--neutral-0);     /* на dark surfaces */
  --text-brand:      var(--teal-600);      /* ссылки, акцентные слова */
  --text-success:    var(--green-700);

  /* ---- Border ---- */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-700);
  --border-brand:    var(--teal-600);
  --border-focus:    var(--teal-600);

  /* ---- Interactive (CTA / actions) ---- */
  --action-primary-bg:        var(--teal-600);
  --action-primary-bg-hover:  var(--teal-700);
  --action-primary-bg-active: var(--teal-800);
  --action-primary-fg:        var(--neutral-0);

  --action-secondary-bg:        transparent;
  --action-secondary-bg-hover:  var(--teal-50);
  --action-secondary-fg:        var(--teal-700);
  --action-secondary-border:    var(--teal-600);

  --action-ghost-bg:        transparent;
  --action-ghost-bg-hover:  var(--neutral-100);
  --action-ghost-fg:        var(--neutral-900);

  --action-dark-bg:        var(--neutral-900);
  --action-dark-bg-hover:  var(--neutral-800);
  --action-dark-fg:        var(--neutral-0);

  --action-disabled-bg:    var(--neutral-200);
  --action-disabled-fg:    var(--neutral-500);

  /* ---- Status (semantic state colors) ---- */
  --status-success-bg:    var(--green-50);
  --status-success-fg:    var(--green-700);
  --status-success-solid: var(--green-500);

  --status-warning-bg:    #FEF3C7;
  --status-warning-fg:    var(--amber-600);
  --status-warning-solid: var(--amber-500);

  --status-danger-bg:     #FEE2E2;
  --status-danger-fg:     var(--red-600);
  --status-danger-solid:  var(--red-500);

  --status-info-bg:       var(--teal-50);
  --status-info-fg:       var(--teal-700);
  --status-info-solid:    var(--teal-600);

  /* ---- Selection / focus ring ---- */
  --selection-bg:   var(--teal-100);
  --selection-fg:   var(--teal-900);
  --focus-ring:     var(--shadow-focus);
}


/* ============================================================
   LAYER 3 — COMPONENT TOKENS (узкие, конкретные)
   ============================================================ */

:root {
  /* ---- Button (v1: flat square, UPPERCASE, semibold) ---- */
  --btn-radius:           0;                /* flat square без скруглений (user request) */
  --btn-padding-x:        var(--sp-6);
  --btn-padding-y:        var(--sp-3);
  --btn-padding-x-sm:     var(--sp-4);
  --btn-padding-y-sm:     var(--sp-2);
  --btn-padding-x-lg:     var(--sp-8);
  --btn-padding-y-lg:     var(--sp-4);
  --btn-font-weight:      var(--fw-semibold);
  --btn-font-size:        var(--fs-small);
  --btn-letter-spacing:   var(--ls-caps);
  --btn-text-transform:   uppercase;        /* DMG MORI стилистика */
  --btn-transition:       background-color var(--duration-fast) var(--ease-out),
                          color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);

  /* ---- Card (product / category) ---- */
  --card-radius:        var(--radius-sm);
  --card-bg:            var(--surface-page);
  --card-border:        var(--border-subtle);
  --card-padding:       var(--sp-6);
  --card-shadow:        var(--shadow-none);
  --card-shadow-hover:  var(--shadow-md);
  --card-image-ratio:   4 / 3;             /* product cards */

  /* ---- Input / form field ---- */
  --field-radius:       var(--radius-xs);
  --field-bg:           var(--surface-page);
  --field-border:       var(--border-default);
  --field-border-hover: var(--neutral-500);
  --field-border-focus: var(--border-focus);
  --field-padding-x:    var(--sp-4);
  --field-padding-y:    var(--sp-3);
  --field-font-size:    var(--fs-body);
  --field-height:       48px;

  /* ---- Section padding-y (DMG MORI воздушный ритм) ---- */
  --section-py-tight:   var(--sp-16);   /* compact секции */
  --section-py-base:    var(--sp-24);   /* стандарт */
  --section-py-loose:   var(--sp-32);   /* hero, fence-blocks */
  --section-py-hero:    var(--sp-40);   /* главный hero */

  /* ---- Header (sticky top nav) ---- */
  --header-height:      72px;
  --header-bg:          rgba(255, 255, 255, 0.95);
  --header-blur:        12px;
  --header-border:      var(--border-subtle);

  /* ---- Footer ---- */
  --footer-bg:          var(--surface-deep);
  --footer-fg:          var(--text-inverse);
  --footer-padding-y:   var(--sp-20);

  /* ---- Eyebrow label (uppercase tag перед заголовком — DMG MORI signature) ---- */
  --eyebrow-font-size:    var(--fs-micro);
  --eyebrow-font-weight:  var(--fw-bold);
  --eyebrow-letter-spacing: var(--ls-eyebrow);
  --eyebrow-text-transform: uppercase;
  --eyebrow-color:        var(--text-brand);
}


/* ============================================================
   GLOBAL BASE (применять в layout root)
   ============================================================ */

html {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}