/**
 * 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-*.
 * Typography system: DM Sans + readable midmarket scale (body 13 / ui 12).
 */
:root {
  /* Typography */
  --pm-font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pm-font-size-body: 0.8125rem;         /* 13px baseline */
  --pm-font-size-ui: 0.75rem;             /* 12px breadcrumbs / nav / tabs / header buttons */
  --pm-font-size-meta: 0.75rem;           /* 12px field values / captions */
  --pm-font-size-micro: 0.6875rem;        /* 11px field labels, asset metadata */
  --pm-font-size-micro-caps: 0.6875rem;   /* 11px status badges, accordion caps */
  --pm-font-size-nano: 0.625rem;          /* 10px nav group labels, metric label caps only */
  --pm-font-size-page-title: 1.25rem;     /* 20px entity name */
  --pm-font-size-code: 0.875rem;          /* 14px entity code beside title */
  --pm-font-size-section: 0.8125rem;      /* 13px section headings */
  --pm-font-size-kpi: 1rem;               /* 16px promoted metric values */
  --pm-font-weight-regular: 400;
  --pm-font-weight-medium: 500;
  --pm-font-weight-semibold: 600;
  --pm-font-weight-bold: 700;
  --pm-letter-spacing-title: -0.015em;
  --pm-letter-spacing-caps: 0.1em;
  --pm-letter-spacing-nav-group: 0.12em;
  --pm-lh-tight: 1.25;                    /* titles */
  --pm-lh-compact: 1.35;                  /* tabs, nav, compact rows */
  --pm-lh-normal: 1.4;                    /* meta / UI copy */
  --pm-lh-prose: 1.5;                     /* notes, markdown, long descriptions */

  /* Density (compact default; comfortable via html.pm-density-comfortable) */
  --pm-row-height-compact: 34px;
  --pm-row-height-comfortable: 40px;

  /* Legacy --font-* bridge (PropertyLinksTiles etc.) → pm scale */
  --font-xs: var(--pm-font-size-meta);
  --font-sm: var(--pm-font-size-ui);
  --font-base: var(--pm-font-size-body);
  --font-md: var(--pm-font-size-section);
  --font-lg: var(--pm-font-size-page-title);

  /* Text — muted aligns with secondary for AA (~4.5:1) on white; chrome-only quieter tints use opacity */
  --pm-text-primary: #101828;
  --pm-text-secondary: #667085;
  --pm-text-muted: #667085;
  --pm-text-dark-secondary: #475467;
  --pm-text-link: #244B8F;

  /* Surfaces & borders (three divider strengths) */
  --pm-surface-app: #FFFFFF;
  --pm-surface-raised: #FFFFFF;
  --pm-surface-inset: #FAFBFC;
  --pm-surface-icon: #F2F4F7;
  --pm-border-standard: #E4E7EC;
  --pm-border-soft: #EEF0F3;
  --pm-border-strong: #D0D5DD;
  --pm-border-subtle: var(--pm-border-standard); /* compat alias */
  --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 (navy default; tenant may override via --tenant-brand-color) */
  --pm-brand: var(--tenant-brand-color, #07104F);
  --pm-brand-hover: #121D68;
  --pm-brand-contrast: #FFFFFF;

  /* Status → Mud semantic + badge surfaces */
  --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);
  --pm-badge-success-bg: #ECFDF3;
  --pm-badge-error-bg: #FEF3F2;
  --pm-badge-error-border: #FECDCA;

  /* 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: 4px;
  --pm-radius-badge: 3px;
  --pm-radius-dialog: 8px;

  /* Shell */
  --pm-nav-width-collapsed: 48px;
  --pm-nav-width-expanded: 188px;
  --pm-nav-row-height: var(--pm-row-height-compact);
  --pm-nav-icon-size: 14px;
  --pm-nav-bg: #07104F;
  --pm-nav-text: #C8D1E5;
  --pm-nav-text-muted: #8693B2;
  --pm-nav-text-active: #FFFFFF;
  --pm-nav-divider: rgba(255, 255, 255, 0.15);
  --pm-nav-divider-strong: rgba(255, 255, 255, 0.18);
  --pm-chrome-height: 42px;
  --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);
  /* Shared elevation: right rail + governed surface cards */
  --nucleus-surface-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Optional comfortable density — preference UI can toggle this class later */
html.pm-density-comfortable {
  --pm-row-height-compact: var(--pm-row-height-comfortable);
  --pm-nav-row-height: var(--pm-row-height-comfortable);
}

/* Dark mode: keep surfaces layered; readable hierarchy (not light Asset Detail hexes) */
.mud-theme-dark {
  --pm-text-primary: #F4F4F5;
  --pm-text-secondary: #A1A1AA;
  --pm-text-muted: #71717A;
  --pm-text-dark-secondary: #B8C0CC;
  --pm-text-link: #93B4E0;
  --pm-surface-app: #18191d;
  --pm-surface-raised: #1e1f24;
  --pm-surface-inset: #26282f;
  --pm-surface-icon: #2d3038;
  --pm-border-standard: #3e4451;
  --pm-border-soft: #343843;
  --pm-border-strong: #4b5568;
  --pm-border-subtle: var(--pm-border-standard);
  --pm-hover-wash: color-mix(in srgb, #FFFFFF 6%, transparent);
  --pm-selected-wash: color-mix(in srgb, var(--pm-brand) 18%, transparent);
  --pm-brand-hover: #1a2780;
  --pm-nav-bg: #07104F;
  --pm-badge-success-bg: color-mix(in srgb, #16794F 22%, transparent);
  --pm-badge-error-bg: color-mix(in srgb, #B42318 22%, transparent);
  --pm-badge-error-border: color-mix(in srgb, #FECDCA 35%, transparent);
  --nucleus-surface-border: var(--pm-border-subtle);
  --nucleus-surface-bg: var(--pm-surface-raised);
  --nucleus-surface-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 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-bold) !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-bold);
  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: 1;
}

.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);
}

.pm-nano-caps {
  font-size: var(--pm-font-size-nano);
  font-weight: var(--pm-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--pm-letter-spacing-nav-group);
  color: var(--pm-text-secondary);
}

/* 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-meta) !important; width: 14px !important; height: 14px !important; }
.pm-icon-16 { font-size: 16px !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);
  font-size: var(--pm-font-size-body);
  color: var(--pm-text-primary);
}

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