/* KayrosLab shared site layer — SLDS-inspired light patterns.
 * Consumes tokens.css only. Load order: tokens.css → (page styles) → site.css
 * Provides: base type + light palette, page header, cards, the SLDS button set,
 * tags/badges, tables, links and a visible focus ring. No raw color lives here.
 */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Standalone documents ship inline CSS; these keep the SLDS typography/palette authoritative. */
body { font-family: var(--font-body) !important; color: var(--color-ink); }
h1, h2, h3, h4, h5, h6, .eyebrow, .display { font-family: var(--font-display) !important; letter-spacing: -0.01em; }
h1, h2 { color: var(--color-ink-deep); }
code, pre, kbd, samp, .mono, .font-mono { font-family: var(--font-mono) !important; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .18em; }
hr { border: 0; border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- Layout ---------- */
.frame { width: min(calc(100% - 2rem), 78rem); margin-inline: auto; }
.stack { display: grid; gap: var(--space-md); }

/* ---------- Page header pattern ---------- */
.page-header, .slds-page-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule);
}
.page-header h1, .slds-page-header h1 { margin: 0; font-size: var(--text-xl); font-weight: 700; }

/* ---------- Logo lockup ---------- */
.brand, .wordmark {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-display) !important; font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -0.02em; color: var(--color-ink); text-decoration: none; line-height: 1;
}
.brand:hover, .wordmark:hover { color: var(--color-ink); text-decoration: none; }
.brand__mark, .brand-mark, .wordmark img, .brand img {
  width: 1.9em; height: 1.9em; flex: none; border-radius: var(--radius-md); display: block;
}
.brand__name { white-space: nowrap; }

/* ---------- Card pattern ---------- */
.card, .panel, .slds-card {
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}
.card > h2, .panel > h2 { margin-top: 0; font-size: var(--text-lg); }

/* ---------- Tag / badge pattern ---------- */
.chip, .tag, .slds-badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 1px var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: var(--text-xs);
}
.tag--brand { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-accent-strong); }
.tag--success { background: var(--color-positive-soft); border-color: var(--color-positive-soft); color: var(--color-success); }
.tag--warning { background: var(--color-warning-soft); border-color: var(--color-warning-soft); color: #8a3d00; }
.tag--danger { background: var(--color-danger-soft); border-color: var(--color-danger-soft); color: var(--color-danger); }

/* ---------- Button pattern (SLDS) ---------- */
.button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 2rem; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: 0.8125rem; font-weight: 400; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.button:hover, .btn:hover { background: #f4f6f9; color: var(--color-accent-strong); text-decoration: none; }
.button:active, .btn:active { background: #eef4fe; }
.button:focus-visible, .btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.button--primary, .btn--primary, .button.primary, .btn.primary {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink);
}
.button--primary:hover, .btn--primary:hover, .button.primary:hover, .btn.primary:hover {
  background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: var(--color-accent-ink); text-decoration: none;
}
.button--ghost, .btn--ghost, .button--link {
  border-color: transparent; background: transparent; color: var(--color-accent); padding-inline: var(--space-xs);
}
.button--ghost:hover, .btn--ghost:hover, .button--link:hover { background: transparent; color: var(--color-accent-strong); text-decoration: underline; }
.button--destructive, .btn--destructive {
  background: var(--color-surface); border-color: var(--color-rule); color: #ba0517;
}
.button--destructive:hover, .btn--destructive:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.button[aria-disabled="true"], .button:disabled, .btn:disabled {
  background: var(--color-surface); border-color: #e5e5e5; color: #c9c9c9; cursor: not-allowed; pointer-events: none;
}
.button[data-state="loading"], .btn[data-state="loading"] { cursor: wait; opacity: .85; }
.button[data-state="error"] { border-color: var(--color-danger); color: var(--color-danger); }
.button[data-state="success"] { border-color: var(--color-success); color: var(--color-success); }

.text-link { color: var(--color-link); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Table pattern (SLDS) ---------- */
.table, .slds-table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); }
.table th, .slds-table th {
  text-align: left; padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper); color: var(--color-muted);
  font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.table td, .slds-table td { padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid #e5e5e5; }
.table tr:nth-child(even) td { background: var(--color-surface-raised); }