/* ============================================================
   Atlas — System
   Typography, layout primitives, components.
   Depends on tokens.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--atlas-accent); color: #fff; }

/* ---------- TYPE ---------- */
.serif   { font-family: var(--serif); }
.sans    { font-family: var(--sans); }
.mono    { font-family: var(--mono); }

.display, .h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); }
.h1      { font-size: var(--fs-h1);      line-height: var(--lh-tight); }
.h2      { font-size: var(--fs-h2);      line-height: var(--lh-snug); }
.h3      { font-size: var(--fs-h3);      line-height: var(--lh-snug); font-weight: 500; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--atlas-muted);
  margin: 0 0 var(--s-3);
}

.lede {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--atlas-ink-2);
  max-width: var(--reading-max);
  text-wrap: pretty;
}

.body {
  max-width: var(--reading-max);
  text-wrap: pretty;
}

a { color: var(--atlas-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--atlas-rule-soft); }
a:hover { text-decoration-color: var(--atlas-ink); }

/* ---------- LAYOUT ---------- */
.shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-7);
}
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }
.stack-xl > * + * { margin-top: var(--s-8); }
.row { display: flex; align-items: center; gap: var(--s-3); }
.row.between { justify-content: space-between; }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

.rule { height: 1px; background: var(--atlas-rule-soft); border: 0; margin: var(--s-6) 0; }
.rule-strong { background: var(--atlas-rule); }

/* ---------- SITE NAV ---------- */
.site-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-7);
  border-bottom: 1px solid var(--atlas-rule-soft);
  background: var(--atlas-paper);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 22px; letter-spacing: -.005em;
}
.brand .mark {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--atlas-ink) 0 50%, var(--atlas-accent) 50% 100%);
  display: inline-block;
}
.site-nav .links {
  display: flex; gap: var(--s-5);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--atlas-muted);
}
.site-nav .links a { color: inherit; text-decoration: none; }
.site-nav .links a:hover, .site-nav .links a[aria-current="page"] { color: var(--atlas-ink); }

/* ---------- BUTTONS ---------- */
.btn {
  --btn-bg: var(--atlas-ink);
  --btn-fg: var(--atlas-paper);
  --btn-bd: var(--atlas-ink);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  --btn-bg: transparent;
  --btn-fg: var(--atlas-ink);
  --btn-bd: var(--atlas-rule-soft);
}
.btn.ghost:hover { --btn-bd: var(--atlas-ink); }
.btn.subtle {
  --btn-bg: var(--atlas-paper-2);
  --btn-fg: var(--atlas-ink);
  --btn-bd: transparent;
}
.btn.lg { padding: 14px 24px; font-size: 15px; }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--atlas-paper); color: var(--atlas-ink);
  border: 1px solid var(--atlas-rule-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--atlas-ink); }

/* ---------- FORM ---------- */
.input {
  display: block; width: 100%;
  padding: 10px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--atlas-ink);
  background: var(--atlas-paper);
  border: 1px solid var(--atlas-rule-soft);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.input:focus { border-color: var(--atlas-ink); }

/* ---------- BADGES + CHIPS ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--atlas-paper-2); color: var(--atlas-ink-2);
  border: 1px solid var(--atlas-rule-soft);
}
.badge.solid { background: var(--atlas-ink); color: var(--atlas-paper); border-color: var(--atlas-ink); }
.badge.new   { background: color-mix(in oklab, var(--atlas-good) 15%, var(--atlas-paper)); color: var(--atlas-good); border-color: color-mix(in oklab, var(--atlas-good) 30%, transparent); }
.badge.end   { background: color-mix(in oklab, var(--atlas-warn) 15%, var(--atlas-paper)); color: var(--atlas-warn); border-color: color-mix(in oklab, var(--atlas-warn) 30%, transparent); }

.pchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--p-aws);
  color: #fff;
  font-family: var(--serif); font-weight: 600; font-size: 18px;
}
.pchip[data-provider="azure"]    { background: var(--p-azure); }
.pchip[data-provider="aws"]      { background: var(--p-aws); }
.pchip[data-provider="gcp"]      { background: var(--p-gcp); }
.pchip[data-provider="cisco"]    { background: var(--p-cisco); }
.pchip[data-provider="anthropic"]{ background: var(--p-anthropic); }
.pchip[data-provider="comptia"]  { background: var(--p-comptia); }
.pchip[data-provider="pmi"]      { background: var(--p-pmi); }
.pchip[data-provider="isaca"]    { background: var(--p-isaca); }
.pchip[data-provider="github"]   { background: var(--p-github); }
.pchip[data-provider="databricks"]{ background: var(--p-databricks); }
.pchip[data-provider="nvidia"]   { background: var(--p-nvidia); }
.pchip[data-provider="isc2"]     { background: var(--p-isc2); }

/* ---------- CARD ---------- */
.card {
  background: var(--atlas-paper);
  border: 1px solid var(--atlas-rule-soft);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.card.flat { border-radius: 0; border-left: 0; border-right: 0; }
.card.inset { background: var(--atlas-paper-2); border-color: transparent; }

/* ---------- EXAM ROW (used in provider list) ---------- */
.exam-row {
  display: grid;
  grid-template-columns: 96px 1fr 120px 100px 36px;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--atlas-rule-soft);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  text-decoration: none;
  color: inherit;
}
.exam-row:hover { background: color-mix(in oklab, var(--atlas-ink) 3%, transparent); }
.exam-row:last-of-type { border-bottom: 1px solid var(--atlas-rule-soft); }
.exam-row .code {
  font-family: var(--mono); font-size: 13px;
  letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.exam-row .name {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  line-height: 1.2; letter-spacing: -.005em;
}
.exam-row .desc {
  font-size: 13px; color: var(--atlas-ink-2);
  margin-top: 4px; max-width: 580px; line-height: 1.45;
}
.exam-row .level {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--atlas-muted);
}
.exam-row .level b {
  display: block;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--atlas-ink); letter-spacing: 0; text-transform: none;
  margin-top: 2px;
}
.exam-row .qcount {
  font-family: var(--mono); font-size: 13px;
  color: var(--atlas-muted); text-align: right;
}
.exam-row .arrow {
  font-family: var(--mono); color: var(--atlas-muted);
  text-align: right;
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.exam-row:hover .arrow { transform: translateX(4px); color: var(--atlas-ink); }

/* ---------- META BAR ---------- */
.meta-bar {
  display: flex; gap: var(--s-6);
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--atlas-muted);
}
.meta-bar b { color: var(--atlas-ink); font-weight: 500; }

/* ---------- PROGRESS ---------- */
.progress {
  height: 6px;
  background: var(--atlas-rule-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--atlas-accent);
  border-radius: inherit;
  transition: width var(--t-slow) var(--ease);
}

/* ---------- THEME TOGGLE (icon button) ---------- */
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
[data-theme="dark"] .theme-toggle .sun  { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ---------- A11Y ---------- */
:focus-visible {
  outline: 2px solid var(--atlas-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- PRINT ---------- */
@media print {
  body { background: #fff; color: #000; }
  .no-print { display: none !important; }
}