/* whatisai project page: uses the whatisai.fyi brand (IBM Plex, white/black, token chips) */
.wai-page {
  --wai-ink: #121212;
  --wai-muted: #5c5c5c;
  --wai-line: #e4e4e4;
  --wai-bg: #ffffff;
  --wai-soft: #f6f6f4;
  --wai-what: #D7E4FF;
  --wai-is: #FFE0C2;
  background: var(--wai-bg);
}
[data-theme="dark"] .wai-page, [data-theme="dark"].wai-page {
  --wai-ink: #f2f2f2;
  --wai-muted: #a8a8a8;
  --wai-line: #2e2e2e;
  --wai-bg: #121212;
  --wai-soft: #1b1b1b;
}
.wai-page .showcase,
.wai-page .showcase p,
.wai-page .showcase h1,
.wai-page .showcase h2,
.wai-page .showcase h3,
.wai-page .showcase h4,
.wai-page .showcase a,
.wai-page .showcase button {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--wai-ink);
}
.wai-page .showcase p { color: var(--wai-muted); }
.wai-page .showcase .sc-hero h1 { margin: 0 0 1rem; line-height: 0; }
.wai-page .wai-logo { width: 220px; height: auto; display: block; }
.wai-page .wai-logo-dark { display: none; }
[data-theme="dark"] .wai-page .wai-logo-light { display: none; }
[data-theme="dark"] .wai-page .wai-logo-dark { display: block; }

.wai-page .showcase .sc-subtitle,
.wai-page .showcase .sc-eyebrow,
.wai-page .showcase .sc-group-label,
.wai-page .showcase .sc-jump a,
.wai-page .showcase .sc-subnav a,
.wai-page .showcase .sc-chips li,
.wai-page .showcase .sc-tab {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wai-muted);
}
.wai-page .showcase .sc-tagline {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--wai-ink);
  margin: 0.5rem 0 1rem;
}
.wai-page .showcase .sc-h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wai-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Buttons: black primary, outlined secondary, like whatisai.fyi */
.wai-page .showcase .sc-btn {
  border-radius: 6px;
  box-shadow: none;
  font-weight: 600;
  background-image: none;
}
.wai-page .showcase .sc-btn-primary { background: var(--wai-ink); color: var(--wai-bg); border: 1px solid var(--wai-ink); }
.wai-page .showcase .sc-btn-primary:hover { background: var(--wai-ink); opacity: 0.88; transform: none; }
.wai-page .showcase .sc-btn-secondary { background: transparent; color: var(--wai-ink); border: 1px solid var(--wai-ink); }
.wai-page .showcase .sc-btn-secondary:hover { background: var(--wai-what); color: #121212; transform: none; }

/* Chips use the token colours */
.wai-page .showcase .sc-chips li {
  background: var(--wai-what);
  color: #121212;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
}
.wai-page .showcase .sc-chips li:nth-child(2) { background: var(--wai-is); }
.wai-page .showcase .sc-chips li svg { display: none; }

/* Cards and frames: flat, 1px lines, no shadows */
.wai-page .showcase .sc-card,
.wai-page .showcase .sc-tile,
.wai-page .showcase .sc-frame,
.wai-page .showcase .sc-cta {
  background: var(--wai-bg);
  border: 1px solid var(--wai-line);
  border-radius: 10px;
  box-shadow: none;
  background-image: none;
}
.wai-page .showcase .sc-card:hover { border-color: var(--wai-ink); transform: none; box-shadow: none; }
.wai-page .showcase .sc-icon {
  background: var(--wai-what);
  color: #121212;
  border-radius: 6px;
  box-shadow: none;
}
.wai-page .showcase .sc-card h4 a { color: var(--wai-ink); }
.wai-page .showcase .sc-frame-bar { background: var(--wai-soft); border-bottom: 1px solid var(--wai-line); }
.wai-page .showcase .sc-frame-bar span { background: var(--wai-line) !important; }

/* Gallery tabs: black chip marks the one you are looking at */
.wai-page .showcase .sc-tab {
  border: 1px solid var(--wai-line);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
.wai-page .showcase .sc-tab[aria-selected="true"] {
  background: #121212;
  color: #ffffff;
  border-color: #121212;
}
.wai-page .showcase .sc-tab:hover:not([aria-selected="true"]) { background: var(--wai-what); color: #121212; }

.wai-page .showcase .sc-subnav { background: var(--wai-bg); border-bottom: 1px solid var(--wai-line); box-shadow: none; }
.wai-page .showcase .sc-subnav a.active,
.wai-page .showcase .sc-subnav a[aria-current] { color: var(--wai-ink); border-color: var(--wai-ink); }
.wai-page .showcase a:not(.sc-btn):not(.sc-stretch):hover { color: var(--wai-ink); text-decoration-color: var(--wai-ink); }
.wai-page .showcase .sc-cta { background: var(--wai-soft); }
/* The logo file has built-in padding; pull it back to the text edge */
.wai-page .wai-logo { margin: -15px 0 -15px -15px; }
.wai-page .showcase .sc-jump { background: transparent; border: 0; padding-left: 0; }
.wai-page .showcase .sc-jump a { border: 1px solid var(--wai-line); border-radius: 4px; background: transparent; }
.wai-page .showcase .sc-jump a:hover { background: var(--wai-what); color: #121212; }