/* App-level design tokens — maps to Kijox palette/semantic layer */
:root {
  --app-page-bg: var(--semantic-surface, #fff);
  --app-page-bg-muted: rgba(var(--primary-rgb), 0.03);
  --app-page-max-width: 720px;
  --app-page-padding-x: 16px;
  --app-page-padding-y: 16px;
  --app-page-tab-offset: var(--dash-tab-bar-offset, calc(72px + env(safe-area-inset-bottom, 0)));

  --app-title-size: 24px;
  --app-title-weight: 800;
  --app-subtitle-size: 14px;

  --app-card-radius: var(--radius-3xl, 24px);
  --app-widget-radius: 20px;
  --app-control-radius: var(--radius-md, 12px);
  --app-chip-radius: 10px;

  --app-border: rgba(var(--primary-rgb), 0.08);
  --app-border-strong: rgba(var(--primary-rgb), 0.14);
  --app-shadow-card: 0 8px 20px rgba(var(--primary-rgb), 0.07);
  --app-shadow-widget: 0 10px 32px rgba(var(--primary-rgb), 0.1);

  /* Legacy rs-* aliases for dashboard sub-components */
  --rs-green: var(--primary);
  --rs-green-2: var(--primary-light);
  --rs-gold: var(--accent);
  --rs-gold-bright: var(--accent-light);
  --rs-cream: var(--background);
  --rs-text: var(--text);
  --rs-muted: var(--semantic-text-muted, rgba(26, 26, 26, 0.65));
  --rs-card: var(--surface);
  --rs-soft-green: rgba(var(--primary-rgb), 0.09);
  --rs-border: rgba(var(--primary-rgb), 0.12);
  --rs-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.06);
  --rs-radius-lg: var(--app-card-radius);
}

/* Bootstrap modals must sit above fixed dashboard chrome (bottom nav: 1200, header: 1100) */
.modal-backdrop {
  z-index: 1290 !important;
}

.modal {
  z-index: 1300 !important;
}