/**
 * App tokens — mapped to Trimble Modus variables + Open Bolt theme.
 */

[data-theme="open-bolt-light"],
[data-theme="open-bolt-dark"] {
  --space-1: var(--modus-wc-spacing-sm);
  --space-2: var(--modus-wc-spacing-lg);
  --space-3: var(--modus-wc-spacing-xl);

  --radius-sm: var(--modus-wc-border-radius-md);
  --radius-md: var(--modus-wc-border-radius-lg);

  --font-sans: var(--modus-wc-font-family);

  --color-bg: var(--modus-wc-color-base-page);
  --color-surface: var(--modus-wc-color-base-100);
  --color-surface-2: var(--modus-wc-color-base-200);
  --color-primary: var(--modus-wc-color-primary);
  --color-primary-hover: var(--ob-primary-hover);
  --color-text: var(--modus-wc-color-base-content);
  --color-muted: var(--modus-wc-color-neutral);
  --color-border: var(--modus-wc-color-base-300);
  --color-error: var(--modus-wc-color-error);
  --color-strike: var(--ob-lightning);
  --color-strike-glow: var(--ob-lightning-glow);
  --color-strike-selected: var(--ob-selected);
  --color-strike-selected-glow: var(--ob-selected-glow);
  --color-map-label-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(255, 255, 255, 0.7);
  --color-attribution-bg: color-mix(in srgb, var(--modus-wc-color-base-100) 88%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--modus-wc-color-base-content) 8%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--modus-wc-color-base-content) 12%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--modus-wc-color-primary) 28%, transparent);
}

[data-theme="open-bolt-dark"] {
  --color-map-label-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.7);
  --color-attribution-bg: color-mix(in srgb, var(--modus-wc-color-base-100) 88%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--modus-wc-font-size-lg);
  line-height: var(--modus-wc-line-height-md);
  color: var(--color-text);
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-init-error {
  position: fixed;
  left: var(--space-2, 16px);
  right: var(--space-2, 16px);
  bottom: var(--space-2, 16px);
  z-index: 3000;
  padding: var(--modus-wc-spacing-md, 12px) var(--modus-wc-spacing-lg, 16px);
  border: 1px solid var(--color-error, #d32f2f);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--color-error, #d32f2f) 12%, var(--color-surface, #fff));
  color: var(--color-text, #171a1c);
  font-size: var(--modus-wc-font-size-sm, 0.875rem);
  box-shadow: var(--shadow-md);
}