/* UI Phase 0: shared tokens and opt-in primitives.
   Loaded after legacy base.css and before page CSS. Keep page migration explicit. */
:root {
    --color-bg: #F7F8FA;
    --color-surface: #FFFFFF;
    --color-surface-muted: #F1F3F5;
    --color-surface-subtle: #FAFBFC;
    --color-border: #D8DEE4;
    --color-border-strong: #AAB5BF;
    --color-text: #202830;
    --color-text-secondary: #4F5B66;
    --color-text-muted: #66737E;
    --color-text-inverse: #FFFFFF;
    /* Existing #C1002A is already 6.36:1 against white. */
    --color-brand: #C1002A;
    --color-brand-hover: #A00023;
    --color-brand-active: #80001C;
    --color-brand-soft: #FBECEF;
    --color-success: #176B4D;
    --color-success-soft: #EAF5EF;
    --color-warning: #8A5700;
    --color-warning-soft: #FFF4DE;
    --color-danger: #B42332;
    --color-danger-soft: #FCEDEF;
    --color-info: #235D86;
    --color-info-soft: #EAF3F9;
    --color-focus: #235DCE;

    --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-body: 1rem;
    --text-small: .875rem;
    --text-caption: .75rem;
    --text-h1: 1.875rem;
    --text-h2: 1.5rem;
    --text-h3: 1.25rem;
    --text-section: 1.125rem;
    --text-label: .875rem;
    --text-button: .9375rem;
    --text-meta: .875rem;
    --line-body: 1.55;
    --line-heading: 1.25;
    --line-small: 1.45;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(22, 33, 44, .08);
    --shadow-md: 0 12px 32px rgba(22, 33, 44, .14);
    --page-max-width: 1280px;
    --content-reading-width: 72ch;
    --content-form-width: 640px;
    --page-gutter: 2rem;
    --page-gutter-mobile: 1rem;
    --section-gap: var(--space-6);
    --card-padding: var(--space-5);
    --header-height: 64px;
    --focus-ring: 0 0 0 3px rgba(35, 93, 206, .25);
}

/* Typography and layout are opt-in until page-specific styles are migrated. */
.ui-type-body { font: var(--weight-regular) var(--text-body)/var(--line-body) var(--font-ui); color: var(--color-text); }
.ui-type-small { font-size: var(--text-small); line-height: var(--line-small); }
.ui-type-caption { font-size: var(--text-caption); line-height: var(--line-small); }
.ui-type-h1 { font-size: var(--text-h1); line-height: var(--line-heading); font-weight: var(--weight-bold); letter-spacing: -.02em; }
.ui-type-h2 { font-size: var(--text-h2); line-height: var(--line-heading); font-weight: var(--weight-semibold); letter-spacing: -.015em; }
.ui-type-h3 { font-size: var(--text-h3); line-height: var(--line-heading); font-weight: var(--weight-semibold); }
.ui-type-section { font-size: var(--text-section); line-height: var(--line-heading); font-weight: var(--weight-semibold); }
.ui-type-label { font-size: var(--text-label); line-height: var(--line-small); font-weight: var(--weight-semibold); }
.ui-type-meta { font-size: var(--text-meta); line-height: var(--line-small); color: var(--color-text-muted); }
.ui-reading { max-width: var(--content-reading-width); line-height: 1.65; overflow-wrap: anywhere; }
.ui-page-width { width: min(100% - 2 * var(--page-gutter-mobile), var(--page-max-width)); margin-inline: auto; }
.ui-form-width { max-width: var(--content-form-width); }
.ui-stack > * + * { margin-block-start: var(--space-4); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); }
.ui-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ui-surface--flat { box-shadow: none; }

/* Bootstrap-compatible buttons: use .btn.ui-button with a Bootstrap variant. */
.btn.ui-button {
    min-height: 44px;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .625rem var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: var(--weight-semibold) var(--text-button)/1.35 var(--font-ui);
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: none;
    transform: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn.ui-button:hover,
.btn.ui-button:active { box-shadow: none; transform: none; }
.btn.ui-button.btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); }
.btn.ui-button.btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn.ui-button.btn-primary:active { background: var(--color-brand-active); border-color: var(--color-brand-active); }
.btn.ui-button.btn-outline-secondary,
.btn.ui-button.btn-outline-primary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); }
.btn.ui-button.btn-outline-secondary:hover,
.btn.ui-button.btn-outline-primary:hover { background: var(--color-surface-muted); border-color: var(--color-text-secondary); color: var(--color-text); }
.btn.ui-button.btn-outline-secondary:active,
.btn.ui-button.btn-outline-primary:active { background: var(--color-border); }
.btn.ui-button.btn-link { background: transparent; border-color: transparent; color: var(--color-brand); }
.btn.ui-button.btn-link:hover { background: var(--color-brand-soft); color: var(--color-brand-hover); }
.btn.ui-button.btn-link:active { color: var(--color-brand-active); }
.btn.ui-button.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-inverse); }
.btn.ui-button.btn-danger:hover { background: #921B28; border-color: #921B28; }
.btn.ui-button.btn-danger:active { background: #731620; border-color: #731620; }
.btn.ui-button.btn-outline-danger { background: var(--color-surface); border-color: var(--color-danger); color: var(--color-danger); }
.btn.ui-button.btn-outline-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.btn.ui-button.btn-sm { min-height: 40px; padding: .45rem var(--space-3); font-size: var(--text-small); }
.btn.ui-button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: var(--focus-ring); }
.btn.ui-button:disabled,
.btn.ui-button.disabled,
.btn.ui-button[aria-disabled="true"],
.btn.ui-button.btn-primary:disabled,
.btn.ui-button.btn-outline-primary:disabled,
.btn.ui-button.btn-outline-secondary:disabled,
.btn.ui-button.btn-outline-danger:disabled,
.btn.ui-button.btn-danger:disabled { opacity: 1; background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text-secondary); box-shadow: none; cursor: not-allowed; }
.btn.ui-button[aria-busy="true"] { cursor: progress; }
.btn.ui-button .fa-spinner { flex: none; }
.btn.ui-button.ui-icon-button { min-width: 44px; padding-inline: var(--space-2); }

/* FormField: .ui-field wraps native/Bootstrap controls and feedback. */
.ui-field { display: grid; gap: var(--space-2); min-width: 0; margin-block-end: var(--space-4); }
.ui-field .form-label,
.ui-field__label { display: block; margin: 0; color: var(--color-text); font-size: var(--text-label); font-weight: var(--weight-semibold); line-height: var(--line-small); }
.ui-field__required { color: var(--color-danger); margin-inline-start: var(--space-1); }
.ui-field .form-control,
.ui-field .form-select,
.ui-control.form-control,
.ui-control.form-select {
    width: 100%; min-width: 0; min-height: 44px;
    padding: .625rem var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--weight-regular) 1rem/1.45 var(--font-ui);
    box-shadow: none;
}
.ui-field textarea.form-control,
textarea.ui-control.form-control { min-height: 6rem; resize: vertical; }
.ui-field .form-control::placeholder,
.ui-field .form-select::placeholder { color: var(--color-text-muted); opacity: 1; }
.ui-field .form-control:hover,
.ui-field .form-select:hover { border-color: var(--color-text-secondary); }
.ui-field .form-control:focus,
.ui-field .form-select:focus,
.ui-control.form-control:focus,
.ui-control.form-select:focus { border-color: var(--color-focus); outline: 2px solid var(--color-focus); outline-offset: 1px; box-shadow: var(--focus-ring); }
.ui-field .form-control.is-invalid,
.ui-field .form-select.is-invalid,
.ui-field[aria-invalid="true"] .form-control { border-color: var(--color-danger); }
.ui-field .form-control.is-invalid:focus,
.ui-field .form-select.is-invalid:focus { outline-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(180, 35, 50, .2); }
.ui-field .form-control:disabled,
.ui-field .form-select:disabled,
.ui-control.form-control:disabled { background: var(--color-surface-muted); color: var(--color-text-secondary); cursor: not-allowed; }
.ui-field .form-text,
.ui-field__help { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small); line-height: var(--line-small); }
.ui-field .invalid-feedback,
.ui-field__error { display: block; color: var(--color-danger); font-size: var(--text-small); line-height: var(--line-small); font-weight: var(--weight-medium); }
.ui-field--check { display: flex; align-items: flex-start; gap: var(--space-3); min-height: 44px; }
.form-check.ui-field--check { padding-inline-start: 0; }
.ui-field--check .form-check-input,
.form-check-input.ui-check { width: 1.25rem; height: 1.25rem; min-width: 1.25rem; margin: .1rem 0 0; border: 1px solid var(--color-border-strong); accent-color: var(--color-brand); }
.ui-field--check .form-check-input:checked,
.form-check-input.ui-check:checked { background-color: var(--color-brand); border-color: var(--color-brand); }
.ui-field--check .form-check-input:focus-visible,
.form-check-input.ui-check:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: var(--focus-ring); }
.ui-field--check .form-check-input:disabled,
.form-check-input.ui-check:disabled { opacity: .6; cursor: not-allowed; }
.ui-field--check .form-check-label { display: flex; align-items: center; min-height: 44px; color: var(--color-text); line-height: var(--line-body); }
.form-switch .ui-check { width: 2.5rem; min-width: 2.5rem; }

/* Status always carries a readable label. Icons may reinforce meaning. */
.ui-status-badge {
    --badge-fg: var(--color-text-secondary);
    --badge-bg: var(--color-surface-muted);
    --badge-border: var(--color-border);
    display: inline-flex; align-items: center; gap: var(--space-1);
    max-width: 100%; min-height: 26px;
    padding: .15rem .5rem;
    border: 1px solid var(--badge-border);
    border-radius: var(--radius-sm);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font: var(--weight-semibold) .8125rem/1.35 var(--font-ui);
    letter-spacing: .01em;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
}
.ui-status-badge--pending { --badge-fg: var(--color-warning); --badge-bg: var(--color-warning-soft); --badge-border: #D9B571; }
.ui-status-badge--processing { --badge-fg: var(--color-info); --badge-bg: var(--color-info-soft); --badge-border: #A5C8DC; }
.ui-status-badge--success,
.ui-status-badge--completed,
.ui-status-badge--confirmed { --badge-fg: var(--color-success); --badge-bg: var(--color-success-soft); --badge-border: #9CCBB3; }
.ui-status-badge--warning,
.ui-status-badge--unconfirmed { --badge-fg: var(--color-warning); --badge-bg: var(--color-warning-soft); --badge-border: #D9B571; }
.ui-status-badge--failed,
.ui-status-badge--error { --badge-fg: var(--color-danger); --badge-bg: var(--color-danger-soft); --badge-border: #DCA0A7; }
.ui-status-badge--archived { --badge-fg: var(--color-text-secondary); --badge-bg: var(--color-surface-muted); --badge-border: var(--color-border-strong); }

@media (min-width: 768px) {
    :root { --page-gutter-mobile: 1.5rem; --card-padding: var(--space-5); }
}
@media (min-width: 1024px) {
    :root { --page-gutter-mobile: var(--page-gutter); }
}
@media (max-width: 479px) {
    :root { --text-h1: 1.625rem; --text-h2: 1.375rem; --card-padding: var(--space-4); }
    .btn.ui-button.btn-sm { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .btn.ui-button { transition: none; }
    .ui-status-badge { animation: none; }
}