/**
 * PropertyManagement (PalmiraIQ) design tokens — single source for visual system.
 * Colors that must theme-switch still flow from Theme.cs → --mud-palette-*.
 * Neutrals / chrome / type / spacing live here as --pm-*.
 */
:root {
  /* Typography */
  --pm-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pm-font-size-body: 0.8125rem;       /* 13px */
  --pm-font-size-ui: 0.75rem;           /* 12px interactive */
  --pm-font-size-meta: 0.6875rem;       /* 11px */
  --pm-font-size-micro: 0.625rem;       /* 10px */
  --pm-font-size-micro-caps: 0.5625rem; /* 9px */
  --pm-font-size-page-title: 1.5rem;    /* 24px */
  --pm-font-size-section: 0.875rem;     /* 14px */
  --pm-font-size-kpi: 1.125rem;         /* 18px — metric values only */
  --pm-font-weight-regular: 400;
  --pm-font-weight-medium: 500;
  --pm-font-weight-semibold: 600;
  --pm-letter-spacing-title: -0.02em;
  --pm-letter-spacing-caps: 0.1em;
  --pm-lh-tight: 1.25;
  --pm-lh-normal: 1.4;

  /* Legacy --font-* bridge (PropertyLinksTiles etc.) → pm scale */
  --font-xs: var(--pm-font-size-meta);       /* was 11px */
  --font-sm: var(--pm-font-size-ui);         /* was 12px */
  --font-base: var(--pm-font-size-body);     /* was 13px */
  --font-md: var(--pm-font-size-section);    /* was 14px */
  --font-lg: var(--pm-font-size-page-title); /* was 16px — now page title */

  /* Text */
  --pm-text-primary: #111827;
  --pm-text-secondary: #6B7280;
  --pm-text-muted: #9CA3AF;

  /* Surfaces & borders */
  --pm-surface-app: #FFFFFF;
  --pm-surface-raised: #FFFFFF;
  --pm-surface-inset: #F9FAFB;
  --pm-border-subtle: #F3F4F6;
  --pm-hover-wash: color-mix(in srgb, var(--pm-text-primary) 3%, transparent);
  --pm-selected-wash: color-mix(in srgb, var(--pm-brand) 8%, transparent);

  /* Brand (Palmira charcoal; tenant may override) */
  --pm-brand: var(--tenant-brand-color, #343a40);
  --pm-brand-contrast: #FFFFFF;

  /* Status → Mud semantic */
  --pm-status-success: var(--mud-palette-success);
  --pm-status-warning: var(--mud-palette-warning);
  --pm-status-error: var(--mud-palette-error);
  --pm-status-info: var(--mud-palette-info);

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

  /* Radius */
  --pm-radius-control: 4px;
  --pm-radius-surface: 6px;
  --pm-radius-dialog: 8px;

  /* Shell */
  --pm-nav-width-collapsed: 48px;
  --pm-nav-width-expanded: 216px;
  --pm-nav-row-height: 34px;
  --pm-nav-icon-size: 14px;
  --pm-nav-bg: #0F172A;
  --pm-nav-text: #E5E7EB;
  --pm-nav-text-muted: #94A3B8;
  --pm-nav-text-active: #FFFFFF;
  --pm-chrome-height: 44px;
  --pm-duration-nav: 200ms;
  --pm-ease-nav: ease-out;

  /* Alias legacy chrome tokens → pm chrome */
  --appbar-height: 0px;
  --page-header-panel-height: var(--pm-chrome-height);
  --app-header-height: var(--pm-chrome-height);

  /* Bridge legacy nucleus surface tokens */
  --nucleus-surface-radius: var(--pm-radius-surface);
  --nucleus-surface-border: var(--pm-border-subtle);
  --nucleus-surface-bg: var(--pm-surface-raised);
  --nucleus-surface-shadow: 0 1px 3px color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

/* Dark mode: keep surfaces layered; nav stays dark */
.mud-theme-dark {
  --pm-text-primary: #F4F4F5;
  --pm-text-secondary: #A1A1AA;
  --pm-text-muted: #71717A;
  --pm-surface-app: #18191d;
  --pm-surface-raised: #1e1f24;
  --pm-surface-inset: #26282f;
  --pm-border-subtle: #3e4451;
  --pm-hover-wash: color-mix(in srgb, #FFFFFF 6%, transparent);
  --pm-selected-wash: color-mix(in srgb, var(--pm-brand) 18%, transparent);
  --pm-nav-bg: #0F172A;
  --nucleus-surface-border: var(--pm-border-subtle);
  --nucleus-surface-bg: var(--pm-surface-raised);
}

/* Typography primitives */
.pm-page-title,
.home-greeting {
  font-family: var(--pm-font-family);
  font-size: var(--pm-font-size-page-title) !important;
  font-weight: var(--pm-font-weight-semibold) !important;
  letter-spacing: var(--pm-letter-spacing-title);
  line-height: var(--pm-lh-tight);
  color: var(--pm-text-primary);
  margin-bottom: 0.25rem;
}

.pm-section-title {
  font-family: var(--pm-font-family);
  font-size: var(--pm-font-size-section);
  font-weight: var(--pm-font-weight-semibold);
  color: var(--pm-text-primary);
  line-height: var(--pm-lh-tight);
}

.pm-kpi-value {
  font-family: var(--pm-font-family);
  font-size: var(--pm-font-size-kpi) !important;
  font-weight: var(--pm-font-weight-semibold) !important;
  color: var(--pm-text-primary);
  line-height: var(--pm-lh-tight);
}

.pm-meta,
.home-subtitle {
  font-family: var(--pm-font-family);
  font-size: var(--pm-font-size-meta);
  font-weight: var(--pm-font-weight-regular);
  color: var(--pm-text-secondary);
  line-height: var(--pm-lh-normal);
}

.pm-micro-caps {
  font-size: var(--pm-font-size-micro-caps);
  font-weight: var(--pm-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pm-letter-spacing-caps);
  color: var(--pm-text-muted);
}

/* Icon scale utilities (visual size; keep Mud button hit targets) */
.pm-icon-12 { font-size: var(--pm-font-size-ui) !important; width: 12px !important; height: 12px !important; }
.pm-icon-14 { font-size: var(--pm-font-size-section) !important; width: 14px !important; height: 14px !important; }
.pm-icon-16 { font-size: var(--pm-font-size-section) !important; width: 16px !important; height: 16px !important; }
.pm-icon-18 { font-size: 18px !important; width: 18px !important; height: 18px !important; }

html,
body,
.module-workspace-page {
  font-family: var(--pm-font-family);
}

body.theme-light,
body.theme-light .module-workspace-page,
.bg-background {
  background: var(--pm-surface-app) !important;
}