/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */

/*
 * env_html-specific remainder.

 * This environment has no bundler: it is served in place by `npx http-server`,
 * so it owns its own document-level reset (`*`, `:root`, `body`) that the
 * bundled environments set in their own global stylesheet. It also renders its
 * typography specimens with markup no other environment emits.
 *
 * Everything else now comes from the shared sheet, linked ahead of this file:
 * `vendor/shared-styleguide/styleguide.css`.
 *
 * @updated 2026-08-06 at 17:00 GMT+2 +02:00 [Europe/Berlin] @moersel
 */

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */

/* Styleguide chrome/layout/border styles (env_html).
   Applicable surfaces (color/background/border-color/gap/padding/width/height/
   border-width/border-radius) consume the shipped iris runtime CSS custom
   properties (var(--...)) from iris.css under the fixed .iris-ui-theme-light
   shell, instead of hardcoded literal copies (DESYS-691, Req 2,3,4,7,8,9).
   Family mappings mirror env_react/src/sandbox/styleguide/StyleguidePage.css
   (the parity source of truth), except the Colors search input, which adopts
   the --forms-* family per Req 2.4 (matching env_vue). Typography
   (font-size/weight/line-height/etc.), margins, large layout px
   (max-width 1400px, max-width 400px, the 200px/80px/140px/180px/280px/340px
   grid track minimums, 60vh, scroll-margin 100px), chrome font-sizes, the
   decorative transparency checkerboard, the #00ffb9 brand demo boxes, the
   #1e1e1e / #d4d4d4 usage-example editor palette, and the #e9c32a / #4b433a
   primitive-label border/text are intentionally NOT migrated; those retained
   literals are recorded in the build-time-primitive audit. The
   .iris-components-card* chrome now consumes iris variables to match env_react,
   retaining only the #d9d9df preview-frame border + 10px radius and the
   per-card live-preview machinery font/min-height/grid/line-height literals.
   The body background is outside the .iris-ui-theme-light scope, so a
   var(--iris-base-0) reference there would not resolve — it is a retained literal.
   @updated 2026-06-24 at 14:18 GMT+2 +02:00 [Europe/Berlin] @moersel */
* {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
}

/* The body sits OUTSIDE the .iris-ui-theme-light scope (which lives on the
   .styleguide shell), so var(--iris-base-0) would not resolve here; the page-surround
   white is a retained literal recorded in the Variable_Audit. */
body {
  margin: 0;
  background: #ffffff;
  font-family: 'SiemensSans Pro VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Additive Typography specimen (Req 7): the fixed specimen string with the ramp
   stem's runtime custom properties applied via var(--...) inline. Unstyled
   container — the type style comes entirely from the per-stem inline var() refs,
   matching env_react's .typography-specimen / .typography-ramp-entry. */
.typography-ramp-entry {
  margin-bottom: var(--iris-gap-large);
}

.typography-specimen {
  margin: 0 0 8px;
  color: var(--iris-text-1);
}

/* Visually hidden but exposed to assistive technology — carries the polite
   copy-confirmation live region, whose visual counterpart (`*__copied`) is
   revealed by unsetting `hidden` and so is never announced. `display: none`
   and `visibility: hidden` would both remove it from the accessibility tree. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}