@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --crest-font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --crest-primary-50: #eff6ff;
    --crest-primary-100: #dbeafe;
    --crest-primary-200: #bfdbfe;
    --crest-primary-400: #60a5fa;
    --crest-primary-500: #3b82f6;
    --crest-primary-600: #2563eb;
    --crest-primary-700: #1d4ed8;
    --crest-primary-800: #1e40af;
    --crest-neutral-50: #f9fafb;
    --crest-neutral-100: #f3f4f6;
    --crest-neutral-200: #e5e7eb;
    --crest-neutral-300: #d1d5db;
    --crest-neutral-400: #9ca3af;
    --crest-neutral-500: #6b7280;
    --crest-neutral-600: #4b5563;
    --crest-neutral-700: #374151;
    --crest-neutral-800: #1f2937;
    --crest-neutral-900: #111827;
    --crest-success-50: #f0fdf4;
    --crest-success-100: #dcfce7;
    --crest-success-500: #22c55e;
    --crest-success-600: #16a34a;
    --crest-success-700: #15803d;
    --crest-warning-50: #fffbeb;
    --crest-warning-100: #fef3c7;
    --crest-warning-500: #f59e0b;
    --crest-warning-600: #d97706;
    --crest-warning-700: #b45309;
    --crest-danger-50: #fef2f2;
    --crest-danger-100: #fee2e2;
    --crest-danger-500: #ef4444;
    --crest-danger-600: #dc2626;
    --crest-danger-700: #b91c1c;
    --crest-radius-sm: 4px;
    --crest-radius-md: 8px;
    --crest-radius-lg: 12px;
    --crest-radius-xl: 16px;
    --crest-radius-2xl: 24px;
    --crest-space-1: 4px;
    --crest-space-2: 8px;
    --crest-space-3: 12px;
    --crest-space-4: 16px;
    --crest-space-5: 20px;
    --crest-space-6: 24px;
    --crest-space-8: 32px;
    --crest-space-10: 40px;
}

.admin-page,
.public-page,
.portal-page,
.application-page,
.auth-page {
    font-family: var(--crest-font-family);
    color: var(--crest-neutral-800);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.admin-page h1,
.admin-page h2,
.admin-page h3,
.public-page h1,
.public-page h2,
.public-page h3,
.portal-page h1,
.portal-page h2,
.portal-page h3 {
    color: var(--crest-neutral-800);
    letter-spacing: normal;
}

.ds-button,
.admin-page .admin-button,
.public-page .public-button,
.portal-page .portal-button,
.application-page .ux-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--crest-radius-md);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.ds-button:hover:not(:disabled),
.admin-page .admin-button:hover:not(:disabled),
.public-page .public-button:hover:not(:disabled),
.portal-page .portal-button:hover:not(:disabled),
.application-page .ux-button:hover:not(:disabled) {
    transform: none;
}

.ds-button--primary,
.admin-page .admin-button--primary,
.public-page .public-button--primary,
.portal-page .portal-button--primary,
.application-page .ux-button--primary {
    background: var(--crest-primary-600);
    color: #fff;
    box-shadow: none;
}

.ds-button--primary:hover:not(:disabled),
.admin-page .admin-button--primary:hover:not(:disabled),
.public-page .public-button--primary:hover:not(:disabled),
.portal-page .portal-button--primary:hover:not(:disabled),
.application-page .ux-button--primary:hover:not(:disabled) {
    background: var(--crest-primary-700);
}

.ds-button--secondary,
.admin-page .admin-button--secondary,
.public-page .public-button--secondary,
.portal-page .portal-button--secondary,
.application-page .ux-button--secondary {
    border-color: var(--crest-primary-600);
    background: #fff;
    color: var(--crest-primary-600);
}

.ds-button--secondary:hover:not(:disabled),
.admin-page .admin-button--secondary:hover:not(:disabled),
.public-page .public-button--secondary:hover:not(:disabled),
.portal-page .portal-button--secondary:hover:not(:disabled),
.application-page .ux-button--secondary:hover:not(:disabled) {
    background: var(--crest-primary-50);
    color: var(--crest-primary-700);
}

.ds-button:disabled,
.ds-button[disabled],
.admin-page .admin-button:disabled,
.admin-page .admin-button[disabled],
.public-page .public-button:disabled,
.public-page .public-button[disabled],
.portal-page .portal-button:disabled,
.portal-page .portal-button[disabled],
.application-page .ux-button:disabled,
.application-page .ux-button[disabled] {
    border-color: var(--crest-neutral-200);
    background: var(--crest-neutral-100);
    color: var(--crest-neutral-400);
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    opacity: 0.72;
}

.ds-button--primary:disabled,
.ds-button--primary[disabled],
.admin-page .admin-button--primary:disabled,
.admin-page .admin-button--primary[disabled],
.public-page .public-button--primary:disabled,
.public-page .public-button--primary[disabled],
.portal-page .portal-button--primary:disabled,
.portal-page .portal-button--primary[disabled],
.application-page .ux-button--primary:disabled,
.application-page .ux-button--primary[disabled] {
    border-color: var(--crest-neutral-200);
    background: var(--crest-neutral-200);
    color: var(--crest-neutral-400);
}

.ds-button--secondary:disabled,
.ds-button--secondary[disabled],
.admin-page .admin-button--secondary:disabled,
.admin-page .admin-button--secondary[disabled],
.public-page .public-button--secondary:disabled,
.public-page .public-button--secondary[disabled],
.portal-page .portal-button--secondary:disabled,
.portal-page .portal-button--secondary[disabled],
.application-page .ux-button--secondary:disabled,
.application-page .ux-button--secondary[disabled] {
    border-color: var(--crest-neutral-200);
    background: var(--crest-neutral-100);
    color: var(--crest-neutral-400);
}

.ds-button--ghost,
.admin-page .admin-button--ghost,
.public-page .public-button--ghost,
.portal-page .portal-button--ghost,
.application-page .ux-button--ghost {
    border-color: var(--crest-neutral-200);
    background: var(--crest-neutral-50);
    color: var(--crest-neutral-700);
}

.ds-button--danger,
.admin-page .admin-button--danger {
    background: var(--crest-danger-600);
    color: #fff;
}

.ds-button--danger:hover,
.admin-page .admin-button--danger:hover {
    background: var(--crest-danger-700);
}

.ds-button--small,
.admin-page .admin-button--small {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 16px;
}

.ds-button--large {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    line-height: 24px;
}

.ds-button:focus-visible,
.admin-page .admin-button:focus-visible,
.public-page .public-button:focus-visible,
.portal-page .portal-button:focus-visible,
.application-page .ux-button:focus-visible {
    outline: 3px solid var(--crest-primary-200);
    outline-offset: 2px;
}

.ds-status-badge,
.admin-page .admin-status-badge,
.public-page .public-status-badge,
.portal-page .portal-status-badge,
.application-page .status-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: var(--crest-radius-sm);
    font-family: var(--crest-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: normal;
    text-transform: none;
}

.ds-status-badge--draft,
.admin-status-badge--draft,
.portal-status-badge--draft,
.status-badge--draft {
    background: var(--crest-primary-50);
    color: var(--crest-primary-700);
}

.ds-status-badge--pending,
.admin-status-badge--pending,
.portal-status-badge--pending,
.status-badge--pending {
    background: var(--crest-warning-50);
    color: var(--crest-warning-700);
}

.ds-status-badge--approved,
.admin-status-badge--approved,
.portal-status-badge--approved,
.status-badge--approved,
.admin-status-badge--published {
    background: var(--crest-success-50);
    color: var(--crest-success-700);
}

.ds-status-badge--rejected,
.admin-status-badge--rejected,
.portal-status-badge--rejected,
.status-badge--rejected,
.admin-status-badge--archived {
    background: var(--crest-danger-50);
    color: var(--crest-danger-700);
}

.ds-status-badge--demo,
.admin-status-badge--demo,
.portal-status-badge--demo {
    background: var(--crest-neutral-100);
    color: var(--crest-neutral-600);
}

.ds-alert,
.admin-page .admin-alert,
.portal-page .portal-demo-alert,
.application-page .ux-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--crest-space-3);
    border: 1px solid transparent;
    border-radius: var(--crest-radius-md);
    padding: var(--crest-space-3) var(--crest-space-4);
    font-family: var(--crest-font-family);
    font-size: 14px;
    line-height: 20px;
}

.admin-page .admin-alert[hidden],
.portal-page .portal-demo-alert[hidden],
.application-page .ux-alert[hidden] {
    display: none;
}

.ds-alert--info,
.admin-page .admin-alert--info,
.portal-page .portal-demo-alert,
.application-page .ux-alert--info {
    background: var(--crest-primary-50);
    border-color: var(--crest-primary-200);
    color: var(--crest-primary-800);
}

.ds-alert--success,
.admin-page .admin-alert--success,
.application-page .ux-alert--success {
    background: var(--crest-success-50);
    border-color: var(--crest-success-100);
    color: var(--crest-success-700);
}

.ds-alert--warning,
.admin-page .admin-alert--warning,
.portal-page .portal-demo-alert--warning,
.application-page .ux-alert--warning {
    background: var(--crest-warning-50);
    border-color: var(--crest-warning-100);
    color: var(--crest-warning-700);
}

.ds-alert--danger,
.admin-page .admin-alert--error,
.application-page .ux-alert--error {
    background: var(--crest-danger-50);
    border-color: var(--crest-danger-100);
    color: var(--crest-danger-700);
}

.ds-alert__icon {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.ds-alert--info .ds-alert__icon { background: var(--crest-primary-400); color: var(--crest-primary-800); }
.ds-alert--success .ds-alert__icon { background: var(--crest-success-500); color: #fff; }
.ds-alert--warning .ds-alert__icon { background: var(--crest-warning-500); color: #fff; }
.ds-alert--danger .ds-alert__icon { background: var(--crest-danger-500); color: #fff; }

.ds-field {
    display: grid;
    gap: var(--crest-space-2);
    color: var(--crest-neutral-700);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.ds-field input,
.ds-field select,
.ds-field textarea,
.admin-page .admin-field input,
.admin-page .admin-field select,
.admin-page .admin-field textarea,
.application-page .field input,
.application-page .field select,
.application-page .field textarea {
    min-height: 48px;
    border: 1px solid var(--crest-neutral-300);
    border-radius: var(--crest-radius-md);
    color: var(--crest-neutral-800);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus,
.admin-page .admin-field input:focus,
.admin-page .admin-field select:focus,
.admin-page .admin-field textarea:focus,
.application-page .field input:focus,
.application-page .field select:focus,
.application-page .field textarea:focus {
    border-color: var(--crest-primary-600);
    box-shadow: 0 0 0 3px var(--crest-primary-100);
}

.ds-checkbox-group {
    display: grid;
    gap: var(--crest-space-3);
}

.ds-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--crest-space-2);
    color: var(--crest-neutral-700);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.ds-checkbox input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--crest-primary-600);
}

.ds-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--crest-space-5) var(--crest-space-4);
}

.ds-table-wrap {
    overflow-x: auto;
}

.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

.ds-table th,
.ds-table td {
    padding: var(--crest-space-3) var(--crest-space-4);
    border-bottom: 1px solid var(--crest-neutral-200);
    text-align: left;
    vertical-align: top;
}

.ds-table th {
    color: var(--crest-neutral-600);
    font-size: 12px;
    font-weight: 600;
}

.ds-upload-zone {
    display: grid;
    justify-items: center;
    gap: var(--crest-space-2);
    min-height: 88px;
    padding: var(--crest-space-4);
    border: 1px dashed var(--crest-neutral-300);
    border-radius: var(--crest-radius-md);
    background: #fff;
    color: var(--crest-primary-600);
    text-align: center;
}

.ds-upload-zone input[type='file'] {
    width: 100%;
    color: var(--crest-neutral-600);
    font-size: 12px;
}

.ds-upload-zone small,
.ds-field small {
    color: var(--crest-neutral-500);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.form-renderer-surface .formio-form,
.form-renderer-surface .formio-wizard-form {
    color: var(--crest-neutral-800);
    font-family: var(--crest-font-family);
}

.form-renderer-surface .control-label {
    color: var(--crest-neutral-700);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.form-renderer-surface .form-control,
.form-renderer-surface .choices__inner {
    border-radius: var(--crest-radius-md);
    color: var(--crest-neutral-800);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.form-renderer-surface .form-control:focus,
.form-renderer-surface .choices.is-focused .choices__inner,
.form-renderer-surface .choices.is-open .choices__inner {
    border-color: var(--crest-primary-600);
    box-shadow: 0 0 0 3px var(--crest-primary-100);
}

.form-renderer-surface .btn {
    border-radius: var(--crest-radius-md);
    font-family: var(--crest-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

@media (max-width: 640px) {
    .ds-field-grid {
        grid-template-columns: 1fr;
    }
}