/* ==========================================================================
   Fusion Design System — Base Tokens
   Global primitives shared across ALL themes. Theme files redefine aliases.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700;900&family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* P22 Mackinac Pro — LOFT brand moment face. Local OTF files. */
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: normal;  font-weight: 400;
  src: url('../fonts/P22MackinacPro-Book_25.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: italic; font-weight: 400;
  src: url('../fonts/P22MackinacPro-BookItalic_15.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: normal; font-weight: 500;
  src: url('../fonts/P22MackinacPro-Medium_26.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: italic; font-weight: 500;
  src: url('../fonts/P22MackinacPro-MedItalic_18.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: normal; font-weight: 700;
  src: url('../fonts/P22MackinacPro-Bold_16.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: italic; font-weight: 700;
  src: url('../fonts/P22MackinacPro-BoldItalic_11.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: normal; font-weight: 800;
  src: url('../fonts/P22MackinacPro-ExtraBold_12.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'P22 Mackinac Pro';
  font-style: italic; font-weight: 800;
  src: url('../fonts/P22MackinacPro-ExBoldItalic_17.otf') format('opentype');
  font-display: swap;
}

:root {
  /* Font families — Fraunces stands in for P22 Mackinac Pro display */
  --rp-font-family-Lato: Lato, system-ui, sans-serif;
  --rp-font-family-inter: Inter, system-ui, sans-serif;
  --rp-font-family-opensans: 'Open Sans', system-ui, sans-serif;
  --rp-font-family-roboto: Roboto, system-ui, sans-serif;
  --rp-font-family-mackinac: 'P22 Mackinac Pro', Georgia, serif;

  /* Font sizes (px) */
  --rp-font-size-250: 10px;  --rp-font-size-300: 12px; --rp-font-size-350: 14px;
  --rp-font-size-400: 16px;  --rp-font-size-450: 18px; --rp-font-size-500: 20px;
  --rp-font-size-600: 24px;  --rp-font-size-700: 28px; --rp-font-size-800: 32px;
  --rp-font-size-900: 36px;  --rp-font-size-1000: 40px; --rp-font-size-1200: 48px;
  --rp-font-size-1500: 60px; --rp-font-size-1600: 64px; --rp-font-size-2400: 96px;

  /* Line heights */
  --rp-font-line-height-400: 16px; --rp-font-line-height-500: 20px;
  --rp-font-line-height-550: 22px; --rp-font-line-height-600: 24px;
  --rp-font-line-height-650: 26px; --rp-font-line-height-1000: 40px;

  /* Font weights */
  --rp-font-weight-regular: 400; --rp-font-weight-medium: 500;
  --rp-font-weight-semibold: 600; --rp-font-weight-bold: 700;

  /* Spacing scale (4px major) */
  --rp-space-0: 0px;  --rp-space-050: 2px; --rp-space-100: 4px;
  --rp-space-150: 6px; --rp-space-200: 8px; --rp-space-300: 12px;
  --rp-space-400: 16px; --rp-space-500: 20px; --rp-space-600: 24px;
  --rp-space-800: 32px; --rp-space-1000: 40px; --rp-space-1200: 48px;
  --rp-space-1600: 64px; --rp-space-2000: 80px; --rp-space-2400: 96px;

  /* Radii */
  --rp-radius-050: 2px;  --rp-radius-100: 4px;  --rp-radius-150: 6px;
  --rp-radius-200: 8px;  --rp-radius-250: 10px; --rp-radius-300: 12px;
  --rp-radius-400: 16px; --rp-radius-600: 24px; --rp-radius-round: 999px;

  /* Border widths */
  --rp-border-width-025: 1px; --rp-border-width-050: 2px;
  --rp-border-width-100: 4px;

  /* Neutral palette shared across themes */
  --rp-color-palette-white: #ffffff;
  --rp-color-palette-black: #000000;
  --rp-color-palette-stone-50: #fafafa;
  --rp-color-palette-stone-100: #e9eaeb;
  --rp-color-palette-stone-200: #c7ccd0;
  --rp-color-palette-stone-300: #a2aab2;
  --rp-color-palette-stone-600: #626a6f;
  --rp-color-palette-charcoal-700: #707689;
  --rp-color-palette-charcoal-800: #4d525f;
  --rp-color-palette-charcoal-900: #202737;
  --rp-color-palette-vinyl-800: #4a4a4b;
  --rp-color-palette-vinyl-900: #282829;

  /* Semantic color primitives */
  --rp-color-palette-red-50: #ffebee;   --rp-color-palette-red-800: #d01a1f;
  --rp-color-palette-green-50: #e5f4e8; --rp-color-palette-green-700: #118837;
  --rp-color-palette-yellow-50: #fff9ea;--rp-color-palette-yellow-700: #fec12d;
  --rp-color-palette-blue-50: #e3f2fc;  --rp-color-palette-blue-700: #0076cc;

  /* Shadows */
  --rp-shadow-1: 0 4px 8px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.02);
  --rp-shadow-2: 0 4px 24px -10px rgba(0,0,0,.14);
  --rp-shadow-3: 0 12px 30px -15px rgba(0,0,0,.25);
  --rp-shadow-focus: 0 0 0 3px rgba(25,150,236,.25);

  /* Snackbar / Toast — shared across all themes per Figma spec
     All variants use the same dark surface; only left accent border color changes. */
  --rp-color-snackbar-bg:   #202737;
  --rp-color-snackbar-text: #ffffff;
  --rp-color-snackbar-text-weak: color-mix(in srgb, #ffffff 78%, transparent);
  --rp-snackbar-accent-width: 12px;
}

/* ==========================================================================
   rp-new — Default product theme (OneSite, Performance)
   Teal primary, rust secondary, Lato, warm neutrals
   ========================================================================== */
:root[data-theme="rp-new"], :root:not([data-theme]) {
  --rp-color-primary: #3d7f8d;          /* teal-700 */
  --rp-color-primary-dark: #1b314c;     /* teal-900 */
  --rp-color-primary-highlight: #ecf2f4;/* teal-50 */
  --rp-color-secondary: #dd7755;        /* rust-300 */
  --rp-color-secondary-dark: #b2370d;   /* rust-800 */
  --rp-color-secondary-highlight: #fcf2ef;
  --rp-color-background-default: #ffffff;
  --rp-color-background-subtle: #fafafa;
  --rp-color-background-muted: #e9eaeb;
  --rp-color-text-default: #202737;
  --rp-color-text-weaker: #4d525f;
  --rp-color-text-weakest: #707689;
  --rp-color-text-inverse: #ffffff;
  --rp-color-border-default: #e9eaeb;
  --rp-color-border-strong: #c7ccd0;
  --rp-color-success: #118837;
  --rp-color-error: #d01a1f;
  --rp-color-warning: #fec12d;
  --rp-color-info: #0076cc;
  --rp-font-family-sans: var(--rp-font-family-Lato);
  --rp-font-family-display: var(--rp-font-family-Lato);
  --rp-radius-button: 8px;
  --rp-radius-input: 8px;
  --rp-radius-card: 10px;
}

/* ==========================================================================
   rp-new-dark — Dark companion for analytics/BI
   ========================================================================== */
:root[data-theme="rp-new-dark"] {
  --rp-color-primary: #77c6d0;          /* teal-400 — used for TEXT, LINKS, FOCUS RINGS */
  --rp-color-primary-dark: #9be1ea;
  --rp-color-primary-highlight: #1b314c;
  /* Accessibility split: button FILLS use a deeper tone so they don't glare
     against dark surfaces, while --rp-color-primary remains bright enough
     for text (4.5:1+ on background-default). */
  --rp-color-action:       #3d7f8d;     /* teal-700 — button fill on dark */
  --rp-color-action-hover: #4d98a6;     /* teal-600 */
  --rp-color-action-on:    #ffffff;     /* label on action */
  --rp-color-secondary: #dd7755;
  --rp-color-secondary-dark: #f1c6b8;
  --rp-color-secondary-highlight: #3d2c38;
  --rp-color-background-default: #0f1925;  /* navy-900 */
  --rp-color-background-subtle: #162435;
  --rp-color-background-muted: #203145;
  --rp-color-text-default: #edeff2;
  --rp-color-text-weaker: #b3bdc7;
  --rp-color-text-weakest: #7e8e9f;
  --rp-color-text-inverse: #0f1925;
  --rp-color-border-default: #303b47;
  --rp-color-border-strong: #4b5760;
  --rp-color-success: #3dc389;  /* slightly brighter for dark bg */
  --rp-color-error:   #f56b7e;
  --rp-color-warning: #f0b429;
  --rp-color-info:    #55b2f2;
  /* Dark-theme badge/chip backgrounds — pre-mixed onto navy so chips don't go muddy */
  --rp-color-success-bg: #163a2f;
  --rp-color-error-bg:   #3a1a22;
  --rp-color-warning-bg: #3a2a10;
  --rp-color-info-bg:    #12304a;
  /* Text inside status badges — light tints that read on the -bg above */
  --rp-color-success-fg: #6fdca8;
  --rp-color-error-fg:   #ff97a6;
  --rp-color-warning-fg: #ffd175;
  --rp-color-info-fg:    #7ec6f5;
  --rp-font-family-sans: var(--rp-font-family-Lato);
  --rp-font-family-display: var(--rp-font-family-Lato);
  --rp-radius-button: 8px;
  --rp-radius-input: 8px;
  --rp-radius-card: 10px;
  color-scheme: dark;
}

/* ==========================================================================
   rp-legacy — Classic blue / Roboto product theme
   ========================================================================== */
:root[data-theme="rp-legacy"] {
  --rp-color-primary: #0076cc;          /* blue-700 */
  --rp-color-primary-dark: #00499c;
  --rp-color-primary-highlight: #e3f2fc;
  --rp-color-secondary: #f06000;        /* orange-800 */
  --rp-color-secondary-dark: #e74203;
  --rp-color-secondary-highlight: #fff2df;
  --rp-color-background-default: #ffffff;
  --rp-color-background-subtle: #f5f5f5;
  --rp-color-background-muted: #eeeeee;
  --rp-color-text-default: #202737;
  --rp-color-text-weaker: #4d525f;
  --rp-color-text-weakest: #707689;
  --rp-color-text-inverse: #ffffff;
  --rp-color-border-default: #e0e0e0;
  --rp-color-border-strong: #bdbdbd;
  --rp-color-success: #118837;
  --rp-color-error: #d01a1f;
  --rp-color-warning: #fec12d;
  --rp-color-info: #0076cc;
  --rp-font-family-sans: var(--rp-font-family-roboto);
  --rp-font-family-display: var(--rp-font-family-roboto);
  --rp-radius-button: 999px;
  --rp-radius-input: 4px;
  --rp-radius-card: 6px;
}

/* ==========================================================================
   loft — Resident mobile app. Warm editorial premium.
   Vinyl-black primary, Inter body, Mackinac for brand moments.
   Extended accents live as --loft-* in loft-utilities.css.
   ========================================================================== */
:root[data-theme="loft"] {
  --rp-color-primary: #282829;          /* vinyl-900 */
  --rp-color-primary-dark: #000000;
  --rp-color-primary-highlight: #f9f7f7;
  --rp-color-secondary: #f9f7f7;        /* beige-50 */
  --rp-color-secondary-dark: #f0e9e0;
  --rp-color-secondary-highlight: #f7f4f4;
  --rp-color-background-default: #ffffff;
  --rp-color-background-subtle: #f9f7f7;/* warm stone */
  --rp-color-background-muted: #e9eaeb;
  --rp-color-text-default: #282829;
  --rp-color-text-weaker: #4a4a4b;
  --rp-color-text-weakest: #707689;
  --rp-color-text-inverse: #ffffff;
  --rp-color-border-default: #e9eaeb;
  --rp-color-border-strong: #c7ccd0;
  --rp-color-success: #4caf6e;
  --rp-color-error: #d01a1f;
  --rp-color-warning: #e8a020;
  --rp-color-info: #0076cc;
  --rp-font-family-sans: var(--rp-font-family-inter);
  --rp-font-family-display: var(--rp-font-family-mackinac);
  --rp-radius-button: 12px;            /* rounded, not pill */
  --rp-radius-input: 8px;
  --rp-radius-card: 16px;

  /* LOFT brand accents — use ONLY in approved contexts (see SKILL.md) */
  --loft-accent-lilac:         #b1b1f3;
  --loft-accent-lilac-dark:    #8f8fcc;
  --loft-accent-amber:         #f7b153;
  --loft-accent-amber-light:   #fef3dc;
  --loft-accent-pink:          #fab1f3;
  --loft-accent-cream:         #f0e9e0;
  --loft-accent-loyalty-blue:  #b3d8f0;
  --loft-badge-complete:       #4caf6e;
  --loft-badge-featured:       #f06090;
  --loft-card-beige:           #f5efe8;
}

/* ==========================================================================
   knock — Leasing CRM. Denim blue / Open Sans. Bright, conversion-focused.
   ========================================================================== */
:root[data-theme="knock"] {
  --rp-color-primary: #4a61e8;          /* denim-600 */
  --rp-color-primary-dark: #3649ba;
  --rp-color-primary-highlight: #ebeefe;
  --rp-color-secondary: #70758f;        /* slate-600 */
  --rp-color-secondary-dark: #4d5066;
  --rp-color-secondary-highlight: #eeeef2;
  --rp-color-background-default: #ffffff;
  --rp-color-background-subtle: #f7f7f8;
  --rp-color-background-muted: #eeeef2;
  --rp-color-text-default: #202737;
  --rp-color-text-weaker: #4d525f;
  --rp-color-text-weakest: #707689;
  --rp-color-text-inverse: #ffffff;
  --rp-color-border-default: #e2e3e9;
  --rp-color-border-strong: #cbcdd8;
  --rp-color-success: #118837;
  --rp-color-error: #d01a1f;
  --rp-color-warning: #fec12d;
  --rp-color-info: #0076cc;
  --rp-font-family-sans: var(--rp-font-family-opensans);
  --rp-font-family-display: var(--rp-font-family-opensans);
  --rp-radius-button: 6px;
  --rp-radius-input: 6px;
  --rp-radius-card: 8px;
}

/* ==========================================================================
   Type ramp (semantic roles — work in every theme)
   ========================================================================== */
.t-display-xl { font-family: var(--rp-font-family-display); font-size: 64px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.t-display-l  { font-family: var(--rp-font-family-display); font-size: 48px; line-height: 1.1;  font-weight: 600; letter-spacing: -0.02em; }
.t-display-m  { font-family: var(--rp-font-family-display); font-size: 36px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.t-heading-xl { font-family: var(--rp-font-family-sans); font-size: 28px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.01em; }
.t-heading-l  { font-family: var(--rp-font-family-sans); font-size: 22px; line-height: 1.25; font-weight: 700; }
.t-heading-m  { font-family: var(--rp-font-family-sans); font-size: 18px; line-height: 1.3;  font-weight: 600; }
.t-heading-s  { font-family: var(--rp-font-family-sans); font-size: 16px; line-height: 1.35; font-weight: 600; }
.t-body-l     { font-family: var(--rp-font-family-sans); font-size: 16px; line-height: 1.5;  font-weight: 400; }
.t-body-m     { font-family: var(--rp-font-family-sans); font-size: 14px; line-height: 1.45; font-weight: 400; }
.t-body-s     { font-family: var(--rp-font-family-sans); font-size: 12px; line-height: 1.4;  font-weight: 400; }
.t-label      { font-family: var(--rp-font-family-sans); font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--rp-color-text-default); }
.t-caption    { font-family: var(--rp-font-family-sans); font-size: 11px; line-height: 1.3; font-weight: 400; color: var(--rp-color-text-weakest); }
.t-tabular    { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Minimal component primitives (theme-aware, no per-theme overrides needed)
   ========================================================================== */
.rp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--rp-font-family-sans); font-size: 14px; font-weight: 600;
  padding: 10px 16px; min-height: 40px; border-radius: var(--rp-radius-button);
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.rp-btn--primary   { background: var(--rp-color-action, var(--rp-color-primary)); color: var(--rp-color-action-on, var(--rp-color-text-inverse)); }
.rp-btn--primary:hover { background: var(--rp-color-action-hover, var(--rp-color-primary-dark)); }
.rp-btn--secondary { background: var(--rp-color-background-default); color: var(--rp-color-text-default); border-color: var(--rp-color-border-strong); }
.rp-btn--secondary:hover { background: var(--rp-color-background-subtle); }
.rp-btn--text      { background: transparent; color: var(--rp-color-primary); padding: 10px 8px; }
.rp-btn--text:hover { background: var(--rp-color-primary-highlight); }
.rp-btn--danger    { background: var(--rp-color-error); color: var(--rp-color-text-inverse); }
.rp-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.rp-btn--lg { min-height: 48px; padding: 12px 20px; font-size: 16px; }

.rp-input {
  display: block; width: 100%; font-family: var(--rp-font-family-sans); font-size: 14px;
  padding: 10px 12px; min-height: 40px; background: var(--rp-color-background-default);
  color: var(--rp-color-text-default); border: 1px solid var(--rp-color-border-strong);
  border-radius: var(--rp-radius-input); outline: none; transition: border-color .15s, box-shadow .15s;
}
.rp-input:focus { border-color: var(--rp-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-color-primary) 20%, transparent); }
.rp-input::placeholder { color: var(--rp-color-text-weakest); }

.rp-card {
  background: var(--rp-color-background-default); border: 1px solid var(--rp-color-border-default);
  border-radius: var(--rp-radius-card); padding: 24px; box-shadow: var(--rp-shadow-1);
}

.rp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  font-family: var(--rp-font-family-sans); font-size: 12px; font-weight: 600;
  background: var(--rp-color-background-subtle); color: var(--rp-color-text-default);
  border: 1px solid var(--rp-color-border-default); border-radius: 999px;
}

.rp-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  font-family: var(--rp-font-family-sans); font-size: 11px; font-weight: 700;
  border-radius: 4px; letter-spacing: 0.02em;
}
.rp-badge--success { background: var(--rp-color-success-bg, color-mix(in srgb, var(--rp-color-success) 12%, transparent)); color: var(--rp-color-success-fg, var(--rp-color-success)); }
.rp-badge--error   { background: var(--rp-color-error-bg,   color-mix(in srgb, var(--rp-color-error)   12%, transparent)); color: var(--rp-color-error-fg,   var(--rp-color-error)); }
.rp-badge--warning { background: var(--rp-color-warning-bg, color-mix(in srgb, var(--rp-color-warning) 22%, transparent)); color: var(--rp-color-warning-fg, #7a4a00); }
.rp-badge--info    { background: var(--rp-color-info-bg,    color-mix(in srgb, var(--rp-color-info)    12%, transparent)); color: var(--rp-color-info-fg,    var(--rp-color-info)); }
.rp-badge--neutral { background: var(--rp-color-background-muted); color: var(--rp-color-text-weaker); }

/* ==========================================================================
   Toggle form controls — checkbox, radio, switch
   All use native inputs for a11y, styled via accent-color + custom switch.
   ========================================================================== */

/* Checkbox + radio share size & focus treatment */
.rp-check, .rp-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin: 0; flex-shrink: 0;
  background: var(--rp-color-background-default);
  border: 1.5px solid var(--rp-color-border-strong);
  cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.rp-check { border-radius: var(--rp-radius-100, 4px); }
.rp-radio { border-radius: 999px; }

.rp-check:hover, .rp-radio:hover { border-color: var(--rp-color-primary); }
.rp-check:focus-visible, .rp-radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-color-primary) 28%, transparent);
  border-color: var(--rp-color-primary);
}
.rp-check:disabled, .rp-radio:disabled {
  background: var(--rp-color-background-muted);
  border-color: var(--rp-color-border-default);
  cursor: not-allowed; opacity: .6;
}

/* Checked states */
.rp-check:checked, .rp-radio:checked {
  background: var(--rp-color-action, var(--rp-color-primary));
  border-color: var(--rp-color-action, var(--rp-color-primary));
}
.rp-check:checked::after {
  content: "";
  width: 10px; height: 10px;
  background: var(--rp-color-action-on, var(--rp-color-text-inverse));
  clip-path: polygon(14% 48%, 0 62%, 40% 100%, 100% 20%, 86% 10%, 38% 72%);
}
.rp-check:indeterminate {
  background: var(--rp-color-action, var(--rp-color-primary));
  border-color: var(--rp-color-action, var(--rp-color-primary));
}
.rp-check:indeterminate::after {
  content: ""; width: 10px; height: 2px; border-radius: 1px;
  background: var(--rp-color-action-on, var(--rp-color-text-inverse));
}
.rp-radio:checked::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--rp-color-action-on, var(--rp-color-text-inverse));
}

/* Label row wrapper */
.rp-field-row {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--rp-font-family-sans); font-size: 14px;
  color: var(--rp-color-text-default); cursor: pointer;
  user-select: none;
}
.rp-field-row.is-disabled { cursor: not-allowed; color: var(--rp-color-text-weakest); }

/* Switch */
.rp-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.rp-switch input {
  appearance: none; -webkit-appearance: none;
  position: absolute; inset: 0; margin: 0; cursor: pointer;
  background: var(--rp-color-border-strong);
  border-radius: 999px;
  transition: background .15s;
}
.rp-switch input::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
.rp-switch input:checked {
  background: var(--rp-color-action, var(--rp-color-primary));
}
.rp-switch input:checked::after { transform: translateX(18px); }
.rp-switch input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-color-primary) 28%, transparent);
}
.rp-switch input:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   Alerts — inline banners for in-page messages
   ========================================================================== */
.rp-alert {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--rp-color-border-default);
  border-left-width: 4px;
  border-radius: var(--rp-radius-input);
  background: var(--rp-color-background-default);
  font-family: var(--rp-font-family-sans);
  color: var(--rp-color-text-default);
}
.rp-alert__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: var(--rp-color-text-inverse);
}
.rp-alert__title { font-size: 14px; font-weight: 700; line-height: 1.3; margin: 0 0 2px; }
.rp-alert__body  { font-size: 13px; line-height: 1.45; color: var(--rp-color-text-weaker); margin: 0; }
.rp-alert__body a { color: var(--rp-color-primary); font-weight: 600; text-decoration: none; }
.rp-alert__body a:hover { text-decoration: underline; }
.rp-alert__close {
  background: transparent; border: none; cursor: pointer; padding: 2px 6px;
  color: var(--rp-color-text-weakest); font-size: 18px; line-height: 1;
  border-radius: var(--rp-radius-100);
}
.rp-alert__close:hover { color: var(--rp-color-text-default); background: var(--rp-color-background-subtle); }

.rp-alert--info    { border-left-color: var(--rp-color-info);    background: var(--rp-color-info-bg,    color-mix(in srgb, var(--rp-color-info)    8%, var(--rp-color-background-default))); }
.rp-alert--info    .rp-alert__icon { background: var(--rp-color-info); }
.rp-alert--success { border-left-color: var(--rp-color-success); background: var(--rp-color-success-bg, color-mix(in srgb, var(--rp-color-success) 8%, var(--rp-color-background-default))); }
.rp-alert--success .rp-alert__icon { background: var(--rp-color-success); }
.rp-alert--warning { border-left-color: var(--rp-color-warning); background: var(--rp-color-warning-bg, color-mix(in srgb, var(--rp-color-warning) 18%, var(--rp-color-background-default))); }
.rp-alert--warning .rp-alert__icon { background: var(--rp-color-warning); color: #4a2e00; }
.rp-alert--error   { border-left-color: var(--rp-color-error);   background: var(--rp-color-error-bg,   color-mix(in srgb, var(--rp-color-error)   8%, var(--rp-color-background-default))); }
.rp-alert--error   .rp-alert__icon { background: var(--rp-color-error); }

/* ==========================================================================
   Toast / Snackbar — transient notifications
   Per Figma spec: shared dark #202737 surface for all variants.
   Variant is indicated ONLY by the 12px left accent border color.
   One toast displays at a time; container stays fixed to the bottom of viewport in production.
   ========================================================================== */
.rp-toast-stack {
  display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.rp-toast {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  min-width: 360px; max-width: 560px;
  padding: 14px 16px 14px 20px;
  background: var(--rp-color-snackbar-bg);
  color: var(--rp-color-snackbar-text);
  border: none;
  border-left: var(--rp-snackbar-accent-width) solid var(--rp-color-info);
  border-radius: var(--rp-radius-input);
  box-shadow: var(--rp-shadow-3);
  font-family: var(--rp-font-family-sans);
  font-size: 14px; line-height: 1.4;
}
.rp-toast__msg { min-width: 0; font-weight: 400; }
.rp-toast__msg strong {
  display: block;
  font-weight: 500;
  color: var(--rp-color-snackbar-text);
  margin-bottom: 2px;
}
.rp-toast__msg > span {
  color: var(--rp-color-snackbar-text-weak);
  font-weight: 400;
}
.rp-toast__action {
  background: transparent; border: none; cursor: pointer;
  font-family: var(--rp-font-family-sans); font-weight: 700; font-size: 14px;
  color: var(--rp-color-snackbar-text);
  padding: 6px 10px; border-radius: var(--rp-radius-100);
  text-transform: none;
  letter-spacing: 0;
}
.rp-toast__action:hover { background: color-mix(in srgb, #ffffff 10%, transparent); }
.rp-toast__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--rp-color-snackbar-text-weak); font-size: 18px; line-height: 1;
  padding: 4px 6px;
  border-radius: var(--rp-radius-100);
}
.rp-toast__close:hover {
  color: var(--rp-color-snackbar-text);
  background: color-mix(in srgb, #ffffff 10%, transparent);
}
.rp-toast--info    { border-left-color: var(--rp-color-info); }
.rp-toast--success { border-left-color: var(--rp-color-success); }
.rp-toast--warning { border-left-color: var(--rp-color-warning); }
.rp-toast--error   { border-left-color: var(--rp-color-error); }

/* ==========================================================================
   Modal / Dialog
   ========================================================================== */
.rp-modal-backdrop {
  position: relative; /* in-page demo; production usage is fixed */
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: color-mix(in srgb, var(--rp-color-text-default) 45%, transparent);
  border-radius: var(--rp-radius-card);
  min-height: 340px;
}
.rp-modal {
  width: 100%; max-width: 480px;
  background: var(--rp-color-background-default);
  border-radius: var(--rp-radius-card);
  box-shadow: var(--rp-shadow-3);
  overflow: hidden;
  font-family: var(--rp-font-family-sans);
  color: var(--rp-color-text-default);
  border: 1px solid var(--rp-color-border-default);
}
.rp-modal__header {
  display: flex; align-items: start; justify-content: space-between;
  padding: 20px 24px 4px;
  gap: 16px;
}
.rp-modal__title  { font-family: var(--rp-font-family-display); font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.rp-modal__close {
  background: transparent; border: none; cursor: pointer; font-size: 20px; line-height: 1;
  color: var(--rp-color-text-weakest); padding: 4px 8px; border-radius: var(--rp-radius-100);
}
.rp-modal__close:hover { color: var(--rp-color-text-default); background: var(--rp-color-background-subtle); }
.rp-modal__body { padding: 8px 24px 20px; font-size: 14px; line-height: 1.5; color: var(--rp-color-text-weaker); }
.rp-modal__body p { margin: 0 0 12px; }
.rp-modal__body p:last-child { margin-bottom: 0; }
.rp-modal__footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 16px 24px 20px;
  background: var(--rp-color-background-default);
}

/* ==========================================================================
   Container — content card recipes
   ========================================================================== */
.rp-container {
  background: var(--rp-color-background-default);
  border: 1px solid var(--rp-color-border-default);
  border-radius: var(--rp-radius-card);
  overflow: hidden;
  font-family: var(--rp-font-family-sans);
}
.rp-container__header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 20px 8px;
  background: var(--rp-color-background-default);
}
.rp-container__title    { font-size: 16px; font-weight: 700; margin: 0; color: var(--rp-color-text-default); line-height: 1.3; }
.rp-container__subtitle { font-size: 12px; color: var(--rp-color-text-weaker); margin-top: 2px; line-height: 1.3; }
.rp-container__body { padding: 20px; }
.rp-container__footer {
  padding: 8px 20px 20px;
  background: var(--rp-color-background-default);
  font-size: 13px; color: var(--rp-color-text-weaker);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* ==========================================================================
   Lists
   ========================================================================== */
.rp-list {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--rp-font-family-sans);
  background: var(--rp-color-background-default);
  border: 1px solid var(--rp-color-border-default);
  border-radius: var(--rp-radius-card);
  overflow: hidden;
}
.rp-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rp-color-border-default);
  color: var(--rp-color-text-default);
  font-size: 14px;
}
.rp-list__item:last-child { border-bottom: none; }
.rp-list__leading {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--rp-radius-200);
  background: var(--rp-color-primary-highlight);
  color: var(--rp-color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.rp-list__content { min-width: 0; }
.rp-list__title    { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--rp-color-text-default); }
.rp-list__meta     { font-size: 12px; color: var(--rp-color-text-weaker); margin-top: 2px; line-height: 1.3; }
.rp-list__trailing { font-size: 13px; color: var(--rp-color-text-weaker); text-align: right; }
.rp-list__trailing strong { display: block; color: var(--rp-color-text-default); font-weight: 700; }
.rp-list--plain { border: none; border-radius: 0; }
.rp-list--interactive .rp-list__item { cursor: pointer; transition: background .12s; }
.rp-list--interactive .rp-list__item:hover { background: var(--rp-color-background-subtle); }

/* ==========================================================================
   Loaders — spinner, dots, progress, skeleton
   ========================================================================== */
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--rp-color-primary) 20%, transparent);
  border-top-color: var(--rp-color-primary);
  animation: rp-spin .7s linear infinite;
  box-sizing: border-box;
}
.rp-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.rp-spinner--lg { width: 36px; height: 36px; border-width: 3px; }

@keyframes rp-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.rp-dots { display: inline-flex; gap: 5px; align-items: center; }
.rp-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--rp-color-primary);
  animation: rp-dot 1.2s ease-in-out infinite;
}
.rp-dots span:nth-child(2) { animation-delay: .15s; }
.rp-dots span:nth-child(3) { animation-delay: .30s; }

.rp-progress {
  width: 100%; height: 6px;
  background: var(--rp-color-background-muted);
  border-radius: 999px; overflow: hidden;
}
.rp-progress__bar {
  height: 100%;
  background: var(--rp-color-primary);
  border-radius: 999px;
  transition: width .3s ease;
}
@keyframes rp-indet {
  0%   { left: -40%; width: 40%; }
  60%  { left: 60%;  width: 60%; }
  100% { left: 100%; width: 30%; }
}
.rp-progress--indeterminate { position: relative; }
.rp-progress--indeterminate .rp-progress__bar {
  position: absolute; top: 0; left: 0; width: 40%;
  animation: rp-indet 1.4s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes rp-shimmer { to { background-position-x: -200%; } }
.rp-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--rp-color-background-muted) 0%,
    var(--rp-color-background-subtle) 50%,
    var(--rp-color-background-muted) 100%);
  background-size: 200% 100%;
  border-radius: var(--rp-radius-100);
  animation: rp-shimmer 1.4s linear infinite;
}

/* LOFT blob shapes — organic icon containers */
.loft-blob   { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.loft-blob-1 { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
.loft-blob-2 { border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%; }
.loft-blob-3 { border-radius: 57% 43% 35% 65% / 48% 55% 45% 52%; }
.loft-blob-4 { border-radius: 67% 33% 58% 42% / 38% 60% 40% 62%; }

/* ==========================================================================
   Tabs — view navigation for object/page/form sections
   Use for: switching between different data types or areas (Overview / Residents / Financials).
   Underline-style per Figma spec (tabs.color.border.selected + tabs.color.text.active).
   ========================================================================== */
.rp-tabs {
  display: flex; gap: 24px;
  border-bottom: 1px solid var(--rp-color-border-default);
  font-family: var(--rp-font-family-sans);
}
.rp-tabs__item {
  background: transparent; border: none; cursor: pointer;
  padding: 12px 2px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--rp-color-text-weaker);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.rp-tabs__item:hover { color: var(--rp-color-text-default); }
.rp-tabs__item[aria-selected="true"],
.rp-tabs__item.is-active {
  color: var(--rp-color-text-default);
  border-bottom-color: var(--rp-color-primary);
}
.rp-tabs__item[aria-disabled="true"],
.rp-tabs__item:disabled {
  color: var(--rp-color-text-weakest); cursor: not-allowed; opacity: .6;
}

/* ==========================================================================
   Toggle button group — view switching for the SAME data
   Use for: list/grid/map, chart variants, time ranges. Segmented control look.
   Per Figma spec: unselected container bg + 2px border, white selected pill, 8px radius.
   ========================================================================== */
.rp-toggle-group {
  display: inline-flex; align-items: stretch;
  padding: 2px;
  background: var(--rp-color-background-muted);
  border: 2px solid var(--rp-color-border-default);
  border-radius: 8px;
  font-family: var(--rp-font-family-sans);
}
.rp-toggle-group__item {
  background: transparent; border: none; cursor: pointer;
  min-width: 50px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--rp-color-text-default);
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.rp-toggle-group__item:hover:not([aria-pressed="true"]) {
  color: var(--rp-color-text-default);
  background: color-mix(in srgb, var(--rp-color-background-default) 50%, transparent);
}
.rp-toggle-group__item[aria-pressed="true"],
.rp-toggle-group__item.is-active {
  background: var(--rp-color-background-default);
  color: var(--rp-color-text-default);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.rp-toggle-group__item:disabled {
  color: var(--rp-color-text-weakest); cursor: not-allowed; opacity: .6;
}

/* Resets commonly needed by previews */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--rp-font-family-sans); color: var(--rp-color-text-default); background: var(--rp-color-background-default); margin: 0; -webkit-font-smoothing: antialiased; }