:root {
    /* Primitive tokens */
    --oa-gray-0: #ffffff;
    --oa-gray-25: #fafafa;
    --oa-gray-50: #f7f7f8;
    --oa-gray-100: #f4f4f5;
    --oa-gray-200: #e4e4e7;
    --oa-gray-300: #d4d4d8;
    --oa-gray-500: #71717a;
    --oa-gray-600: #52525b;
    --oa-gray-700: #3f3f46;
    --oa-gray-900: #18181b;
    --oa-gray-950: #09090b;
    --oa-teal-50: #f0fdfa;
    --oa-teal-700: #0f766e;
    --oa-green-50: #f0fdf4;
    --oa-green-700: #15803d;
    --oa-amber-50: #fffbeb;
    --oa-amber-700: #b45309;
    --oa-red-50: #fef2f2;
    --oa-red-700: #b91c1c;
    --oa-blue-50: #eff6ff;
    --oa-blue-700: #1d4ed8;
    --oa-space-1: 4px;
    --oa-space-2: 8px;
    --oa-space-3: 12px;
    --oa-space-4: 16px;
    --oa-space-5: 20px;
    --oa-space-6: 24px;
    --oa-space-8: 32px;

    /* Semantic tokens */
    --oa-color-canvas: var(--oa-gray-50);
    --oa-color-surface: var(--oa-gray-0);
    --oa-color-surface-subtle: var(--oa-gray-100);
    --oa-color-surface-hover: var(--oa-gray-25);
    --oa-color-border: var(--oa-gray-200);
    --oa-color-border-strong: var(--oa-gray-300);
    --oa-color-text: var(--oa-gray-900);
    --oa-color-text-muted: var(--oa-gray-500);
    --oa-color-text-subtle: var(--oa-gray-600);
    --oa-color-accent: var(--oa-teal-700);
    --oa-color-accent-soft: var(--oa-teal-50);
    --oa-color-success: var(--oa-green-700);
    --oa-color-success-soft: var(--oa-green-50);
    --oa-color-warning: var(--oa-amber-700);
    --oa-color-warning-soft: var(--oa-amber-50);
    --oa-color-danger: var(--oa-red-700);
    --oa-color-danger-soft: var(--oa-red-50);
    --oa-color-info: var(--oa-blue-700);
    --oa-color-info-soft: var(--oa-blue-50);
    --oa-color-focus-ring: rgba(24, 24, 27, 0.2);
    --oa-shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
    --oa-shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.08), 0 1px 2px rgba(9, 9, 11, 0.04);

    /* Component tokens */
    --oa-control-height: 36px;
    --oa-control-padding-inline: 10px;
    --oa-control-radius: 6px;
    --oa-panel-radius: 8px;
    --oa-panel-padding: 14px;
    --oa-table-row-height: 44px;
    --oa-table-cell-padding-block: 10px;
    --oa-table-cell-padding-inline: 12px;
    --oa-dialog-radius: 8px;
    --oa-dialog-padding: 18px;
    --oa-empty-state-min-height: 132px;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) {
    --bg: var(--oa-color-canvas);
    --surface: var(--oa-color-surface);
    --line: var(--oa-color-border);
    --border: var(--oa-color-border);
    --text: var(--oa-color-text);
    --muted: var(--oa-color-text-muted);
    --primary: var(--oa-gray-900);
    --primary-soft: var(--oa-gray-100);
    --success: var(--oa-color-success);
    --green: var(--oa-color-success);
    --green-soft: var(--oa-color-success-soft);
    --warning: var(--oa-color-warning);
    --amber: var(--oa-color-warning);
    --amber-soft: var(--oa-color-warning-soft);
    --danger: var(--oa-color-danger);
    --red: var(--oa-color-danger);
    --red-soft: var(--oa-color-danger-soft);
    --shadow: var(--oa-shadow-xs);
    background: var(--oa-color-canvas);
    color: var(--oa-color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(h1, h2, h3, .page-title, .panel-title, .card-title) {
    color: var(--oa-color-text);
    letter-spacing: 0;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.subtitle, .page-subtitle, .hint, .muted, .metric-label, .stat-label, .card-subtitle) {
    color: var(--oa-color-text-muted);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.standalone, .top-bar, .topbar) {
    background: var(--oa-gray-900);
    background-image: none;
    color: var(--oa-gray-0);
    box-shadow: none;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.panel, .card, .filter-section, .table-container, .toolbar, .metric, .stat-card, .detail-panel, .approval-card) {
    border: 1px solid var(--oa-color-border);
    border-radius: var(--oa-panel-radius);
    background: var(--oa-color-surface);
    box-shadow: var(--oa-shadow-xs);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.panel-head, .card-header, .detail-head) {
    border-color: var(--oa-color-border);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.toolbar, .filter-row, .filter-bar, .filters, .actions, .panel-actions, .btn-group, .form-actions) {
    gap: var(--oa-space-2);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.field, .form-group, .filter-item, .filter-group) {
    gap: 6px;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(label, .form-label) {
    color: var(--oa-color-text-subtle);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-input, .form-select, .form-textarea) {
    width: 100%;
    min-height: var(--oa-control-height);
    padding: 7px var(--oa-control-padding-inline);
    border: 1px solid var(--oa-color-border-strong);
    border-radius: var(--oa-control-radius);
    background: var(--oa-color-surface);
    color: var(--oa-color-text);
    box-shadow: var(--oa-shadow-xs);
    font: inherit;
    line-height: 1.4;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(textarea, .form-textarea) {
    min-height: 84px;
    resize: vertical;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(input[type="checkbox"], input[type="radio"]) {
    width: 16px;
    height: 16px;
    accent-color: var(--oa-gray-900);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-input, .form-select, .form-textarea):focus {
    outline: 0;
    border-color: var(--oa-gray-900);
    box-shadow: 0 0 0 3px var(--oa-color-focus-ring);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(input, select, textarea):disabled {
    cursor: not-allowed;
    border-color: var(--oa-color-border);
    background: var(--oa-color-surface-subtle);
    color: var(--oa-color-text-muted);
    opacity: 1;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.table-wrap, .table-container) {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--oa-color-text);
    font-variant-numeric: tabular-nums;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(th, td) {
    min-height: var(--oa-table-row-height);
    padding: var(--oa-table-cell-padding-block) var(--oa-table-cell-padding-inline);
    border-bottom: 1px solid var(--oa-color-border);
    font-size: 13px;
    line-height: 1.4;
    vertical-align: middle;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) th {
    background: var(--oa-color-surface-subtle);
    color: var(--oa-color-text-subtle);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) tbody tr:last-child td { border-bottom: 0; }
body[data-oa-button-system="v1"]:not(.oa-sidebar-system) tbody tr:hover { background: var(--oa-color-surface-hover); }

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.empty, .empty-state, [data-empty-state], .loading) {
    min-height: var(--oa-empty-state-min-height);
    padding: var(--oa-space-8) var(--oa-space-5);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--oa-space-2);
    color: var(--oa-color-text-muted);
    text-align: center;
    line-height: 1.6;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.modal-backdrop, .modal-overlay) {
    background: rgba(9, 9, 11, 0.58);
    backdrop-filter: blur(2px);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .modal {
    max-width: min(720px, calc(100vw - 32px));
    max-height: min(88vh, 860px);
    border: 1px solid var(--oa-color-border);
    border-radius: var(--oa-dialog-radius);
    background: var(--oa-color-surface);
    color: var(--oa-color-text);
    box-shadow: 0 20px 48px rgba(9, 9, 11, 0.2);
    overflow: auto;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.modal-head, .modal-header, .modal-foot, .modal-footer) {
    min-height: 56px;
    padding: 14px var(--oa-dialog-padding);
    border-color: var(--oa-color-border);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.modal-head, .modal-header) { border-bottom: 1px solid var(--oa-color-border); }
body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.modal-foot, .modal-footer) { border-top: 1px solid var(--oa-color-border); }
body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .modal-body { padding: var(--oa-dialog-padding); }
body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .modal-close { color: var(--oa-color-text-muted); }

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.status, .status-badge, .level-badge, .check-pill) {
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.status-completed, .status-approved, .status-locked, .status-success) {
    border-color: #bbf7d0;
    background: var(--oa-color-success-soft);
    color: var(--oa-color-success);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.status-pending, .status-submitted, .status-warning) {
    border-color: #fde68a;
    background: var(--oa-color-warning-soft);
    color: var(--oa-color-warning);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.status-failed, .status-rejected, .status-danger) {
    border-color: #fecaca;
    background: var(--oa-color-danger-soft);
    color: var(--oa-color-danger);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.status-processing, .status-info) {
    border-color: #bfdbfe;
    background: var(--oa-color-info-soft);
    color: var(--oa-color-info);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .toast {
    border: 1px solid var(--oa-gray-700);
    border-radius: var(--oa-control-radius);
    background: var(--oa-gray-900);
    color: var(--oa-gray-0);
    box-shadow: var(--oa-shadow-sm);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .toast.error {
    border-color: var(--oa-color-danger);
    background: var(--oa-color-danger);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.tabs, .segmented) {
    border: 1px solid var(--oa-color-border);
    border-radius: var(--oa-control-radius);
    background: var(--oa-color-surface-subtle);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.tabs .tab, .segmented button, .tab-btn) {
    border-radius: 4px;
    color: var(--oa-color-text-subtle);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.tabs .tab.active, .segmented button.active, .tab-btn.active) {
    background: var(--oa-color-surface);
    color: var(--oa-color-text);
    box-shadow: var(--oa-shadow-xs);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--oa-space-3);
}

body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--oa-gray-900);
    outline-offset: 2px;
}

@media (max-width: 700px) {
    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(.form-row, .grid-two) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--oa-space-3);
    }

    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) .modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
    }

    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) :where(th, td) { padding: 9px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) *,
    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) *::before,
    body[data-oa-button-system="v1"]:not(.oa-sidebar-system) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}