/* Global Design System
   Scope: shared visual layer for the configuration management platform.
   Direction: restrained Vercel / Linear / Stripe inspired SaaS console. */

:root {
  /* Canvas + surfaces */
  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-hover: #f8fafc;

  /* Typography */
  --text-primary: #0f172a;
  --text-regular: #334155;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  /* Lines */
  --border-light: #e1e4e8;
  --border-subtle: #e2e8f0;
  --border-focus: #cbd5e1;

  /* Single brand accent */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;

  /* Soft semantic states */
  --status-amber: #b45309;
  --status-amber-bg: #fffbeb;
  --status-amber-border: #fde68a;
  --status-emerald: #047857;
  --status-emerald-bg: #ecfdf5;
  --status-emerald-border: #a7f3d0;
  --status-rose: #be123c;
  --status-rose-bg: #fff1f2;
  --status-rose-border: #fecdd3;

  /* Diff tones: intentionally quiet, function-specific */
  --diff-add-bg: #f0fdf4;
  --diff-add-fg: #166534;
  --diff-del-bg: #fff1f2;
  --diff-del-fg: #9f1239;

  /* Shadows + geometry */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 18px 44px rgba(15, 23, 42, 0.045);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.07);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Existing token aliases used by the pages */
  --bg: var(--bg-body);
  --surface: var(--bg-surface);
  --surface-soft: var(--bg-subtle);
  --surface-warm: var(--bg-surface);
  --fg: var(--text-primary);
  --fg-2: var(--text-regular);
  --muted: var(--text-muted);
  --muted-2: var(--text-faint);
  --meta: var(--text-muted);
  --border: var(--border-light);
  --border-soft: var(--border-subtle);
  --accent: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-active: var(--color-primary-hover);
  --accent-soft: var(--color-primary-soft);
  --accent-on: #ffffff;
  --success: var(--status-emerald);
  --success-soft: var(--status-emerald-bg);
  --warn: var(--status-amber);
  --warn-soft: var(--status-amber-bg);
  --danger: var(--status-rose);
  --danger-soft: var(--status-rose-bg);
  --shadow: var(--shadow-sm);
  --shadow-soft: var(--shadow-md);
  --shadow-panel: var(--shadow-lg);
  --radius: var(--radius-md);
  --font-display: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: var(--bg-body) !important;
  background-image: none !important;
  color: var(--text-regular) !important;
  font-family: var(--font-body) !important;
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
.heading-large,
.page-title {
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.page-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 8px;
}

.page-content,
.main,
.main-shell {
  color: var(--text-regular) !important;
}

.page-head,
.page-hero {
  margin-bottom: 28px !important;
}

.brand-title,
.panel-title,
.table-toolbar h2,
.card-title h2,
.diff-title h2,
.summary-copy h2,
.pending-copy h2,
.result-copy h2,
.modal-title {
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
}

.brand-subtitle,
.crumb-line,
.breadcrumb,
.page-subtitle,
.panel-desc,
.card-title p,
.table-toolbar p,
.summary-copy p,
.pending-copy p,
.result-copy p,
.field label,
.muted,
.decision-help,
.audit-count span,
.config-summary,
.action-status,
.sidebar-footer,
.helper-text,
.modal-help {
  color: var(--text-muted) !important;
  font-size: 12px;
}

/* Layout shell */
.main,
.main-shell,
.page-content {
  background: var(--bg-body) !important;
}

.sidebar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  padding: 22px 16px !important;
}

.brand-mark {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.nav-item {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text-regular) !important;
  font-weight: 560 !important;
  text-decoration: none !important;
}

.nav-item:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.nav-item.is-active,
.nav-item[aria-current="page"] {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary) !important;
}

.sidebar-footer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: auto !important;
  padding: 14px 10px 2px !important;
}

.topbar {
  background: rgba(248, 250, 252, 0.88) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Surfaces */
.page-head,
.page-hero,
.welcome-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.content-card,
.panel,
.summary-card,
.pending-card,
.result-panel,
.diff-panel,
.decision-panel,
.editor-panel,
.filter-panel,
.table-panel,
.card-premium,
.modal,
.member-modal,
.notification-popover,
.toast {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

.content-card,
.panel,
.summary-card,
.pending-card,
.result-panel,
.diff-panel,
.decision-panel,
.editor-panel,
.filter-panel,
.table-panel {
  padding-block: clamp(20px, 2vw, 28px);
}

.content-card:hover,
.panel:hover,
.summary-card:hover,
.pending-card:hover,
.result-panel:hover,
.diff-panel:hover,
.decision-panel:hover,
.editor-panel:hover,
.filter-panel:hover,
.table-panel:hover,
.card-premium:hover {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-md) !important;
}

.panel-header,
.card-toolbar,
.table-toolbar,
.diff-header,
.action-bar,
.decision-actions,
.modal-head,
.modal-actions,
.filter-bar {
  border-color: var(--border-subtle) !important;
}

/* Controls */
.btn,
.primary-action,
.ghost-action,
.btn-primary,
.btn-ghost,
.btn-secondary,
.btn-reject,
.btn-retry,
.btn-approve,
.table-action,
.text-link,
.editor-tab,
.status-option span,
.action-card {
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn,
.btn-ghost,
.ghost-action,
.btn-secondary,
.btn-reject,
.btn-retry {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-regular) !important;
}

.btn:hover,
.btn-ghost:hover,
.ghost-action:hover,
.btn-secondary:hover,
.btn-reject:hover,
.btn-retry:hover {
  border-color: var(--border-focus) !important;
  color: var(--text-primary) !important;
  background: var(--bg-hover) !important;
}

.btn.primary,
.btn-primary,
.primary-action,
.btn-approve {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

.btn.primary:hover,
.btn-primary:hover,
.primary-action:hover,
.btn-approve:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #ffffff !important;
}

.btn:disabled,
.btn-retry:disabled,
button[disabled] {
  background: var(--bg-subtle) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-faint) !important;
  cursor: not-allowed;
}

.role-chip,
.icon-button,
.cluster-select,
.config-select,
.control,
.search-box,
input,
select,
textarea {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-regular) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint) !important;
}

.role-chip:hover,
.icon-button:hover,
.cluster-select:hover,
.config-select:hover,
.control:hover,
.search-box:hover,
input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-focus) !important;
}

.text-link,
.table-action {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-primary) !important;
  font-weight: 560 !important;
  padding: 0 !important;
}

.text-link:hover,
.table-action:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.editor-tab.is-active,
.editor-tab[aria-selected="true"],
.status-option input:checked + span {
  background: var(--color-primary-soft) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: var(--color-primary) !important;
}

/* Status chips */
.badge,
.status-badge,
.status-chip,
.result-badge,
.type-tag,
.role-tag,
.group-pill,
.state-pill,
.density-note,
.role-pill,
.scope-tag {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-regular) !important;
  box-shadow: none !important;
}

.badge-success,
.badge.success,
.status-badge.success,
.result-badge.success,
.status-chip.success,
.status-pill:not(.is-left) {
  background: var(--status-emerald-bg) !important;
  border-color: var(--status-emerald-border) !important;
  color: var(--status-emerald) !important;
}

.badge.pending,
.status-badge,
.status-badge.pending,
.status-chip.pending,
.state-pill.pending {
  background: var(--status-amber-bg) !important;
  border-color: var(--status-amber-border) !important;
  color: var(--status-amber) !important;
}

.result-badge.fail,
.status-badge.fail,
.status-chip.fail,
.status-pill.is-left,
.btn-reject {
  background: var(--status-rose-bg) !important;
  border-color: var(--status-rose-border) !important;
  color: var(--status-rose) !important;
}

.role-dot,
.notify-dot,
.chip-dot,
.timeline-dot,
.status-dot {
  background: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-primary-soft) !important;
}

.result-badge.success svg,
.result-badge.fail svg,
.badge::before,
.type-tag::before {
  color: currentColor !important;
  background: currentColor !important;
}

/* Tables */
table,
.config-table,
.member-table,
.audit-table {
  background: var(--bg-surface) !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.table-wrap,
.table-scroll,
.member-table-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

th,
.config-table th,
.member-table th,
.audit-table th {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

td,
.config-table td,
.member-table td,
.audit-table td {
  border-bottom: 1px solid var(--border-subtle) !important;
  color: var(--text-regular) !important;
  font-size: 13px !important;
}

tbody tr,
tbody tr:nth-child(even) {
  background: transparent !important;
}

tbody tr:hover td {
  background: var(--bg-hover) !important;
}

.value-code,
.key-code,
.group-id,
.code {
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: -0.01em !important;
}

.field label,
label {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

.config-select,
.cluster-select,
.control,
.search-box,
input,
select,
textarea {
  border-radius: var(--radius-sm) !important;
}

/* Dashboard and action entries */
.action-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
}

.action-card:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-md) !important;
}

.action-card-icon,
.avatar,
.summary-avatar,
.operator .avatar {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.timeline-item {
  border-color: var(--border-subtle) !important;
}

/* Code and diff views */
.yaml-editor,
.code-lines,
.diff-card,
.code-panel,
.code-table,
.diff-grid {
  background: var(--bg-hover) !important;
  border-color: var(--border-light) !important;
  color: var(--text-regular) !important;
  box-shadow: none !important;
}

.code-line.add,
.code-table .add,
.line-add,
.is-changed {
  background: var(--diff-add-bg) !important;
  color: var(--diff-add-fg) !important;
}

.code-line.del,
.code-table .del,
.line-del {
  background: var(--diff-del-bg) !important;
  color: var(--diff-del-fg) !important;
  text-decoration-color: rgba(190, 18, 60, 0.34);
}

/* Overlays */
.modal,
.member-modal {
  box-shadow: var(--shadow-lg) !important;
}

.modal-backdrop,
.drawer-backdrop {
  background: rgba(15, 23, 42, 0.24) !important;
}

.toast,
#toast {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Focus and motion */
.nav-item:focus-visible,
.icon-button:focus-visible,
.action-card:focus-visible,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.primary-action:focus-visible,
.ghost-action:focus-visible,
.table-action:focus-visible,
.text-link:focus-visible,
.editor-tab:focus-visible,
.control:focus-visible,
.config-select:focus-visible,
.cluster-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.18) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}