/* ClickHouse-flavoured design system — tokens + components.
   Transcribed verbatim from the Claude Design handoff bundle:
   project/_ds/clickhouse-design-system-.../{tokens/*.css,styles.css}
   The webfont @import was moved to a <link> in index.html (faster, non-blocking).
   Do not hand-edit values here — they are the design system's source of truth. */

/* ===== tokens/colors.css ===== */
/* Colour tokens — transcribed verbatim from clickhouse-ds/src/styles/tokens.css. */
:root {
  /* Brand */
  --ch-color-primary: #faff69;
  --ch-color-primary-active: #e6eb52;
  --ch-color-primary-disabled: #3a3a1f;

  /* Text */
  --ch-color-ink: #ffffff;
  --ch-color-on-dark: #ffffff;
  --ch-color-body: #cccccc;
  --ch-color-body-strong: #e6e6e6;
  --ch-color-muted: #888888;
  --ch-color-muted-soft: #5a5a5a;
  --ch-color-on-primary: #0a0a0a;
  --ch-color-on-yellow: #0a0a0a;

  /* Surface */
  --ch-color-canvas: #0a0a0a;
  --ch-color-surface-soft: #121212;
  --ch-color-surface-card: #1a1a1a;
  --ch-color-surface-elevated: #242424;
  --ch-color-surface-yellow-band: #faff69;
  --ch-color-hairline: #2a2a2a;
  --ch-color-hairline-strong: #3a3a3a;

  /* Semantic / accent — status meaning only, never decoration */
  --ch-color-accent-emerald: #22c55e;
  --ch-color-accent-rose: #ef4444;
  --ch-color-accent-blue: #3b82f6;
  --ch-color-success: #22c55e;
  --ch-color-warning: #f59e0b;
  --ch-color-error: #ef4444;
}

/* ===== tokens/typography.css ===== */
/* Families and the composed `font` shorthand scale. Display and stat tokens
   must be paired with their matching --ch-tracking-* value. */
:root {
  --ch-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ch-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ch-text-display-xl: 700 72px/1.05 var(--ch-font-sans);
  --ch-tracking-display-xl: -2.5px;
  --ch-text-display-lg: 700 56px/1.1 var(--ch-font-sans);
  --ch-tracking-display-lg: -2px;
  --ch-text-display-md: 700 40px/1.15 var(--ch-font-sans);
  --ch-tracking-display-md: -1.5px;
  --ch-text-display-sm: 700 32px/1.2 var(--ch-font-sans);
  --ch-tracking-display-sm: -1px;
  --ch-text-title-lg: 700 24px/1.3 var(--ch-font-sans);
  --ch-tracking-title-lg: -0.3px;
  --ch-text-title-md: 600 18px/1.4 var(--ch-font-sans);
  --ch-text-title-sm: 600 16px/1.4 var(--ch-font-sans);
  --ch-text-stat-display: 700 56px/1 var(--ch-font-sans);
  --ch-tracking-stat-display: -1.5px;
  --ch-text-body-md: 400 16px/1.55 var(--ch-font-sans);
  --ch-text-body-sm: 400 14px/1.55 var(--ch-font-sans);
  --ch-text-caption: 500 13px/1.4 var(--ch-font-sans);
  --ch-text-caption-uppercase: 600 12px/1.4 var(--ch-font-sans);
  --ch-tracking-caption-uppercase: 1.5px;
  --ch-text-code: 400 14px/1.55 var(--ch-font-mono);
  --ch-text-button: 600 14px/1 var(--ch-font-sans);
  --ch-text-nav-link: 500 14px/1.4 var(--ch-font-sans);
}

/* ===== tokens/spacing.css ===== */
/* 4px base unit. --ch-space-section (96px) is the rhythm between editorial bands. */
:root {
  --ch-space-xxs: 4px;
  --ch-space-xs: 8px;
  --ch-space-sm: 12px;
  --ch-space-md: 16px;
  --ch-space-lg: 24px;
  --ch-space-xl: 32px;
  --ch-space-xxl: 48px;
  --ch-space-section: 96px;
}

/* ===== tokens/radius.css ===== */
/* 8px (md) is the button and card radius. Pills are for badges and status chips only. */
:root {
  --ch-radius-xs: 4px;
  --ch-radius-sm: 6px;
  --ch-radius-md: 8px;
  --ch-radius-lg: 12px;
  --ch-radius-pill: 9999px;
  --ch-radius-full: 9999px;
}

/* ===== tokens/layout.css ===== */
:root { --ch-container-max: 1280px; }

/* ===== tokens/components.css ===== */
/* Component styles. All values come from the token layer.
   Transcribed from clickhouse-ds/src/styles/components.css. */

.ch-root { background: var(--ch-color-canvas); color: var(--ch-color-body); font: var(--ch-text-body-md); -webkit-font-smoothing: antialiased; }
.ch-root *, .ch-root *::before, .ch-root *::after { box-sizing: border-box; }
.ch-root a { color: var(--ch-color-primary); }
.ch-root a:hover { color: var(--ch-color-primary-active); }

.ch-container { max-width: var(--ch-container-max); margin-inline: auto; padding-inline: var(--ch-space-lg); }

/* ---------- Button ---------- */
.ch-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ch-space-xs); font: var(--ch-text-button); border: 0; border-radius: var(--ch-radius-md); padding: 12px 20px; height: 40px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ch-button--sm { height: 32px; padding: 8px 14px; border-radius: var(--ch-radius-sm); }
.ch-button--lg { height: 48px; padding: 14px 24px; }
.ch-button--primary { background: var(--ch-color-primary); color: var(--ch-color-on-primary); }
.ch-button--primary:active { background: var(--ch-color-primary-active); }
.ch-button--secondary { background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); }
.ch-button--secondary:active { background: var(--ch-color-surface-elevated); }
.ch-button--text { background: transparent; color: var(--ch-color-on-dark); padding-inline: 0; }
.ch-button--on-yellow { background: var(--ch-color-on-primary); color: var(--ch-color-primary); }
.ch-button[disabled] { background: var(--ch-color-primary-disabled); color: var(--ch-color-muted); cursor: not-allowed; }
.ch-button--text[disabled], .ch-button--secondary[disabled] { background: transparent; color: var(--ch-color-muted-soft); }

.ch-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--ch-radius-full); background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); cursor: pointer; }
.ch-icon-button:active { background: var(--ch-color-surface-elevated); }

.ch-text-link { color: var(--ch-color-primary); font: var(--ch-text-body-md); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Top nav ---------- */
.ch-top-nav { display: flex; align-items: center; gap: var(--ch-space-xl); height: 64px; background: var(--ch-color-canvas); color: var(--ch-color-on-dark); padding-inline: var(--ch-space-lg); }
.ch-top-nav__brand { display: inline-flex; align-items: center; gap: var(--ch-space-xs); font: var(--ch-text-title-md); color: var(--ch-color-on-dark); }
.ch-top-nav__mark { width: 20px; height: 20px; border-radius: var(--ch-radius-xs); background: var(--ch-color-primary); display: block; }
.ch-top-nav__links { display: flex; align-items: center; gap: var(--ch-space-lg); }
.ch-top-nav__link { font: var(--ch-text-nav-link); color: var(--ch-color-body); text-decoration: none; }
.ch-top-nav__link[aria-current="page"] { color: var(--ch-color-on-dark); }
.ch-top-nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--ch-space-sm); }

/* ---------- Hero ---------- */
.ch-hero { background: var(--ch-color-canvas); padding-block: var(--ch-space-section); display: grid; grid-template-columns: 7fr 5fr; gap: var(--ch-space-xxl); align-items: center; }
.ch-hero--stacked { grid-template-columns: 1fr; }
.ch-hero__eyebrow { margin: 0 0 var(--ch-space-md); }
.ch-hero__title { margin: 0; font: var(--ch-text-display-xl); letter-spacing: var(--ch-tracking-display-xl); color: var(--ch-color-on-dark); }
.ch-hero__subtitle { margin: var(--ch-space-lg) 0 0; font: var(--ch-text-body-md); color: var(--ch-color-body); max-width: 52ch; }
.ch-hero__actions { display: flex; gap: var(--ch-space-sm); margin-top: var(--ch-space-xl); }
.ch-hero__aside { min-width: 0; }

/* ---------- Stat ---------- */
.ch-stat { display: flex; flex-direction: column; gap: var(--ch-space-xs); }
.ch-stat__value { font: var(--ch-text-stat-display); letter-spacing: var(--ch-tracking-stat-display); color: var(--ch-color-primary); }
.ch-stat__label { font: var(--ch-text-body-sm); color: var(--ch-color-muted); }
.ch-stat-group { display: flex; gap: var(--ch-space-xxl); flex-wrap: wrap; }

/* ---------- Cards ---------- */
.ch-card { border-radius: var(--ch-radius-lg); padding: var(--ch-space-xl); background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); border: 1px solid var(--ch-color-hairline); }
.ch-card--yellow { background: var(--ch-color-surface-yellow-band); color: var(--ch-color-on-yellow); border-color: transparent; }
.ch-card__icon { width: 32px; height: 32px; border-radius: var(--ch-radius-sm); background: var(--ch-color-primary); margin-bottom: var(--ch-space-md); }
.ch-card--yellow .ch-card__icon { background: var(--ch-color-on-yellow); }
.ch-card__title { margin: 0 0 var(--ch-space-xs); font: var(--ch-text-title-md); }
.ch-card__body { margin: 0; font: var(--ch-text-body-sm); color: var(--ch-color-body); }
.ch-card--yellow .ch-card__body { color: var(--ch-color-on-yellow); opacity: 0.75; }
.ch-card__footer { margin-top: var(--ch-space-lg); }

/* ---------- Code window ---------- */
.ch-code-window { background: var(--ch-color-surface-card); border: 1px solid var(--ch-color-hairline); border-radius: var(--ch-radius-lg); overflow: hidden; }
.ch-code-window__bar { display: flex; align-items: center; gap: var(--ch-space-xs); padding: var(--ch-space-sm) var(--ch-space-lg); border-bottom: 1px solid var(--ch-color-hairline); font: var(--ch-text-caption); color: var(--ch-color-muted); }
.ch-code-window__dot { width: 10px; height: 10px; border-radius: var(--ch-radius-full); background: var(--ch-color-hairline-strong); }
.ch-code-window__filename { margin-left: var(--ch-space-xs); }
.ch-code-window__pre { margin: 0; padding: var(--ch-space-lg); font: var(--ch-text-code); color: var(--ch-color-body-strong); overflow-x: auto; }
.ch-code-window__status { border-top: 1px solid var(--ch-color-hairline); padding: var(--ch-space-sm) var(--ch-space-lg); font: var(--ch-text-caption); color: var(--ch-color-muted); display: flex; align-items: center; gap: var(--ch-space-xs); }
.ch-code-window__status-dot { width: 8px; height: 8px; border-radius: var(--ch-radius-full); background: var(--ch-color-accent-emerald); }
.ch-tok-kw { color: var(--ch-color-primary); }
.ch-tok-fn { color: var(--ch-color-accent-blue); }
.ch-tok-str { color: var(--ch-color-accent-emerald); }
.ch-tok-num { color: var(--ch-color-body-strong); }
.ch-tok-com { color: var(--ch-color-muted-soft); }

/* ---------- Product mockup ---------- */
.ch-mockup { background: var(--ch-color-surface-card); border: 1px solid var(--ch-color-hairline); border-radius: var(--ch-radius-lg); padding: var(--ch-space-lg); color: var(--ch-color-on-dark); }
.ch-mockup__chrome { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ch-space-md); }
.ch-mockup__title { font: var(--ch-text-title-sm); }
.ch-mockup__body { background: var(--ch-color-surface-elevated); border-radius: var(--ch-radius-md); padding: var(--ch-space-md); }

/* ---------- Pricing ---------- */
.ch-pricing { border-radius: var(--ch-radius-lg); padding: var(--ch-space-xl); background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); border: 1px solid var(--ch-color-hairline); display: flex; flex-direction: column; gap: var(--ch-space-md); }
.ch-pricing--featured { background: var(--ch-color-primary); color: var(--ch-color-on-primary); border-color: transparent; }
.ch-pricing__name { margin: 0; font: var(--ch-text-title-lg); letter-spacing: var(--ch-tracking-title-lg); }
.ch-pricing__price { font: var(--ch-text-display-sm); letter-spacing: var(--ch-tracking-display-sm); }
.ch-pricing__price small { font: var(--ch-text-body-sm); color: var(--ch-color-muted); }
.ch-pricing--featured .ch-pricing__price small { color: var(--ch-color-on-primary); opacity: .7; }
.ch-pricing__desc { margin: 0; font: var(--ch-text-body-sm); color: var(--ch-color-body); }
.ch-pricing--featured .ch-pricing__desc { color: var(--ch-color-on-primary); opacity: .8; }
.ch-pricing__features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-xs); font: var(--ch-text-body-sm); }
.ch-pricing__features li { display: flex; gap: var(--ch-space-xs); align-items: baseline; }
.ch-pricing__tick { color: var(--ch-color-primary); }
.ch-pricing--featured .ch-pricing__tick { color: var(--ch-color-on-primary); }
.ch-pricing__cta { margin-top: auto; }

/* ---------- Badge ---------- */
.ch-badge { display: inline-flex; align-items: center; border-radius: var(--ch-radius-pill); padding: 4px 12px; background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); font: var(--ch-text-caption); }
.ch-badge--yellow { background: var(--ch-color-primary); color: var(--ch-color-on-primary); font: var(--ch-text-caption-uppercase); letter-spacing: var(--ch-tracking-caption-uppercase); text-transform: uppercase; }

/* ---------- Input ---------- */
.ch-field { display: grid; gap: var(--ch-space-xs); }
.ch-field__label { font: var(--ch-text-caption); color: var(--ch-color-muted); }
.ch-input { height: 40px; padding: 10px 14px; border-radius: var(--ch-radius-md); background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); font: var(--ch-text-body-md); border: 1px solid var(--ch-color-hairline-strong); width: 100%; }
.ch-input::placeholder { color: var(--ch-color-muted-soft); }
.ch-input:focus { outline: none; border-color: var(--ch-color-primary); border-width: 2px; }
.ch-input--invalid { border-color: var(--ch-color-error); }
.ch-field__hint { font: var(--ch-text-caption); color: var(--ch-color-muted-soft); }
.ch-field__hint--error { color: var(--ch-color-error); }

/* ---------- Tabs ---------- */
.ch-tabs { display: flex; gap: var(--ch-space-xxs); flex-wrap: wrap; }
.ch-tab { border: 0; background: transparent; color: var(--ch-color-muted); font: var(--ch-text-nav-link); border-radius: var(--ch-radius-md); padding: 8px 14px; cursor: pointer; }
.ch-tab[aria-selected="true"] { background: var(--ch-color-surface-card); color: var(--ch-color-on-dark); }

/* ---------- CTA band ---------- */
.ch-cta-band { background: var(--ch-color-primary); color: var(--ch-color-on-primary); border-radius: var(--ch-radius-lg); padding: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--ch-space-xl); flex-wrap: wrap; }
.ch-cta-band__title { margin: 0; font: var(--ch-text-display-md); letter-spacing: var(--ch-tracking-display-md); max-width: 20ch; }
.ch-cta-band__desc { margin: var(--ch-space-md) 0 0; font: var(--ch-text-body-md); opacity: .75; max-width: 46ch; }

/* ---------- Event card ---------- */
.ch-event { background: var(--ch-color-surface-card); border: 1px solid var(--ch-color-hairline); border-radius: var(--ch-radius-lg); padding: var(--ch-space-lg); color: var(--ch-color-on-dark); display: grid; gap: var(--ch-space-xs); }
.ch-event__date { font: var(--ch-text-caption-uppercase); letter-spacing: var(--ch-tracking-caption-uppercase); text-transform: uppercase; color: var(--ch-color-primary); }
.ch-event__title { margin: 0; font: var(--ch-text-title-md); }
.ch-event__location { font: var(--ch-text-body-sm); color: var(--ch-color-muted); }
.ch-event__cta { margin-top: var(--ch-space-sm); }

/* ---------- Logo strip ---------- */
.ch-logo-strip { background: var(--ch-color-canvas); padding-block: var(--ch-space-xl); display: flex; align-items: center; gap: var(--ch-space-xxl); flex-wrap: wrap; }
.ch-logo-strip__label { font: var(--ch-text-caption); color: var(--ch-color-muted-soft); }
.ch-logo-strip__item { font: var(--ch-text-title-md); color: var(--ch-color-muted); letter-spacing: -0.3px; }

/* ---------- Section ---------- */
.ch-section { padding-block: var(--ch-space-section); background: var(--ch-color-canvas); }
.ch-section--soft { background: var(--ch-color-surface-soft); }
.ch-section__eyebrow { font: var(--ch-text-caption-uppercase); letter-spacing: var(--ch-tracking-caption-uppercase); text-transform: uppercase; color: var(--ch-color-muted); margin-bottom: var(--ch-space-sm); }
.ch-section__title { margin: 0; font: var(--ch-text-display-lg); letter-spacing: var(--ch-tracking-display-lg); color: var(--ch-color-on-dark); }
.ch-section__desc { margin: var(--ch-space-md) 0 0; font: var(--ch-text-body-md); color: var(--ch-color-body); max-width: 60ch; }
.ch-section__content { margin-top: var(--ch-space-xxl); }

/* ---------- Footer ---------- */
.ch-footer { background: var(--ch-color-canvas); color: var(--ch-color-muted); padding-block: 64px; border-top: 1px solid var(--ch-color-hairline); }
.ch-footer__brand { font: var(--ch-text-title-md); color: var(--ch-color-on-dark); margin-bottom: var(--ch-space-xl); display: block; }
.ch-footer__columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ch-space-xl); }
.ch-footer__heading { font: var(--ch-text-title-sm); color: var(--ch-color-on-dark); margin: 0 0 var(--ch-space-sm); }
.ch-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ch-space-xs); }
.ch-footer__link { font: var(--ch-text-body-sm); color: var(--ch-color-muted); text-decoration: none; }
.ch-footer__note { margin-top: var(--ch-space-xxl); font: var(--ch-text-body-sm); color: var(--ch-color-muted-soft); }

@media (max-width: 1023px) {
  .ch-hero { grid-template-columns: 1fr; gap: var(--ch-space-xl); }
  .ch-footer__columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .ch-hero__title { font: var(--ch-text-display-sm); letter-spacing: var(--ch-tracking-display-sm); }
  .ch-cta-band { padding: var(--ch-space-xl); }
  .ch-footer__columns { grid-template-columns: 1fr; }
}