/* ════════════════════════════════════════════════════════════════
   KM-Inventory · Combined stylesheet
   1. Infomaximum Design System tokens (colors, type, spacing, shadows)
   2. Application styles (built on top of those tokens)
   Fonts are loaded from Google Fonts — no local TTFs to deploy.
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Infomaximum Design System — Colors & Typography
 * Reconstructed from the "UI KIT.fig" file.
 * Primary brand palette: Thrush (teal). Secondary & semantic follow an
 * Ant Design-derived tokenization (abstract → semantic).
 */

/* Шрифты: Roboto 400/500/700 + JetBrains Mono 400/500/700 — Google Fonts (@import выше) */
:root {
  /* ───────── ABSTRACT COLORS ───────── */

  /* Neutral */
  --neutral-130: #000000; --neutral-120: #141414; --neutral-110: #1F1F1F; --neutral-100: #262626;
  --neutral-90:  #434343; --neutral-80:  #595959; --neutral-75:  #737373;
  --neutral-70:  #8C8C8C; --neutral-65:  #ABABAB; --neutral-60:  #BFBFBF;
  --neutral-50:  #D9D9D9; --neutral-45:  #E5E5E5; --neutral-40:  #F0F0F0;
  --neutral-30:  #F5F5F5; --neutral-20:  #FAFAFA; --neutral-10:  #FFFFFF;

  /* Transparent black */
  --black-90: rgba(0,0,0,0.90); --black-80: rgba(0,0,0,0.80); --black-70: rgba(0,0,0,0.70);
  --black-60: rgba(0,0,0,0.60); --black-50: rgba(0,0,0,0.50);
  --black-40: rgba(0,0,0,0.40); --black-30: rgba(0,0,0,0.30);
  --black-20: rgba(0,0,0,0.20); --black-12: rgba(0,0,0,0.12);
  --black-10: rgba(0,0,0,0.10); --black-8:  rgba(0,0,0,0.08);
  --black-5:  rgba(0,0,0,0.05);

  /* Transparent white */
  --white-80: rgba(255,255,255,0.80); --white-70: rgba(255,255,255,0.70);
  --white-60: rgba(255,255,255,0.60); --white-50: rgba(255,255,255,0.50);
  --white-40: rgba(255,255,255,0.40); --white-30: rgba(255,255,255,0.30);
  --white-20: rgba(255,255,255,0.20); --white-12: rgba(255,255,255,0.12);
  --white-10: rgba(255,255,255,0.10); --white-8:  rgba(255,255,255,0.08);
  --white-5:  rgba(255,255,255,0.05);

  /* Thrush (brand / teal) */
  --thrush-100: #002428;
  --thrush-90: #003940; --thrush-80: #005F66; --thrush-70: #03888C;
  --thrush-60: #0CB3B3; --thrush-50: #2CBFBA; --thrush-40: #50CCC4;
  --thrush-30: #77D9CF; --thrush-20: #A3E6DD; --thrush-15: #C3F4ED;
  --thrush-10: #E1FAF6;

  /* Canonical color ramps — 100 shades from figma-tokens-info.md */
  --red-100:#5C0011;
  --red-90:#820014;--red-80:#A8071A;--red-70:#CF1322;--red-60:#F5222D;
  --red-50:#FF4D4F;--red-40:#FF7875;--red-30:#FFA39E;--red-20:#FFCCC7;--red-10:#FFF1F0;

  --volcano-100:#610B00;
  --volcano-90:#871400;--volcano-80:#AD2102;--volcano-70:#D4380D;--volcano-60:#FA541C;
  --volcano-50:#FF7A45;--volcano-40:#FF9C6E;--volcano-30:#FFBB96;--volcano-20:#FFD8BF;--volcano-10:#FFF2E8;

  --orange-100:#612500;
  --orange-90:#873800;--orange-80:#AD4E00;--orange-70:#D46B08;--orange-60:#FA8C16;
  --orange-50:#FFA940;--orange-40:#FFC069;--orange-30:#FFD591;--orange-20:#FFE7BA;--orange-10:#FFF7E6;

  --gold-100:#613400;
  --gold-90:#874D00;--gold-80:#AD6800;--gold-70:#D48806;--gold-60:#FAAD14;
  --gold-50:#FFC53D;--gold-40:#FFD666;--gold-30:#FFE58F;--gold-20:#FFF1B8;--gold-10:#FFFBE6;

  --yellow-100:#614700;
  --yellow-90:#876800;--yellow-80:#AD8B00;--yellow-70:#D4B106;--yellow-60:#FADB14;
  --yellow-50:#FFEC3D;--yellow-40:#FFF566;--yellow-30:#FFFB8F;--yellow-20:#FFFFB8;--yellow-10:#FEFFE6;

  --lime-100:#254000;
  --lime-90:#3F6600;--lime-80:#5B8C00;--lime-70:#7CB305;--lime-60:#A0D911;
  --lime-50:#BAE637;--lime-40:#D3F261;--lime-30:#EAFF8F;--lime-20:#F4FFB8;--lime-10:#FCFFE6;

  --green-100:#092B00;
  --green-90:#135200;--green-80:#237804;--green-70:#389E0D;--green-60:#52C41A;
  --green-50:#73D13D;--green-40:#95DE64;--green-30:#B7EB8F;--green-20:#D9F7BE;--green-10:#F6FFED;

  --cyan-100:#002329;
  --cyan-90:#00474F;--cyan-80:#006D75;--cyan-70:#08979C;--cyan-60:#13C2C2;
  --cyan-50:#36CFC9;--cyan-40:#5CDBD3;--cyan-30:#87E8DE;--cyan-20:#B5F5EC;--cyan-10:#E6FFFB;

  --blue-100:#001D66;
  --blue-90:#002C8C;--blue-80:#003EB3;--blue-70:#0958D9;--blue-60:#1677FF;
  --blue-50:#4096FF;--blue-40:#69B1FF;--blue-30:#91CAFF;--blue-20:#BAE0FF;--blue-10:#E6F4FF;

  --purple-100:#120338;
  --purple-90:#22075E;--purple-80:#391085;--purple-70:#531DAB;--purple-60:#722ED1;
  --purple-50:#9254DE;--purple-40:#B37FEB;--purple-30:#D3ADF7;--purple-20:#EFDBFF;--purple-10:#F9F0FF;

  --magenta-100:#520339;
  --magenta-90:#9E1068;--magenta-80:#C41D7F;--magenta-70:#EB2F96;--magenta-60:#F759AB;
  --magenta-50:#FF85C0;--magenta-40:#FFADD2;--magenta-30:#FFD6E7;--magenta-20:#FFF0F6;--magenta-10:#FFF0F6;

  /* ───────── SEMANTIC COLORS ───────── */

  /* Primary (brand) */
  --primary-base:        var(--thrush-60);
  --primary-hover:       var(--thrush-40);
  --primary-active:      var(--thrush-70);
  --primary-bg:          var(--thrush-10);
  --primary-bg-hover:    var(--thrush-15);
  --primary-border:      var(--thrush-30);

  /* Text */
  --text-primary:        var(--neutral-100); /* #262626 */
  --text-complimentary:  var(--neutral-80);  /* #595959 */
  --text-secondary:      var(--neutral-70);  /* #8C8C8C */
  --text-disabled:       var(--neutral-70);
  --text-contrast:       var(--neutral-10);  /* white on dark */
  --text-hint:           var(--neutral-60);
  --text-link:           var(--primary-base);
  --text-link-hover:     var(--primary-hover);
  --text-link-active:    var(--primary-active);

  /* Background */
  --bg-primary:              var(--neutral-10);
  --bg-complimentary:        var(--neutral-20);
  --bg-secondary:            var(--neutral-40);
  --bg-container:            var(--neutral-10);
  --bg-container-hover:      var(--black-8);
  --bg-container-active:     var(--black-12);
  --bg-container-disabled:   var(--neutral-40);
  --bg-container-inverse:    var(--neutral-100);
  --bg-float:                var(--neutral-10);
  --bg-mask:                 var(--black-40);

  /* Line / border */
  --line-divider:                 var(--neutral-45);
  --line-border:                  var(--neutral-50);
  --line-border-transparent:      var(--black-10);
  --line-border-transparent-contrast: var(--white-30);

  /* Status — Danger / Warning / Info / Positive */
  --danger-base:   var(--red-50);    --danger-hover: var(--red-40);    --danger-active: var(--red-70);
  --danger-bg:     var(--red-10);    --danger-border: var(--red-30);

  --warning-base:  var(--orange-60); --warning-hover: var(--orange-50); --warning-active: var(--orange-70);
  --warning-bg:    var(--orange-10); --warning-border: var(--orange-30);

  --info-base:     var(--blue-60);   --info-hover: var(--blue-50);     --info-active: var(--blue-70);
  --info-bg:       var(--blue-10);   --info-border: var(--blue-30);

  --positive-base: var(--green-60);  --positive-hover: var(--green-50); --positive-active: var(--green-70);
  --positive-bg:   var(--green-10);  --positive-border: var(--green-30);

  /* Shadows — canonical from figma-tokens-info.md */
  --shadow-1:
    0px 1px 2px -2px rgba(0,0,0,0.16),
    0px 3px 6px 0px  rgba(0,0,0,0.12),
    0px 5px 12px 4px rgba(0,0,0,0.09);
  --shadow-2:
    0px 3px 6px -4px rgba(0,0,0,0.12),
    0px 6px 16px 0px rgba(0,0,0,0.08),
    0px 9px 28px 8px rgba(0,0,0,0.05);
  --shadow-3:
    0px 6px 16px -8px rgba(0,0,0,0.08),
    0px 9px 28px 0px  rgba(0,0,0,0.05),
    0px 12px 48px 16px rgba(0,0,0,0.03);

  /* Focus shadows — 4px blur, 0 spread, 50% opacity */
  --shadow-focus-primary: 0 0 4px 0 rgba(12,179,179,0.50);
  --shadow-focus-danger:  0 0 4px 0 rgba(255,77,79,0.50);
  --shadow-focus-warning: 0 0 4px 0 rgba(250,140,22,0.50);

  /* ───────── SIZE SYSTEM ───────── */
  /* Control heights */
  --control-height-sm: 24px;
  --control-height-md: 28px; /* default — buttons, inputs */
  --control-height-lg: 32px;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;   /* default for controls (buttons, inputs, tags) */
  --radius-md: 8px;
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* large surfaces */
  --radius-2xl: 20px;
  --radius-round: 9999px;

  /* Spacing — 4pt grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --space-9: 64px;

  /* ───────── TYPOGRAPHY ───────── */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Heading scale (Roboto Medium 500) */
  --text-header-1-size: 16px; --text-header-1-lh: 24px; /* page/section headers */
  --text-header-2-size: 24px; --text-header-2-lh: 32px; /* large headers in docs */
  --text-subheader-1-size: 14px; --text-subheader-1-lh: 20px;
  --text-subheader-2-size: 12px; --text-subheader-2-lh: 20px;

  /* Body scale (Roboto Regular 400) */
  --text-body-1-size: 16px; --text-body-1-lh: 24px; /* rare, large text / placeholder */
  --text-body-2-size: 14px; --text-body-2-lh: 20px; /* default body, labels */
  --text-body-3-size: 12px; --text-body-3-lh: 20px; /* aux, hint */

  /* Caption (from canonical tokens) */
  --text-caption-1-size: 14px; --text-caption-1-lh: 18px;
  --text-caption-2-size: 12px; --text-caption-2-lh: 16px;

  /* Code */
  --text-code-1-size: 13px; --text-code-1-lh: 20px;

  /* Size multipliers (4px grid) */
  --size-0: 0px; --size-05: 2px; --size-1: 4px; --size-15: 6px;
  --size-2: 8px; --size-25: 10px; --size-3: 12px; --size-35: 14px;
  --size-4: 16px; --size-5: 20px; --size-6: 24px; --size-7: 28px;
  --size-8: 32px; --size-9: 36px; --size-10: 40px; --size-12: 48px;
  --size-15x: 60px; --size-16: 64px;

  /* Semantic sizes */
  --control-interactive-size: var(--size-4);  /* 16px — checkbox/radio hit area */
  --control-height-m: var(--size-7);          /* 28px — default control height */
  --padding-xs: var(--size-1); --padding-s: var(--size-15);
  --padding-m: var(--size-2);  --padding-l: var(--size-3); --padding-xl: var(--size-4);
  --border-radius-m: var(--size-1);           /* 4px */
  --border-radius-l: var(--size-2);           /* 8px */
  --icon-xs: var(--size-05); --icon-s: var(--size-3); --icon-m: var(--size-4);
  --icon-l: var(--size-6);   --icon-xl: var(--size-8);

  /* Loading opacity */
  --opacity-loading: 0.65;
}

/* ALIASES (used by UI kit components) */
:root {
  --font-ui: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --bg-layout: #F5F5F5;
  --border-base: #D9D9D9;
  --text-tertiary: #8C8C8C;
  --transparent-black-8:  rgba(0,0,0,0.08);
  --transparent-black-12: rgba(0,0,0,0.12);
}

/* ───────── SEMANTIC CLASSES ───────── */
body, .text-body-2 {
  font-family: var(--font-sans);
  font-size: var(--text-body-2-size);
  line-height: var(--text-body-2-lh);
  color: var(--text-primary);
  background: var(--bg-primary);
}
h1, .text-header-2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-header-2-size); line-height: var(--text-header-2-lh); color: var(--text-primary); margin: 0; }
h2, .text-header-1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-header-1-size); line-height: var(--text-header-1-lh); color: var(--text-primary); margin: 0; }
h3, .text-subheader-1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-subheader-1-size); line-height: var(--text-subheader-1-lh); color: var(--text-primary); margin: 0; }
h4, .text-subheader-2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-subheader-2-size); line-height: var(--text-subheader-2-lh); color: var(--text-primary); margin: 0; }
p,  .text-body-2  { font-size: var(--text-body-2-size); line-height: var(--text-body-2-lh); }
.text-body-1 { font-size: var(--text-body-1-size); line-height: var(--text-body-1-lh); }
.text-body-3 { font-size: var(--text-body-3-size); line-height: var(--text-body-3-lh); color: var(--text-secondary); }
code, pre, .text-code-1 {
  font-family: var(--font-mono);
  font-size: var(--text-code-1-size);
  line-height: var(--text-code-1-lh);
}
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
a:active { color: var(--text-link-active); }

/* ───────── DARK MODE ───────── */
/* Apply [data-theme="dark"] to <html> or <body> to enable dark tokens.
   Values from figma-tokens-info.md [Colors] 02. Semantic — Dark column. */
[data-theme="dark"] {
  --primary-base:        var(--thrush-70);
  --primary-hover:       var(--thrush-50);
  --primary-active:      var(--thrush-80);
  --primary-bg:          var(--thrush-100);
  --primary-bg-hover:    var(--thrush-90);
  --primary-border:      var(--thrush-80);

  --text-primary:        var(--neutral-40);
  --text-complimentary:  var(--neutral-60);
  --text-secondary:      var(--neutral-75);
  --text-disabled:       var(--neutral-75);
  --text-contrast:       var(--neutral-110);
  --text-hint:           var(--neutral-80);

  --bg-primary:          var(--neutral-110);
  --bg-complimentary:    var(--neutral-100);
  --bg-secondary:        var(--neutral-90);
  --bg-container:        var(--neutral-110);
  --bg-container-hover:  rgba(255,255,255,0.12);
  --bg-container-active: rgba(255,255,255,0.08);
  --bg-container-inverse:       var(--neutral-40);
  --bg-container-inverse-hover: var(--neutral-30);
  --bg-float:            var(--neutral-120);
  --bg-mask:             rgba(0,0,0,0.40);

  --line-divider:        var(--neutral-90);
  --line-border:         var(--neutral-80);
  --line-border-transparent: rgba(255,255,255,0.20);

  --danger-base:   var(--red-70);   --danger-hover: var(--red-60);   --danger-active: var(--red-80);
  --danger-bg:     var(--red-100);  --danger-border: var(--red-80);
  --warning-base:  var(--orange-70); --warning-hover: var(--orange-60); --warning-active: var(--orange-80);
  --warning-bg:    var(--orange-100); --warning-border: var(--orange-80);
  --info-base:     var(--blue-70);  --info-hover: var(--blue-60);    --info-active: var(--blue-80);
  --info-bg:       var(--blue-100); --info-border: var(--blue-80);
  --positive-base: var(--green-70); --positive-hover: var(--green-60); --positive-active: var(--green-80);
  --positive-bg:   var(--green-100); --positive-border: var(--green-80);

  --shadow-focus-primary: 0 0 4px 0 rgba(3,136,140,0.50);
}