/*
 * aiaiai Design System — Component Tokens (components.css)
 *
 * Scoped to specific components. Reference semantic tokens.
 * These allow component-level tuning without breaking the system.
 *
 * Naming: --{component}-{property}
 */

:root {
  /* ═══════════════════════════════════════════════
     BUTTON
     ═══════════════════════════════════════════════ */

  --button-font: var(--type-label-font);
  --button-tracking: var(--type-label-tracking);
  --button-radius: var(--radius-md);
  --button-transition: var(--duration-instant) var(--easing-default);

  /* Sizes */
  --button-sm-height: 28px;
  --button-sm-padding-x: var(--space-sm);
  --button-sm-font-size: var(--type-caption-size);

  --button-md-height: 36px;
  --button-md-padding-x: var(--space-md);
  --button-md-font-size: var(--type-label-size);

  --button-lg-height: 44px;
  --button-lg-padding-x: var(--space-lg);
  --button-lg-font-size: var(--type-body-sm-size);

  /* Primary variant */
  --button-primary-bg: var(--color-accent);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-primary-text: var(--color-text-on-accent);
  --button-primary-border: none;

  /* Secondary variant */
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--color-surface-secondary);
  --button-secondary-text: var(--color-text);
  --button-secondary-border: var(--elevation-border);

  /* Ghost variant */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: var(--color-surface-secondary);
  --button-ghost-text: var(--color-text-secondary);
  --button-ghost-border: none;

  /* Destructive variant */
  --button-destructive-bg: var(--color-destructive);
  --button-destructive-bg-hover: var(--color-destructive-hover);
  --button-destructive-text: var(--color-text-on-accent);
  --button-destructive-border: none;

  /* ═══════════════════════════════════════════════
     INPUT
     ═══════════════════════════════════════════════ */

  --input-font: var(--type-data-font);
  --input-font-size: var(--type-data-size);
  --input-radius: var(--radius-sm);
  --input-border: var(--elevation-border);
  --input-border-focus: var(--elevation-border-strong);
  --input-bg: var(--color-surface);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-muted);
  --input-transition: var(--duration-instant) var(--easing-default);

  /* Sizes */
  --input-sm-height: 28px;
  --input-sm-padding-x: var(--space-sm);

  --input-md-height: 36px;
  --input-md-padding-x: var(--space-sm);

  --input-lg-height: 44px;
  --input-lg-padding-x: var(--space-md);

  /* Label (always mono) */
  --input-label-font: var(--type-label-font);
  --input-label-size: var(--type-label-size);
  --input-label-tracking: var(--type-label-tracking);
  --input-label-color: var(--color-text-secondary);
  --input-label-gap: var(--space-xs);

  /* Help text */
  --input-help-font: var(--type-body-sm-font);
  --input-help-size: var(--type-body-sm-size);
  --input-help-color: var(--color-text-muted);
  --input-help-gap: var(--space-xs);

  /* Error state */
  --input-error-border-color: var(--color-destructive);
  --input-error-text: var(--color-destructive);

  /* Toggle */
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-radius: var(--radius-pill);
  --toggle-bg-off: var(--color-surface-tertiary);
  --toggle-bg-on: var(--color-accent);
  --toggle-knob-size: var(--icon-size-sm);
  --toggle-knob-color: var(--color-surface);

  /* Checkbox */
  --checkbox-size: var(--icon-size-sm);
  --checkbox-radius: var(--radius-sm);
  --checkbox-border: var(--elevation-border-strong);
  --checkbox-bg-checked: var(--color-accent);
  --checkbox-check-color: var(--color-text-on-accent);

  /* ═══════════════════════════════════════════════
     HERO
     ═══════════════════════════════════════════════ */

  /* Scrim laid over a hero background image so the text tokens keep their
     contrast on any photo. Surface-tinted (not black/white) so it follows
     the theme — raise the mix % for busier imagery. */
  --hero-scrim: color-mix(in srgb, var(--color-surface) 78%, transparent);

  /* ═══════════════════════════════════════════════
     CARD
     ═══════════════════════════════════════════════ */

  --card-radius: var(--radius-md);
  --card-padding: var(--space-lg);
  --card-bg: var(--color-surface);
  --card-transition: var(--duration-instant) var(--easing-default);

  /* Flat variant (no elevation) */
  --card-flat-border: none;
  --card-flat-shadow: none;

  /* Bordered variant (exposed mechanism default) */
  --card-bordered-border: var(--elevation-border);
  --card-bordered-shadow: none;

  /* Elevated variant (floating) */
  --card-elevated-border: none;
  --card-elevated-shadow: var(--elevation-raised);

  /* Interactive states */
  --card-interactive-hover-border: var(--elevation-border-strong);
  --card-interactive-active-bg: var(--color-surface-secondary);
  --card-selected-border-color: var(--color-accent);

  /* ═══════════════════════════════════════════════
     NAVIGATION — SIDEBAR
     ═══════════════════════════════════════════════ */

  --nav-sidebar-width: 240px;
  --nav-sidebar-width-collapsed: 48px;
  --nav-sidebar-bg: var(--color-surface-secondary);
  --nav-sidebar-border: var(--elevation-border);
  --nav-sidebar-padding: var(--space-sm);

  --nav-item-height: 32px;
  --nav-item-padding-x: var(--space-sm);
  --nav-item-radius: var(--radius-sm);
  --nav-item-font: var(--type-label-font);
  --nav-item-font-size: var(--type-label-size);
  --nav-item-tracking: var(--type-label-tracking);
  --nav-item-color: var(--color-text-secondary);
  --nav-item-color-hover: var(--color-text);
  --nav-item-color-active: var(--color-text);
  --nav-item-bg-hover: var(--color-surface-tertiary);
  --nav-item-bg-active: var(--color-surface);
  --nav-item-transition: var(--duration-instant) var(--easing-default);

  --nav-section-font: var(--type-caption-font);
  --nav-section-size: var(--type-caption-size);
  --nav-section-tracking: var(--type-caption-tracking);
  --nav-section-color: var(--color-text-muted);
  --nav-section-margin-top: var(--space-md);

  /* ═══════════════════════════════════════════════
     NAVIGATION — MOBILE HEADER
     ═══════════════════════════════════════════════ */

  --nav-mobile-header-height: 48px;
  --nav-mobile-header-bg: var(--color-surface-secondary);
  --nav-mobile-header-border: var(--elevation-border);

  /* Stacking order */
  --nav-mobile-header-z: 20;
  --nav-sidebar-backdrop-z: 25;
  --nav-sidebar-drawer-z: 30;

  /* ═══════════════════════════════════════════════
     NAVIGATION — BOTTOM BAR
     ═══════════════════════════════════════════════ */

  --nav-bottom-height: 56px;
  --nav-bottom-bg: var(--color-surface);
  --nav-bottom-border-top: var(--elevation-border);
  --nav-bottom-item-color: var(--color-text-muted);
  --nav-bottom-item-color-active: var(--color-accent);
  --nav-bottom-item-font: var(--type-caption-font);
  --nav-bottom-item-size: var(--type-caption-size);

  /* ═══════════════════════════════════════════════
     NAVIGATION — SERVICE & SECTION (PUBLIC PORTAL)
     ═══════════════════════════════════════════════ */

  /* Active-item underline bar shared by ServiceNavigation (primary tier) and
     SectionNavigation (contextual second band) so both tiers read as one
     system — the single source of truth for the bar thickness. The links fill
     their band's full height so the bar sits flush on the band's bottom border
     (the GOV.UK / National Archives treatment), never floating mid-row. */
  --nav-service-underline: 3px;

  /* Gridded band heights (8px base) — the primary header band and the
     contextual section band below it. */
  --nav-service-height: 64px;
  --nav-section-height: 48px;

  /* Type step-down: the primary tier reads larger than the contextual tier so
     the two-level hierarchy is legible at a glance. */
  --nav-service-link-size: var(--type-body-size);
  --nav-section-link-size: var(--type-body-sm-size);

  /* Width of SiteHeader's unified mobile disclosure panel (the single drawer
     that replaces the per-nav hamburgers). Mirrors the narrow content panel. */
  --nav-menu-panel-width: var(--panel-width-narrow);

  /* Min width of ServiceNavigation's own mobile dropdown (used when the nav is
     rendered standalone, without SiteHeader's unified menu). */
  --nav-service-dropdown-min-width: 12rem;

  /* MegaMenu (#507) — category column sizing + the panel's internal-scroll cap
     so an 8-category panel scrolls inside itself instead of covering the page. */
  --nav-mega-column-min-width: 13rem;
  --nav-mega-panel-max-height: min(70vh, 32rem);

  /* ═══════════════════════════════════════════════
     DATA DISPLAY
     ═══════════════════════════════════════════════ */

  /* Badge */
  --badge-font: var(--type-label-font);
  --badge-size: var(--type-label-size);
  --badge-tracking: var(--type-label-tracking);
  --badge-radius: var(--radius-pill);
  --badge-padding-x: var(--space-sm);
  --badge-padding-y: var(--space-2xs);
  --badge-neutral-bg: var(--color-surface-tertiary);
  --badge-neutral-text: var(--color-text-secondary);

  /* Evidence Seal — TONES, not seal words.
     H1 Slice 2 — westeuropeco/atelier-urban-workspace#57.

     The design system owns the presentation scale (positive / info / caution /
     stale); it does NOT own the seal vocabulary. Which word wears which tone is
     declared data resolved outside this package, so widening or re-wording an
     axis is a declaration change and never a DS release.

     Defaults resolve via semantic color tokens so they work for every theme.
     UBP dark scheme overrides below in tokens/themes/ubp.css to maintain
     WCAG AA on the cool-steel dark surface (#0b182a). */
  --seal-positive-text: var(--color-success);
  --seal-positive-bg: var(--color-success-subtle);
  --seal-info-text: var(--color-info);
  --seal-info-bg: var(--color-info-subtle);
  --seal-caution-text: var(--color-warning);
  --seal-caution-bg: var(--color-warning-subtle);
  /* stale modifier: muted regardless of base evidence state */
  --seal-stale-text: var(--color-text-muted);
  --seal-stale-bg: var(--color-surface-secondary);

  /* Tag */
  --tag-font: var(--type-label-font);
  --tag-size: var(--type-label-size);
  --tag-radius: var(--radius-sm);
  --tag-padding-x: var(--space-sm);
  --tag-padding-y: var(--space-2xs);
  --tag-border: var(--elevation-border);
  --tag-bg: var(--color-surface);
  --tag-text: var(--color-text-secondary);

  /* Key-value pair */
  --kv-key-font: var(--type-label-font);
  --kv-key-size: var(--type-label-size);
  --kv-key-color: var(--color-text-muted);
  --kv-value-font: var(--type-data-font);
  --kv-value-size: var(--type-data-size);
  --kv-value-color: var(--color-text);
  --kv-gap: var(--space-xs);

  /* Status indicator */
  --status-dot-size: var(--space-sm);
  --status-font: var(--type-label-font);
  --status-size: var(--type-label-size);
  --status-gap: var(--space-xs);

  /* ═══════════════════════════════════════════════
     FEEDBACK
     ═══════════════════════════════════════════════ */

  /* Toast */
  --toast-radius: var(--radius-md);
  --toast-padding: var(--space-md);
  --toast-shadow: var(--elevation-overlay);
  --toast-bg: var(--color-surface);
  --toast-border: var(--elevation-border);
  --toast-font: var(--type-body-sm-font);
  --toast-font-size: var(--type-body-sm-size);
  --toast-max-width: 360px;

  /* Toast Manager */
  --toast-manager-z: 60;
  --toast-manager-gap: var(--space-sm);
  --toast-manager-padding: var(--space-lg);
  --toast-manager-enter-offset: 16px;

  /* Notification Bell */
  --notification-panel-width: 360px;
  --notification-panel-max-height: 420px;

  /* Empty state */
  --empty-icon-size: var(--icon-size-2xl);
  --empty-icon-color: var(--color-text-muted);
  --empty-heading-font: var(--type-heading-font);
  --empty-heading-size: var(--type-heading-size);
  --empty-body-font: var(--type-body-sm-font);
  --empty-body-size: var(--type-body-sm-size);
  --empty-body-color: var(--color-text-secondary);
  --empty-gap: var(--space-md);

  /* Skeleton */
  --skeleton-bg: var(--color-surface-tertiary);
  --skeleton-shine: var(--color-surface-secondary);
  --skeleton-radius: var(--radius-sm);
  --skeleton-duration: 1.5s;

  /* ═══════════════════════════════════════════════
     PANEL / DRAWER (slide-over surface)
     ═══════════════════════════════════════════════ */

  --panel-width: 480px;
  --panel-width-narrow: 360px;
  --panel-width-wide: 640px;
  --panel-bg: var(--color-surface);
  --panel-border: var(--elevation-border);
  --panel-shadow: var(--elevation-overlay);
  --panel-radius: 0;
  --panel-header-height: 56px;
  --panel-header-border: var(--elevation-border);
  --panel-header-font: var(--type-heading-sm-font);
  --panel-header-size: var(--type-heading-sm-size);
  --panel-header-weight: var(--type-heading-sm-weight);
  --panel-padding: var(--space-lg);
  --panel-transition: var(--duration-normal) var(--easing-enter);
  --panel-backdrop: var(--color-overlay);
  --panel-close-size: 28px;
  --panel-close-icon-size: var(--icon-size-sm);
  --panel-z-backdrop: 200;
  --panel-z-panel: 201;

  /* ═══════════════════════════════════════════════
     STEPPER (wizard / multi-step flow)
     ═══════════════════════════════════════════════ */

  --stepper-dot-size: var(--icon-size-xl);
  --stepper-dot-font: var(--type-label-font);
  --stepper-dot-size-text: var(--type-label-size);
  --stepper-dot-tracking: var(--type-label-tracking);
  --stepper-dot-bg: var(--color-surface-tertiary);
  --stepper-dot-color: var(--color-text-secondary);
  --stepper-dot-border: none;
  --stepper-active-bg: var(--color-accent);
  --stepper-active-color: var(--color-text-on-accent);
  --stepper-complete-bg: var(--color-success);
  --stepper-complete-color: var(--color-text-on-accent);
  --stepper-line-color: var(--color-border);
  --stepper-line-width: var(--border-width-thick);
  --stepper-label-font: var(--type-label-font);
  --stepper-label-size: var(--type-label-size);
  --stepper-label-tracking: var(--type-label-tracking);
  --stepper-label-color: var(--color-text-muted);
  --stepper-label-active-color: var(--color-text);
  --stepper-gap: var(--space-sm);
  --stepper-transition: var(--duration-fast) var(--easing-default);

  /* ═══════════════════════════════════════════════
     CODE BLOCK (editor / syntax display)
     ═══════════════════════════════════════════════ */

  --code-font: var(--type-data-font);
  --code-font-size: var(--type-data-size);
  --code-line-height: var(--type-data-leading);
  --code-bg: var(--color-surface-secondary);
  --code-text: var(--color-text);
  --code-border: var(--elevation-border);
  --code-radius: var(--radius-sm);
  --code-padding: var(--space-md);
  --code-line-number-color: var(--color-text-muted);
  --code-line-number-width: 48px;
  --code-gutter-bg: var(--color-surface-tertiary);
  --code-gutter-border: var(--elevation-border);
  --code-selection-bg: var(--color-accent-subtle);
  --code-cursor-color: var(--color-accent);

  /* ═══════════════════════════════════════════════
     TEXTAREA
     ═══════════════════════════════════════════════ */

  --textarea-min-height: 80px;
  --textarea-padding: var(--space-sm);

  /* ═══════════════════════════════════════════════
     SEPARATOR
     ═══════════════════════════════════════════════ */

  --separator-color: var(--color-border);
  --separator-thickness: var(--border-width-default);

  /* ═══════════════════════════════════════════════
     PROGRESS
     ═══════════════════════════════════════════════ */

  --progress-height: var(--space-sm);
  --progress-radius: var(--radius-pill);
  --progress-bg: var(--color-surface-tertiary);
  --progress-fill: var(--color-accent);
  --progress-transition: var(--duration-fast) var(--easing-default);
  --progress-indeterminate-duration: 1.5s;

  /* ═══════════════════════════════════════════════
     ALERT (inline callout)
     ═══════════════════════════════════════════════ */

  --alert-radius: var(--radius-md);
  --alert-padding: var(--space-md);
  --alert-border: var(--elevation-border);
  --alert-bg: var(--color-surface);
  --alert-font: var(--type-body-sm-font);
  --alert-font-size: var(--type-body-sm-size);

  /* ═══════════════════════════════════════════════
     TABS
     ═══════════════════════════════════════════════ */

  --tabs-list-bg: var(--color-surface-secondary);
  --tabs-list-radius: var(--radius-md);
  --tabs-list-padding: var(--space-2xs);
  --tabs-trigger-font: var(--type-label-font);
  --tabs-trigger-size: var(--type-label-size);
  --tabs-trigger-tracking: var(--type-label-tracking);
  --tabs-trigger-height: 32px;
  --tabs-trigger-padding-x: var(--space-md);
  --tabs-trigger-radius: var(--radius-sm);
  --tabs-trigger-color: var(--color-text-secondary);
  --tabs-trigger-color-active: var(--color-text);
  --tabs-trigger-bg-active: var(--color-surface);
  --tabs-trigger-shadow-active: var(--elevation-raised);
  --tabs-trigger-transition: var(--duration-instant) var(--easing-default);
  --tabs-content-padding-top: var(--space-md);

  /* ═══════════════════════════════════════════════
     FEEDVIEW (segmented view-switch — list ⇄ map)
     ═══════════════════════════════════════════════ */

  --feedview-bg: var(--color-surface-secondary);
  --feedview-radius: var(--radius-md);
  --feedview-padding: var(--space-2xs);
  --feedview-tab-font: var(--type-label-font);
  --feedview-tab-size: var(--type-label-size);
  --feedview-tab-tracking: var(--type-label-tracking);
  --feedview-tab-height: 32px;
  --feedview-tab-padding-x: var(--space-md);
  --feedview-tab-radius: var(--radius-sm);
  --feedview-tab-color: var(--color-text-secondary);
  --feedview-tab-color-active: var(--color-text);
  --feedview-tab-bg-active: var(--color-surface);
  --feedview-tab-shadow-active: var(--elevation-raised);
  --feedview-tab-transition: var(--duration-instant) var(--easing-default);

  /* ═══════════════════════════════════════════════
     MODAL (centered overlay)
     ═══════════════════════════════════════════════ */

  --modal-width: 480px;
  --modal-width-sm: 360px;
  --modal-width-lg: 640px;
  --modal-bg: var(--color-surface);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--elevation-overlay);
  --modal-padding: var(--space-lg);
  --modal-header-height: 56px;
  --modal-header-border: var(--elevation-border);
  --modal-header-font: var(--type-heading-sm-font);
  --modal-header-size: var(--type-heading-sm-size);
  --modal-header-weight: var(--type-heading-sm-weight);
  --modal-backdrop: var(--color-overlay);
  --modal-transition: var(--duration-normal) var(--easing-enter);

  /* ═══════════════════════════════════════════════
     ACCENT STRIPE
     ═══════════════════════════════════════════════ */

  --accent-stripe-width: 3px;

  /* ═══════════════════════════════════════════════
     LIST
     ═══════════════════════════════════════════════ */

  --list-gap: var(--space-sm);
  --list-border: var(--elevation-border);
  --list-border-radius: var(--radius-md);

  /* ═══════════════════════════════════════════════
     LIST ITEM
     ═══════════════════════════════════════════════ */

  --list-item-padding-x: var(--space-md);
  --list-item-padding-y: var(--space-sm);
  --list-item-gap: var(--space-md);
  --list-item-bg: var(--color-surface);
  --list-item-bg-hover: var(--color-surface-secondary);
  --list-item-divider: var(--elevation-border);
  --list-item-transition: var(--duration-instant) var(--easing-default);
  --list-item-leading-gap: var(--space-xs);
  --list-item-trailing-gap: var(--space-xs);

  /* ═══════════════════════════════════════════════
     TREE
     ═══════════════════════════════════════════════ */

  --tree-gap: var(--space-2xs);
  --tree-indent: var(--space-md);
  --tree-node-padding-x: var(--space-sm);
  --tree-node-padding-y: var(--space-xs);
  --tree-node-radius: var(--radius-sm);
  --tree-node-font: var(--type-body-font);
  --tree-node-font-size: var(--type-body-size);
  --tree-node-color: var(--color-text);
  --tree-node-color-hover: var(--color-text);
  --tree-node-color-selected: var(--color-text);
  --tree-node-bg-hover: var(--color-surface-secondary);
  --tree-node-bg-selected: var(--color-surface-tertiary);
  --tree-node-caret-color: var(--color-text-secondary);
  --tree-node-transition: var(--duration-instant) var(--easing-default);

  /* ═══════════════════════════════════════════════
     FILE UPLOAD
     ═══════════════════════════════════════════════ */

  --fileupload-border: var(--border-width-thick) dashed var(--color-border);
  --fileupload-border-dragging: var(--border-width-thick) solid
    var(--color-accent);
  --fileupload-radius: var(--radius-md);
  --fileupload-padding: var(--space-xl);
  --fileupload-bg: transparent;
  --fileupload-bg-dragging: var(--color-accent-subtle);
  --fileupload-transition: var(--duration-fast) var(--easing-default);
  --fileupload-icon-size: var(--icon-size-xl);
  --fileupload-icon-color: var(--color-text-muted);
  --fileupload-icon-color-dragging: var(--color-accent);
  --fileupload-text-font: var(--type-body-sm-font);
  --fileupload-text-size: var(--type-body-sm-size);
  --fileupload-text-color: var(--color-text-secondary);
  --fileupload-hint-font: var(--type-caption-font);
  --fileupload-hint-size: var(--type-caption-size);
  --fileupload-hint-color: var(--color-text-muted);

  /* ═══════════════════════════════════════════════
     FILE UPLOAD ITEM
     ═══════════════════════════════════════════════ */

  --fileupload-item-padding: var(--space-sm) var(--space-md);
  --fileupload-item-gap: var(--space-sm);
  --fileupload-item-radius: var(--radius-sm);
  --fileupload-item-bg: var(--color-surface);
  --fileupload-item-border: var(--elevation-border);
  --fileupload-item-name-font: var(--type-body-sm-font);
  --fileupload-item-name-size: var(--type-body-sm-size);
  --fileupload-item-name-color: var(--color-text);
  --fileupload-item-size-font: var(--type-caption-font);
  --fileupload-item-size-size: var(--type-caption-size);
  --fileupload-item-size-color: var(--color-text-muted);
  --fileupload-item-icon-size: var(--icon-size-md);
  --fileupload-item-error-color: var(--color-destructive);
  --fileupload-item-complete-color: var(--color-success);

  /* ═══════════════════════════════════════════════
     POPOVER
     ═══════════════════════════════════════════════ */

  --popover-bg: var(--color-surface-raised);
  --popover-border: var(--elevation-border-strong);
  --popover-shadow: var(--elevation-overlay);
  --popover-radius: var(--radius-md);
  --popover-padding: var(--space-sm);
  --popover-z: 50;
  --popover-enter-offset: -4px;

  /* ═══════════════════════════════════════════════
     MENU
     ═══════════════════════════════════════════════ */

  --menu-min-width: 180px;
  --menu-padding: var(--space-xs);
  --menu-item-height: 32px;
  --menu-item-padding-x: var(--space-sm);
  --menu-item-padding-y: var(--space-xs);
  --menu-item-radius: var(--radius-sm);
  --menu-item-gap: var(--space-sm);
  --menu-item-font-size: var(--type-body-sm-size);
  --menu-item-bg-hover: var(--color-surface-secondary);
  --menu-item-color: var(--color-text);
  --menu-item-color-destructive: var(--color-destructive);
  --menu-item-color-disabled: var(--color-text-tertiary);
  --menu-separator-color: var(--color-border);
  --menu-separator-spacing: var(--space-xs);

  /* ═══════════════════════════════════════════════
     COMBOBOX
     ═══════════════════════════════════════════════ */

  --combobox-list-max-height: 240px;
  --combobox-item-padding: var(--space-xs) var(--space-sm);
  --combobox-item-radius: var(--radius-sm);
  --combobox-item-hover-bg: var(--color-surface-secondary);
  --combobox-item-active-bg: var(--color-accent-subtle);
  --combobox-item-active-color: var(--color-accent);
  --combobox-highlight-color: var(--color-accent);
  --combobox-group-font: var(--type-overline-font);
  --combobox-group-size: var(--type-overline-size);
  --combobox-group-tracking: var(--type-overline-tracking);
  --combobox-group-color: var(--color-text-muted);
  --combobox-group-padding: var(--space-sm) var(--space-sm) var(--space-xs);
  --combobox-description-font: var(--type-caption-font);
  --combobox-description-size: var(--type-caption-size);
  --combobox-description-color: var(--color-text-muted);
  --combobox-empty-color: var(--color-text-muted);

  /* ═══════════════════════════════════════════════
     CONDITION TABLE
     ═══════════════════════════════════════════════ */

  --condition-table-header-gap: var(--space-sm);
  --condition-table-row-gap: var(--space-md);
  --condition-table-empty-color: var(--color-text-secondary);

  /* ═══════════════════════════════════════════════
     LOG VIEWER (structured log display)
     ═══════════════════════════════════════════════ */

  --log-viewer-bg: var(--color-surface-secondary);
  --log-viewer-border: var(--elevation-border);
  --log-viewer-radius: var(--radius-md);
  --log-viewer-max-height: 480px;

  /* Toolbar */
  --log-viewer-toolbar-padding: var(--space-md);
  --log-viewer-toolbar-gap: var(--space-lg);
  --log-viewer-toolbar-border: var(--elevation-border);

  /* Entry rows */
  --log-viewer-entry-padding-x: var(--space-md);
  --log-viewer-entry-padding-y: var(--space-xs);
  --log-viewer-entry-font: var(--type-data-font);
  --log-viewer-entry-size: var(--type-data-size);
  --log-viewer-entry-leading: var(--type-data-leading);
  --log-viewer-entry-color: var(--color-text);
  --log-viewer-entry-border: var(--elevation-border);
  --log-viewer-entry-hover-bg: var(--color-surface-tertiary);

  /* Timestamp */
  --log-viewer-timestamp-color: var(--color-text-muted);
  --log-viewer-timestamp-width: 140px;

  /* Level colors (semantic — map to badge variants) */
  --log-viewer-level-info-color: var(--color-text-secondary);
  --log-viewer-level-warning-color: var(--color-warning);
  --log-viewer-level-error-color: var(--color-destructive);

  /* Status bar */
  --log-viewer-status-font: var(--type-caption-font);
  --log-viewer-status-size: var(--type-caption-size);
  --log-viewer-status-color: var(--color-text-muted);
  --log-viewer-status-padding: var(--space-sm) var(--space-md);

  /* ═══════════════════════════════════════════════
     SEARCH INPUT
     ═══════════════════════════════════════════════ */

  --search-icon-size-sm: var(--icon-size-sm);
  --search-icon-size-md: var(--icon-size-sm);
  --search-icon-size-lg: var(--icon-size-md);
  --search-icon-color: var(--color-text-muted);
  --search-icon-color-focus: var(--color-text-secondary);
  --search-clear-color: var(--color-text-muted);
  --search-clear-color-hover: var(--color-text);
  --search-shortcut-font: var(--type-caption-font);
  --search-shortcut-size: var(--type-caption-size);
  --search-shortcut-color: var(--color-text-muted);
  --search-shortcut-bg: var(--color-surface-secondary);
  --search-shortcut-radius: var(--radius-sm);
  --search-shortcut-padding: var(--space-2xs) var(--space-xs);
  --search-spinner-color: var(--color-accent);
  --search-collapse-transition: var(--duration-normal) var(--easing-default);

  /* ═══════════════════════════════════════════════
     FILTER BAR
     ═══════════════════════════════════════════════ */

  --filter-chip-font: var(--type-label-font);
  --filter-chip-size: var(--type-label-size);
  --filter-chip-tracking: var(--type-label-tracking);
  --filter-chip-height: var(--button-sm-height);
  --filter-chip-radius: var(--radius-pill);
  --filter-chip-padding: 0 var(--space-sm);
  --filter-chip-gap: var(--space-xs);
  --filter-chip-bg: var(--color-surface);
  --filter-chip-bg-hover: var(--color-surface-secondary);
  --filter-chip-bg-active: var(--color-accent-subtle);
  --filter-chip-color: var(--color-text-secondary);
  --filter-chip-color-active: var(--color-accent);
  --filter-chip-border: var(--elevation-border);
  --filter-chip-border-active: var(--border-width) solid var(--color-accent);
  --filter-chip-transition: var(--duration-instant) var(--easing-default);
  --filter-bar-gap: var(--space-xs);
  --filter-bar-clear-color: var(--color-text-muted);
  --filter-bar-clear-color-hover: var(--color-text);

  /* ═══════════════════════════════════════════════
     COMMAND PALETTE
     ═══════════════════════════════════════════════ */

  --palette-top-offset: 20vh;
  --palette-width: 560px;
  --palette-max-height: 420px;
  --palette-bg: var(--color-surface);
  --palette-radius: var(--radius-lg);
  --palette-shadow: var(--elevation-overlay);
  --palette-backdrop: var(--color-overlay);
  --palette-input-height: 48px;
  --palette-input-padding: 0 var(--space-md);
  --palette-input-font: var(--type-body-font);
  --palette-input-size: var(--type-body-size);
  --palette-input-border: var(--elevation-border);
  --palette-list-max-height: 340px;
  --palette-list-padding: var(--space-xs);
  --palette-item-padding: var(--space-sm) var(--space-md);
  --palette-item-radius: var(--radius-sm);
  --palette-item-hover-bg: var(--color-surface-secondary);
  --palette-item-active-bg: var(--color-accent-subtle);
  --palette-item-active-color: var(--color-accent);
  --palette-group-font: var(--type-overline-font);
  --palette-group-size: var(--type-overline-size);
  --palette-group-tracking: var(--type-overline-tracking);
  --palette-group-color: var(--color-text-muted);
  --palette-group-padding: var(--space-sm) var(--space-md) var(--space-xs);
  --palette-shortcut-font: var(--type-caption-font);
  --palette-shortcut-size: var(--type-caption-size);
  --palette-shortcut-color: var(--color-text-muted);
  --palette-shortcut-bg: var(--color-surface-secondary);
  --palette-shortcut-radius: var(--radius-sm);
  --palette-shortcut-padding: var(--space-2xs) var(--space-xs);
  --palette-empty-color: var(--color-text-muted);
  --palette-empty-font: var(--type-body-font);
  --palette-empty-size: var(--type-body-size);
  --palette-highlight-color: var(--color-accent);
  --palette-transition: var(--duration-normal) var(--easing-enter);

  /* ═══════════════════════════════════════════════
     DATEPICKER
     ═══════════════════════════════════════════════ */

  --datepicker-calendar-padding: var(--space-sm);

  /* Navigation bar */
  --datepicker-nav-font: var(--type-label-font);
  --datepicker-nav-size: var(--type-label-size);
  --datepicker-nav-tracking: var(--type-label-tracking);
  --datepicker-nav-color: var(--color-text);
  --datepicker-nav-btn-size: var(--button-sm-height);
  --datepicker-nav-btn-radius: var(--radius-sm);
  --datepicker-nav-btn-hover-bg: var(--color-surface-secondary);

  /* Weekday headers */
  --datepicker-weekday-font: var(--type-label-font);
  --datepicker-weekday-size: var(--type-caption-size);
  --datepicker-weekday-tracking: var(--type-caption-tracking);
  --datepicker-weekday-color: var(--color-text-muted);

  /* Day cells */
  --datepicker-day-size: var(--button-md-height);
  --datepicker-day-font: var(--type-data-font);
  --datepicker-day-font-size: var(--type-body-sm-size);
  --datepicker-day-radius: var(--radius-sm);
  --datepicker-day-hover-bg: var(--color-surface-secondary);
  --datepicker-day-selected-bg: var(--color-accent);
  --datepicker-day-selected-text: var(--color-text-on-accent);
  --datepicker-day-today-border: var(--border-width) solid
    var(--color-border-strong);
  --datepicker-day-outside-opacity: 0.3;
  --datepicker-day-disabled-opacity: 0.2;

  /* Trigger (inherits --input-* for visual consistency) */
  --datepicker-icon-size: var(--icon-size-sm);
  --datepicker-icon-color: var(--color-text-muted);
  --datepicker-placeholder-color: var(--input-placeholder);

  /* Range selection (DateRangePicker) */
  --datepicker-range-bg: var(--color-accent-subtle);
  --datepicker-range-hover-bg: var(--color-surface-tertiary);
  --datepicker-range-endpoint-bg: var(--color-accent);
  --datepicker-range-endpoint-text: var(--color-text-on-accent);

  /* ═══════════════════════════════════════════════
     STAT CARD
     ═══════════════════════════════════════════════ */

  --stat-padding: var(--space-lg);
  --stat-radius: var(--radius-md);
  --stat-border: var(--elevation-border);
  --stat-bg: var(--color-surface);

  /* Value (large number) */
  --stat-value-font: var(--type-display-font);
  --stat-value-size: var(--type-display-size);
  --stat-value-weight: var(--type-display-weight);
  --stat-value-tracking: var(--type-display-tracking);

  /* Label */
  --stat-label-font: var(--type-label-font);
  --stat-label-size: var(--type-label-size);
  --stat-label-tracking: var(--type-label-tracking);
  --stat-label-color: var(--color-text-muted);

  /* Trend */
  --stat-trend-font: var(--type-body-sm-font);
  --stat-trend-size: var(--type-body-sm-size);
  --stat-trend-up-color: var(--color-success);
  --stat-trend-down-color: var(--color-destructive);
  --stat-trend-neutral-color: var(--color-text-muted);

  /* Icon */
  --stat-icon-size: var(--icon-size-lg);
  --stat-icon-color: var(--color-text-muted);

  /* Grid */
  --stat-grid-gap: var(--space-md);

  /* ═══════════════════════════════════════════════
     MAP
     ═══════════════════════════════════════════════ */

  --map-radius: var(--radius-md);
  --map-border: var(--elevation-border);

  /* Marker */
  --map-marker-radius: var(--space-sm);
  --map-marker-fill: var(--color-accent);
  --map-marker-stroke: var(--color-surface);
  --map-marker-stroke-width: var(--border-width-thick);

  /* Cluster */
  --map-cluster-radius: var(--space-md);
  --map-cluster-fill: var(--color-accent);
  --map-cluster-text-fill: var(--color-text-on-accent);
  --map-cluster-font: var(--type-label-font);
  --map-cluster-font-size: var(--type-label-size);

  /* Polygon / draw */
  --map-polygon-fill: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --map-polygon-stroke: var(--color-accent);
  --map-polygon-stroke-width: var(--border-width-thick);

  /* Boundary overlay (#187 — tenant geofence context, not content) */
  --map-boundary-fill: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --map-boundary-stroke: var(--map-polygon-stroke);
  --map-boundary-stroke-width: var(--map-polygon-stroke-width);
  --map-boundary-dash: var(--space-sm);

  /* Heatmap (accent-derived sequential ramp — follows theme) */
  --map-heatmap-stop-1: var(--color-accent-subtle);
  --map-heatmap-stop-2: color-mix(
    in srgb,
    var(--color-accent) 60%,
    var(--color-accent-subtle)
  );
  --map-heatmap-stop-3: var(--color-accent);
  --map-heatmap-stop-4: var(--color-accent-hover);

  /* Popup (inherits card tokens) */
  --map-popup-bg: var(--card-bg);
  --map-popup-border: var(--elevation-border-strong);
  --map-popup-radius: var(--card-radius);
  --map-popup-padding: var(--space-sm);
  --map-popup-shadow: var(--elevation-overlay);
  --map-popup-arrow-size: var(--space-sm);
  --map-popup-max-width: var(--content-width-narrow);

  /* Draw mode toolbar */
  --map-toolbar-bg: var(--color-surface);
  --map-toolbar-border: var(--elevation-border);
  --map-toolbar-radius: var(--radius-sm);
  --map-toolbar-padding: var(--space-2xs);

  /* ═══════════════════════════════════════════════
     CALENDAR
     ═══════════════════════════════════════════════ */

  /* Container */
  --calendar-bg: var(--color-surface);
  --calendar-border: var(--elevation-border);
  --calendar-radius: var(--radius-md);
  --calendar-padding: var(--space-md);

  /* Toolbar */
  --calendar-toolbar-gap: var(--space-sm);
  --calendar-title-font: var(--type-heading-font);
  --calendar-title-size: var(--type-heading-size);
  --calendar-title-weight: var(--type-heading-weight);
  --calendar-title-tracking: var(--type-heading-tracking);
  --calendar-title-color: var(--color-text);

  /* View toggle */
  --calendar-toggle-font: var(--type-label-font);
  --calendar-toggle-size: var(--type-label-size);
  --calendar-toggle-tracking: var(--type-label-tracking);
  --calendar-toggle-padding: var(--space-2xs) var(--space-sm);
  --calendar-toggle-radius: var(--radius-sm);
  --calendar-toggle-color: var(--color-text-secondary);
  --calendar-toggle-hover-bg: var(--color-surface-secondary);
  --calendar-toggle-active-bg: var(--color-accent);
  --calendar-toggle-active-text: var(--color-text-on-accent);

  /* Navigation buttons */
  --calendar-nav-btn-size: var(--button-sm-height);
  --calendar-nav-btn-radius: var(--radius-sm);
  --calendar-nav-btn-hover-bg: var(--color-surface-secondary);

  /* Weekday headers */
  --calendar-weekday-font: var(--type-label-font);
  --calendar-weekday-size: var(--type-caption-size);
  --calendar-weekday-tracking: var(--type-caption-tracking);
  --calendar-weekday-color: var(--color-text-muted);
  --calendar-weekday-height: var(--space-xl);

  /* Month cell */
  --calendar-cell-min-height: var(--space-4xl);
  --calendar-cell-border: var(--border-width) solid var(--color-border);
  --calendar-cell-padding: var(--space-2xs);
  --calendar-cell-hover-bg: var(--color-surface-secondary);
  --calendar-cell-today-bg: var(--color-accent-subtle);

  /* Day number */
  --calendar-day-font: var(--type-data-font);
  --calendar-day-size: var(--type-body-sm-size);
  --calendar-day-color: var(--color-text);
  --calendar-day-outside-opacity: 0.3;
  --calendar-day-today-size: var(--space-lg);
  --calendar-day-today-bg: var(--color-accent);
  --calendar-day-today-text: var(--color-text-on-accent);

  /* Time gutter (week/day views) */
  --calendar-time-font: var(--type-data-font);
  --calendar-time-size: var(--type-caption-size);
  --calendar-time-color: var(--color-text-muted);
  --calendar-time-width: var(--space-3xl);

  /* Hour slot (week/day views) */
  --calendar-slot-height: var(--space-2xl);
  --calendar-slot-border: var(--border-width) solid var(--color-border);

  /* Now indicator */
  --calendar-now-color: var(--color-destructive);
  --calendar-now-width: var(--border-width-thick);

  /* Event block */
  --calendar-event-font: var(--type-body-sm-font);
  --calendar-event-size: var(--type-caption-size);
  --calendar-event-weight: var(--type-body-sm-weight);
  --calendar-event-radius: var(--radius-sm);
  --calendar-event-padding: var(--space-2xs) var(--space-xs);
  --calendar-event-default-bg: var(--color-accent);
  --calendar-event-default-text: var(--color-text-on-accent);

  /* Overflow indicator */
  --calendar-overflow-font: var(--type-caption-font);
  --calendar-overflow-size: var(--type-caption-size);
  --calendar-overflow-color: var(--color-text-muted);

  /* ═══════════════════════════════════════════════
     FOCUS RING (global)
     ═══════════════════════════════════════════════ */

  --focus-ring-width: var(--border-width-thick);
  --focus-ring-offset: var(--border-width-thick);
  --focus-ring-color: var(--color-accent);
}