/**
 * Material Design 3 portal design tokens (replaces Tailwind CDN theme).
 * Scoped under .ao-shell-wrap to avoid theme conflicts.
 */
.ao-shell-wrap {
	--ao-background: #fcf8fa;
	--ao-surface: #fcf8fa;
	--ao-surface-bright: #fcf8fa;
	--ao-surface-dim: #ddd9db;
	--ao-surface-container: #f1edef;
	--ao-surface-container-low: #f6f2f4;
	--ao-surface-container-lowest: #ffffff;
	--ao-surface-container-high: #ebe7e9;
	--ao-surface-container-highest: #e5e1e3;
	--ao-surface-variant: #e5e1e3;
	--ao-on-background: #1c1b1d;
	--ao-on-surface: #1c1b1d;
	--ao-on-surface-variant: #47464c;
	--ao-outline: #78767d;
	--ao-outline-variant: #c8c5cd;
	--ao-primary: #00000b;
	--ao-primary-container: #1a1a2e;
	--ao-on-primary: #ffffff;
	--ao-on-primary-container: #83829b;
	--ao-on-primary-fixed: #1a1a2e;
	--ao-primary-fixed: #e2e0fc;
	--ao-secondary: #515f74;
	--ao-secondary-container: #d5e3fd;
	--ao-on-secondary: #ffffff;
	--ao-on-secondary-container: #57657b;
	--ao-tertiary: #695d3c;
	--ao-tertiary-container: #b9aa83;
	--ao-error: #ba1a1a;
	--ao-error-container: #ffdad6;
	--ao-on-error: #ffffff;
	--ao-stack-sm: 4px;
	--ao-stack-md: 12px;
	--ao-stack-lg: 24px;
	--ao-container-padding: 24px;
	--ao-gutter: 16px;
	color: var(--ao-on-background);
	font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
}

/* Background colors */
.ao-shell-wrap .bg-background { background-color: var(--ao-background) !important; }
.ao-shell-wrap .bg-surface { background-color: var(--ao-surface) !important; }
.ao-shell-wrap .bg-surface-bright { background-color: var(--ao-surface-bright) !important; }
.ao-shell-wrap .bg-surface-dim { background-color: var(--ao-surface-dim) !important; }
.ao-shell-wrap .bg-surface-container { background-color: var(--ao-surface-container) !important; }
.ao-shell-wrap .bg-surface-container-low { background-color: var(--ao-surface-container-low) !important; }
.ao-shell-wrap .bg-surface-container-lowest { background-color: var(--ao-surface-container-lowest) !important; }
.ao-shell-wrap .bg-surface-container-high { background-color: var(--ao-surface-container-high) !important; }
.ao-shell-wrap .bg-surface-container-highest { background-color: var(--ao-surface-container-highest) !important; }
.ao-shell-wrap .bg-surface-variant { background-color: var(--ao-surface-variant) !important; }
.ao-shell-wrap .bg-primary-container { background-color: var(--ao-primary-container) !important; }
.ao-shell-wrap .bg-primary-fixed { background-color: var(--ao-primary-fixed) !important; }
.ao-shell-wrap .bg-secondary-container { background-color: var(--ao-secondary-container) !important; }
.ao-shell-wrap .bg-error-container { background-color: var(--ao-error-container) !important; }
.ao-shell-wrap .bg-\[\#1a1a2e\] { background-color: #1a1a2e !important; }

/* Text colors */
.ao-shell-wrap .text-on-background { color: var(--ao-on-background) !important; }
.ao-shell-wrap .text-on-surface { color: var(--ao-on-surface) !important; }
.ao-shell-wrap .text-on-surface-variant { color: var(--ao-on-surface-variant) !important; }
.ao-shell-wrap .text-on-primary { color: var(--ao-on-primary) !important; }
.ao-shell-wrap .text-on-primary-fixed { color: var(--ao-on-primary-fixed) !important; }
.ao-shell-wrap .text-on-primary-container { color: var(--ao-on-primary-container) !important; }
.ao-shell-wrap .text-on-secondary { color: var(--ao-on-secondary) !important; }
.ao-shell-wrap .text-on-secondary-container { color: var(--ao-on-secondary-container) !important; }
.ao-shell-wrap .text-primary { color: var(--ao-primary) !important; }
.ao-shell-wrap .text-error { color: var(--ao-error) !important; }

/* Border colors */
.ao-shell-wrap .border-outline { border-color: var(--ao-outline) !important; }
.ao-shell-wrap .border-outline-variant { border-color: var(--ao-outline-variant) !important; }
.ao-shell-wrap .border-surface-variant { border-color: var(--ao-surface-variant) !important; }
.ao-shell-wrap .border-primary-container { border-color: var(--ao-primary-container) !important; }
.ao-shell-wrap .border-transparent { border-color: transparent !important; }
.ao-shell-wrap .divide-outline-variant > :not([hidden]) ~ :not([hidden]) { border-color: rgba(200, 197, 205, 0.4) !important; }
.ao-shell-wrap .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f1f5f9 !important; }

/* Typography — font family */
.ao-shell-wrap .font-h1,
.ao-shell-wrap .font-h2,
.ao-shell-wrap .font-h3,
.ao-shell-wrap .font-h4,
.ao-shell-wrap .font-body-lg,
.ao-shell-wrap .font-body-md,
.ao-shell-wrap .font-label-sm,
.ao-shell-wrap .font-button {
	font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important;
}

/* Typography — sizes */
.ao-shell-wrap .text-h1 { font-size: 32px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; font-weight: 700 !important; }
.ao-shell-wrap .text-h2 { font-size: 24px !important; line-height: 1.3 !important; letter-spacing: -0.01em !important; font-weight: 600 !important; }
.ao-shell-wrap .text-h3 { font-size: 20px !important; line-height: 1.4 !important; font-weight: 600 !important; }
.ao-shell-wrap .text-h4 { font-size: 18px !important; line-height: 1.4 !important; font-weight: 600 !important; }
.ao-shell-wrap .text-body-lg { font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important; }
.ao-shell-wrap .text-body-md { font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; }
.ao-shell-wrap .text-label-sm { font-size: 12px !important; line-height: 1 !important; letter-spacing: 0.05em !important; font-weight: 600 !important; }
.ao-shell-wrap .text-button { font-size: 14px !important; line-height: 1 !important; letter-spacing: 0.01em !important; font-weight: 600 !important; }
.ao-shell-wrap .font-h1 { font-weight: 700 !important; }
.ao-shell-wrap .font-h2 { font-weight: 600 !important; }
.ao-shell-wrap .font-h3 { font-weight: 600 !important; }
.ao-shell-wrap .font-h4 { font-weight: 600 !important; }
.ao-shell-wrap .font-body-md { font-weight: 400 !important; }
.ao-shell-wrap .font-label-sm { font-weight: 600 !important; }
.ao-shell-wrap .font-button { font-weight: 600 !important; }

/* Spacing tokens */
.ao-shell-wrap .p-container-padding { padding: var(--ao-container-padding) !important; }
.ao-shell-wrap .mb-stack-sm { margin-bottom: var(--ao-stack-sm) !important; }
.ao-shell-wrap .mb-stack-md { margin-bottom: var(--ao-stack-md) !important; }
.ao-shell-wrap .mb-stack-lg { margin-bottom: var(--ao-stack-lg) !important; }
.ao-shell-wrap .mt-stack-sm { margin-top: var(--ao-stack-sm) !important; }
.ao-shell-wrap .mt-stack-md { margin-top: var(--ao-stack-md) !important; }
.ao-shell-wrap .mt-stack-lg { margin-top: var(--ao-stack-lg) !important; }
.ao-shell-wrap .gap-stack-sm { gap: var(--ao-stack-sm) !important; }
.ao-shell-wrap .gap-stack-md { gap: var(--ao-stack-md) !important; }
.ao-shell-wrap .gap-stack-lg { gap: var(--ao-stack-lg) !important; }
.ao-shell-wrap .gap-gutter { gap: var(--ao-gutter) !important; }

/* Opacity modifiers used in views */
.ao-shell-wrap .bg-surface-container-low\/50 { background-color: rgba(246, 242, 244, 0.5) !important; }
.ao-shell-wrap .border-outline-variant\/50 { border-color: rgba(200, 197, 205, 0.5) !important; }
.ao-shell-wrap .border-outline-variant\/40 { border-color: rgba(200, 197, 205, 0.4) !important; }
.ao-shell-wrap .border-outline-variant\/60 { border-color: rgba(200, 197, 205, 0.6) !important; }
.ao-shell-wrap .border-outline-variant\/30 { border-color: rgba(200, 197, 205, 0.3) !important; }
.ao-shell-wrap .divide-outline-variant\/40 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(200, 197, 205, 0.4) !important; }
.ao-shell-wrap .divide-outline-variant\/30 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(200, 197, 205, 0.3) !important; }

/* Extended semantic colors */
.ao-shell-wrap .bg-tertiary-container { background-color: #b9aa83 !important; }
.ao-shell-wrap .text-on-tertiary-container { color: #493f20 !important; }
.ao-shell-wrap .bg-error-container { background-color: #ffdad6 !important; }
.ao-shell-wrap .text-on-error-container { color: #93000a !important; }
.ao-shell-wrap .text-on-secondary-container { color: #57657b !important; }
.ao-shell-wrap .bg-on-primary-fixed { background-color: #1a1a2e !important; }
.ao-shell-wrap .text-on-primary-fixed { color: #1a1a2e !important; }
.ao-shell-wrap .hover\:underline:hover { text-decoration: underline !important; }
.ao-shell-wrap .hover\:text-slate-700:hover { color: #334155 !important; }
.ao-shell-wrap .hover\:text-slate-800:hover { color: #1e293b !important; }
.ao-shell-wrap .hover\:bg-slate-50:hover { background-color: #f8fafc !important; }
.ao-shell-wrap .hover\:bg-slate-100:hover { background-color: #f1f5f9 !important; }
.ao-shell-wrap .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1) !important; }
.ao-shell-wrap .hover\:text-white:hover { color: #fff !important; }
.ao-shell-wrap .underline { text-decoration: underline !important; }
.ao-shell-wrap .underline-offset-4 { text-underline-offset: 4px !important; }
.ao-shell-wrap .text-blue-700 { color: #1d4ed8 !important; }
.ao-shell-wrap .text-amber-900 { color: #78350f !important; }
.ao-shell-wrap .text-amber-800 { color: #92400e !important; }
.ao-shell-wrap .border-amber-300 { border-color: #fcd34d !important; }
.ao-shell-wrap .border-blue-200 { border-color: #bfdbfe !important; }
.ao-shell-wrap .flex-shrink-0 { flex-shrink: 0 !important; }
.ao-shell-wrap .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.ao-shell-wrap .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
.ao-shell-wrap .min-w-\[160px\] { min-width: 160px !important; }
.ao-shell-wrap .min-w-\[180px\] { min-width: 180px !important; }
.ao-shell-wrap .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ao-shell-wrap .xl\:flex { display: flex !important; }
.ao-shell-wrap .xl\:hidden { display: none !important; }
@media (min-width: 1280px) {
	.ao-shell-wrap .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	.ao-shell-wrap .xl\:flex { display: flex !important; }
	.ao-shell-wrap .xl\:hidden { display: none !important; }
}
.ao-shell-wrap .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ao-shell-wrap .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (min-width: 768px) {
	.ao-shell-wrap .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.ao-shell-wrap .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.ao-shell-wrap .-mr-1 { margin-right: -0.25rem !important; }
.ao-shell-wrap .mt-0\.5 { margin-top: 0.125rem !important; }
.ao-shell-wrap .top-1\/2 { top: 50% !important; }
.ao-shell-wrap .-translate-y-1\/2 { transform: translateY(-50%) !important; }
.ao-shell-wrap .left-3 { left: 0.75rem !important; }
.ao-shell-wrap .pl-9 { padding-left: 2.25rem !important; }
.ao-shell-wrap .pr-3 { padding-right: 0.75rem !important; }
.ao-shell-wrap .py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }
.ao-shell-wrap .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important; }
.ao-shell-wrap .focus\:ring-blue-100:focus { box-shadow: 0 0 0 3px #dbeafe !important; }
.ao-shell-wrap .focus\:border-blue-400:focus { border-color: #60a5fa !important; }
.ao-shell-wrap .object-cover { object-fit: cover !important; }
.ao-shell-wrap .leading-tight { line-height: 1.25 !important; }
.ao-shell-wrap .mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.ao-shell-wrap .h-6 { height: 1.5rem !important; }
.ao-shell-wrap .w-px { width: 1px !important; }
.ao-shell-wrap .bg-slate-200 { background-color: #e2e8f0 !important; }
.ao-shell-wrap .text-\[16px\] { font-size: 16px !important; }
.ao-shell-wrap .text-\[18px\] { font-size: 18px !important; }
.ao-shell-wrap .text-\[22px\] { font-size: 22px !important; }
.ao-shell-wrap .inline-flex { display: inline-flex !important; }
.ao-shell-wrap .ao-payment-due-badge { font-weight: 600 !important; }