/**
 * Royal Journey CRM — UI/UX Design System Foundation
 *
 * STEP 1 only. This file establishes shared visual tokens and reusable component
 * contracts. It intentionally does not restructure page templates, routes,
 * application state, REST behavior, permissions, or business logic.
 */

/* Native hidden semantics must win over component display rules. */
[hidden] {
	display: none !important;
}

:root {
	/* Brand — premium warm gold + controlled charcoal. */
	--rjcrm-brand-gold-50: #fffaf0;
	--rjcrm-brand-gold-100: #fff1cf;
	--rjcrm-brand-gold-200: #fbe1a1;
	--rjcrm-brand-gold-300: #efca6d;
	--rjcrm-brand-gold-400: #dda942;
	--rjcrm-brand-gold-500: #c9952f;
	--rjcrm-brand-gold-600: #a97724;
	--rjcrm-brand-gold-700: #82591c;
	--rjcrm-brand-gold-800: #624317;
	--rjcrm-brand-gold-900: #493113;

	--rjcrm-charcoal-950: #12171c;
	--rjcrm-charcoal-900: #1b2229;
	--rjcrm-charcoal-800: #29323b;
	--rjcrm-charcoal-700: #3b4651;
	--rjcrm-charcoal-600: #53606c;
	--rjcrm-charcoal-500: #6d7985;
	--rjcrm-charcoal-400: #919aa4;
	--rjcrm-charcoal-300: #b8c0c8;
	--rjcrm-charcoal-200: #d5dbe0;
	--rjcrm-charcoal-100: #e9edf0;
	--rjcrm-charcoal-50: #f6f8f9;

	/* Semantic surfaces and text. */
	--rjcrm-canvas: #f6f7f8;
	--rjcrm-surface: #ffffff;
	--rjcrm-surface-raised: #ffffff;
	--rjcrm-surface-subtle: #fafbfb;
	--rjcrm-surface-muted: #f1f3f4;
	--rjcrm-surface-inverse: var(--rjcrm-charcoal-950);
	--rjcrm-text: #1d242b;
	--rjcrm-text-soft: #4e5b66;
	--rjcrm-muted: #76818b;
	--rjcrm-text-inverse: #ffffff;
	--rjcrm-border: #e1e5e8;
	--rjcrm-border-strong: #cbd2d8;
	--rjcrm-divider: #eceff1;

	/* Semantic feedback. */
	--rjcrm-success: #247451;
	--rjcrm-success-strong: #195c3d;
	--rjcrm-success-bg: #edf8f2;
	--rjcrm-success-border: #cbe8d7;
	--rjcrm-warning: #936515;
	--rjcrm-warning-strong: #744d0d;
	--rjcrm-warning-bg: #fff8e8;
	--rjcrm-warning-border: #eedcae;
	--rjcrm-danger: #b13d42;
	--rjcrm-danger-strong: #8f2c31;
	--rjcrm-danger-bg: #fff2f2;
	--rjcrm-danger-border: #efcecf;
	--rjcrm-info: #2e668f;
	--rjcrm-info-strong: #214d70;
	--rjcrm-info-bg: #eef6fb;
	--rjcrm-info-border: #d1e4f1;

	/* Backward-compatible aliases used throughout the existing theme. */
	--rjcrm-bg: var(--rjcrm-canvas);
	--rjcrm-navy-950: var(--rjcrm-charcoal-950);
	--rjcrm-navy-900: var(--rjcrm-charcoal-900);
	--rjcrm-navy-800: var(--rjcrm-charcoal-800);
	--rjcrm-navy-700: var(--rjcrm-charcoal-700);
	--rjcrm-gold-600: var(--rjcrm-brand-gold-600);
	--rjcrm-gold-500: var(--rjcrm-brand-gold-500);

	/* Focus. Gold is branded; dark outline keeps the ring clearly visible. */
	--rjcrm-focus-color: #8b641d;
	--rjcrm-focus: rgba(201, 149, 47, 0.24);
	--rjcrm-focus-ring: 0 0 0 3px var(--rjcrm-focus);

	/* Typography. Inter is preferred; no external font request is introduced. */
	--rjcrm-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rjcrm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	--rjcrm-font-size-2xs: 0.6875rem; /* 11px */
	--rjcrm-font-size-xs: 0.75rem;    /* 12px */
	--rjcrm-font-size-sm: 0.8125rem;  /* 13px */
	--rjcrm-font-size-md: 0.875rem;   /* 14px */
	--rjcrm-font-size-lg: 1rem;       /* 16px */
	--rjcrm-font-size-xl: 1.125rem;   /* 18px */
	--rjcrm-font-size-2xl: 1.25rem;   /* 20px */
	--rjcrm-font-size-3xl: 1.5rem;    /* 24px */
	--rjcrm-font-size-4xl: 1.75rem;   /* 28px */
	--rjcrm-line-tight: 1.2;
	--rjcrm-line-snug: 1.4;
	--rjcrm-line-normal: 1.55;
	--rjcrm-line-relaxed: 1.7;
	--rjcrm-weight-regular: 400;
	--rjcrm-weight-medium: 500;
	--rjcrm-weight-semibold: 600;
	--rjcrm-weight-bold: 700;
	--rjcrm-weight-extrabold: 800;

	/* Spacing — 4px base rhythm with limited half-steps for compact controls. */
	--rjcrm-space-0: 0;
	--rjcrm-space-1: 0.25rem;  /* 4 */
	--rjcrm-space-1-5: 0.375rem; /* 6 */
	--rjcrm-space-2: 0.5rem;   /* 8 */
	--rjcrm-space-2-5: 0.625rem; /* 10 */
	--rjcrm-space-3: 0.75rem;  /* 12 */
	--rjcrm-space-4: 1rem;     /* 16 */
	--rjcrm-space-5: 1.25rem;  /* 20 */
	--rjcrm-space-6: 1.5rem;   /* 24 */
	--rjcrm-space-8: 2rem;     /* 32 */
	--rjcrm-space-10: 2.5rem;  /* 40 */
	--rjcrm-space-12: 3rem;    /* 48 */
	--rjcrm-space-16: 4rem;    /* 64 */

	/* Radius. Outer containers are never sharper than nested controls. */
	--rjcrm-radius-xs: 6px;
	--rjcrm-radius-sm: 9px;
	--rjcrm-radius-md: 12px;
	--rjcrm-radius: 14px;
	--rjcrm-radius-lg: 16px;
	--rjcrm-radius-xl: 20px;
	--rjcrm-radius-2xl: 24px;
	--rjcrm-radius-pill: 999px;

	/* Elevation. Subtle by default; stronger elevation reserved for overlays. */
	--rjcrm-shadow-xs: 0 1px 2px rgba(18, 23, 28, 0.04);
	--rjcrm-shadow-sm: 0 1px 2px rgba(18, 23, 28, 0.04), 0 8px 22px rgba(18, 23, 28, 0.04);
	--rjcrm-shadow: 0 10px 28px rgba(18, 23, 28, 0.07);
	--rjcrm-shadow-md: 0 16px 40px rgba(18, 23, 28, 0.10);
	--rjcrm-shadow-lg: 0 24px 64px rgba(18, 23, 28, 0.14);
	--rjcrm-shadow-overlay: 0 28px 80px rgba(18, 23, 28, 0.20);

	/* Borders. */
	--rjcrm-border-width: 1px;
	--rjcrm-border-style: solid;
	--rjcrm-border-default: var(--rjcrm-border-width) var(--rjcrm-border-style) var(--rjcrm-border);
	--rjcrm-border-emphasis: var(--rjcrm-border-width) var(--rjcrm-border-style) var(--rjcrm-border-strong);

	/* Control sizing and motion. */
	--rjcrm-control-height-sm: 36px;
	--rjcrm-control-height: 44px;
	--rjcrm-control-height-lg: 48px;
	--rjcrm-icon-size-sm: 16px;
	--rjcrm-icon-size: 20px;
	--rjcrm-icon-size-lg: 24px;
	--rjcrm-motion-fast: 120ms;
	--rjcrm-motion-base: 180ms;
	--rjcrm-motion-slow: 260ms;
	--rjcrm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--rjcrm-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Layout constants retained for the current shell. */
	--rjcrm-sidebar-width: 264px;
	--rjcrm-topbar-height: 76px;
	--rjcrm-content-max: 1680px;
}

html,
body {
	font-family: var(--rjcrm-font-sans);
	color: var(--rjcrm-text);
	background: var(--rjcrm-canvas);
}

/* Accessible global interaction states. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--rjcrm-focus-color);
	outline-offset: 2px;
	box-shadow: var(--rjcrm-focus-ring);
}

::selection {
	background: var(--rjcrm-brand-gold-200);
	color: var(--rjcrm-charcoal-950);
}

/* Icon contract — the existing PHP renderer already uses a Lucide-style 24px viewBox. */
.rjcrm-icon {
	width: var(--rjcrm-icon-size);
	height: var(--rjcrm-icon-size);
	stroke-width: 1.8;
}
.rjcrm-icon--sm { width: var(--rjcrm-icon-size-sm); height: var(--rjcrm-icon-size-sm); }
.rjcrm-icon--lg { width: var(--rjcrm-icon-size-lg); height: var(--rjcrm-icon-size-lg); }

/* Buttons. Existing variants are retained; accent is available for later screens. */
.rjcrm-button {
	min-height: var(--rjcrm-control-height);
	gap: var(--rjcrm-space-2);
	border-radius: var(--rjcrm-radius-sm);
	padding-inline: var(--rjcrm-space-4);
	font-size: var(--rjcrm-font-size-sm);
	font-weight: var(--rjcrm-weight-bold);
	transition:
		background-color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		border-color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		box-shadow var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		transform var(--rjcrm-motion-fast) var(--rjcrm-ease-standard);
}
.rjcrm-button:hover { transform: translateY(-1px); }
.rjcrm-button:active { transform: translateY(0); }
.rjcrm-button--primary {
	background: var(--rjcrm-charcoal-950);
	color: var(--rjcrm-text-inverse);
	box-shadow: 0 6px 16px rgba(18, 23, 28, 0.12);
}
.rjcrm-button--primary:hover { background: #080b0d; color: var(--rjcrm-text-inverse); }
.rjcrm-button--secondary {
	border-color: var(--rjcrm-border);
	background: var(--rjcrm-surface);
	color: var(--rjcrm-charcoal-900);
	box-shadow: var(--rjcrm-shadow-xs);
}
.rjcrm-button--secondary:hover { border-color: var(--rjcrm-border-strong); background: var(--rjcrm-surface-subtle); }
.rjcrm-button--accent {
	border-color: var(--rjcrm-brand-gold-500);
	background: var(--rjcrm-brand-gold-500);
	color: #1d1608;
	box-shadow: 0 8px 20px rgba(169, 119, 36, 0.18);
}
.rjcrm-button--accent:hover { border-color: var(--rjcrm-brand-gold-600); background: var(--rjcrm-brand-gold-600); color: #fff; }
.rjcrm-button--danger { background: var(--rjcrm-danger); color: #fff; }
.rjcrm-button--danger:hover { background: var(--rjcrm-danger-strong); }
.rjcrm-button--ghost { background: transparent; color: var(--rjcrm-text-soft); }
.rjcrm-button--ghost:hover { background: var(--rjcrm-surface-muted); color: var(--rjcrm-text); }
.rjcrm-button--small { min-height: var(--rjcrm-control-height-sm); padding-inline: var(--rjcrm-space-3); font-size: var(--rjcrm-font-size-xs); }
.rjcrm-button--large { min-height: var(--rjcrm-control-height-lg); padding-inline: var(--rjcrm-space-5); font-size: var(--rjcrm-font-size-md); }
.rjcrm-button[aria-busy="true"] { cursor: progress; }

.rjcrm-icon-button {
	width: var(--rjcrm-control-height);
	height: var(--rjcrm-control-height);
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-sm);
	background: var(--rjcrm-surface);
	color: var(--rjcrm-text-soft);
	box-shadow: var(--rjcrm-shadow-xs);
}
.rjcrm-icon-button:hover { border-color: var(--rjcrm-border-strong); background: var(--rjcrm-surface-subtle); color: var(--rjcrm-text); }

/* Forms. */
.rjcrm-form-group,
.rjcrm-field { gap: var(--rjcrm-space-2); }

.rjcrm-form-label,
.rjcrm-field > label {
	color: var(--rjcrm-text-soft);
	font-size: var(--rjcrm-font-size-xs);
	font-weight: var(--rjcrm-weight-bold);
	line-height: var(--rjcrm-line-snug);
}

.rjcrm-input,
.rjcrm-control,
.rjcrm-select,
.rjcrm-textarea,
.rjcrm-input-wrap input {
	width: 100%;
	max-width: 100%;
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-sm);
	background: var(--rjcrm-surface);
	color: var(--rjcrm-text);
	font-size: var(--rjcrm-font-size-sm);
	line-height: var(--rjcrm-line-normal);
	outline: none;
	box-shadow: inset 0 1px 0 rgba(18, 23, 28, 0.01);
	transition:
		border-color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		box-shadow var(--rjcrm-motion-fast) var(--rjcrm-ease-standard),
		background-color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard);
}
.rjcrm-input,
.rjcrm-control,
.rjcrm-select { min-height: var(--rjcrm-control-height); padding-inline: var(--rjcrm-space-3); }
.rjcrm-textarea { min-height: 112px; padding: var(--rjcrm-space-3); resize: vertical; }
.rjcrm-input::placeholder,
.rjcrm-control::placeholder,
.rjcrm-textarea::placeholder,
.rjcrm-input-wrap input::placeholder { color: #9aa3ab; }
.rjcrm-input:hover,
.rjcrm-control:hover,
.rjcrm-select:hover,
.rjcrm-textarea:hover,
.rjcrm-input-wrap input:hover { border-color: var(--rjcrm-border-strong); }
.rjcrm-input:focus,
.rjcrm-control:focus,
.rjcrm-select:focus,
.rjcrm-textarea:focus,
.rjcrm-input-wrap input:focus { border-color: var(--rjcrm-focus-color); box-shadow: var(--rjcrm-focus-ring); }
.rjcrm-input:disabled,
.rjcrm-control:disabled,
.rjcrm-select:disabled,
.rjcrm-textarea:disabled { background: var(--rjcrm-surface-muted); color: var(--rjcrm-muted); cursor: not-allowed; }
.rjcrm-input[aria-invalid="true"],
.rjcrm-control[aria-invalid="true"],
.rjcrm-select[aria-invalid="true"],
.rjcrm-textarea[aria-invalid="true"] { border-color: var(--rjcrm-danger); box-shadow: 0 0 0 3px rgba(177, 61, 66, 0.10); }
.rjcrm-field-help,
.rjcrm-form-help { color: var(--rjcrm-muted); font-size: var(--rjcrm-font-size-2xs); line-height: var(--rjcrm-line-normal); }
.rjcrm-field-error { color: var(--rjcrm-danger); font-size: var(--rjcrm-font-size-2xs); font-weight: var(--rjcrm-weight-semibold); line-height: var(--rjcrm-line-snug); }

/* Native choice controls keep native semantics with brand color. */
.rjcrm-checkbox,
.rjcrm-radio,
input[type="checkbox"],
input[type="radio"] { accent-color: var(--rjcrm-brand-gold-600); }

/* Toggle and segmented foundations for later settings/profile work. */
.rjcrm-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 44px;
	height: 24px;
	padding: 2px;
	border: 0;
	border-radius: var(--rjcrm-radius-pill);
	background: var(--rjcrm-charcoal-300);
	cursor: pointer;
	transition: background var(--rjcrm-motion-base) var(--rjcrm-ease-standard);
}
.rjcrm-toggle::after {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(18, 23, 28, 0.18);
	transition: transform var(--rjcrm-motion-base) var(--rjcrm-ease-emphasized);
}
.rjcrm-toggle[aria-checked="true"],
.rjcrm-toggle.is-on { background: var(--rjcrm-brand-gold-600); }
.rjcrm-toggle[aria-checked="true"]::after,
.rjcrm-toggle.is-on::after { transform: translateX(20px); }
.rjcrm-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

.rjcrm-segmented {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-md);
	background: var(--rjcrm-surface-muted);
}
.rjcrm-segmented__item {
	min-height: 34px;
	padding: 0 var(--rjcrm-space-3);
	border: 0;
	border-radius: var(--rjcrm-radius-sm);
	background: transparent;
	color: var(--rjcrm-text-soft);
	font-size: var(--rjcrm-font-size-xs);
	font-weight: var(--rjcrm-weight-bold);
	cursor: pointer;
}
.rjcrm-segmented__item.is-active,
.rjcrm-segmented__item[aria-selected="true"] { background: var(--rjcrm-surface); color: var(--rjcrm-text); box-shadow: var(--rjcrm-shadow-xs); }

/* Cards and panels. */
.rjcrm-card,
.rjcrm-panel,
.rjcrm-stat-card {
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius);
	background: var(--rjcrm-surface);
	box-shadow: var(--rjcrm-shadow-sm);
}
.rjcrm-card { min-width: 0; padding: var(--rjcrm-space-5); }
.rjcrm-card--flat { box-shadow: none; }
.rjcrm-card--interactive { transition: border-color var(--rjcrm-motion-base) var(--rjcrm-ease-standard), box-shadow var(--rjcrm-motion-base) var(--rjcrm-ease-standard), transform var(--rjcrm-motion-base) var(--rjcrm-ease-standard); }
.rjcrm-card--interactive:hover { border-color: var(--rjcrm-border-strong); box-shadow: var(--rjcrm-shadow); transform: translateY(-1px); }
.rjcrm-panel__header h2 { color: var(--rjcrm-text); }
.rjcrm-stat-card__icon { background: var(--rjcrm-brand-gold-50); color: var(--rjcrm-brand-gold-700); }

/* Tables — desktop contract. Responsive card conversion is deliberately deferred. */
.rjcrm-table-wrap {
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-md);
	background: var(--rjcrm-surface);
	box-shadow: var(--rjcrm-shadow-xs);
}
.rjcrm-table {
	color: var(--rjcrm-text);
	font-size: var(--rjcrm-font-size-xs);
}
.rjcrm-table th,
.rjcrm-table td { border-bottom-color: var(--rjcrm-divider); }
.rjcrm-table th {
	background: var(--rjcrm-surface-subtle);
	color: var(--rjcrm-charcoal-600);
	font-size: 0.625rem;
	font-weight: var(--rjcrm-weight-extrabold);
	letter-spacing: 0.055em;
}
.rjcrm-table tbody tr:hover td { background: #fcfcfb; }

/* Status badges + generic chips. */
.rjcrm-badge,
.rjcrm-status-chip,
.rjcrm-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rjcrm-space-1-5);
	min-height: 26px;
	padding: 4px 9px;
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-pill);
	background: var(--rjcrm-surface-muted);
	color: var(--rjcrm-text-soft);
	font-size: var(--rjcrm-font-size-2xs);
	font-weight: var(--rjcrm-weight-bold);
	line-height: 1.2;
	white-space: nowrap;
}
.rjcrm-chip--interactive { cursor: pointer; transition: background var(--rjcrm-motion-fast) var(--rjcrm-ease-standard), border-color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard), color var(--rjcrm-motion-fast) var(--rjcrm-ease-standard); }
.rjcrm-chip--interactive:hover { border-color: var(--rjcrm-border-strong); background: var(--rjcrm-surface-subtle); }
.rjcrm-chip--interactive.is-selected,
.rjcrm-chip--interactive[aria-pressed="true"] { border-color: var(--rjcrm-brand-gold-300); background: var(--rjcrm-brand-gold-50); color: var(--rjcrm-brand-gold-800); }
.rjcrm-badge--neutral,
.rjcrm-status-chip--neutral { border-color: var(--rjcrm-border); background: var(--rjcrm-charcoal-50); color: var(--rjcrm-charcoal-600); }
.rjcrm-badge--info,
.rjcrm-status-chip--info { border-color: var(--rjcrm-info-border); background: var(--rjcrm-info-bg); color: var(--rjcrm-info); }
.rjcrm-badge--success,
.rjcrm-status-chip--success { border-color: var(--rjcrm-success-border); background: var(--rjcrm-success-bg); color: var(--rjcrm-success); }
.rjcrm-badge--warning,
.rjcrm-status-chip--warning { border-color: var(--rjcrm-warning-border); background: var(--rjcrm-warning-bg); color: var(--rjcrm-warning); }
.rjcrm-badge--danger,
.rjcrm-status-chip--danger { border-color: var(--rjcrm-danger-border); background: var(--rjcrm-danger-bg); color: var(--rjcrm-danger); }
.rjcrm-badge--gold,
.rjcrm-status-chip--gold { border-color: var(--rjcrm-brand-gold-200); background: var(--rjcrm-brand-gold-50); color: var(--rjcrm-brand-gold-800); }

/* Alerts. */
.rjcrm-alert {
	border-radius: var(--rjcrm-radius-md);
	font-size: var(--rjcrm-font-size-xs);
	line-height: var(--rjcrm-line-normal);
	box-shadow: var(--rjcrm-shadow-xs);
}
.rjcrm-alert--success { border-color: var(--rjcrm-success-border); background: var(--rjcrm-success-bg); color: var(--rjcrm-success-strong); }
.rjcrm-alert--error,
.rjcrm-alert--danger { border-color: var(--rjcrm-danger-border); background: var(--rjcrm-danger-bg); color: var(--rjcrm-danger-strong); }
.rjcrm-alert--warning { border-color: var(--rjcrm-warning-border); background: var(--rjcrm-warning-bg); color: var(--rjcrm-warning-strong); }
.rjcrm-alert--info { border-color: var(--rjcrm-info-border); background: var(--rjcrm-info-bg); color: var(--rjcrm-info-strong); }

/* Modals — structural behavior remains in existing JS. */
.rjcrm-modal__backdrop { background: rgba(18, 23, 28, 0.46); backdrop-filter: blur(2px); }
.rjcrm-modal__dialog {
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-xl);
	background: var(--rjcrm-surface);
	box-shadow: var(--rjcrm-shadow-overlay);
}
.rjcrm-modal__header,
.rjcrm-modal__footer { border-color: var(--rjcrm-divider); }
.rjcrm-modal__header h2 { color: var(--rjcrm-text); font-size: var(--rjcrm-font-size-xl); line-height: var(--rjcrm-line-tight); }
.rjcrm-modal__footer { background: var(--rjcrm-surface); }

/* Generic drawer/sheet contract for future shell and mobile filters. */
.rjcrm-drawer {
	position: fixed;
	z-index: 90;
	background: var(--rjcrm-surface);
	box-shadow: var(--rjcrm-shadow-overlay);
	transition: transform var(--rjcrm-motion-slow) var(--rjcrm-ease-emphasized), visibility var(--rjcrm-motion-slow) var(--rjcrm-ease-standard);
}
.rjcrm-drawer--right { top: 0; right: 0; bottom: 0; width: min(420px, 92vw); transform: translateX(104%); border-left: var(--rjcrm-border-default); }
.rjcrm-drawer--left { top: 0; left: 0; bottom: 0; width: min(320px, 88vw); transform: translateX(-104%); border-right: var(--rjcrm-border-default); }
.rjcrm-drawer--sheet { left: 0; right: 0; bottom: 0; max-height: min(88dvh, 760px); transform: translateY(104%); border-top: var(--rjcrm-border-default); border-radius: var(--rjcrm-radius-xl) var(--rjcrm-radius-xl) 0 0; }
.rjcrm-drawer.is-open { transform: translate(0); }
.rjcrm-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: var(--rjcrm-space-3); min-height: 64px; padding: var(--rjcrm-space-4) var(--rjcrm-space-5); border-bottom: var(--rjcrm-border-default); }
.rjcrm-drawer__body { overflow: auto; padding: var(--rjcrm-space-5); overscroll-behavior: contain; }
.rjcrm-drawer__footer { padding: var(--rjcrm-space-4) var(--rjcrm-space-5); border-top: var(--rjcrm-border-default); background: var(--rjcrm-surface); }

/* Toast contract. Existing inline alerts continue to work unchanged. */
.rjcrm-toast-region {
	position: fixed;
	top: calc(var(--rjcrm-topbar-height) + var(--rjcrm-space-4));
	right: var(--rjcrm-space-4);
	z-index: 120;
	display: grid;
	gap: var(--rjcrm-space-2);
	width: min(380px, calc(100vw - 24px));
	pointer-events: none;
}
.rjcrm-toast {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--rjcrm-space-3);
	padding: var(--rjcrm-space-3) var(--rjcrm-space-4);
	border: var(--rjcrm-border-default);
	border-radius: var(--rjcrm-radius-md);
	background: var(--rjcrm-surface-raised);
	color: var(--rjcrm-text);
	box-shadow: var(--rjcrm-shadow-md);
	pointer-events: auto;
	animation: rjcrm-toast-in var(--rjcrm-motion-slow) var(--rjcrm-ease-emphasized) both;
}
.rjcrm-toast__icon { width: 20px; height: 20px; margin-top: 1px; }
.rjcrm-toast__copy { min-width: 0; }
.rjcrm-toast__title { margin: 0; font-size: var(--rjcrm-font-size-sm); font-weight: var(--rjcrm-weight-bold); }
.rjcrm-toast__message { margin: 3px 0 0; color: var(--rjcrm-text-soft); font-size: var(--rjcrm-font-size-xs); line-height: var(--rjcrm-line-normal); }
.rjcrm-toast--success { border-left: 3px solid var(--rjcrm-success); }
.rjcrm-toast--warning { border-left: 3px solid var(--rjcrm-warning); }
.rjcrm-toast--danger,
.rjcrm-toast--error { border-left: 3px solid var(--rjcrm-danger); }
.rjcrm-toast--info { border-left: 3px solid var(--rjcrm-info); }

@keyframes rjcrm-toast-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.985); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Loading states. */
.rjcrm-skeleton {
	position: relative;
	overflow: hidden;
	border-radius: var(--rjcrm-radius-xs);
	background: #e9edef;
}
.rjcrm-skeleton::after {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
	animation-duration: 1.4s;
}
.rjcrm-skeleton--card { min-height: 132px; border-radius: var(--rjcrm-radius); }
.rjcrm-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.rjcrm-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--rjcrm-charcoal-200);
	border-top-color: var(--rjcrm-brand-gold-600);
	border-radius: 50%;
	animation: rjcrm-spin 700ms linear infinite;
}
.rjcrm-loading-state { display: grid; place-items: center; gap: var(--rjcrm-space-3); min-height: 140px; padding: var(--rjcrm-space-6); color: var(--rjcrm-muted); text-align: center; }
@keyframes rjcrm-spin { to { transform: rotate(360deg); } }

/* Empty state. */
.rjcrm-empty-state__icon { background: var(--rjcrm-brand-gold-50); color: var(--rjcrm-brand-gold-700); }
.rjcrm-empty-state h2,
.rjcrm-empty-state strong { color: var(--rjcrm-text); }

/* Existing shell receives only brand-level refinement in STEP 1. */
.rjcrm-brand { color: var(--rjcrm-charcoal-950); }
.rjcrm-brand__mark { background: var(--rjcrm-charcoal-950); color: var(--rjcrm-brand-gold-300); box-shadow: 0 8px 20px rgba(18, 23, 28, 0.14); }
.rjcrm-nav__link.is-active { background: var(--rjcrm-brand-gold-50); color: var(--rjcrm-charcoal-950); }
.rjcrm-nav__link.is-active .rjcrm-nav__icon { color: var(--rjcrm-brand-gold-700); }
.rjcrm-avatar { background: var(--rjcrm-charcoal-950); color: var(--rjcrm-brand-gold-200); }

/* Touch ergonomics without altering page structure. */
@media (hover: none), (pointer: coarse) {
	.rjcrm-button,
	.rjcrm-icon-button,
	.rjcrm-input,
	.rjcrm-control,
	.rjcrm-select { min-height: 44px; }
	.rjcrm-chip { min-height: 32px; }
}

/* Small-screen overlay foundations. Full page-specific mobile redesign comes later. */
@media (max-width: 720px) {
	.rjcrm-toast-region {
		top: auto;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom));
		left: 12px;
		width: auto;
	}
	.rjcrm-modal__dialog { border-radius: var(--rjcrm-radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
	.rjcrm-toast,
	.rjcrm-spinner,
	.rjcrm-drawer,
	.rjcrm-toggle::after { animation: none !important; transition-duration: 0.001ms !important; }
}

/* STEP 9 responsive QA: guarantee phone-sized interactive targets even when
   a narrow browser does not expose a coarse-pointer media feature. */
@media (max-width: 720px) {
	.rjcrm-button--small { min-height: 44px; }
	.rjcrm-icon-button { min-width: 44px; min-height: 44px; }
}