/**
 * Bundled variable font; swap keeps text readable while it loads.
 */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

/**
 * Typography, palette, controls, and content spacing.
 */
:root {
  color-scheme: light;

  /* Root and body typography */
  --base-size: 100%;
  --text-size: 1rem;
  --line-height: 1.6;
  --text-weight: 400;

  /* Heading typography */
  --heading-weight: 800;
  --heading-line-height: 1.25;

  /* Font families */
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --heading-font: var(--font);
  --code-font: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* Content spacing and corners */
  --section-gap: 2rem;
  --panel-padding: 1.25rem;
  --radius: 0.25rem;

  /* Theme surfaces and text */
  --background-color: #ffffff;
  --text-color: #202124;
  --muted-color: #5f6368;
  --surface-color: #f3f4f6;
  --border-color: #767b84;

  /* Primary actions */
  --primary-color: #f57d0c;
  --primary-hover-color: #c66407;
  --primary-text-color: #ffffff;

  /* Danger states */
  --danger-color: #b91c1c;
  --danger-hover-color: #991b1b;
  --danger-text-color: #ffffff;

  /* Warning states */
  --warning-color: #facc15;
  --warning-hover-color: #eab308;
  --warning-text-color: #422006;

  /* Information states */
  --info-color: #0369a1;
  --info-hover-color: #075985;
  --info-text-color: #ffffff;

  /* Links, keyboard focus and highlighted text */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-hover-color);
  --focus-color: var(--info-color);
  --mark-color: var(--warning-color);
  --mark-text-color: var(--warning-text-color);

  /* Content widths */
  --width-sm: 42.5rem;
  --width-md: 58.75rem;
  --width-lg: 75rem;
  --container-max-width: var(--width-lg);

  /* Responsive gutters */
  --page-gutter: 5rem;
  --gutter-tablet: 3rem;
  --gutter-mobile: 1.5rem;

  /* Block rhythm */
  --block-gap: 3rem;

  /* Listing columns */
  --grid-columns: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;

  /* Listing gaps */
  --grid-gap: 2.5rem;
  --grid-gap-tablet: 1.75rem;
  --grid-gap-mobile: 1.75rem;

  /* Gallery spacing */
  --gallery-gap: 1rem;

  /* Page and listing title typography */
  --page-title-size: 2.75rem;
  --subtitle-size: 1.25rem;
  --listing-title-size: 1.25rem;
  --listing-title-weight: 600;
}

/**
 * Dark theme overrides; all other values inherit from :root.
 */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* Theme surfaces and text */
  --background-color: #181818;
  --text-color: #f3f4f6;
  --muted-color: #b6bbc3;
  --surface-color: #262626;
  --border-color: #858b95;

  /* Danger states */
  --danger-color: #fca5a5;
  --danger-hover-color: #fecaca;
  --danger-text-color: #450a0a;

  /* Warning states */
  --warning-color: #fde047;
  --warning-hover-color: #fef08a;

  /* Information states */
  --info-color: #7dd3fc;
  --info-hover-color: #bae6fd;
  --info-text-color: #082f49;
}