/* ============================================================================
   Architect Buddy — Design System bundle
   Synced from claude.ai/design project "Architect Buddy Design System"
   (a8a0a7fc-1304-489e-be47-4b9c916d96b0). Concatenation of tokens/* +
   components.css in the styles.css import order. Fonts are loaded via a
   <link> tag in each page head instead of tokens/fonts.css.
   Do not hand-edit component rules here — re-sync from the design project.
   ============================================================================ */

/* ── tokens/colors.css ────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --ab-bg:        #f4f3ee;   /* app background — warm paper */
  --ab-surf:      #ffffff;   /* raised surface / cards */
  --ab-surf-2:    #faf9f4;   /* recessed surface / toolbars, insets */

  /* Ink */
  --ab-ink:       #181a1f;   /* primary text */
  --ab-mut:       #5c6169;   /* secondary / muted text */
  --ab-line:      #e4e3dc;   /* borders & dividers */

  /* Action — indigo */
  --ab-acc:       #2b44c7;   /* primary action */
  --ab-acc-ink:   #213bbf;   /* accent text on light surfaces (AA) */
  --ab-acc-soft:  #eceffb;   /* accent tint / selected background */
  --ab-on-acc:    #ffffff;   /* text/icon on --ab-acc */

  /* Signal — amber (tradeoffs, uncertainty, "free by default") + error */
  --ab-warn:      #c9791f;
  --ab-warn-ink:  #a9640f;   /* amber text on light (AA) */
  --ab-err:       #c0392b;

  /* Blueprint grid line */
  --ab-grid:      rgba(24,26,31,.055);
}

:root { color-scheme: light; }

:root[data-theme="dark"] {
  --ab-bg:#0e1015; --ab-surf:#171a23; --ab-surf-2:#12151d;
  --ab-ink:#e9ebf2; --ab-mut:#9aa0b0; --ab-line:#262a38;
  --ab-acc:#6f86ff; --ab-acc-ink:#9fb0ff; --ab-acc-soft:rgba(111,134,255,.14); --ab-on-acc:#0b1020;
  --ab-warn:#e2a765; --ab-warn-ink:#e2a765; --ab-err:#ff8a7a;
  --ab-grid:rgba(255,255,255,.05);
  color-scheme: dark;
}

/* ── tokens/typography.css ────────────────────────────────────────────────── */
:root {
  --ab-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ab-font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --ab-font-mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --ab-text-xs:   11px;
  --ab-text-sm:   13px;
  --ab-text-base: 15px;
  --ab-text-md:   16px;
  --ab-text-lg:   18px;
  --ab-text-xl:   23px;
  --ab-text-2xl:  30px;
  --ab-text-3xl:  34px;
  --ab-text-4xl:  50px;
}

/* ── tokens/spacing.css ───────────────────────────────────────────────────── */
:root {
  --ab-s1: 4px;  --ab-s2: 8px;  --ab-s3: 12px; --ab-s4: 16px;
  --ab-s5: 22px; --ab-s6: 30px; --ab-s7: 40px; --ab-s8: 56px; --ab-s9: 64px;

  --ab-r-sm:   6px;
  --ab-r:      11px;
  --ab-r-lg:   16px;
  --ab-r-pill: 999px;
}

/* ── tokens/elevation.css ─────────────────────────────────────────────────── */
:root {
  --ab-shadow:    0 22px 54px rgba(15,20,30,.10);
  --ab-shadow-sm: 0 6px 18px rgba(20,25,30,.07);

  --ab-ease: cubic-bezier(.2,.6,.2,1);
  --ab-dur:  .16s;
}

:root[data-theme="dark"] {
  --ab-shadow:0 22px 54px rgba(0,0,0,.42); --ab-shadow-sm:0 6px 18px rgba(0,0,0,.35);
}

/* ── tokens/base.css ──────────────────────────────────────────────────────── */
.ab-root, body.ab-root {
  margin: 0;
  background: var(--ab-bg);
  color: var(--ab-ink);
  font-family: var(--ab-font-body);
  font-size: var(--ab-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ab-root *, .ab-root *::before, .ab-root *::after { box-sizing: border-box; }

/* ── tokens/components.css ────────────────────────────────────────────────── */

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────────── */
.ab-eyebrow {                          /* mono kicker above a heading */
  font: 600 var(--ab-text-xs)/1.3 var(--ab-font-mono);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ab-acc-ink);
}
.ab-label {                            /* small mono section label */
  font: 600 10.5px/1.3 var(--ab-font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ab-mut);
}
.ab-display   { font: 600 var(--ab-text-4xl)/1.07 var(--ab-font-display); letter-spacing:-.02em; margin:0; }
.ab-h1        { font: 600 var(--ab-text-3xl)/1.12 var(--ab-font-display); letter-spacing:-.015em; margin:0; }
.ab-h2        { font: 600 var(--ab-text-2xl)/1.14 var(--ab-font-display); letter-spacing:-.015em; margin:0; }
.ab-h3        { font: 600 var(--ab-text-lg)/1.2  var(--ab-font-display); margin:0; }
.ab-h4        { font: 600 var(--ab-text-md)/1.2  var(--ab-font-display); margin:0; }
.ab-lead      { font: 400 var(--ab-text-lg)/1.55 var(--ab-font-body); color: var(--ab-mut); margin:0; }
.ab-text      { font: 400 var(--ab-text-base)/1.6 var(--ab-font-body); color: var(--ab-mut); margin:0; }
.ab-text-sm   { font: 400 var(--ab-text-sm)/1.45 var(--ab-font-body); color: var(--ab-mut); margin:0; }
.ab-mono      { font: 500 var(--ab-text-sm)/1.5 var(--ab-font-mono); color: var(--ab-ink); }
.ab-strong    { color: var(--ab-ink); font-weight: 600; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.ab-btn {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font: 600 var(--ab-text-base)/1 var(--ab-font-body);
  border:1px solid transparent; border-radius: var(--ab-r);
  padding: 14px 22px; cursor:pointer; text-decoration:none;
  transition: background var(--ab-dur) var(--ab-ease), border-color var(--ab-dur) var(--ab-ease), transform var(--ab-dur) var(--ab-ease);
}
.ab-btn:active { transform: translateY(1px); }
.ab-btn--primary { background: var(--ab-acc); color: var(--ab-on-acc); }
.ab-btn--primary:hover { background: var(--ab-acc-ink); }
.ab-btn--ghost { background: transparent; color: var(--ab-ink); border-color: var(--ab-line); }
.ab-btn--ghost:hover { background: var(--ab-surf-2); }
.ab-btn--sm { padding: 10px 18px; font-size: var(--ab-text-sm); }

/* ── BADGES, CHIPS, PILLS, TAGS ───────────────────────────────────────────── */
.ab-badge {                            /* status pill, e.g. "Always free" */
  display:inline-flex; align-items:center; gap:6px;
  font: 600 var(--ab-text-xs)/1 var(--ab-font-mono);
  letter-spacing:.06em; text-transform:uppercase;
  color: var(--ab-acc-ink); background: var(--ab-acc-soft);
  padding: 6px 11px; border-radius: var(--ab-r-pill);
}
.ab-badge__dot { width:6px; height:6px; border-radius:50%; background: var(--ab-acc); }
.ab-badge--soft { color: var(--ab-mut); background: transparent; border:1px solid var(--ab-line); }
.ab-badge--free {                      /* amber outline "free by default" */
  color: var(--ab-warn-ink); background: transparent;
  border:1px solid var(--ab-warn); letter-spacing:.05em;
}
.ab-chip {
  font: 500 12.5px/1 var(--ab-font-body); color: var(--ab-ink);
  background: var(--ab-surf); border:1px solid var(--ab-line);
  border-radius: var(--ab-r-pill); padding: 6px 12px;
}
.ab-tag {                              /* solid mini-tag, e.g. "Pick" */
  font: 600 9.5px/1 var(--ab-font-mono); letter-spacing:.06em; text-transform:uppercase;
  color: var(--ab-on-acc); background: var(--ab-acc);
  padding: 3px 7px; border-radius: 5px;
}

/* ── SURFACES ─────────────────────────────────────────────────────────────── */
.ab-card {
  background: var(--ab-surf); border:1px solid var(--ab-line);
  border-radius: var(--ab-r-lg); box-shadow: var(--ab-shadow-sm);
}
.ab-card--flat  { box-shadow:none; }
.ab-card--float { box-shadow: var(--ab-shadow); }
.ab-card--soft  { background: var(--ab-acc-soft); border-color: var(--ab-line); }
.ab-inset { background: var(--ab-surf-2); border:1px solid var(--ab-line); border-radius: var(--ab-r); }
.ab-divider { height:1px; background: var(--ab-line); border:0; margin:0; }

/* Blueprint grid background — add to a positioned container */
.ab-grid-bg { position:relative; }
.ab-grid-bg::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--ab-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ab-grid) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(115% 95% at 80% 26%, #000, transparent 70%);
          mask-image: radial-gradient(115% 95% at 80% 26%, #000, transparent 70%);
}
.ab-grid-bg > * { position:relative; z-index:1; }

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.ab-input {
  font: 500 var(--ab-text-base)/1 var(--ab-font-body); color: var(--ab-ink);
  background: var(--ab-surf); border:1px solid var(--ab-line);
  border-radius: var(--ab-r); padding: 14px 16px; outline:none; width:100%;
  transition: border-color var(--ab-dur) var(--ab-ease), box-shadow var(--ab-dur) var(--ab-ease);
}
.ab-input::placeholder { color: var(--ab-mut); }
.ab-input:focus { border-color: var(--ab-acc); box-shadow: 0 0 0 3px var(--ab-acc-soft); }
.ab-field-row { display:flex; gap:10px; flex-wrap:wrap; }
.ab-field-error { font: 500 var(--ab-text-sm)/1.4 var(--ab-font-body); color: var(--ab-err); }
.ab-field-note  { font: 400 12.5px/1.4 var(--ab-font-body); color: var(--ab-mut); }
.ab-success {
  display:flex; align-items:center; gap:12px;
  font: 500 var(--ab-text-base)/1.4 var(--ab-font-body); color: var(--ab-ink);
  background: var(--ab-acc-soft); border:1px solid var(--ab-line);
  border-radius: var(--ab-r); padding: 16px 18px;
}
.ab-success__check { font: 700 16px var(--ab-font-mono); color: var(--ab-acc-ink); }

/* ── CONFIDENCE METER ─────────────────────────────────────────────────────── */
.ab-confidence { display:flex; align-items:center; gap:9px; }
.ab-confidence__track { display:flex; gap:3px; }
.ab-confidence__seg { width:16px; height:5px; border-radius:2px; background: var(--ab-line); }
.ab-confidence__seg--on { background: var(--ab-acc); }
.ab-confidence__label { font: 600 12px var(--ab-font-mono); color: var(--ab-acc-ink); }
.ab-confidence--lg .ab-confidence__seg { width:18px; height:6px; }

/* ── REPORT ───────────────────────────────────────────────────────────────── */
.ab-report {
  background: var(--ab-surf); border:1px solid var(--ab-line);
  border-radius: var(--ab-r-lg); box-shadow: var(--ab-shadow); overflow:hidden;
}
.ab-report__bar {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding: 15px 22px; border-bottom:1px solid var(--ab-line); background: var(--ab-surf-2);
}
.ab-report__file { display:flex; align-items:center; gap:9px; font: 600 12.5px var(--ab-font-mono); color: var(--ab-mut); }
.ab-report__file::before { content:""; width:9px; height:9px; border-radius:2px; background: var(--ab-acc); }
.ab-report__body { padding: 32px 34px; }
.ab-report__foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 16px 22px; border-top:1px solid var(--ab-line); background: var(--ab-surf-2);
  font: 500 12.5px var(--ab-font-body); color: var(--ab-mut);
}
.ab-report__section { margin-top: 28px; padding-top: 28px; border-top:1px solid var(--ab-line); }

.ab-quote {                            /* the user's original question */
  border-left:2px solid var(--ab-acc); padding: 2px 0 2px 16px; margin-bottom: var(--ab-s6);
}
.ab-quote p { font: 400 var(--ab-text-md)/1.5 var(--ab-font-body); color: var(--ab-ink); margin:0; }

/* Options compared */
.ab-option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ab-option {
  border:1px solid var(--ab-line); border-radius:12px; padding:18px 16px; background: var(--ab-surf);
}
.ab-option--pick { border:1.5px solid var(--ab-acc); background: var(--ab-acc-soft); }
.ab-option__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ab-option__name { font: 600 var(--ab-text-base) var(--ab-font-display); }
.ab-option__row {
  display:flex; justify-content:space-between; font: 500 var(--ab-text-sm) var(--ab-font-body);
  color: var(--ab-ink); padding:5px 0; border-top:1px solid var(--ab-line);
}
.ab-option__row span:first-child { color: var(--ab-mut); }
.ab-option__note { font: 400 12.5px/1.4 var(--ab-font-body); color: var(--ab-mut); margin:10px 0 0; }

/* Evaluated / fit rating rows */
.ab-rate { display:inline-flex; align-items:center; gap:6px; font: 600 12px var(--ab-font-mono); }
.ab-rate::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
.ab-rate--strong { color: var(--ab-acc-ink); }
.ab-rate--fair   { color: var(--ab-mut); }
.ab-rate--weak   { color: var(--ab-warn-ink); }

/* Point lists — assumptions / tradeoffs / uncertainty */
.ab-points { display:flex; flex-direction:column; gap:11px; }
.ab-point {
  display:flex; gap:10px; align-items:flex-start;
  font: 400 14.5px/1.4 var(--ab-font-body); color: var(--ab-ink);
}
.ab-point::before { flex:0 0 auto; font-family: var(--ab-font-mono); }
.ab-point--note::before { content:"\203A"; font-weight:600; font-size:13px; color: var(--ab-mut); }        /* › */
.ab-point--pos::before  { content:"+";     font-weight:700; font-size:14px; color: var(--ab-acc); }
.ab-point--neg::before  { content:"\2212"; font-weight:700; font-size:14px; color: var(--ab-warn-ink); }   /* − */
.ab-point--warn::before { content:"!";     font-weight:700; font-size:14px; color: var(--ab-warn-ink); }

/* Reference list */
.ab-refs { display:grid; grid-template-columns:1fr 1fr; gap:10px 34px; }
.ab-ref { display:flex; gap:11px; font: 400 13.5px/1.4 var(--ab-font-body); color: var(--ab-ink); }
.ab-ref__n { font: 600 12px var(--ab-font-mono); color: var(--ab-acc-ink); flex:0 0 auto; }

/* Two-column split for assumptions/tradeoffs */
.ab-split-2 { display:grid; grid-template-columns:1fr 1fr; gap:34px; }

/* ── LAYOUT HELPERS ───────────────────────────────────────────────────────── */
.ab-container { max-width:1200px; margin:0 auto; }
.ab-stack   { display:flex; flex-direction:column; }
.ab-row     { display:flex; align-items:center; }
.ab-between { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ab-wrap    { flex-wrap:wrap; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width:820px) {
  .ab-option-grid, .ab-split-2, .ab-refs { grid-template-columns:1fr; }
  .ab-display { font-size:40px; }
  .ab-h1 { font-size:28px; }
}
@media (max-width:520px) {
  .ab-display { font-size:32px; }
  .ab-report__body { padding:24px 20px; }
}