/* MWS RnD design tokens v2 — PT-15 implementation of docs/design/visual-rules.md.
   Single owner: public-shell. Pages must not redefine palette or type scale; page CSS
   may add local layout classes only. Fonts: IBM Plex Sans (variable) + IBM Plex Mono,
   self-hosted woff2, SIL OFL 1.1 — see web/static/fonts/OFL-IBM-Plex.txt. */

/* ---------- fonts: local, no CDN (§2 of visual rules) ---------- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/static/fonts/IBMPlexSans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- root tokens (§3–§9, §14) ---------- */

:root {
  color-scheme: light;

  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* color (§3.1) */
  --color-bg: #FFFFFF;
  --color-surface: #F4F6F8;
  --color-surface-hover: #EDF1F5;
  --color-surface-blue: #EEF5FF;
  --color-surface-blue-end: #DCE9FB;
  --color-surface-lavender: #E7E4F7;
  --color-ink: #121619;
  --color-ink-2: #45474D;
  --color-ink-3: #5A5F66;
  --color-border: #E2E6EA;
  --color-border-strong: #C9CFD6;
  --color-control-border: #8A9098;
  --color-accent: #F34B43;
  --color-accent-ink: #C93B33;
  --color-avatar-bg: #D6E6FB;
  --color-chip-active-bg: #121619;
  --color-overlay: rgba(18, 22, 25, .48);
  --color-code-bg: #14161B;
  --color-code-text: #EDEFF3;
  --color-code-key: #A9C7F6;
  --color-code-string: #F4C7C2;
  --color-code-punct: #8A9098;
  --color-danger: #B8302A;
  --color-danger-bg: #FFF1F0;
  --color-selection: #D6E6FB;
  --color-chart-baseline: #C9D8F5;
  --color-chart-variant: #F34B43;
  --color-focus: #121619;
  --color-focus-inverse: #F34B43;
  --color-btn-hover: #2B2F36;
  --color-banner-bg: #EFF3F8;

  /* layout (§5.1) */
  --content-max: 1320px;
  --gutter: 48px;
  --grid-cols: 12;
  --grid-gap: 24px;
  --header-h: 72px;
  --banner-h: 36px;
  --anchor-offset: 88px;
  --anchor-offset-subnav: 152px;
  --rail-w: 280px;
  --hero-text-w: 648px;
  --bibliography-meta-w: 320px;
  --article-col-w: 680px;
  --article-cover-max-h: 560px;
  --row-card-media-w: 280px;
  --row-card-media-mobile-w: 112px;

  /* typography (§4.1, §4.2) */
  --text-display: clamp(44px, 6.11vw, 88px);
  --text-page-title: clamp(36px, 4.45vw, 64px);
  --text-hero-sub: clamp(18px, 1.95vw, 28px);
  --text-h2: clamp(28px, 2.78vw, 40px);
  --text-article-h1: clamp(34px, 3.89vw, 56px);
  --text-article-h2: clamp(26px, 2.22vw, 32px);
  --text-h3: clamp(20px, 1.67vw, 24px);
  --text-lead: clamp(17px, 1.39vw, 20px);
  --text-body: 18px;
  --text-body-s: 16px;
  --text-bib-title: clamp(20px, 1.53vw, 22px);
  --text-meta: 14px;
  --text-caption: 13px;
  --text-eyebrow: 12px;
  --text-button: 16px;
  --text-nav: 15px;
  --text-pill: 13px;
  --text-code: 14px;
  --text-banner: 13px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --lh-display: 0.98;
  --lh-title: 1.05;
  --lh-h2: 1.1;
  --lh-card: 1.2;
  --lh-body: 1.55;
  --lh-article: 1.65;
  --lh-meta: 1.4;

  --ls-display: -0.02em;
  --ls-title: -0.015em;
  --ls-h2: -0.01em;
  --ls-eyebrow: 0.08em;

  /* spacing (§6) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --section-y: 96px;
  --hero-pad: 64px;
  --card-pad: 24px;
  --row-pad-y: 20px;
  --block-gap: 24px;

  /* radii / borders / shadows (§7) */
  --radius-hero: 32px;
  --radius-panel: 24px;
  --radius-media: 24px;
  --radius-card: 20px;
  --radius-tile: 16px;
  --radius-input: 12px;
  --radius-thumb: 12px;
  --radius-pill: 999px;
  --radius-avatar: 50%;
  --border-w: 1px;
  --border: var(--border-w) solid var(--color-border);
  --border-strong: var(--border-w) solid var(--color-border-strong);
  --border-control: var(--border-w) solid var(--color-control-border);
  --shadow-menu: 0 12px 32px rgba(18, 22, 25, .12), 0 2px 8px rgba(18, 22, 25, .06);
  --shadow-card: none;

  /* focus / targets (§8) */
  --focus-w: 2px;
  --focus-offset: 3px;
  --target-min: 44px;

  /* motion (§9) */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* stacking (§11) */
  --z-header: 100;
  --z-menu: 200;
  --z-overlay: 300;
  --z-skip: 400;

  /* legacy aliases kept for the admin/demo bundles while they migrate (owner: public) */
  --color-line: var(--color-border);
  --color-line-strong: var(--color-border-strong);
  --color-ice: var(--color-avatar-bg);
  --color-ice-2: var(--color-chart-baseline);
  --color-ice-3: var(--color-surface-blue);
  --color-surface-strong: var(--color-surface-hover);
  --color-accent-soft: var(--color-danger-bg);
  --color-on-dark: #FFFFFF;
  --color-success: #1F7A4D;
  --demo-banner-bg: var(--color-banner-bg);
  --container-wide: var(--content-max);
  --container-text: var(--article-col-w);
  --radius-sm: 8px;
  --radius-md: var(--radius-tile);
  --radius-lg: var(--radius-panel);
}

@media (max-width: 1199px) {
  :root {
    --gutter: 32px;
    --grid-cols: 8;
    --grid-gap: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --grid-cols: 4;
    --grid-gap: 16px;
    --header-h: 64px;
    --banner-h: 32px;
    --anchor-offset: 76px;
    --anchor-offset-subnav: 128px;
    --section-y: 56px;
    --hero-pad: 24px;
    --radius-hero: 24px;
    --radius-panel: 24px;
    --radius-media: 20px;
    --radius-card: 16px;
    --text-hero-sub: 18px;
    --text-lead: 17px;
    --text-code: 13px;
    --text-nav: 17px;
    --text-banner: 12px;
    --row-card-media-w: var(--row-card-media-mobile-w);
  }
}

@media (max-width: 389px) {
  :root {
    --gutter: 16px;
  }
}

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