/*
  Design tokens source of truth.
  JS/CSS contract vars kept here (or as aliases):
  --motion-duration, --motion-duration-layout, --motion-ease,
  --header-panel-content-delay, --header-panel-content-duration,
  --header-panel-shell-duration, --header-glass-*, --brand-color, --border-color.
  JS-dependent selectors are validated in tests and remain in component/layout files:
  .site-header, .site-header__surface, .site-header__backdrop, #site-menu, .modal,
  .sidebar[data-sidebar], .media-lightbox, .blackout, .app-button, .icon-button, .chip-button, .menu-button.
*/

:root {
    --font-sans-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Arial, sans-serif;

    --txt-color: #1d1d1f;
    --txt-secondary-color: #5f6368;
    --txt-green-highlight: #005b44;
    --txt-red-highlight: #ed9fbb;
    --txt-on-accent: #fff;

    --bg-color: #d7d7d7;
    --container-color: #fff;
    --header-container-color: #ececec;
    --modal-bg-color: rgba(245, 245, 245, 0.82);
    --card-caption-bg-color: rgba(255, 255, 255, 0.7);
    --card-caption-surface: rgba(255, 255, 255, 0.96);
    --card-icon-surface-bg: none;
    --overlay-backdrop-bg: rgba(15, 23, 42, 0.42);
    --overlay-backdrop-filter: blur(10px);
    --header-glass-bg: rgba(255, 255, 255, 0.76);
    --header-glass-bg-scrolled: rgba(255, 255, 255, 0.9);

    --palette-accent-green: #1a8a76;
    --palette-accent-blue: #2f6da5;
    --brand-color: var(--palette-accent-green);
    --secondary-brand-color: var(--palette-accent-blue);
    --link-color: #1a6d62;
    --text-link-color: var(--link-color);
    --btn-bg-color: rgba(15, 23, 42, 0.04);
    --hover-btn-bg-color: rgba(15, 23, 42, 0.08);
    --hover-main-btn-bg-color: rgba(15, 23, 42, 0.12);
    --btn-bg-translucent: rgba(255, 255, 255, 0.94);

    --border-color: #d9dde3;
    --control-border-color-hover: #b8c0cc;
    --surface-border-subtle: rgba(15, 23, 42, 0.12);
    --field-border-color: rgba(15, 23, 42, 0.16);
    --field-bg-color: var(--btn-bg-translucent);
    --chip-outline-danger: #c06284;

    /* Top-level semantic theme bridge */
    --theme-surface-page: var(--bg-color);
    --theme-surface-shell: #e6e6e6;
    --theme-surface-section: #f0f0f0;
    --theme-surface-subsection: #f7f7f7;
    --theme-surface-item: #fff;
    --theme-surface-base: var(--theme-surface-item);
    --theme-surface-raised: var(--theme-surface-shell);
    --theme-surface-subtle: var(--theme-surface-section);
    --theme-surface-accent-soft: color-mix(in srgb, var(--brand-color) 10%, var(--theme-surface-base));
    --theme-surface-danger-soft: color-mix(in srgb, var(--chip-outline-danger) 12%, var(--theme-surface-base));

    --theme-border-subtle: color-mix(in srgb, var(--surface-border-subtle) 56%, transparent);
    --theme-border-quiet: color-mix(in srgb, var(--surface-border-subtle) 72%, transparent);
    --theme-border-normal: color-mix(in srgb, var(--surface-border-subtle) 92%, transparent);
    --theme-border-strong: color-mix(in srgb, var(--surface-border-subtle) 68%, rgba(15, 23, 42, 0.26));
    --theme-border-focus: color-mix(in srgb, var(--brand-color) 30%, transparent);
    --theme-border-control: var(--theme-border-quiet);
    --theme-border-control-hover: var(--theme-border-normal);
    --theme-border-surface-panel: color-mix(in srgb, var(--theme-border-normal) 82%, transparent);
    --theme-border-surface-item: color-mix(in srgb, var(--theme-border-normal) 72%, transparent);
    --theme-border-list-row: var(--theme-border-surface-item);
    --theme-border-list-row-hover: var(--theme-border-control);

    --container-surface-shell: var(--theme-surface-shell);
    --container-surface-section: var(--theme-surface-section);
    --container-surface-subsection: var(--theme-surface-subsection);
    --container-surface-item: var(--theme-surface-item);
    --container-border-shell: 1px solid var(--theme-border-normal);
    --container-border-section: 1px solid var(--theme-border-surface-panel);
    --container-border-subsection: 1px solid var(--theme-border-surface-item);
    --container-border-item: 1px solid var(--theme-border-surface-item);

    --theme-text-strong: var(--txt-color);
    --theme-text-normal: color-mix(in srgb, var(--txt-color) 88%, var(--txt-secondary-color));
    --theme-text-muted: var(--txt-secondary-color);
    --theme-text-soft: color-mix(in srgb, var(--txt-secondary-color) 84%, transparent);
    --theme-text-accent: color-mix(in srgb, var(--brand-color) 84%, #143f37);
    --theme-text-danger: #7f2f4d;
    --color-bg-page: var(--theme-surface-page);
    --color-text-primary: var(--theme-text-strong);
    --color-text-secondary: var(--theme-text-muted);

    --theme-action-primary-bg: var(--brand-color);
    --theme-action-primary-bg-hover: color-mix(in srgb, var(--brand-color) 88%, #000);
    --theme-action-primary-fg: var(--txt-on-accent);

    --theme-action-secondary-bg: rgba(15, 23, 42, 0.04);
    --theme-action-secondary-bg-hover: color-mix(in srgb, var(--theme-surface-accent-soft) 72%, transparent);
    --theme-action-secondary-bg-active: color-mix(in srgb, var(--theme-surface-accent-soft) 84%, transparent);
    --theme-action-secondary-border: rgba(15, 23, 42, 0.18);
    --theme-action-secondary-border-hover: color-mix(in srgb, var(--brand-color) 52%, rgba(15, 23, 42, 0.24));
    --theme-action-secondary-fg: var(--theme-text-normal);
    --theme-action-secondary-fg-hover: var(--theme-text-accent);
    --theme-state-selected-bg: color-mix(in srgb, var(--brand-color) 8%, transparent);
    --theme-state-selected-bg-hover: color-mix(in srgb, var(--brand-color) 13%, transparent);
    --theme-state-selected-border: color-mix(in srgb, var(--brand-color) 42%, transparent);
    --theme-state-selected-border-hover: color-mix(in srgb, var(--brand-color) 56%, transparent);
    --theme-state-selected-color: color-mix(in srgb, var(--brand-color) 78%, #143f37);
    --theme-state-selected-color-hover: color-mix(in srgb, var(--brand-color) 84%, #143f37);
    --control-selected-bg: var(--theme-state-selected-bg);
    --control-selected-bg-hover: var(--theme-state-selected-bg-hover);
    --control-selected-border: var(--theme-state-selected-border);
    --control-selected-border-hover: var(--theme-state-selected-border-hover);
    --control-selected-color: var(--theme-state-selected-color);
    --control-selected-color-hover: var(--theme-state-selected-color-hover);
    --icon-filter-brand: invert(39%) sepia(41%) saturate(976%) hue-rotate(127deg) brightness(90%) contrast(88%);

    --surface-base: var(--theme-surface-base);
    --surface-muted: var(--theme-surface-subtle);
    --surface-elevated: var(--theme-surface-raised);
    --text-primary: var(--theme-text-strong);
    --text-secondary: var(--theme-text-muted);
    --text-muted: var(--theme-text-soft);
    --stats-accent-primary: var(--brand-color);
    --stats-accent-secondary: var(--secondary-brand-color);
    --stats-accent-primary-glow: color-mix(in srgb, var(--stats-accent-primary) 36%, transparent);
    --stats-accent-secondary-glow: color-mix(in srgb, var(--stats-accent-secondary) 38%, transparent);
    --action-primary-bg: var(--theme-action-primary-bg);
    --action-primary-bg-hover: var(--theme-action-primary-bg-hover);
    --action-primary-fg: var(--theme-action-primary-fg);
    --action-danger-border: color-mix(in srgb, var(--theme-text-danger) 48%, transparent);
    --action-danger-fg: var(--theme-text-danger);

    /* Shared color + contrast tokens for owner components */
    --color-chip-count-active-bg: rgba(37, 171, 149, 0.15);
    /* Layout scale */
    --layout-max-width: 1680px;
    --content-readable-max-width: 84ch;
    --layout-padding-desktop: 30px;
    --layout-padding-tablet: 24px;
    --layout-padding-mobile: 16px;
    --layout-header-height-current: var(--header-height);
    --layout-footer-height-current: 0px;
    --content-offset-top-gap: 26px;
    --content-offset-bottom-min: 30px;
    --content-offset-bottom-max: 44px;
    --content-offset-top: calc(var(--layout-header-height-current) + var(--content-offset-top-gap));
    --content-offset-bottom: clamp(
        var(--content-offset-bottom-min),
        calc(var(--layout-footer-height-current) * 0.09),
        var(--content-offset-bottom-max)
    );
    --header-height: 50px;

    /* Spacing scale */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 30px;

    /* Typography scale */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 16px;
    --font-size-lg: 17px;
    --font-size-xl: 18px;
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;

    --type-h1-size: clamp(28px, 2.6vw, 36px);
    --type-h1-line: 1.2;
    --type-h1-weight: 400;
    --type-h2-size: clamp(22px, 2.1vw, 28px);
    --type-h2-line: 1.25;
    --type-h2-weight: 400;
    --type-h3-size: clamp(16px, 1.5vw, 20px);
    --type-h3-line: 1.3;
    --type-h3-weight: 400;
    --type-lead-size: clamp(17px, 1.45vw, 20px);
    --type-lead-line: 1.5;
    --type-lead-weight: 400;
    --type-body-size: var(--font-size-md);
    --type-body-line: 1.55;
    --type-body-weight: 400;
    --type-caption-size: var(--font-size-sm);
    --type-caption-line: 1.4;
    --type-caption-weight: 400;
    --type-muted-size: var(--font-size-sm);
    --type-muted-line: 1.4;
    --type-muted-weight: 400;
    --type-label-size: 11px;
    --type-label-line: 1.2;
    --type-label-weight: 400;
    --type-button-line: 1.1;
    --type-control-size: 14px;
    --type-control-line: 1;
    --type-control-weight: 400;
    --type-control-meta-size: 12px;
    --type-control-meta-line: 1.2;
    --type-body-sm-size: 14px;
    --type-body-sm-line: 1.5;
    --type-body-sm-line-tight: 1.45;
    --type-body-lg-size: 15px;
    --type-body-xl-size: 16px;
    --type-reading-size: 17px;
    --type-reading-line: 1.75;
    --type-card-title-compact-size: 15px;
    --type-card-title-compact-line: 1.22;
    --type-display-metric-size: clamp(42px, 4vw, 58px);
    --type-display-metric-line: 0.92;
    --type-chip-value-size: 22px;
    --type-homonym-sup-size: 0.62em;
    --type-homonym-sup-line: 1;

    /* Visual hierarchy scale */
    --hierarchy-title-color: var(--theme-text-strong);
    --hierarchy-title-weight: 400;
    --hierarchy-title-track-tight: -0.03em;
    --hierarchy-title-track-metric: -0.06em;
    --hierarchy-meta-color: var(--theme-text-muted);
    --hierarchy-meta-weight: 400;
    --hierarchy-summary-color: var(--theme-text-normal);
    --hierarchy-summary-weight: 400;
    --hierarchy-hint-color: var(--theme-text-soft);
    --hierarchy-reading-color: var(--theme-text-strong);
    --hierarchy-reading-weight: 400;
    --hierarchy-emphasis-color: var(--theme-text-strong);
    --hierarchy-strong-weight: 400;
    --hierarchy-eyebrow-color: var(--theme-text-muted);
    --hierarchy-eyebrow-track: 0.18em;
    --hierarchy-eyebrow-track-compact: 0.16em;
    --hierarchy-eyebrow-transform: uppercase;
    --hierarchy-heading-track: var(--heading-letter-spacing);
    --hierarchy-index-weight: 400;
    --hierarchy-action-color: var(--theme-text-normal);
    --hierarchy-status-color: var(--theme-text-muted);
    --hierarchy-status-weight: 400;
    --hierarchy-status-weight-strong: 400;
    --hierarchy-status-track: 0.08em;
    --hierarchy-status-track-compact: 0.05em;
    --hierarchy-status-transform: uppercase;
    --hierarchy-status-trigger-weight: 400;
    --hierarchy-status-trigger-track: 0;
    --hierarchy-status-trigger-transform: none;
    --emphasis-accent-brand: var(--brand-color);
    --emphasis-accent-interactive-bg: var(--theme-action-secondary-bg);
    --emphasis-accent-interactive-color: var(--theme-action-secondary-fg-hover);
    --emphasis-accent-badge-color: var(--emphasis-accent-brand);
    --emphasis-accent-status-trigger-color-hover: var(--emphasis-accent-interactive-color);
    --emphasis-accent-section-icon-color: color-mix(in srgb, var(--txt-color) 88%, var(--emphasis-accent-brand));
    --emphasis-accent-filter-remove-bg: var(--emphasis-accent-interactive-bg);
    --emphasis-accent-checkbox-check-color: var(--emphasis-accent-interactive-color);
    --emphasis-outline-surface-quiet: 0;
    --emphasis-outline-list-shell: 0;
    --emphasis-outline-item-card: 0;
    --emphasis-outline-item-card-hover: var(--emphasis-outline-item-card);
    --emphasis-outline-card: 1px solid var(--theme-border-normal);
    --emphasis-outline-metric-card: 1px solid rgba(255, 255, 255, 0.42);
    --emphasis-outline-field: 1px solid var(--border-color);
    --emphasis-outline-field-control: 0;
    --emphasis-outline-checkbox-row: 0;
    --emphasis-outline-checkbox-row-checked-color: transparent;
    --emphasis-outline-checkbox-box: 1px solid var(--field-border-color);
    --emphasis-outline-checkbox-box-checked-color: var(--theme-action-secondary-border-hover);
    --emphasis-card-edge-hover-border: var(--interactive-card-hover-border);

    /* Action emphasis scale */
    --emphasis-action-secondary-bg: var(--theme-action-secondary-bg);
    --emphasis-action-secondary-bg-hover: var(--theme-action-secondary-bg-hover);
    --emphasis-action-secondary-bg-active: var(--theme-action-secondary-bg-active);
    --emphasis-action-secondary-border: var(--theme-border-control);
    --emphasis-action-secondary-border-hover: var(--theme-border-control-hover);
    --emphasis-action-secondary-color: var(--theme-action-secondary-fg);
    --emphasis-action-secondary-color-hover: var(--theme-action-secondary-fg-hover);
    --emphasis-action-menu-bg: var(--emphasis-action-secondary-bg);
    --emphasis-action-menu-bg-hover: var(--emphasis-action-secondary-bg-hover);
    --emphasis-action-menu-bg-active: var(--emphasis-action-secondary-bg-active);
    --emphasis-action-menu-border: var(--emphasis-action-secondary-border);
    --emphasis-action-menu-border-hover: var(--emphasis-action-secondary-border-hover);
    --emphasis-action-menu-color: var(--hierarchy-action-color);
    --emphasis-action-menu-color-hover: var(--theme-action-secondary-fg-hover);
    --emphasis-action-app-bg: var(--theme-surface-raised);
    --emphasis-action-app-bg-hover: var(--theme-surface-raised);
    --emphasis-action-app-bg-active: color-mix(in srgb, var(--theme-action-primary-bg) 6%, var(--theme-surface-raised));
    --emphasis-action-app-border: var(--theme-border-control);
    --emphasis-action-app-border-hover: var(--theme-border-control-hover);
    --emphasis-action-app-color: var(--hierarchy-action-color);
    --emphasis-action-app-color-hover: var(--hierarchy-action-color);
    --emphasis-action-quiet-bg: transparent;
    --emphasis-action-quiet-bg-hover: color-mix(in srgb, var(--brand-color) 10%, transparent);
    --emphasis-action-quiet-bg-active: color-mix(in srgb, var(--brand-color) 14%, transparent);
    --emphasis-action-quiet-border: transparent;
    --emphasis-action-quiet-border-hover: transparent;
    --emphasis-action-quiet-color: var(--hierarchy-action-color);
    --emphasis-action-quiet-color-hover: var(--hierarchy-action-color);
    --emphasis-action-cta-bg: var(--action-primary-bg);
    --emphasis-action-cta-bg-hover: var(--action-primary-bg-hover);
    --emphasis-action-cta-bg-active: color-mix(in srgb, var(--action-primary-bg) 88%, #000);
    --emphasis-action-cta-border: color-mix(in srgb, var(--action-primary-bg) 74%, var(--theme-border-normal));
    --emphasis-action-cta-border-hover: color-mix(in srgb, var(--action-primary-bg-hover) 74%, var(--theme-border-strong));
    --emphasis-action-cta-color: var(--action-primary-fg);
    --emphasis-action-solid-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    --emphasis-action-solid-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.84));
    --emphasis-action-solid-bg-active: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.74));
    --emphasis-action-solid-border: var(--theme-border-control);
    --emphasis-action-solid-border-hover: var(--theme-border-control-hover);
    --emphasis-action-solid-color: var(--hierarchy-action-color);
    --emphasis-action-basic-bg: var(--surface-muted);
    --emphasis-action-chip-bg: var(--theme-action-secondary-bg);
    --emphasis-action-chip-bg-hover: var(--theme-action-secondary-bg-hover);
    --emphasis-action-chip-border: var(--theme-border-control);
    --emphasis-action-chip-border-hover: var(--theme-border-control-hover);
    --emphasis-action-chip-color: var(--theme-action-secondary-fg);
    --emphasis-action-chip-color-hover: var(--theme-action-secondary-fg-hover);
    --emphasis-action-chip-danger-bg: transparent;
    --emphasis-action-chip-danger-bg-hover: var(--btn-bg-color);
    --emphasis-action-chip-danger-border: var(--chip-outline-danger);
    --emphasis-action-chip-danger-border-hover: var(--txt-red-highlight);
    --emphasis-action-chip-danger-color: var(--chip-outline-danger);
    --emphasis-action-chip-danger-color-hover: var(--txt-red-highlight);
    --emphasis-action-nav-accent-bg: var(--theme-state-selected-bg);
    --emphasis-action-nav-accent-bg-hover: var(--theme-state-selected-bg-hover);
    --emphasis-action-nav-accent-border: var(--theme-state-selected-border);
    --emphasis-action-nav-accent-border-hover: var(--theme-state-selected-border-hover);
    --emphasis-action-nav-accent-color: var(--theme-state-selected-color);
    --emphasis-action-nav-accent-color-hover: var(--theme-state-selected-color-hover);

    /* Backward-compatible typography aliases */
    --heading-2-size: var(--type-h2-size);
    --heading-3-size: var(--type-h3-size);
    --heading-letter-spacing: -0.01em;
    --page-subtitle-size: clamp(15px, 1.3vw, 18px);
    --section-head-title-size: 20px;

    /* Border + focus */
    --border-width-base: 1px;
    --border-width-focus: 2px;
    --border-color-default: var(--border-color);
    --border-color-hover: var(--control-border-color-hover);
    --border-color-focus: var(--brand-color);
    --active-outline-color: var(--brand-color);
    --focus-ring-color: var(--brand-color);
    --focus-ring-color-muted: var(--theme-border-focus);
    --focus-ring-width: var(--border-width-focus);
    --focus-ring-offset: 2px;
    --shadow-none: none;
    --backdrop-filter-none: none;

    /* Radius scale */
    --radius-none: 0;
    --radius-2xs: 4px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-2xl: 20px;
    --radius-3xl: 22px;
    --radius-4xl: 24px;
    --radius-5xl: 26px;
    --radius-7xl: 30px;
    --radius-pill: 999px;
    --radius-round: 50%;

    /* Surface radius scale */
    --surface-radius: var(--radius-3xl);
    --surface-radius-quiet: var(--surface-radius);
    --surface-radius-shell: var(--surface-radius);
    --surface-radius-shell-mobile: var(--surface-radius);

    /* Progress scale */
    --progress-card-padding: 16px;
    --progress-card-gap: 4px;
    --progress-card-radius: var(--surface-radius);
    --progress-label-size: var(--font-size-xs);
    --progress-label-size-compact: var(--type-label-size);
    --progress-label-color: var(--hierarchy-meta-color);
    --progress-label-track: 0.08em;
    --progress-label-transform: uppercase;
    --progress-value-size: var(--type-chip-value-size);
    --progress-value-line: 1.1;
    --progress-value-weight: var(--hierarchy-title-weight);
    --progress-bar-height: 6px;
    --progress-bar-radius: var(--radius-pill);
    --progress-bar-fill-default: var(--emphasis-accent-brand);
    --progress-track-bg: var(--surface-base);
    --progress-note-size: var(--type-muted-size);
    --progress-note-line: var(--type-body-sm-line-tight);
    --progress-note-color: color-mix(in srgb, var(--theme-text-muted) 84%, transparent);
    --progress-account-value-size: clamp(18px, 1.7vw, 22px);
    --progress-account-value-weight: var(--hierarchy-strong-weight);

    /* Layout density scale */
    --surface-content-width: min(var(--layout-max-width), 100%);
    --surface-content-padding-mobile: 16px;
    --metric-card-grid-columns: repeat(2, minmax(0, 1fr));
    --metric-card-grid-gap: 18px;
    --metric-card-gap: 18px;
    --metric-card-padding: 24px;
    --metric-card-eyebrow-size: var(--type-label-size);
    --metric-card-eyebrow-track: 0.14em;
    --metric-card-value-size: clamp(30px, 3vw, 42px);
    --metric-card-value-line: 0.96;
    --metric-card-summary-value-size: clamp(24px, 2.1vw, 30px);
    --metric-card-caption-size: var(--font-size-sm);
    --metric-card-caption-line: 1.45;
    --metric-card-hint-margin-top: 14px;
    --metric-card-hint-size: var(--type-body-sm-size);
    --metric-card-hint-line: 1.5;
    --metric-card-hint-color: var(--hierarchy-meta-color);
    --metric-card-progress-bg: var(--emphasis-action-basic-bg);
    --metric-card-progress-fill: linear-gradient(90deg, var(--brand-color), var(--link-color));
    --metric-card-padding-mobile: 20px;

    /* Motion scale */
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-duration-base: 240ms;
    /* Interaction states */
    --state-opacity-visible: 1;
    --state-opacity-disabled: 0.45;
    --state-opacity-disabled-strong: 0.5;
    --state-opacity-muted: 0.92;
    --state-focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

    /* Shadow scale */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 22px 44px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.07);
    --surface-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.06);
    --shadow-focus-ring-muted: 0 0 0 2px color-mix(in srgb, var(--focus-ring-color) 28%, transparent);
    --hover-shadow: var(--shadow-sm);

    /* Layering */
    --z-header-backdrop: 1000;
    --z-header: 1010;
    --z-quick-bar: 990;
    --z-sidebar-backdrop: 1020;
    --z-sidebar: 1030;
    --z-popover: 1040;
    --z-toast: 1090;
    --z-modal-backdrop: 1060;
    --z-modal: 1070;
    --z-lightbox: 1100;

    /* Controls */
    --control-height-md: 40px;
    --control-height-lg: 50px;
    --control-radius: var(--radius-3xl);
    --control-gap-3xs: 3px;
    --control-gap-2xs: 4px;
    --control-gap-tight: 6px;
    --control-gap-base: 8px;
    --control-gap-wide: 10px;
    --control-gap-loose: 12px;
    --control-padding-2xs: 4px;
    --control-padding-y-compact: 6px;
    --control-padding-x-mobile: 8px;
    --control-padding-x-compact: 10px;
    --control-padding-x-base: 12px;
    --control-padding-x-wide: 14px;
    --control-padding-x-xl: 22px;
    --control-icon-size-sm: 14px;
    --control-icon-button-size-xs: 16px;
    --control-icon-button-size-sm: 30px;
    --control-app-icon-size: 28px;
    --control-check-size: 16px;
    --control-check-radius: 5px;
    --control-check-mark-width: 3px;
    --control-check-mark-height: 7px;
    --button-height-sm: 34px;
    --button-height-md: 38px;
    --button-height-unified: 38px;
    --button-radius-unified: var(--control-radius);
    --button-padding-x-sm: 12px;
    --button-padding-x-md: 16px;
    --button-gap: 8px;
    --button-rail-radius: var(--control-radius);

    /* Component tokens */
    --section-gap: var(--space-6);
    --section-padding: var(--layout-padding-desktop);
    --body-gap: var(--space-6);
    --inner-gap: var(--space-5);
    --favorite-active-bg: var(--theme-surface-accent-soft);
    --favorite-active-color: var(--theme-text-strong);
    --favorite-action-icon-size: 16px;
    --favorite-item-radius: var(--radius-lg);
    --favorite-item-border: 1px solid var(--theme-border-normal);
    --favorite-item-bg: var(--theme-surface-base);
    --section-head-padding-y: 10px;
    --section-head-padding-x: 10px;
    --section-head-gap: 10px;
    --section-head-divider-inset: var(--space-3);
    --section-head-text-padding-y: var(--space-1);
    --section-head-text-gap-row: var(--space-3);
    --section-head-text-gap-column: var(--space-4);
    --section-head-summary-offset: var(--space-1);
    --section-head-icon-offset-top: var(--control-gap-tight);
    --section-head-title-row-gap: var(--space-4);
    --section-head-actions-gap: var(--space-3);
    --section-head-mobile-gap: var(--space-3);
    --outline-pill-font-size: var(--font-size-sm);
    --outline-pill-padding-y: 5px;
    --outline-pill-padding-x: 11px;
    --outline-pill-border: 1px;
    --modal-padding: 30px;
    --modal-close-radius: var(--radius-pill);
    --modal-close-border: 1px solid var(--theme-border-subtle);
    --modal-close-bg: color-mix(in srgb, var(--theme-surface-base) 88%, transparent);
    --modal-close-hover-border: var(--theme-border-control);
    --modal-close-hover-bg: var(--theme-action-secondary-bg);
    --modal-close-hover-color: var(--theme-action-secondary-fg-hover);
    --close-offset: var(--space-4);