:root {
  --color-bg: #ffffff;
  --color-surface: #f7f7f7;
  --color-text: #1a1a1a;
  --color-text-secondary: #5c5c5c;
  --color-border: #e4e4e4;
  --color-placeholder: #ececec;
  --color-surface-sunken: #ececec;

  --color-accent: #ae4f1d;
  --color-accent-hover: #bc5522;
  --color-accent-active: #9e4115;
  --color-accent-tint: #fbf3ee;
  --color-accent-tint-active: #f6e7de;
  --color-on-accent: #ffffff;

  --color-ink: #1a1a1a;
  --color-ink-raised: #262626;
  --color-ink-border: #3d3d3d;
  --color-on-ink: #ffffff;
  --color-on-ink-secondary: #bdbdbd;
  --color-accent-on-dark: #f0a47f;
  --color-code-token: #7dd3c0;

  --color-control-border: rgb(26 26 26 / 0.2);
  --color-control-bg: rgb(255 255 255 / 0.7);

  --color-status-available: #2f9e57;
  --color-status-shipped-bg: #e6f2ea;
  --color-status-shipped-text: #1e6b3c;
  --color-status-partly-bg: #fbf0d6;
  --color-status-partly-text: #7a5200;
  --color-status-concept-bg: #efefef;
  --color-status-concept-text: #4d4d4d;

  --color-case-accent: #3e55ff;
  --color-brand-toggle-centology: #3e55ff;
  --color-brand-toggle-lca: #007bb0;
  --color-brand-toggle-ebc: #2e7aa9;
  --color-brand-toggle-dma: #2f527a;
  --color-case-accent-muted: #4f68bf;
  --color-case-revive-muted: #8156af;

  --font-heading: "Commissioner", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;

  --font-size-display: 6.5rem;
  --font-size-h1: 3.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.75rem;
  --font-size-h4: 1.25rem;
  --font-size-lead: 1.75rem;
  --font-size-body-case: 1.125rem;
  --font-size-body: 1rem;
  --font-size-ui: 1rem;
  --font-size-caption: 0.75rem;
  --font-size-wordmark: 1.3125rem;

  --line-height-display: 1.05;
  --line-height-h1: 1.15;
  --line-height-h2: 1.2;
  --line-height-h3: 1.25;
  --line-height-h4: 1.3;
  --line-height-lead: 1.5;
  --line-height-body-case: 1.6;
  --line-height-body: 1.5;
  --line-height-ui: 1.3;
  --line-height-caption: 1.3;
  --letter-spacing-tight: -0.01em;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --space-section: var(--space-96);
  --space-split-gap: var(--space-48);
  --space-card-pad: var(--space-32);
  --space-section-bottom: var(--space-128);

  --radius-control: 8px;
  --radius-card: 12px;
  --radius-media: 12px;
  --radius-pill: 999px;
  --radius-phone: 24px;

  --layout-container: 1200px;
  --layout-reading: 760px;
  --layout-gutter: 24px;
  --layout-columns: 12;
  --layout-carousel-inset: var(--space-24);

  --size-card-media: 330px;
  --size-card-media-featured: 440px;
  --size-card-min-width: 420px;
  --size-carousel-card: 280px;
  --size-code-media: 232px;
  --size-case-hero-media: 640px;
  --size-case-media: 360px;
  --size-case-compare: 640px;
  --size-case-phone: 520px;
  --size-case-phone-w: 266px;
  --size-case-artifact: 480px;
  --size-process-media: 320px;
  --size-tap-target: 44px;
  --size-contact-button: 56px;

  --duration-fast: 120ms;
  --duration-exit: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-medium: 400ms;
  --duration-intro: 700ms;
  --duration-stagger: 40ms;
  --duration-bob: 1200ms;
  --duration-pulse: 1600ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --selection-stroke: 1.5px;
  --selection-stroke-focus: 2px;
  --selection-handle: 9px;
}

@media (width < 768px) {
  :root {
    --font-size-display: 2.75rem;
    --font-size-h1: 2.25rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.375rem;
    --font-size-lead: 1.125rem;
    --font-size-wordmark: 1rem;

    --space-section: var(--space-64);
    --space-split-gap: var(--space-24);
    --space-card-pad: var(--space-24);
    --space-section-bottom: var(--space-64);

    --layout-gutter: 16px;
    --layout-columns: 4;

    --radius-media: 4px;

    --size-card-media: 280px;
    --size-card-media-featured: 280px;
    --size-carousel-card: 342px;
    --size-code-media: 280px;
    --size-case-hero-media: 240px;
    --size-case-media: 220px;
    --size-case-compare: 220px;
    --size-case-phone: 600px;
    --size-case-phone-w: 308px;
    --size-case-artifact: 240px;
    --size-process-media: 200px;
  }
}