/* MACH Design System (MDS) — tokens · v1.0 (2026-11-01)
 * The one source of visual decisions for every product MACH TECH builds. Products copy this file (with
 * components.css and fonts/) into their own repository and never hard-code a colour, size, radius, shadow or
 * duration: they use these variables. A client's product changes only the three accent tokens (see README.md, Theming).
 * Tiers: primitives (--mds-p-*) → semantic tokens (--mds-*) → components (components.css). Components and product code
 * use semantic tokens only.
 */

/* Latin: one face per weight (11-07). With a "300 800" range Chrome matched only the exact-weight Armenian face and drew
   Latin text (Bitrix24, digits) in a system serif — found by design-studio qa. */
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 300; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-latin-var.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-arm-400.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-arm-500.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-arm-600.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-arm-700.woff2') format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }
@font-face { font-family: 'MT Sans'; src: url('fonts/mtsans-arm-800.woff2') format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0530-058F, U+FB13-FB17; }

:root {
  /* ---- primitives: never used directly by product code ---- */
  --mds-p-ink-0: #ffffff;
  --mds-p-ink-25: #fbfcfc;
  --mds-p-ink-50: #f4f6f6;
  --mds-p-ink-100: #eaeeee;
  --mds-p-ink-150: #e0e5e6;
  --mds-p-ink-200: #cfd6d8;
  --mds-p-ink-300: #a7b0b2;
  --mds-p-ink-400: #7d878a;
  --mds-p-ink-500: #5f696c;
  --mds-p-ink-600: #454e51;
  --mds-p-ink-700: #2f3639;
  --mds-p-ink-800: #1a1e20;
  --mds-p-ink-900: #121516;
  --mds-p-ink-950: #0b0d0e;

  --mds-p-teal-50: #ecfcf8;
  --mds-p-teal-100: #d6f8f1;
  --mds-p-teal-200: #a8efe1;
  --mds-p-teal-300: #6be3cc;
  --mds-p-teal-400: #27d2b3;   /* MACH brand teal: decoration, charts, dark-theme accent; never text on white */
  --mds-p-teal-500: #1cb99b;
  --mds-p-teal-600: #0f9e83;
  --mds-p-teal-700: #008068;   /* accent on light: 5.0:1 on white */
  --mds-p-teal-800: #006653;
  --mds-p-teal-900: #005043;   /* MACH deep teal */

  /* ---- type ---- */
  --mds-font-sans: 'MT Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Armenian', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --mds-font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;
  /* Product UI is dense: 14px body. Steps are hand-picked, ≥ 1.15× apart. */
  --mds-text-xs: 0.75rem;    /* 12 — captions, table meta, badges */
  --mds-text-sm: 0.8125rem;  /* 13 — secondary text, dense tables */
  --mds-text-md: 0.875rem;   /* 14 — body, controls, tables */
  --mds-text-lg: 1rem;       /* 16 — lead text, mobile body, card titles */
  --mds-text-xl: 1.25rem;    /* 20 — section titles */
  --mds-text-2xl: 1.5rem;    /* 24 — page titles */
  --mds-text-3xl: 1.875rem;  /* 30 — KPI values, empty-state titles */
  --mds-text-4xl: 2.5rem;    /* 40 — rare: hero numbers, marketing */
  --mds-leading-tight: 1.2;
  --mds-leading-snug: 1.35;
  --mds-leading-normal: 1.5;
  --mds-weight-regular: 400;
  --mds-weight-medium: 500;
  --mds-weight-semibold: 600;
  --mds-weight-bold: 700;
  --mds-tracking-tight: -0.015em; /* titles ≥ 20px */
  --mds-measure: 70ch;            /* longest line of running text */

  /* ---- space: 4px grid ---- */
  --mds-space-0: 0;
  --mds-space-0-5: 2px;
  --mds-space-1: 4px;
  --mds-space-2: 8px;
  --mds-space-3: 12px;
  --mds-space-4: 16px;
  --mds-space-5: 20px;
  --mds-space-6: 24px;
  --mds-space-8: 32px;
  --mds-space-10: 40px;
  --mds-space-12: 48px;
  --mds-space-16: 64px;
  --mds-space-20: 80px;

  /* ---- size ---- */
  --mds-control-sm: 28px;
  --mds-control-md: 36px;   /* default control height on desktop */
  --mds-control-lg: 44px;   /* touch, primary mobile actions */
  --mds-row-compact: 36px;
  --mds-row-default: 44px;
  --mds-row-comfortable: 52px;
  --mds-sidebar-w: 248px;
  --mds-sidebar-w-collapsed: 64px;
  --mds-topbar-h: 56px;
  --mds-content-max: 1440px;
  --mds-form-max: 720px;
  --mds-icon-sm: 16px;
  --mds-icon-md: 20px;

  /* ---- shape: small radii, concentric (outer = inner + padding) ---- */
  --mds-radius-xs: 4px;
  --mds-radius-sm: 6px;
  --mds-radius-md: 8px;
  --mds-radius-lg: 12px;
  --mds-radius-xl: 16px;
  --mds-radius-full: 999px;

  /* ---- motion: fast, never ease-in; feedback ≤ 200 ms ---- */
  --mds-duration-instant: 80ms;
  --mds-duration-fast: 140ms;
  --mds-duration-base: 200ms;
  --mds-duration-slow: 280ms;
  --mds-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mds-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ---- layers ---- */
  --mds-z-sticky: 10;
  --mds-z-dropdown: 100;
  --mds-z-drawer: 200;
  --mds-z-modal: 300;
  --mds-z-toast: 400;
  --mds-z-tooltip: 500;

  /* ======== semantic tokens — LIGHT (default) ======== */
  color-scheme: light;
  /* Accent: the only three tokens a client theme changes (plus --mds-accent-soft* derived below). */
  --mds-accent: var(--mds-p-teal-700);
  --mds-accent-hover: var(--mds-p-teal-800);
  --mds-accent-press: var(--mds-p-teal-900);
  --mds-accent-soft: color-mix(in srgb, var(--mds-accent) 8%, white);
  --mds-accent-soft-2: color-mix(in srgb, var(--mds-accent) 16%, white);
  --mds-accent-text: var(--mds-accent-hover);
  --mds-on-accent: #ffffff;
  --mds-brand: var(--mds-p-teal-400);

  --mds-bg: var(--mds-p-ink-50);          /* app canvas */
  --mds-surface: var(--mds-p-ink-0);      /* cards, tables, panels */
  --mds-surface-2: var(--mds-p-ink-25);   /* table header, subtle zones */
  --mds-surface-sunken: var(--mds-p-ink-100); /* wells, code, segmented track */
  --mds-surface-hover: color-mix(in srgb, var(--mds-p-ink-900) 4%, transparent);
  --mds-surface-selected: var(--mds-accent-soft);
  --mds-input-bg: var(--mds-p-ink-0);
  --mds-overlay: rgba(11, 13, 14, 0.48);

  --mds-border: var(--mds-p-ink-150);
  --mds-border-strong: var(--mds-p-ink-200);
  --mds-border-input: var(--mds-p-ink-300);
  --mds-divider: var(--mds-p-ink-100);

  --mds-text: var(--mds-p-ink-900);       /* 17.8:1 on white */
  --mds-text-2: var(--mds-p-ink-600);     /* 8.6:1 — secondary */
  --mds-text-3: var(--mds-p-ink-500);     /* 5.7:1 — tertiary, placeholders */
  --mds-text-disabled: var(--mds-p-ink-300);
  --mds-text-inverse: var(--mds-p-ink-0);
  --mds-link: var(--mds-accent);

  --mds-focus-ring: 0 0 0 2px var(--mds-surface), 0 0 0 4px var(--mds-accent);

  /* Status: text colours meet 4.5:1 on their soft background and on white. Status is never colour alone. */
  --mds-success: #17804f;  --mds-success-soft: #e8f6ee;  --mds-success-solid: #1f9d61;
  --mds-warning: #8a5300;  --mds-warning-soft: #fdf3dc;  --mds-warning-solid: #f2b84b;
  --mds-danger: #c42b31;   --mds-danger-soft: #fdeceb;   --mds-danger-solid: #e5484d;
  --mds-info: #1f5fbf;     --mds-info-soft: #eaf1fc;     --mds-info-solid: #3b7be0;
  --mds-neutral: var(--mds-p-ink-600); --mds-neutral-soft: var(--mds-p-ink-100);

  /* Charts: categorical order is fixed across products (series 1 = accent family). */
  --mds-chart-1: #0f9e83;
  --mds-chart-2: #3b6fd8;
  --mds-chart-3: #d9921a;
  --mds-chart-4: #7c5cd6;
  --mds-chart-5: #d4486f;
  --mds-chart-6: #1597b8;
  --mds-chart-7: #6f8f2f;
  --mds-chart-8: #7d878a;
  --mds-chart-grid: var(--mds-p-ink-100);
  --mds-chart-axis: var(--mds-p-ink-500);

  /* Depth: ONE strategy — hairline borders for structure, shadows only for things that float. */
  --mds-shadow-0: none;
  --mds-shadow-1: 0 1px 2px rgba(18, 21, 22, 0.05);
  --mds-shadow-2: 0 0 0 1px rgba(18, 21, 22, 0.06), 0 4px 12px -2px rgba(18, 21, 22, 0.10), 0 2px 4px rgba(18, 21, 22, 0.04);
  --mds-shadow-3: 0 0 0 1px rgba(18, 21, 22, 0.06), 0 16px 40px -8px rgba(18, 21, 22, 0.22), 0 4px 10px rgba(18, 21, 22, 0.06);
}

/* ======== DARK — designed, not inverted ========
 * Explicit: <html data-theme="dark">. A product that follows the system setting sets the attribute from
 * matchMedia('(prefers-color-scheme: dark)') (README.md, Dark mode). Light is the default for embedded Bitrix24 apps. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mds-accent: var(--mds-p-teal-400);
  --mds-accent-hover: var(--mds-p-teal-300);
  --mds-accent-press: var(--mds-p-teal-200);
  --mds-accent-soft: color-mix(in srgb, var(--mds-accent) 12%, #121516);
  --mds-accent-soft-2: color-mix(in srgb, var(--mds-accent) 22%, #121516);
  --mds-accent-text: var(--mds-p-teal-300);
  --mds-on-accent: #0b0d0e;
  --mds-bg: #0e1112;
  --mds-surface: #161a1b;
  --mds-surface-2: #1b2021;
  --mds-surface-sunken: #111415;
  --mds-surface-hover: rgba(255, 255, 255, 0.04);
  --mds-input-bg: #111415;
  --mds-overlay: rgba(0, 0, 0, 0.62);
  --mds-border: rgba(255, 255, 255, 0.09);
  --mds-border-strong: rgba(255, 255, 255, 0.14);
  --mds-border-input: rgba(255, 255, 255, 0.20);
  --mds-divider: rgba(255, 255, 255, 0.06);
  --mds-text: #eef1f1;
  --mds-text-2: #b6bec0;
  --mds-text-3: #8d979a;
  --mds-text-disabled: #5b6568;
  --mds-text-inverse: #121516;
  --mds-success: #4cc98a;  --mds-success-soft: rgba(76, 201, 138, 0.12);  --mds-success-solid: #2fae6e;
  --mds-warning: #f2c26b;  --mds-warning-soft: rgba(242, 184, 75, 0.12);  --mds-warning-solid: #f2b84b;
  --mds-danger: #ff8a8d;   --mds-danger-soft: rgba(229, 72, 77, 0.14);    --mds-danger-solid: #e5484d;
  --mds-info: #8db7ff;     --mds-info-soft: rgba(59, 123, 224, 0.14);     --mds-info-solid: #3b7be0;
  --mds-neutral: #b6bec0;  --mds-neutral-soft: rgba(255, 255, 255, 0.07);
  --mds-chart-grid: rgba(255, 255, 255, 0.07);
  --mds-chart-axis: #8d979a;
  --mds-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mds-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px -4px rgba(0, 0, 0, 0.55);
  --mds-shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 56px -8px rgba(0, 0, 0, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root { --mds-duration-instant: 0ms; --mds-duration-fast: 0ms; --mds-duration-base: 0ms; --mds-duration-slow: 0ms; }
}