@import url('./tokens.css');

.sg-surface { background: var(--sg-color-neutral-0); color: var(--sg-color-neutral-900); }
.sg-page { min-height: 100vh; background: var(--sg-color-neutral-50); color: var(--sg-color-neutral-900); font-family: var(--sg-font-sans); line-height: var(--sg-leading-normal); }
.sg-container { width: min(calc(100% - 2 * var(--sg-space-6)), var(--sg-content-max)); margin-inline: auto; }
.sg-stack { display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sg-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-3); }
.sg-heading { margin: 0; font-size: var(--sg-text-2xl); line-height: var(--sg-leading-tight); letter-spacing: -0.02em; }
.sg-heading--sm { font-size: var(--sg-text-xl); }
.sg-heading--lg { font-size: var(--sg-text-3xl); }
.sg-muted { color: var(--sg-color-neutral-600); }
.sg-caption { color: var(--sg-color-neutral-500); font-size: var(--sg-text-sm); }
.sg-mono { font-family: var(--sg-font-mono); }

.sg-card { border: 1px solid var(--sg-color-neutral-200); border-radius: var(--sg-radius-lg); background: var(--sg-color-neutral-0); box-shadow: var(--sg-shadow-sm); padding: var(--sg-space-6); }
.sg-card--elevated { box-shadow: var(--sg-shadow-md); }
.sg-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sg-space-4); margin-bottom: var(--sg-space-5); }
.sg-card__title { margin: 0; font-size: var(--sg-text-lg); font-weight: 700; }

.sg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--sg-control-height); gap: var(--sg-space-2); padding: 0 var(--sg-space-4); border: 1px solid transparent; border-radius: var(--sg-radius-md); font: inherit; font-weight: 700; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.sg-btn:focus-visible, .sg-input:focus-visible, .sg-select:focus-visible, .sg-textarea:focus-visible { outline: none; box-shadow: var(--sg-focus-ring); }
.sg-btn:active { transform: translateY(1px); }
.sg-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.sg-btn--primary { color: #fff; background: var(--sg-color-primary-600); }
.sg-btn--primary:hover:not(:disabled) { background: var(--sg-color-primary-700); }
.sg-btn--secondary { color: var(--sg-color-neutral-800); background: var(--sg-color-neutral-0); border-color: var(--sg-color-neutral-300); }
.sg-btn--secondary:hover:not(:disabled) { background: var(--sg-color-neutral-50); }
.sg-btn--danger { color: #fff; background: var(--sg-color-danger-600); }
.sg-btn--ghost { color: var(--sg-color-neutral-700); background: transparent; }
.sg-btn--ghost:hover:not(:disabled) { background: var(--sg-color-neutral-100); }
.sg-btn--sm { min-height: 2.25rem; padding-inline: var(--sg-space-3); font-size: var(--sg-text-sm); }

.sg-field { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sg-label { color: var(--sg-color-neutral-800); font-size: var(--sg-text-sm); font-weight: 700; }
.sg-input, .sg-select, .sg-textarea { width: 100%; min-height: var(--sg-control-height); box-sizing: border-box; border: 1px solid var(--sg-color-neutral-300); border-radius: var(--sg-radius-md); background: var(--sg-color-neutral-0); color: var(--sg-color-neutral-900); padding: 0 var(--sg-space-3); font: inherit; }
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--sg-color-neutral-500); }
.sg-textarea { min-height: 7rem; padding-block: var(--sg-space-3); resize: vertical; }
.sg-input[aria-invalid="true"], .sg-select[aria-invalid="true"], .sg-textarea[aria-invalid="true"] { border-color: var(--sg-color-danger-600); }
.sg-help { color: var(--sg-color-neutral-500); font-size: var(--sg-text-xs); }
.sg-error { color: var(--sg-color-danger-600); font-size: var(--sg-text-sm); font-weight: 600; }

.sg-badge { display: inline-flex; align-items: center; min-height: 1.5rem; padding-inline: var(--sg-space-2); border-radius: var(--sg-radius-pill); font-size: var(--sg-text-xs); font-weight: 700; white-space: nowrap; }
.sg-badge--success { color: var(--sg-color-success-600); background: var(--sg-color-success-50); }
.sg-badge--warning { color: var(--sg-color-warning-600); background: var(--sg-color-warning-50); }
.sg-badge--danger { color: var(--sg-color-danger-600); background: var(--sg-color-danger-50); }
.sg-badge--info { color: var(--sg-color-info-600); background: var(--sg-color-info-50); }
.sg-badge--neutral { color: var(--sg-color-neutral-700); background: var(--sg-color-neutral-100); }

.sg-alert { display: flex; gap: var(--sg-space-3); padding: var(--sg-space-4); border: 1px solid var(--sg-color-neutral-200); border-radius: var(--sg-radius-md); }
.sg-alert--success { color: var(--sg-color-success-600); background: var(--sg-color-success-50); border-color: #bbf7d0; }
.sg-alert--warning { color: var(--sg-color-warning-600); background: var(--sg-color-warning-50); border-color: #fde68a; }
.sg-alert--danger { color: var(--sg-color-danger-600); background: var(--sg-color-danger-50); border-color: #fecaca; }
.sg-alert--info { color: var(--sg-color-info-600); background: var(--sg-color-info-50); border-color: #bfdbfe; }

.sg-table-wrap { overflow-x: auto; border: 1px solid var(--sg-color-neutral-200); border-radius: var(--sg-radius-lg); }
.sg-table { width: 100%; border-collapse: collapse; background: var(--sg-color-neutral-0); }
.sg-table th, .sg-table td { padding: var(--sg-space-3) var(--sg-space-4); border-bottom: 1px solid var(--sg-color-neutral-200); text-align: left; }
.sg-table th { color: var(--sg-color-neutral-600); background: var(--sg-color-neutral-50); font-size: var(--sg-text-sm); font-weight: 700; }
.sg-table tr:last-child td { border-bottom: 0; }
.sg-table tbody tr:hover { background: var(--sg-color-neutral-50); }

.sg-sidebar { width: var(--sg-sidebar-width); padding: var(--sg-space-5); border-right: 1px solid var(--sg-color-neutral-200); background: var(--sg-color-neutral-0); }
.sg-nav { display: flex; flex-direction: column; gap: var(--sg-space-1); }
.sg-nav__item { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--sg-space-3); border-radius: var(--sg-radius-md); color: var(--sg-color-neutral-700); text-decoration: none; font-size: var(--sg-text-sm); font-weight: 600; }
.sg-nav__item:hover { background: var(--sg-color-neutral-100); color: var(--sg-color-neutral-900); }
.sg-nav__item[aria-current="page"] { color: var(--sg-color-primary-700); background: var(--sg-color-primary-50); }

.sg-stat { display: flex; flex-direction: column; gap: var(--sg-space-2); }
.sg-stat__label { color: var(--sg-color-neutral-500); font-size: var(--sg-text-sm); font-weight: 600; }
.sg-stat__value { color: var(--sg-color-neutral-900); font-size: var(--sg-text-2xl); font-weight: 800; letter-spacing: -0.02em; }

@media (max-width: 48rem) {
  .sg-container { width: min(calc(100% - 2 * var(--sg-space-4)), var(--sg-content-max)); }
  .sg-card { padding: var(--sg-space-4); }
  .sg-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--sg-color-neutral-200); }
  .sg-heading--lg { font-size: var(--sg-text-2xl); }
}