/**
 * Sandvik Sans — @font-face layer.
 *
 * These are the licensed Sandvik Sans web fonts (binaries committed under ./fonts/).
 * The `font-family` names below match the families named in `tokens.css`
 * (`--sds-font-family-text` → "Sandvik Sans Text", `--sds-font-family-headline`
 * → "Sandvik Sans Headline"), so loading this sheet makes those tokens resolve to
 * the real brand font instead of the `system-ui` fallback.
 *
 * Load this BEFORE `tokens.css` / `typography.css`. `font-display: swap` keeps text
 * visible (in the fallback) while the font loads. Paths are relative to this file
 * (`src/tokens/`), so they resolve in Vite dev, the site pages, and `dist/tokens/`.
 *
 * Weights: Light 300 · Regular 400 · Bold 700 · ExtraBold 800 (Headline only).
 */

/* ── Sandvik Sans Text ─────────────────────────────────────────────────────── */

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-Light.woff2") format("woff2"),
    url("./fonts/SandvikSansText-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-LightItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansText-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-Regular.woff2") format("woff2"),
    url("./fonts/SandvikSansText-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-RegularItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansText-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-Bold.woff2") format("woff2"),
    url("./fonts/SandvikSansText-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Text";
  src: url("./fonts/SandvikSansText-BoldItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansText-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ── Sandvik Sans Headline ─────────────────────────────────────────────────── */

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-Light.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-LightItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-Regular.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-RegularItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-Bold.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-BoldItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-ExtraBold.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sandvik Sans Headline";
  src: url("./fonts/SandvikSansHeadline-ExtraBoldItalic.woff2") format("woff2"),
    url("./fonts/SandvikSansHeadline-ExtraBoldItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/**
 * Sandvik design tokens — the foundation layer.
 *
 * Colour and typography values are the REAL published Figma styles from the Sandvik
 * UI Design Library (extracted via the sandvik-figma skill: Figma Styles, not Variables).
 * Naming follows `--sds-<category>-<name>` (see the skill's token-mapping reference).
 *
 * As custom properties on :root, these inherit through Shadow DOM into every component,
 * so a component reading `var(--sds-color-electric-blue)` themes from this one place.
 */

:root {
  /* Theme scheme. `light-dark()` in the semantic roles below resolves against the
   * element's used color-scheme, so flipping this (see the [data-theme] selectors
   * after this block) re-themes everything — including inside Shadow DOM, because
   * color-scheme inherits. Mirrors Spectrum 2nd-gen (.swc-theme--light/dark). */
  color-scheme: light;

  /* ─────────────  COLOUR — core  ───────────── */
  --sds-color-white: #ffffff;
  --sds-color-carbon-black: #101010;
  --sds-color-gold: #a08c64;

  /* Neutral ramp (N-1 light → N-9 dark) */
  --sds-color-neutral-1: #f8f8f8;
  --sds-color-neutral-2: #e6e6e6;
  --sds-color-neutral-3: #dadada;
  --sds-color-neutral-4: #9d9d9d;
  --sds-color-neutral-5: #6f6f6f;
  --sds-color-neutral-6: #575757;
  --sds-color-neutral-7: #434343;
  --sds-color-neutral-8: #242424;
  --sds-color-neutral-9: #1b1b1b;

  /* Accents + their shade ramps */
  --sds-color-electric-blue: #1441f5;
  --sds-color-electric-blue-1: #c8dcff;
  --sds-color-electric-blue-2: #327dff;
  --sds-color-electric-blue-3: #003c7d;

  --sds-color-vibrant-orange: #f54b00;
  --sds-color-vibrant-orange-1: #ffb991;
  --sds-color-vibrant-orange-2: #ff824b;
  --sds-color-vibrant-orange-3: #7d2300;

  --sds-color-gold-1: #ebe6dc;
  --sds-color-gold-2: #beaf93;
  --sds-color-gold-3: #73644b;

  --sds-color-coromant-accent: #faeb23;

  /* System / status */
  --sds-color-error: #eb0d0d;
  --sds-color-success: #7fcc5b;
  --sds-color-warning: #ffd74b;

  /* ─────────────  COLOUR — semantic roles (the theming layer)  ─────────────
   * Components consume THESE roles for any value that adapts between light and
   * dark; the base tokens above stay fixed (they're the published Figma styles).
   * Each role carries both its light and dark value via the native CSS
   * `light-dark()` function — Spectrum 2nd-gen's pattern. The dark column is the
   * real Sandvik dark theme (Foundations · Themes/Colors + the "Toggles Dark"
   * render): a curated remap (bg N-9, surface N-8, border N-7, text white,
   * muted N-4) — NOT a ramp inversion. Brand accents stay constant, so anything
   * that must stay light (white-on-accent, the toggle handle) keeps a base token. */

  /*                            light                         dark               */
  --sds-color-bg:               light-dark(var(--sds-color-white),       var(--sds-color-neutral-9));
  --sds-color-surface:          light-dark(var(--sds-color-white),       var(--sds-color-neutral-8));
  --sds-color-surface-hover:    light-dark(var(--sds-color-neutral-1),   var(--sds-color-neutral-7));
  --sds-color-surface-disabled: light-dark(var(--sds-color-neutral-1),   var(--sds-color-neutral-8));
  /* Filled neutral surface (secondary button, hover chips): */
  --sds-color-surface-strong:        light-dark(var(--sds-color-neutral-2), var(--sds-color-neutral-7));
  --sds-color-surface-strong-hover:  light-dark(var(--sds-color-neutral-3), var(--sds-color-neutral-6));
  --sds-color-surface-strong-active: var(--sds-color-neutral-5); /* same on both; pairs with white text */

  --sds-color-text:          light-dark(var(--sds-color-carbon-black), var(--sds-color-white));
  --sds-color-text-muted:    light-dark(var(--sds-color-neutral-5),    var(--sds-color-neutral-4));
  --sds-color-text-disabled: light-dark(var(--sds-color-neutral-4),    var(--sds-color-neutral-5));
  --sds-color-text-on-accent: var(--sds-color-white); /* constant — white on blue/orange/N-5 */

  --sds-color-border:          light-dark(var(--sds-color-neutral-3), var(--sds-color-neutral-7));
  --sds-color-border-strong:   light-dark(var(--sds-color-neutral-5), var(--sds-color-neutral-6));
  --sds-color-border-emphasis: light-dark(var(--sds-color-carbon-black), var(--sds-color-white));
  --sds-color-border-disabled: light-dark(var(--sds-color-neutral-3), var(--sds-color-neutral-7));

  /* Interactive accent roles (constant across themes). */
  --sds-color-primary: var(--sds-color-electric-blue);
  --sds-color-primary-hover: var(--sds-color-electric-blue-3);
  --sds-color-text-on-primary: var(--sds-color-white);

  /* ─────────────  TYPOGRAPHY  ───────────── */
  --sds-font-family-text: "Sandvik Sans Text", system-ui, sans-serif;
  --sds-font-family-headline: "Sandvik Sans Headline", system-ui, sans-serif;
  --sds-font-weight-regular: 400;
  --sds-font-weight-bold: 700;

  /* Breakpoint where the type scale switches Mobile → Desktop.
   * PROVISIONAL: Figma frames are 390 (Mobile) and 1512 (Desktop); the switch point
   * isn't fixed by them. Confirm against the Grid/Themes page. */
  --sds-breakpoint-desktop: 768px;

  /* Type roles — real Figma "Mobile/*" & "Desktop/*" styles. Each role has a family,
   * weight, and size/line. VALUES BELOW ARE THE MOBILE SCALE (the default); the
   * @media (min-width: --sds-breakpoint-desktop) block at the END of this file
   * overrides size/line to Desktop for the roles that differ. headline = display
   * family, text = body/UI family. */

  --sds-type-expressive-family: var(--sds-font-family-headline);
  --sds-type-expressive-weight: 400;
  --sds-type-expressive-size: 4rem; /* 64 */
  --sds-type-expressive-line: 4rem;

  --sds-type-headline-1-family: var(--sds-font-family-headline);
  --sds-type-headline-1-weight: 400;
  --sds-type-headline-1-size: 3.5rem; /* 56 */
  --sds-type-headline-1-line: 3.5rem;

  --sds-type-headline-2-family: var(--sds-font-family-headline);
  --sds-type-headline-2-weight: 400;
  --sds-type-headline-2-size: 2.5rem; /* 40 */
  --sds-type-headline-2-line: 2.625rem; /* 42 */

  --sds-type-headline-3-family: var(--sds-font-family-headline);
  --sds-type-headline-3-weight: 400;
  --sds-type-headline-3-size: 2rem; /* 32 (Figma: Mobile "Heading 3") */
  --sds-type-headline-3-line: 2.2rem; /* 35.2 */

  --sds-type-headline-4-family: var(--sds-font-family-headline);
  --sds-type-headline-4-weight: 400;
  --sds-type-headline-4-size: 1.5rem; /* 24 */
  --sds-type-headline-4-line: 1.8rem; /* 28.8 */

  --sds-type-headline-5-family: var(--sds-font-family-headline);
  --sds-type-headline-5-weight: 400;
  --sds-type-headline-5-size: 1.25rem; /* 20 */
  --sds-type-headline-5-line: 1.5625rem; /* 25 */

  --sds-type-headline-6-family: var(--sds-font-family-text);
  --sds-type-headline-6-weight: 700;
  --sds-type-headline-6-size: 1rem; /* 16 (same M/D) */
  --sds-type-headline-6-line: 1.25rem; /* 20 */

  --sds-type-body-intro-family: var(--sds-font-family-headline);
  --sds-type-body-intro-weight: 400;
  --sds-type-body-intro-size: 1.75rem; /* 28 */
  --sds-type-body-intro-line: 2.0125rem; /* 32.2 */

  --sds-type-body-large-family: var(--sds-font-family-headline);
  --sds-type-body-large-weight: 400;
  --sds-type-body-large-size: 1.25rem; /* 20 */
  --sds-type-body-large-line: 1.5625rem; /* 25 */

  --sds-type-body-regular-family: var(--sds-font-family-text);
  --sds-type-body-regular-weight: 400;
  --sds-type-body-regular-size: 1rem; /* 16 (same M/D) */
  --sds-type-body-regular-line: 1.4rem; /* 22.4 */

  --sds-type-body-small-family: var(--sds-font-family-text);
  --sds-type-body-small-weight: 400;
  --sds-type-body-small-size: 0.75rem; /* 12 (same M/D) */
  --sds-type-body-small-line: 1.125rem; /* 18 */

  --sds-type-caption-family: var(--sds-font-family-text);
  --sds-type-caption-weight: 400;
  --sds-type-caption-size: 0.625rem; /* 10 (same M/D) */
  --sds-type-caption-line: 1rem; /* 16 */

  --sds-type-footnote-family: var(--sds-font-family-text);
  --sds-type-footnote-weight: 400;
  --sds-type-footnote-size: 0.625rem; /* 10 (same M/D) */
  --sds-type-footnote-line: 1rem; /* 16 */

  /* Button type roles (Figma "Button Large" 14/17.5, "Button Regular" 12/18 — single scale) */
  --sds-type-button-large-family: var(--sds-font-family-text);
  --sds-type-button-large-weight: 400;
  --sds-type-button-large-size: 0.875rem; /* 14 */
  --sds-type-button-large-line: 1.09375rem; /* 17.5 */

  --sds-type-button-regular-family: var(--sds-font-family-text);
  --sds-type-button-regular-weight: 400;
  --sds-type-button-regular-size: 0.75rem; /* 12 */
  --sds-type-button-regular-line: 1.125rem; /* 18 */

  /* ─────────────  SPACING  ─────────────
   * A 4px-baseline scale. The 4px baseline IS real — it's the Sandvik Figma grid's row
   * gutter (Desktop & Mobile). The exact named steps still need confirming against the
   * Figma Spacing page (currently unreachable: Figma REST rate-limited). Components
   * reference these tokens, so swapping in exact values later propagates automatically. */
  --sds-space-100: 4px;
  --sds-space-200: 8px;
  --sds-space-300: 12px;
  --sds-space-400: 16px;
  --sds-space-500: 24px;
  --sds-space-600: 32px;
  --sds-space-700: 40px;
  --sds-space-800: 48px;

  /* ─────────────  RADIUS — PROVISIONAL  ─────────────
   * Not published as Figma styles; pending a read of the Spacing/components page.
   * Spectrum-informed placeholder scale. */
  --sds-radius-s: 2px;
  --sds-radius-m: 4px;
  --sds-radius-l: 8px;
  --sds-radius-pill: 999px;

  /* ─────────────  CONTROL HEIGHT  ─────────────
   * One shared height scale every interactive control consumes, so a button, input,
   * select and search placed side by side share a box edge (mirrors Spectrum 2nd-gen's
   * `--swc-component-height-*` family). The Sandvik Figma doesn't mandate a single field
   * height — these map the existing per-component values onto one token set: buttons use
   * m/s (Figma "Button Large"/"Regular"); form fields use l. Retuning is now one edit. */
  --sds-control-height-s: 32px; /* small buttons / compact controls */
  --sds-control-height-m: 40px; /* default buttons */
  --sds-control-height-l: 48px; /* form fields: input, select, search */

  /* ─────────────  DENSITY  ─────────────
   * Information density as a CURATED REMAP (like dark mode is a curated colour remap,
   * NOT a mechanical rescale). These semantic "role" dimensions SELECT AMONG the base
   * scales above — they don't redefine `--sds-space-*` / `--sds-control-height-*`, so
   * page layout is never blunt-rescaled. Default (here) = regular = today's values.
   * Switch the whole subtree with `[data-density="compact"]` on an ancestor (it cascades
   * into Shadow DOM like color-scheme — see the override below the THEME SWITCH), or a
   * single component with `density="compact"`. Mirrors Spectrum's `density` axis; we
   * deliberately defer Spectrum's separate touch `scale` axis. */
  --sds-density-control-height: var(--sds-control-height-l); /* 48 — form fields & button[size=l] */
  --sds-density-row-padding-block: var(--sds-space-300); /* 12 — table/list row block padding */
  --sds-density-row-min-height: 0px; /* regular = no floor: rows derive from content + padding */
  --sds-density-stack-gap: var(--sds-space-400); /* 16 — vertical gaps in stacks / nav items */
  --sds-density-control-text-size: var(--sds-type-body-regular-size); /* 16 — control / nav text */
  --sds-density-control-text-line: var(--sds-type-body-regular-line); /* 22.4 */

  /* ─────────────  FOCUS RING — PROVISIONAL  ─────────────
   * One keyboard-focus affordance shared by every interactive control (button,
   * input, select, search, checkbox, radio, toggle), so focus looks identical
   * across a composed form. Drawn as a `:focus-visible` outline (follows the
   * control's border-radius, costs no layout, and survives Windows High Contrast
   * natively — each control also carries a `@media (forced-colors: active)`
   * fallback). The colour is the fixed brand accent (an accent, NOT a semantic
   * role — accents stay constant across light/dark). No published Figma focus
   * style yet, hence PROVISIONAL. */
  --sds-color-focus-ring: var(--sds-color-electric-blue);
  --sds-focus-ring-width: 2px;
  --sds-focus-ring-offset: 2px;

  /* ─────────────  MOTION — PROVISIONAL  ─────────────
   * Durations + easings aligned to the Sandvik brand motion identity
   * (docs/sandvik-brand/motion.md). Not yet published as Figma styles; the curve values
   * are tuned interpretations of the brand's *principles* (no numeric curves are published),
   * so the PROVISIONAL flag stays. Components reference these tokens so retuning propagates
   * automatically. The single reduced-motion @media block at the end of this file collapses
   * the durations to ~0, neutralizing every token-driven transition/animation library-wide
   * (custom props inherit into Shadow DOM). NB: infinite loops (e.g. the loader spin) must
   * NOT read these — see loader.css.
   *
   * Brand rule of thumb: PRECISE curve to enter, DYNAMIC curve to exit. Motion should
   * "snap into place, information first" — not float. */

  /* Duration — micro-interactions stay sub-150ms; surfaces are longer but still snappy. */
  --sds-motion-duration-instant: 100ms; /* color / border / hover micro-states */
  --sds-motion-duration-fast: 160ms; /* chevrons, checks, small reveals */
  --sds-motion-duration-moderate: 240ms; /* popovers, listbox, tabs, accordion */
  --sds-motion-duration-slow: 320ms; /* modal / drawer / toast surfaces */

  /* Easing — the brand's two-curve model, plus a symmetric curve for micro-states. */
  --sds-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric micro-states (hover colour/border) */
  --sds-motion-ease-precise: cubic-bezier(0.2, 0, 0, 1); /* ENTER — confident, snaps into place, no settle */
  --sds-motion-ease-dynamic: cubic-bezier(0.5, 0, 0.85, 0.25); /* EXIT — looser, accelerates away with character */

  /* ─────────────  ELEVATION (SHADOW) — PROVISIONAL  ─────────────
   * One shadow scale so every lifted surface shares a consistent depth language,
   * instead of each component hand-rolling its own rgba blur. Three levels by how
   * far the surface sits above the page: raised (hoverable / floating notices),
   * overlay (popovers anchored to a trigger), and modal (top-layer dialogs/drawers).
   * No published Figma elevation styles yet — these consolidate the existing
   * per-component values, hence PROVISIONAL. */
  --sds-shadow-1: 0 4px 16px rgb(0 0 0 / 0.12); /* raised: card hover, toast */
  --sds-shadow-2: 0 4px 16px rgb(0 0 0 / 0.16); /* overlay: select listbox, popovers */
  --sds-shadow-3: 0 12px 48px rgb(0 0 0 / 0.3); /* modal / drawer top-layer */
}

/* ─────────────  THEME SWITCH  ─────────────
 * Set one of these on a root (usually <html>) to pick the scheme; it cascades
 * into Shadow DOM, so every `light-dark()` role above re-resolves. Default is
 * light (set on :root). `auto` follows the OS via prefers-color-scheme.
 *   <html data-theme="dark">      → force dark
 *   <html data-theme="auto">      → follow OS
 * `[data-theme-dark]` is kept as a boolean alias for the dev-page toggle. */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"],
[data-theme-dark] {
  color-scheme: dark;
}

[data-theme="auto"] {
  color-scheme: light dark;
}

/* ─────────────  DENSITY SWITCH  ─────────────
 * Set on a root/subtree (usually <html>) to tighten the curated density roles; it
 * cascades into Shadow DOM (custom props inherit across the boundary), so every
 * component reading a `--sds-density-*` token re-derives. Regular is the default
 * (the :root values above); only the compact step is declared here.
 *   <html data-density="compact">   → tighten controls / rows / nav
 * A component's own `density="compact|regular"` re-points the same roles locally. */
[data-density="compact"] {
  --sds-density-control-height: var(--sds-control-height-m); /* 48 → 40 */
  /* Rows: tight padding + a hard floor, Spectrum's compact-table geometry (its
     medium-scale compact row = component-height-100 = 32px). The floor keeps both
     activation paths (subtree attr / component attr) at identical row heights. */
  --sds-density-row-padding-block: var(--sds-space-100); /* 12 → 4 */
  --sds-density-row-min-height: var(--sds-control-height-s); /* 0 → 32 — compact row height */
  --sds-density-stack-gap: var(--sds-space-300); /* 16 → 12 */
  --sds-density-control-text-size: var(--sds-type-body-small-size); /* 16 → 12 */
  --sds-density-control-text-line: var(--sds-type-body-small-line); /* 22.4 → 18 */
}

/* Desktop type scale — overrides size/line for the roles that grow at ≥ breakpoint.
 * Roles not listed here are identical Mobile/Desktop (headline-6, body-regular/small,
 * caption, footnote, buttons). */
@media (min-width: 768px) {
  :root {
    --sds-type-expressive-size: 8.75rem; /* 140 */
    --sds-type-expressive-line: 8.75rem;

    --sds-type-headline-1-size: 6.5rem; /* 104 */
    --sds-type-headline-1-line: 6.5rem;

    --sds-type-headline-2-size: 5rem; /* 80 */
    --sds-type-headline-2-line: 5rem;

    --sds-type-headline-3-size: 3.5rem; /* 56 */
    --sds-type-headline-3-line: 3.675rem; /* 58.8 */

    --sds-type-headline-4-size: 2.5rem; /* 40 */
    --sds-type-headline-4-line: 2.75rem; /* 44 */

    --sds-type-headline-5-size: 1.5rem; /* 24 */
    --sds-type-headline-5-line: 1.8rem; /* 28.8 */

    --sds-type-body-intro-size: 3rem; /* 48 */
    --sds-type-body-intro-line: 3.3rem; /* 52.8 */

    --sds-type-body-large-size: 2rem; /* 32 */
    --sds-type-body-large-line: 2.4rem; /* 38.4 */
  }
}

/* ─────────────  REDUCED MOTION  ─────────────
 * Honor the OS "reduce motion" preference system-wide in ONE place: collapse every
 * motion duration to ~0 so all token-driven transitions/animations resolve instantly
 * (and @starting-style entrances/exits effectively snap). Custom properties inherit
 * through Shadow DOM, so this reaches every component without per-component blocks.
 * Use a hair above 0 so transitionend/animationend still fire for any JS relying on them.
 * Infinite loops (loader spin) deliberately don't read these tokens; loader.css slows
 * itself instead so the spinner stays legible rather than blurring. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sds-motion-duration-instant: 0.01ms;
    --sds-motion-duration-fast: 0.01ms;
    --sds-motion-duration-moderate: 0.01ms;
    --sds-motion-duration-slow: 0.01ms;
  }
}
/**
 * Typography utility classes — light-DOM text styling for page content.
 *
 * Each class maps a Sandvik type role to its `--sds-type-<role>-*` tokens, so the
 * responsive Mobile→Desktop switch (defined in tokens.css) happens automatically.
 * Components style their own text from the same role tokens inside their Shadow DOM;
 * these classes are for app/markup content. Mirrors Spectrum's typography stylesheet.
 *
 * Requires tokens.css to be loaded.
 */

.sds-expressive,
.sds-headline-1,
.sds-headline-2,
.sds-headline-3,
.sds-headline-4,
.sds-headline-5,
.sds-headline-6,
.sds-body-intro,
.sds-body-large,
.sds-body-regular,
.sds-body-small,
.sds-caption,
.sds-footnote {
  margin: 0;
}

.sds-expressive {
  font-family: var(--sds-type-expressive-family);
  font-weight: var(--sds-type-expressive-weight);
  font-size: var(--sds-type-expressive-size);
  line-height: var(--sds-type-expressive-line);
}

.sds-headline-1 {
  font-family: var(--sds-type-headline-1-family);
  font-weight: var(--sds-type-headline-1-weight);
  font-size: var(--sds-type-headline-1-size);
  line-height: var(--sds-type-headline-1-line);
}

.sds-headline-2 {
  font-family: var(--sds-type-headline-2-family);
  font-weight: var(--sds-type-headline-2-weight);
  font-size: var(--sds-type-headline-2-size);
  line-height: var(--sds-type-headline-2-line);
}

.sds-headline-3 {
  font-family: var(--sds-type-headline-3-family);
  font-weight: var(--sds-type-headline-3-weight);
  font-size: var(--sds-type-headline-3-size);
  line-height: var(--sds-type-headline-3-line);
}

.sds-headline-4 {
  font-family: var(--sds-type-headline-4-family);
  font-weight: var(--sds-type-headline-4-weight);
  font-size: var(--sds-type-headline-4-size);
  line-height: var(--sds-type-headline-4-line);
}

.sds-headline-5 {
  font-family: var(--sds-type-headline-5-family);
  font-weight: var(--sds-type-headline-5-weight);
  font-size: var(--sds-type-headline-5-size);
  line-height: var(--sds-type-headline-5-line);
}

.sds-headline-6 {
  font-family: var(--sds-type-headline-6-family);
  font-weight: var(--sds-type-headline-6-weight);
  font-size: var(--sds-type-headline-6-size);
  line-height: var(--sds-type-headline-6-line);
}

.sds-body-intro {
  font-family: var(--sds-type-body-intro-family);
  font-weight: var(--sds-type-body-intro-weight);
  font-size: var(--sds-type-body-intro-size);
  line-height: var(--sds-type-body-intro-line);
}

.sds-body-large {
  font-family: var(--sds-type-body-large-family);
  font-weight: var(--sds-type-body-large-weight);
  font-size: var(--sds-type-body-large-size);
  line-height: var(--sds-type-body-large-line);
}

.sds-body-regular {
  font-family: var(--sds-type-body-regular-family);
  font-weight: var(--sds-type-body-regular-weight);
  font-size: var(--sds-type-body-regular-size);
  line-height: var(--sds-type-body-regular-line);
}

.sds-body-small {
  font-family: var(--sds-type-body-small-family);
  font-weight: var(--sds-type-body-small-weight);
  font-size: var(--sds-type-body-small-size);
  line-height: var(--sds-type-body-small-line);
}

.sds-caption {
  font-family: var(--sds-type-caption-family);
  font-weight: var(--sds-type-caption-weight);
  font-size: var(--sds-type-caption-size);
  line-height: var(--sds-type-caption-line);
}

.sds-footnote {
  font-family: var(--sds-type-footnote-family);
  font-weight: var(--sds-type-footnote-weight);
  font-size: var(--sds-type-footnote-size);
  line-height: var(--sds-type-footnote-line);
}