/* bmsdock v11 — Global UI Final Freeze token map
 *
 * Architecture-only foundation for the approved BMSDock UI/UX baseline.
 * These tokens describe existing approved values; they do not redesign components.
 * Frozen component owners now consume proven shared primitives through stable local aliases.
 * Component-specific exceptions remain local when semantic equivalence is not proven.
 */

:root {
  /* Typography primitives and semantic roles. */
  --ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ui-font-body-size: 14px;
  --ui-font-control-size: 14px;
  --ui-font-title-size: 18px;
  --ui-font-feature-title-size: 16px;
  --ui-font-technical-size: 12px;

  /* Spec-facing aliases. */
  --ui-font-body: var(--ui-font-body-size);
  --ui-font-control: var(--ui-font-control-size);
  --ui-font-title: var(--ui-font-title-size);
  --ui-font-feature-title: var(--ui-font-feature-title-size);
  --ui-font-technical: var(--ui-font-technical-size);

  --ui-weight-regular: 400;
  --ui-weight-semibold: 600;
  --ui-weight-bold: 700;

  /* Shared neutral / state palette already present in the approved UI. */
  --ui-color-text: #111827;
  --ui-color-muted: #64748b;
  --ui-color-subtle: #94a3b8;
  --ui-color-border: #e2e8f0;
  --ui-color-surface: #ffffff;
  --ui-color-surface-soft: #f8fafc;
  --ui-color-primary: #22c55e;
  --ui-color-primary-hover: #16a34a;
  --ui-color-danger: #dc2626;

  --ui-state-focus-neutral: rgba(148, 163, 184, .28);
  --ui-state-focus-soft: rgba(148, 163, 184, .18);
  --ui-state-focus-primary: rgba(34, 197, 94, .26);

  /* Approved control categories. Different categories intentionally keep different geometry. */
  --ui-control-compact-height: 34px;
  --ui-control-action-height: 44px;
  --ui-control-touch-size: 44px;
  --ui-control-refresh-size: 34px;

  /* Semantic radii. Component-specific exceptions remain local until migration proves reuse. */
  --ui-radius-control: 10px;
  --ui-radius-card: 14px;
  --ui-radius-panel: 26px;
  --ui-radius-panel-mobile: 22px;
  --ui-radius-menu: 12px;
  --ui-radius-menu-item: 9px;

  /* Shared spacing scale. Existing approved 7/9/10px/etc. values are NOT normalized here. */
  --ui-space-4: 4px;
  --ui-space-8: 8px;
  --ui-space-12: 12px;
  --ui-space-16: 16px;
  --ui-space-20: 20px;
  --ui-space-24: 24px;
}

/* Shared map / toolbar control state tokens retained as compatibility API. */
:root {
  --ui-control-color: 15, 23, 42;
  --ui-control-opacity-default: .60;
  --ui-control-opacity-interactive: .70;
  --ui-control-opacity-off: .30;

  --ui-control-bg-default: rgba(var(--ui-control-color), var(--ui-control-opacity-default));
  --ui-control-bg-interactive: rgba(var(--ui-control-color), var(--ui-control-opacity-interactive));
  --ui-control-bg-off: rgba(var(--ui-control-color), var(--ui-control-opacity-off));

  --ui-control-fg: #ffffff;
  --ui-control-border: rgba(255, 255, 255, .10);
  --ui-control-focus: var(--ui-state-focus-neutral);
  --ui-control-shadow: 0 6px 18px rgba(15, 23, 42, .18);
  --ui-control-transition: 140ms ease;

  --ui-control-park-bg: rgba(255, 178, 0, .96);
  --ui-control-park-fg: var(--ui-color-text);

  /* Shared non-map action controls. */
  --ui-action-height: var(--ui-control-action-height);
  --ui-action-radius: var(--ui-radius-control);
  --ui-action-font-size: var(--ui-font-control);
  --ui-action-font-weight: var(--ui-weight-bold);
  --ui-action-icon-size: 20px;
  --ui-action-gap: 6px;
  --ui-action-padding-x: 14px;
  --ui-action-primary-bg: var(--ui-color-primary);
  --ui-action-primary-bg-hover: var(--ui-color-primary-hover);
  --ui-action-primary-fg: #ffffff;
  --ui-action-neutral-bg: var(--ui-color-surface-soft);
  --ui-action-neutral-bg-hover: var(--ui-color-surface);
  --ui-action-neutral-fg: var(--ui-color-text);
  --ui-action-border: var(--ui-color-border);
  --ui-action-danger-bg: #fff7f7;
  --ui-action-danger-fg: var(--ui-color-danger);
  --ui-action-focus: var(--ui-state-focus-soft);
}

/* Top controls, playback and menu compatibility tokens. */
:root {
  --top-control-size: var(--ui-control-touch-size);
  --top-control-radius: 50%;
  --top-control-icon: 22px;
  --top-control-gap: 10px;

  --playback-control-size: 54px;
  --playback-control-radius: 16px;
  --playback-content-size: 28px;

  --top-menu-bg: rgba(255, 255, 255, .30);
  --top-menu-border: rgba(226, 232, 240, .95);
  --top-menu-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  --top-menu-radius: var(--ui-radius-menu);
  --top-menu-item-radius: var(--ui-radius-menu-item);
  --top-menu-item-h: 38px;
  --top-menu-font: var(--ui-font-control);
  --top-menu-text: var(--ui-color-text);
  --top-menu-muted: var(--ui-color-muted);
  --top-menu-active-bg: var(--ui-color-primary-hover);
  --top-menu-active-text: #ffffff;

  --top-menu-item-bg: rgba(255, 255, 255, .50);
  --top-menu-item-bg-hover: rgba(255, 255, 255, .60);
  --top-menu-item-border: rgba(226, 232, 240, .42);
}

/* Shared panel shell compatibility tokens. */
:root {
  --ui-panel-overlay-bg: rgba(15, 23, 42, .42);
  --ui-panel-overlay-blur: 4px;
  --ui-panel-surface: rgba(255, 255, 255, .96);
  --ui-panel-border: rgba(226, 232, 240, .95);
  --ui-panel-shadow: 0 18px 45px rgba(15, 23, 42, .25);
  --ui-panel-settings-radius: var(--ui-radius-panel);
  --ui-panel-settings-radius-mobile: var(--ui-radius-panel-mobile);
  --ui-panel-overlay-gutter: 22px;
  --ui-panel-settings-gutter: var(--ui-space-16);

  /* Shared modal close control. */
  --ui-panel-close-size: var(--ui-control-refresh-size);
  --ui-panel-close-bg: var(--ui-color-surface-soft);
  --ui-panel-close-bg-hover: #f1f5f9;
  --ui-panel-close-border: var(--ui-color-border);
  --ui-panel-close-fg: var(--ui-color-muted);
  --ui-panel-close-focus: var(--ui-state-focus-neutral);
}