/* Site identity: the one set of fonts, colors, sizes and components that the landing page
   (apps/docs/landing) and the docs theme (apps/docs/.vitepress/theme) both use.
   apps/docs/IDENTITY.md explains the choices. Change a value here, not in either site. */

/* Fonts: SIL OFL 1.1 (see fonts/OFL-*.txt), self-hosted, Latin subset. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dm-mono-500.woff2') format('woff2');
}

:root {
  /* Type: one family, set on a 4:3 scale. */
  --id-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --id-font-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
  --id-size-display: clamp(40px, 5.6vw, 64px);
  --id-size-section: clamp(32px, 4.2vw, 48px);
  --id-size-page: clamp(32px, 3.4vw, 40px);
  --id-size-title: 21px;
  --id-size-body: 17px;
  --id-size-small: 15px;
  --id-size-caption: 13px;
  --id-size-code: 14px;

  /* Grid and space: a 12-column grid, 8-pt rhythm. */
  --id-width: 1120px;
  --id-gutter: clamp(24px, 5vw, 40px);
  --id-column-gap: 32px;
  --id-section: clamp(96px, 12vw, 160px);
  --id-header-height: 52px;

  /* Shape follows hierarchy: capsule controls (as in iOS), rounded media, small code. */
  --id-radius-control: 999px;
  --id-radius-media: 18px;
  --id-radius-code: 10px;

  /* Color: white, off-black and grey, plus a softened system blue for links only. */
  --id-bg: #fcfcfd;
  --id-surface: #f4f5f7;
  --id-ink: #17181a;
  --id-ink-2: #60636a;
  --id-hairline: #e2e4e8;
  --id-link: #1f6fd1;
  --id-button: #17181a;
  --id-button-ink: #fcfcfd;
}

/* Night. The docs set .dark from their appearance switch; the landing page sets it from the
   same stored choice, and .id-auto follows the system when no script runs. */
:root.dark {
  --id-bg: #0b0b0c;
  --id-surface: #18181b;
  --id-ink: #f2f2f3;
  --id-ink-2: #9c9ea4;
  --id-hairline: #2b2c30;
  --id-link: #5ba3f2;
  --id-button: #f2f2f3;
  --id-button-ink: #0b0b0c;
}
@media (prefers-color-scheme: dark) {
  :root.id-auto {
    --id-bg: #0b0b0c;
    --id-surface: #18181b;
    --id-ink: #f2f2f3;
    --id-ink-2: #9c9ea4;
    --id-hairline: #2b2c30;
    --id-link: #5ba3f2;
    --id-button: #f2f2f3;
    --id-button-ink: #0b0b0c;
  }
}

/* Components shared by both sites */

/* The wordmark is the name, set in type from site.config.mjs. */
.id-wordmark {
  color: var(--id-ink);
  font-family: var(--id-font);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.id-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--id-radius-control);
  font-family: var(--id-font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.id-button:hover {
  text-decoration: none;
  opacity: 0.86;
}
.id-button:active {
  transform: scale(0.98);
}
.id-button.primary {
  background: var(--id-button);
  color: var(--id-button-ink);
}
.id-button.secondary {
  border-color: var(--id-hairline);
  color: var(--id-ink);
}

.id-code {
  border: 1px solid var(--id-hairline);
  border-radius: var(--id-radius-code);
  background: var(--id-surface);
  color: var(--id-ink);
  font-family: var(--id-font-mono);
  font-size: var(--id-size-code);
}

/* A list of rows with a hairline between them (none above or below the group). */
.id-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.id-rows > li + li {
  border-top: 1px solid var(--id-hairline);
}