/* ============================================================================
   Material Design 3 tokens — „Pakiet na egzamin”

   PROVENANCE (do not hand-tune these values):
   - Colour roles, shape values, state layers, focus indicators, type sizes /
     line-heights / weights, elevation steps, spacing and component metrics are
     transcribed from the current Material 3 specification token tables captured
     from m3.material.io (design-token TOKEN_TABLE, dsdb build 2026-10-13).
     Raw captures: spec/raw/pages/<component>/token-table*.json
     Resolved dump: spec/generated/tokens.json · spec/generated/SYS_TOKENS.md
   - Subject accents and the `warning` extension role are generated with the
     official Material Color Utilities (HCT tonal palettes, tone 40/80/90/30/10)
     from each subject seed; contrast was verified ≥ 4.5:1 for every pair
     (see spec/generated/ACCENT-ROLES.md).
   - Motion durations/easings follow the M3 motion spec (web fallback: M3
     Expressive spring physics is not implemented by Material Web; CSS easing
     + duration tokens are the spec-sanctioned fallback).
   - Typeface: the spec's baseline type tokens reference the Google Sans brand
     / plain families (proprietary). The M3-sanctioned public typeface
     (Roboto / Roboto Flex, see skill reference) is self-hosted here.
   ========================================================================== */

/* ---------- Roboto Flex (M3 typeface), self-hosted for offline use ---------- */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../vendor/fonts/roboto-flex-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: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url("../vendor/fonts/roboto-flex-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ==========================================================================
     REF TYPEFACE  (spec: md.ref.typeface.brand/plain → Roboto Flex on web)
     ========================================================================== */
  --md-ref-typeface-brand: "Roboto Flex", Roboto, "Helvetica Neue", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --md-ref-typeface-plain: var(--md-ref-typeface-brand);
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;
  --md-ref-typeface-weight-bold: 700;

  /* ==========================================================================
     REF PALETTE  (spec: md.ref.palette.*, exact values from the token tables)
     ========================================================================== */
  --md-ref-palette-primary0: #000000;
  --md-ref-palette-primary10: #041e49;
  --md-ref-palette-primary20: #062e6f;
  --md-ref-palette-primary30: #0842a0;
  --md-ref-palette-primary40: #0b57d0;
  --md-ref-palette-primary50: #1b6ef3;
  --md-ref-palette-primary60: #4c8df6;
  --md-ref-palette-primary80: #a8c7fa;
  --md-ref-palette-primary90: #d3e3fd;
  --md-ref-palette-primary95: #ecf3fe;
  --md-ref-palette-primary100: #ffffff;
  --md-ref-palette-secondary10: #001d35;
  --md-ref-palette-secondary20: #003355;
  --md-ref-palette-secondary30: #004a77;
  --md-ref-palette-secondary40: #00639b;
  --md-ref-palette-secondary60: #3998d3;
  --md-ref-palette-secondary80: #7fcfff;
  --md-ref-palette-secondary90: #c2e7ff;
  --md-ref-palette-secondary95: #dff3ff;
  --md-ref-palette-secondary100: #ffffff;
  --md-ref-palette-tertiary10: #072711;
  --md-ref-palette-tertiary20: #0a3818;
  --md-ref-palette-tertiary30: #0f5223;
  --md-ref-palette-tertiary40: #146c2e;
  --md-ref-palette-tertiary60: #1ea446;
  --md-ref-palette-tertiary80: #6dd58c;
  --md-ref-palette-tertiary90: #c4eed0;
  --md-ref-palette-tertiary95: #e7f8ed;
  --md-ref-palette-tertiary100: #ffffff;
  --md-ref-palette-error10: #410e0b;
  --md-ref-palette-error20: #601410;
  --md-ref-palette-error30: #8c1d18;
  --md-ref-palette-error40: #b3261e;
  --md-ref-palette-error80: #f2b8b5;
  --md-ref-palette-error90: #f9dedc;
  --md-ref-palette-error95: #fceeee;
  --md-ref-palette-error100: #ffffff;
  --md-ref-palette-neutral0: #000000;
  --md-ref-palette-neutral6: #141218;
  --md-ref-palette-neutral10: #1f1f1f;
  --md-ref-palette-neutral12: #211f26;
  --md-ref-palette-neutral17: #2b2930;
  --md-ref-palette-neutral20: #303030;
  --md-ref-palette-neutral22: #36343b;
  --md-ref-palette-neutral87: #ded8e1;
  --md-ref-palette-neutral90: #e3e3e3;
  --md-ref-palette-neutral92: #ece6f0;
  --md-ref-palette-neutral94: #f3edf7;
  --md-ref-palette-neutral95: #f2f2f2;
  --md-ref-palette-neutral96: #f7f2fa;
  --md-ref-palette-neutral98: #fef7ff;
  --md-ref-palette-neutral100: #ffffff;
  --md-ref-palette-neutral-variant20: #2d312f;
  --md-ref-palette-neutral-variant30: #444746;
  --md-ref-palette-neutral-variant50: #747775;
  --md-ref-palette-neutral-variant60: #8e918f;
  --md-ref-palette-neutral-variant70: #a9acaa;
  --md-ref-palette-neutral-variant80: #c4c7c5;
  --md-ref-palette-neutral-variant90: #e1e3e1;
  --md-ref-palette-neutral-variant95: #eff2ef;
  --md-ref-palette-neutral-variant100: #ffffff;

  /* ==========================================================================
     SYS COLOURS — M3 Expressive theme (ocean scheme, mapped from the vendored
     `material` web-components theme in vendor/material/material.css; light and
     dark values are real md.sys.color.* tokens generated for this scheme).
     App extension roles (success/warning) stay local contrast-verified HCT.
     ========================================================================== */
  --md-sys-color-primary: var(--mtrl-sys-color-primary);
  --md-sys-color-on-primary: var(--mtrl-sys-color-on-primary);
  --md-sys-color-primary-container: var(--mtrl-sys-color-primary-container);
  --md-sys-color-on-primary-container: var(--mtrl-sys-color-on-primary-container);
  --md-sys-color-secondary: var(--mtrl-sys-color-secondary);
  --md-sys-color-on-secondary: var(--mtrl-sys-color-on-secondary);
  --md-sys-color-secondary-container: var(--mtrl-sys-color-secondary-container);
  --md-sys-color-on-secondary-container: var(--mtrl-sys-color-on-secondary-container);
  /* tertiary keeps the app's semantic green (success/mnemonic) roles */
  --md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary30);
  --md-sys-color-error: var(--mtrl-sys-color-error);
  --md-sys-color-on-error: var(--mtrl-sys-color-on-error);
  --md-sys-color-error-container: var(--mtrl-sys-color-error-container);
  --md-sys-color-on-error-container: var(--mtrl-sys-color-on-error-container);
  --md-sys-color-surface: var(--mtrl-sys-color-surface);
  --md-sys-color-on-surface: var(--mtrl-sys-color-on-surface);
  --md-sys-color-surface-variant: var(--mtrl-sys-color-surface-variant);
  --md-sys-color-on-surface-variant: var(--mtrl-sys-color-on-surface-variant);
  --md-sys-color-surface-container-lowest: var(--mtrl-sys-color-surface-container-lowest);
  --md-sys-color-surface-container-low: var(--mtrl-sys-color-surface-container-low);
  --md-sys-color-surface-container: var(--mtrl-sys-color-surface-container);
  --md-sys-color-surface-container-high: var(--mtrl-sys-color-surface-container-high);
  --md-sys-color-surface-container-highest: var(--mtrl-sys-color-surface-container-highest);
  --md-sys-color-surface-dim: var(--mtrl-sys-color-surface-dim);
  --md-sys-color-surface-bright: var(--mtrl-sys-color-surface-bright);
  --md-sys-color-outline: var(--mtrl-sys-color-outline);
  --md-sys-color-outline-variant: var(--mtrl-sys-color-outline-variant);
  --md-sys-color-inverse-surface: var(--mtrl-sys-color-inverse-surface);
  --md-sys-color-inverse-on-surface: var(--mtrl-sys-color-inverse-on-surface);
  --md-sys-color-inverse-primary: var(--mtrl-sys-color-inverse-primary);
  --md-sys-color-scrim: var(--md-ref-palette-neutral0);
  --md-sys-color-shadow: var(--md-ref-palette-neutral0);
  --md-sys-color-surface-tint: var(--md-sys-color-primary);

  /* Semantic extension roles.
     success → the spec's tertiary (green) roles; warning → HCT amber palette
     (generated, contrast-verified). Error stays the static spec error role. */
  --md-sys-color-success: var(--md-sys-color-tertiary);
  --md-sys-color-on-success: var(--md-sys-color-on-tertiary);
  --md-sys-color-success-container: var(--md-sys-color-tertiary-container);
  --md-sys-color-on-success-container: var(--md-sys-color-on-tertiary-container);
  --md-sys-color-warning: #7e5700;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffdeac;
  --md-sys-color-on-warning-container: #281900;

  /* ==========================================================================
     TYPE SCALE (spec: md.sys.typescale.* — size / line-height / weight)
     Tracking values follow the published M3 baseline type scale.
     ========================================================================== */
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line: 52px;
  --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line: 44px;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line: 40px;
  --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line: 36px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line: 32px;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line: 28px;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line: 24px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line: 20px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line: 20px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line: 16px;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line: 16px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line: 16px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
  /* Emphasized / prominent weights used by selected navigation destinations. */
  --md-sys-typescale-weight-regular: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-weight-medium: var(--md-ref-typeface-weight-medium);
  --md-sys-typescale-weight-semibold: 600;
  --md-sys-typescale-weight-bold: var(--md-ref-typeface-weight-bold);
  /* Long-form reading (app-level prose role, not part of the M3 type scale). */
  --md-sys-typescale-prose-size: 17px;
  --md-sys-typescale-prose-line: 1.75;

  /* Short aliases used by existing view stylesheets. */
  --md-sys-typescale-display-lg-size: var(--md-sys-typescale-display-large-size);
  --md-sys-typescale-display-lg-line: var(--md-sys-typescale-display-large-line);
  --md-sys-typescale-display-md-size: var(--md-sys-typescale-display-medium-size);
  --md-sys-typescale-display-md-line: var(--md-sys-typescale-display-medium-line);
  --md-sys-typescale-display-sm-size: var(--md-sys-typescale-display-small-size);
  --md-sys-typescale-display-sm-line: var(--md-sys-typescale-display-small-line);
  --md-sys-typescale-headline-lg-size: var(--md-sys-typescale-headline-large-size);
  --md-sys-typescale-headline-lg-line: var(--md-sys-typescale-headline-large-line);
  --md-sys-typescale-headline-md-size: var(--md-sys-typescale-headline-medium-size);
  --md-sys-typescale-headline-md-line: var(--md-sys-typescale-headline-medium-line);
  --md-sys-typescale-headline-sm-size: var(--md-sys-typescale-headline-small-size);
  --md-sys-typescale-headline-sm-line: var(--md-sys-typescale-headline-small-line);
  --md-sys-typescale-title-lg-size: var(--md-sys-typescale-title-large-size);
  --md-sys-typescale-title-lg-line: var(--md-sys-typescale-title-large-line);
  --md-sys-typescale-title-md-size: var(--md-sys-typescale-title-medium-size);
  --md-sys-typescale-title-md-line: var(--md-sys-typescale-title-medium-line);
  --md-sys-typescale-title-sm-size: var(--md-sys-typescale-title-small-size);
  --md-sys-typescale-title-sm-line: var(--md-sys-typescale-title-small-line);
  --md-sys-typescale-body-lg-size: var(--md-sys-typescale-body-large-size);
  --md-sys-typescale-body-lg-line: var(--md-sys-typescale-body-large-line);
  --md-sys-typescale-body-md-size: var(--md-sys-typescale-body-medium-size);
  --md-sys-typescale-body-md-line: var(--md-sys-typescale-body-medium-line);
  --md-sys-typescale-body-sm-size: var(--md-sys-typescale-body-small-size);
  --md-sys-typescale-body-sm-line: var(--md-sys-typescale-body-small-line);
  --md-sys-typescale-label-lg-size: var(--md-sys-typescale-label-large-size);
  --md-sys-typescale-label-lg-line: var(--md-sys-typescale-label-large-line);
  --md-sys-typescale-label-md-size: var(--md-sys-typescale-label-medium-size);
  --md-sys-typescale-label-md-line: var(--md-sys-typescale-label-medium-line);
  --md-sys-typescale-label-sm-size: var(--md-sys-typescale-label-small-size);
  --md-sys-typescale-label-sm-line: var(--md-sys-typescale-label-small-line);

  /* ==========================================================================
     SHAPE (spec: md.sys.shape.corner.*)
     ========================================================================== */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;
  /* rounded-side helpers (drawer end corners, sheet top corners) */
  --md-sys-shape-corner-large-end: 0 var(--md-sys-shape-corner-large)
    var(--md-sys-shape-corner-large) 0;
  --md-sys-shape-corner-large-start: var(--md-sys-shape-corner-large) 0 0
    var(--md-sys-shape-corner-large);
  --md-sys-shape-corner-extra-large-top: var(--md-sys-shape-corner-extra-large)
    var(--md-sys-shape-corner-extra-large) 0 0;
  /* legacy aliases */
  --md-sys-shape-corner-xs: var(--md-sys-shape-corner-extra-small);
  --md-sys-shape-corner-sm: var(--md-sys-shape-corner-small);
  --md-sys-shape-corner-md: var(--md-sys-shape-corner-medium);
  --md-sys-shape-corner-lg: var(--md-sys-shape-corner-large);
  --md-sys-shape-corner-xl: var(--md-sys-shape-corner-extra-large);
  --md-sys-shape-corner-pill: var(--md-sys-shape-corner-full);

  /* ==========================================================================
     ELEVATION (spec: md.sys.elevation.level0…5 = 0 / 1 / 3 / 6 / 8 / 12 dp)
     Shadows are the spec elevation recipes (used only where M3 keeps a shadow:
     dialogs, menus, FAB, snackbar, scrolled app bar).
     ========================================================================== */
  --md-sys-elevation-level0: 0 0 0 0 rgba(0, 0, 0, 0);
  --md-sys-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgba(0, 0, 0, 0.3),
    0 6px 10px 4px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgba(0, 0, 0, 0.3),
    0 8px 12px 6px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-0: var(--md-sys-elevation-level0);
  --md-sys-elevation-1: var(--md-sys-elevation-level1);
  --md-sys-elevation-2: var(--md-sys-elevation-level2);
  --md-sys-elevation-3: var(--md-sys-elevation-level3);

  /* ==========================================================================
     STATE LAYERS + FOCUS INDICATOR (spec: md.sys.state.*)
     ========================================================================== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.1;
  --md-sys-state-pressed-opacity: 0.1;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;
  --md-sys-state-focus-indicator-color: var(--md-sys-color-secondary);
  --md-sys-state-focus-indicator-thickness: 3px;
  --md-sys-state-focus-indicator-outer-offset: 2px;
  --md-sys-state-focus-indicator-inner-offset: -3px;

  /* ==========================================================================
     SPACING — 8dp measurement system (spec: md.sys.measurement.space*)
     ========================================================================== */
  --md-sys-measurement-space0: 0px;
  --md-sys-measurement-space25: 2px;
  --md-sys-measurement-space50: 4px;
  --md-sys-measurement-space75: 6px;
  --md-sys-measurement-space100: 8px;
  --md-sys-measurement-space125: 10px;
  --md-sys-measurement-space150: 12px;
  --md-sys-measurement-space175: 14px;
  --md-sys-measurement-space200: 16px;
  --md-sys-measurement-space250: 20px;
  --md-sys-measurement-space300: 24px;
  --md-sys-measurement-space400: 32px;
  --md-sys-measurement-space500: 40px;
  --md-sys-measurement-space600: 48px;
  --md-sys-measurement-space800: 64px;
  --md-sys-measurement-space900: 72px;

  /* ==========================================================================
     MOTION (M3 motion tokens; CSS duration/easing fallback for web)
     ========================================================================== */
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-long3: 550ms;
  --md-sys-motion-duration-long4: 600ms;
  --md-sys-motion-duration-extralong1: 700ms;
  --md-sys-motion-duration-extralong2: 800ms;
  --md-sys-motion-duration-extralong3: 900ms;
  --md-sys-motion-duration-extralong4: 1000ms;
  --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* M3 Expressive spring physics fallback shipped with the Material web components. */
  --md-sys-motion-easing-expressive: linear(
    0, 0.075, 0.227, 0.39, 0.537, 0.657, 0.751, 0.822, 0.874, 0.912, 0.939,
    0.958, 0.971, 0.98, 0.987, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 1
  );
  --md-sys-motion-duration-expressive: 450ms;

  /* ==========================================================================
     COMPONENT METRICS (spec: md.comp.* tokens — resolved values)
     ========================================================================== */
  /* buttons — 40dp container, full round, 24dp leading/trailing, 8dp icon gap,
     20dp icon, pressed shape morphs to 8dp (spec: button.pressed.container.shape) */
  --md-comp-button-container-height: 40px;
  --md-comp-button-container-shape: var(--md-sys-shape-corner-full);
  --md-comp-button-pressed-container-shape: var(--md-sys-shape-corner-small);
  --md-comp-button-leading-space: 24px;
  --md-comp-button-trailing-space: 24px;
  --md-comp-button-icon-label-space: var(--md-sys-measurement-space100);
  --md-comp-button-icon-size: 20px;
  --md-comp-button-label-text-size: var(--md-sys-typescale-label-large-size);
  --md-comp-button-label-text-line: var(--md-sys-typescale-label-large-line);
  --md-comp-button-label-text-weight: var(--md-sys-typescale-label-large-weight);
  /* icon buttons — 40dp container, 24dp icon, 48dp target area */
  --md-comp-icon-button-container-height: 40px;
  --md-comp-icon-button-container-shape: var(--md-sys-shape-corner-full);
  --md-comp-icon-button-icon-size: 24px;
  --md-comp-icon-button-target-size: 48px;
  /* chips — 32dp container, 8dp corner, 18dp icon */
  --md-comp-chip-container-height: 32px;
  --md-comp-chip-container-shape: var(--md-sys-shape-corner-small);
  --md-comp-chip-icon-size: 18px;
  --md-comp-chip-label-text-size: var(--md-sys-typescale-label-large-size);
  /* segmented buttons — 40dp container (spec md.comp.outlined-segmented-button.container.height) */
  --md-comp-segmented-button-height: 40px;
  /* cards — 12dp corner (spec: *_card.container.shape = corner.medium) */
  --md-comp-card-container-shape: var(--md-sys-shape-corner-medium);
  --md-comp-card-icon-size: 24px;
  /* text fields — 56dp container, 4dp corner, 1dp outline, 2dp focus outline */
  --md-comp-text-field-container-height: 56px;
  --md-comp-text-field-container-shape: var(--md-sys-shape-corner-extra-small);
  --md-comp-text-field-outline-width: 1px;
  --md-comp-text-field-focus-outline-width: 2px;
  --md-comp-text-field-leading-icon-size: 24px;
  /* tabs — 48dp (64dp with icon), 3dp active indicator */
  --md-comp-tabs-container-height: 48px;
  --md-comp-tabs-with-icon-container-height: 64px;
  --md-comp-tabs-active-indicator-height: 3px;
  --md-comp-tabs-active-indicator-shape: 3px;
  --md-comp-tabs-icon-size: 24px;
  /* lists — 56dp one-line items, selected container = secondary-container */
  --md-comp-list-item-height: 56px;
  --md-comp-list-icon-size: 24px;
  /* navigation bar — 80dp, 64×32 active indicator, 24dp icons */
  --md-comp-nav-bar-container-height: 80px;
  --md-comp-nav-bar-active-indicator-width: 64px;
  --md-comp-nav-bar-active-indicator-height: 32px;
  --md-comp-nav-bar-icon-size: 24px;
  /* navigation drawer — 360dp wide, 56dp active indicator height */
  --md-comp-nav-drawer-container-width: 360px;
  --md-comp-nav-drawer-item-height: 56px;
  --md-comp-nav-drawer-icon-size: 24px;
  /* navigation rail — 80dp wide, 56×32 indicator */
  --md-comp-nav-rail-container-width: 80px;
  --md-comp-nav-rail-active-indicator-width: 56px;
  --md-comp-nav-rail-active-indicator-height: 32px;
  --md-comp-nav-rail-icon-size: 24px;
  /* top app bar — small 64dp, 24dp icons */
  --md-comp-app-bar-container-height: 64px;
  --md-comp-app-bar-icon-size: 24px;
  --md-comp-app-bar-leading-space: var(--md-sys-measurement-space50);
  --md-comp-app-bar-trailing-space: var(--md-sys-measurement-space50);
  /* dialogs / sheets — 28dp corner, level 3 elevation */
  --md-comp-dialog-container-shape: var(--md-sys-shape-corner-extra-large);
  --md-comp-dialog-container-color: var(--md-sys-color-surface-container-high);
  --md-comp-sheet-container-shape: var(--md-sys-shape-corner-extra-large-top);
  --md-comp-sheet-drag-handle-width: 32px;
  --md-comp-sheet-drag-handle-height: 4px;
  --md-comp-sheet-drag-handle-opacity: 0.4;
  /* snackbar — inverse surface, 4dp corner, 48/68dp heights */
  --md-comp-snackbar-container-shape: var(--md-sys-shape-corner-extra-small);
  --md-comp-snackbar-container-color: var(--md-sys-color-inverse-surface);
  --md-comp-snackbar-one-line-height: 48px;
  --md-comp-snackbar-two-line-height: 68px;
  /* menus — surface-container, 4dp corner, 48dp list items */
  --md-comp-menu-container-shape: var(--md-sys-shape-corner-extra-small);
  --md-comp-menu-container-color: var(--md-sys-color-surface-container);
  --md-comp-menu-item-height: 48px;
  --md-comp-search-bar-icon-size: 24px;
  --md-comp-search-bar-leading-space: var(--md-sys-measurement-space200);
  --md-comp-search-bar-trailing-space: var(--md-sys-measurement-space200);
  /* search bar — 56dp, full round, surface-container-high */
  --md-comp-search-bar-container-height: 56px;
  --md-comp-search-bar-container-shape: var(--md-sys-shape-corner-full);
  --md-comp-search-bar-container-color: var(--md-sys-color-surface-container-high);
  /* tooltips — plain 4dp corner on inverse surface; rich 12dp on surface-container */
  --md-comp-tooltip-container-shape: var(--md-sys-shape-corner-extra-small);
  --md-comp-tooltip-container-color: var(--md-sys-color-inverse-surface);
  --md-comp-tooltip-text-color: var(--md-sys-color-inverse-on-surface);
  --md-comp-rich-tooltip-container-shape: var(--md-sys-shape-corner-medium);
  /* FAB — 56dp, 16dp corner, 24dp icon */
  --md-comp-fab-container-height: 56px;
  --md-comp-fab-container-shape: var(--md-sys-shape-corner-large);
  --md-comp-fab-icon-size: 24px;
  --md-comp-fab-container-color: var(--md-sys-color-primary-container);
  --md-comp-fab-text-color: var(--md-sys-color-on-primary-container);
  --md-comp-extended-fab-container-height: 56px;
  /* badges — small 6dp dot, large 16dp height */
  --md-comp-badge-small-size: 6px;
  --md-comp-badge-large-height: 16px;
  /* divider — 1dp outline-variant */
  --md-comp-divider-thickness: 1px;
  --md-comp-divider-color: var(--md-sys-color-outline-variant);
  /* progress — 4dp rounded track */
  --md-comp-progress-track-thickness: 4px;
  --md-comp-progress-indicator-color: var(--md-sys-color-primary);
  --md-comp-progress-track-color: var(--md-sys-color-secondary-container);
  /* selection controls */
  --md-comp-checkbox-size: 18px;
  --md-comp-checkbox-shape: 2px;
  --md-comp-radio-size: 20px;
  --md-comp-switch-track-width: 52px;
  --md-comp-switch-track-height: 32px;
  --md-comp-switch-handle-size: 20px;
  --md-comp-switch-selected-handle-size: 24px;
  --md-comp-slider-track-thickness: 16px;
  --md-comp-slider-handle-width: 4px;
  --md-comp-slider-handle-height: 44px;
  /* minimum interactive target (a11y) */
  --md-comp-target-size: 48px;

  /* ==========================================================================
     LAYOUT / WINDOW SIZE CLASSES (spec: compact <600, medium 600-839,
     expanded 840-1199, large 1200-1599, extra-large ≥1600)
     ========================================================================== */
  --layout-nav-drawer-width: var(--md-comp-nav-drawer-container-width);
  --layout-nav-rail-width: var(--md-comp-nav-rail-container-width);
  --layout-nav-bar-height: var(--md-comp-nav-bar-container-height);
  --layout-topbar-height: var(--md-comp-app-bar-container-height);
  --layout-content-max: 1200px;
  --layout-prose-max: 72ch;
  --layout-gutter: var(--md-sys-measurement-space200); /* compact margin 16dp */
  --layout-gutter-sm: var(--md-sys-measurement-space300); /* medium+ 24dp */
  --layout-gutter-lg: var(--md-sys-measurement-space300);
  --layout-column-gutter: var(--md-sys-measurement-space100); /* compact 8dp */
  --layout-column-gutter-lg: var(--md-sys-measurement-space200);
  --layout-safe-bottom: env(safe-area-inset-bottom, 0px);
  --layout-safe-top: env(safe-area-inset-top, 0px);

  /* z-index scale */
  --z-sticky: 10;
  --z-navbar: 20;
  --z-topbar: 30;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-lightbox: 80;

  /* ==========================================================================
     SUBJECT ACCENT ROLES — HCT tonal palettes (Material Color Utilities)
     Light theme: tone 40 accent, tone 90 container, tone 10 on-container.
     Contrast: accent/on-accent 6.45–6.49:1, container/on-container 13.2:1.
     ========================================================================== */
  --bankowosc-accent: #005faf;
  --bankowosc-on-accent: #ffffff;
  --bankowosc-accent-container: #d4e3ff;
  --bankowosc-on-accent-container: #001c3a;
  --rachunkowosc-accent: #006b55;
  --rachunkowosc-on-accent: #ffffff;
  --rachunkowosc-accent-container: #7ff8d3;
  --rachunkowosc-on-accent-container: #002118;
  --produkty-accent: #904d00;
  --produkty-on-accent: #ffffff;
  --produkty-accent-container: #ffdcc3;
  --produkty-on-accent-container: #2f1500;
  --umowy-accent: #6750a4;
  --umowy-on-accent: #ffffff;
  --umowy-accent-container: #eaddff;
  --umowy-on-accent-container: #21005d;

  /* legacy token names still referenced by view stylesheets (aliases only) */
  --md-sys-font-family: var(--md-ref-typeface-plain);
  --md-sys-font-family-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo,
    Consolas, monospace;
  --layout-bottomnav-height: var(--layout-nav-bar-height);
  --layout-drawer-width: var(--md-comp-nav-drawer-container-width);
  --z-bottomnav: var(--z-navbar);

  /* ==========================================================================
     COMPATIBILITY ALIASES (legacy class hooks, all point at M3 roles)
     ========================================================================== */
  --ink: var(--md-sys-color-on-surface);
  --ink-2: var(--md-sys-color-on-surface-variant);
  --ink-secondary: var(--md-sys-color-on-surface-variant);
  --muted: var(--md-sys-color-on-surface-variant);
  --line: var(--md-sys-color-outline-variant);
  --line-strong: var(--md-sys-color-outline);
  --paper: var(--md-sys-color-surface-container-lowest);
  --paper-subtle: var(--md-sys-color-surface-container-low);
  --paper-hover: var(--md-sys-color-surface-container-high);
  --canvas: var(--md-sys-color-surface);
  --accent: var(--md-sys-color-primary);
  --accent-soft: var(--md-sys-color-primary-container);
  --good: var(--md-sys-color-success);
  --good-soft: var(--md-sys-color-success-container);
  --good-border: color-mix(in srgb, var(--md-sys-color-success) 32%, transparent);
  --bad: var(--md-sys-color-error);
  --bad-soft: var(--md-sys-color-error-container);
  --bad-border: color-mix(in srgb, var(--md-sys-color-error) 32%, transparent);
  --warning: var(--md-sys-color-warning);
  --warning-soft: var(--md-sys-color-warning-container);
  --warning-border: color-mix(in srgb, var(--md-sys-color-warning) 32%, transparent);
  --shadow-xs: none;
  --shadow: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level2);
  --shadow-lg: var(--md-sys-elevation-level3);
  --radius-sm: var(--md-sys-shape-corner-small);
  --radius: var(--md-sys-shape-corner-large);
  --radius-lg: var(--md-sys-shape-corner-extra-large);

  /* Default subject accent = primary roles (also fallback before a subject is
     selected). Per-subject overrides are applied below via [data-subject]. */
  --subject-accent: var(--md-sys-color-primary);
  --subject-on-accent: var(--md-sys-color-on-primary);
  --subject-accent-container: var(--md-sys-color-primary-container);
  --subject-on-accent-container: var(--md-sys-color-on-primary-container);
}

/* ============================================================================
   DARK THEME (spec: token-table dark values)
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: var(--mtrl-sys-color-primary);
  --md-sys-color-on-primary: var(--mtrl-sys-color-on-primary);
  --md-sys-color-primary-container: var(--mtrl-sys-color-primary-container);
  --md-sys-color-on-primary-container: var(--mtrl-sys-color-on-primary-container);
  --md-sys-color-secondary: var(--mtrl-sys-color-secondary);
  --md-sys-color-on-secondary: var(--mtrl-sys-color-on-secondary);
  --md-sys-color-secondary-container: var(--mtrl-sys-color-secondary-container);
  --md-sys-color-on-secondary-container: var(--mtrl-sys-color-on-secondary-container);
  --md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
  --md-sys-color-error: var(--mtrl-sys-color-error);
  --md-sys-color-on-error: var(--mtrl-sys-color-on-error);
  --md-sys-color-error-container: var(--mtrl-sys-color-error-container);
  --md-sys-color-on-error-container: var(--mtrl-sys-color-on-error-container);
  --md-sys-color-surface: var(--mtrl-sys-color-surface);
  --md-sys-color-on-surface: var(--mtrl-sys-color-on-surface);
  --md-sys-color-surface-variant: var(--mtrl-sys-color-surface-variant);
  --md-sys-color-on-surface-variant: var(--mtrl-sys-color-on-surface-variant);
  --md-sys-color-surface-container-lowest: var(--mtrl-sys-color-surface-container-lowest);
  --md-sys-color-surface-container-low: var(--mtrl-sys-color-surface-container-low);
  --md-sys-color-surface-container: var(--mtrl-sys-color-surface-container);
  --md-sys-color-surface-container-high: var(--mtrl-sys-color-surface-container-high);
  --md-sys-color-surface-container-highest: var(--mtrl-sys-color-surface-container-highest);
  --md-sys-color-surface-dim: var(--mtrl-sys-color-surface-dim);
  --md-sys-color-surface-bright: var(--mtrl-sys-color-surface-bright);
  --md-sys-color-outline: var(--mtrl-sys-color-outline);
  --md-sys-color-outline-variant: var(--mtrl-sys-color-outline-variant);
  --md-sys-color-inverse-surface: var(--mtrl-sys-color-inverse-surface);
  --md-sys-color-inverse-on-surface: var(--mtrl-sys-color-inverse-on-surface);
  --md-sys-color-inverse-primary: var(--mtrl-sys-color-inverse-primary);
  --md-sys-color-scrim: var(--md-ref-palette-neutral0);
  --md-sys-color-shadow: var(--md-ref-palette-neutral0);

  /* warning extension, dark */
  --md-sys-color-warning: #ffba38;
  --md-sys-color-on-warning: #432c00;
  --md-sys-color-warning-container: #604100;
  --md-sys-color-on-warning-container: #ffdeac;

  /* subject accents, dark (tone 80 accent / tone 30 container) */
  --bankowosc-accent: #a5c8ff;
  --bankowosc-on-accent: #00315f;
  --bankowosc-accent-container: #004786;
  --bankowosc-on-accent-container: #d4e3ff;
  --rachunkowosc-accent: #61dbb7;
  --rachunkowosc-on-accent: #00382b;
  --rachunkowosc-accent-container: #00513f;
  --rachunkowosc-on-accent-container: #7ff8d3;
  --produkty-accent: #ffb77d;
  --produkty-on-accent: #4d2600;
  --produkty-accent-container: #6e3900;
  --produkty-on-accent-container: #ffdcc3;
  --umowy-accent: #d0bcff;
  --umowy-on-accent: #381e72;
  --umowy-accent-container: #4f378b;
  --umowy-on-accent-container: #eaddff;

  --md-sys-typescale-prose-size: 17px;
}

/* ============================================================================
   SUBJECT MAPPING — app.js only sets `data-subject` on <html>; the roles above
   resolve per theme, so one mapping works for light and dark.
   ========================================================================== */
html[data-subject="bankowosc"] {
  --subject-accent: var(--bankowosc-accent);
  --subject-on-accent: var(--bankowosc-on-accent);
  --subject-accent-container: var(--bankowosc-accent-container);
  --subject-on-accent-container: var(--bankowosc-on-accent-container);
  --accent: var(--bankowosc-accent);
  --accent-soft: var(--bankowosc-accent-container);
}
html[data-subject="rachunkowosc"] {
  --subject-accent: var(--rachunkowosc-accent);
  --subject-on-accent: var(--rachunkowosc-on-accent);
  --subject-accent-container: var(--rachunkowosc-accent-container);
  --subject-on-accent-container: var(--rachunkowosc-on-accent-container);
  --accent: var(--rachunkowosc-accent);
  --accent-soft: var(--rachunkowosc-accent-container);
}
html[data-subject="produkty"] {
  --subject-accent: var(--produkty-accent);
  --subject-on-accent: var(--produkty-on-accent);
  --subject-accent-container: var(--produkty-accent-container);
  --subject-on-accent-container: var(--produkty-on-accent-container);
  --accent: var(--produkty-accent);
  --accent-soft: var(--produkty-accent-container);
}
html[data-subject="umowy"] {
  --subject-accent: var(--umowy-accent);
  --subject-on-accent: var(--umowy-on-accent);
  --subject-accent-container: var(--umowy-accent-container);
  --subject-on-accent-container: var(--umowy-on-accent-container);
  --accent: var(--umowy-accent);
  --accent-soft: var(--umowy-accent-container);
}

/* Touch devices: hover state layers do not stick after a tap. */
@media (hover: none) {
  :root {
    --md-sys-state-hover-opacity: 0;
  }
}