/* Sharp Dot — generated from system/tokens.json by scripts/build-tokens.js. Do not edit by hand. */
@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,300..800;1,300..800&family=Martian+Mono:wght@300..700&display=swap");

:root, [data-theme="light"] {
  --k0: #ffffff;
  --k10: #e6e7e8;
  --k20: #d1d3d4;
  --k40: #a7a9ac;
  --k60: #808285;
  --k70: #6d6e71;
  --k80: #58595b;
  --k90: #414042;
  --k100: #231f20;
  --graphite: var(--k90);
  --paper: #f3f3f4;
  --paper-raised: var(--k0);
  --ink: var(--k90);
  --ink-muted: var(--k70);
  --line: var(--k20);
  --line-strong: var(--k60);
  --on-ink: var(--k0);
  --dot: #2b3bff;
  --on-dot: var(--k0);
  --dot-soft: var(--k10);
  --critical: #c22d1a;
  --critical-on-tint: #c22d1a;
  --tint-strategy: #d9dcff;
  --tint-brand: #ffd6c2;
  --tint-content: #fbe7a1;
  --tint-social: #ffcfe4;
  --tint-performance: #bfedd3;
  --tint-data: #c7e4fa;
  --field-content: var(--k10);
  --field-social: var(--k20);
  --field-brand: var(--k40);
  --field-performance: var(--k70);
  --field-data: var(--k80);
  --field-strategy: var(--k90);
  --float: 4px 4px 0 0 #414042;
  --focus-ring: 0 0 0 2px #f3f3f4, 0 0 0 4px #2b3bff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --k0: #ffffff;
    --k10: #e6e7e8;
    --k20: #d1d3d4;
    --k40: #a7a9ac;
    --k60: #808285;
    --k70: #6d6e71;
    --k80: #58595b;
    --k90: #414042;
    --k100: #231f20;
    --graphite: var(--k90);
    --paper: #1c1b1c;
    --paper-raised: #262527;
    --ink: var(--k10);
    --ink-muted: var(--k40);
    --line: #3a393b;
    --line-strong: var(--k60);
    --on-ink: var(--k100);
    --dot: #8c95ff;
    --on-dot: var(--k100);
    --dot-soft: #343335;
    --critical: #ff7b66;
    --critical-on-tint: #c22d1a;
    --tint-strategy: #d9dcff;
    --tint-brand: #ffd6c2;
    --tint-content: #fbe7a1;
    --tint-social: #ffcfe4;
    --tint-performance: #bfedd3;
    --tint-data: #c7e4fa;
    --field-content: var(--k10);
    --field-social: var(--k20);
    --field-brand: var(--k40);
    --field-performance: var(--k70);
    --field-data: var(--k80);
    --field-strategy: var(--k90);
    --float: 4px 4px 0 0 #414042;
    --focus-ring: 0 0 0 2px #1c1b1c, 0 0 0 4px #8c95ff;
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --k0: #ffffff;
  --k10: #e6e7e8;
  --k20: #d1d3d4;
  --k40: #a7a9ac;
  --k60: #808285;
  --k70: #6d6e71;
  --k80: #58595b;
  --k90: #414042;
  --k100: #231f20;
  --graphite: var(--k90);
  --paper: #1c1b1c;
  --paper-raised: #262527;
  --ink: var(--k10);
  --ink-muted: var(--k40);
  --line: #3a393b;
  --line-strong: var(--k60);
  --on-ink: var(--k100);
  --dot: #8c95ff;
  --on-dot: var(--k100);
  --dot-soft: #343335;
  --critical: #ff7b66;
  --critical-on-tint: #c22d1a;
  --tint-strategy: #d9dcff;
  --tint-brand: #ffd6c2;
  --tint-content: #fbe7a1;
  --tint-social: #ffcfe4;
  --tint-performance: #bfedd3;
  --tint-data: #c7e4fa;
  --field-content: var(--k10);
  --field-social: var(--k20);
  --field-brand: var(--k40);
  --field-performance: var(--k70);
  --field-data: var(--k80);
  --field-strategy: var(--k90);
  --float: 4px 4px 0 0 #414042;
  --focus-ring: 0 0 0 2px #1c1b1c, 0 0 0 4px #8c95ff;
  color-scheme: dark;
}

:root {
  --m-half: 4px;
  --m-1: 8px;
  --m-2: 16px;
  --m-3: 24px;
  --m-4: 32px;
  --m-6: 48px;
  --m-8: 64px;
  --m-12: 96px;
  --radius-none: 0;
  --stroke-hair: 1px;
  --stroke-bar: 2px;
  --layout-columns: 8;
  --layout-max: 1152px;
  --layout-gutter: 24px;
  --font-sans: "Albert Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.display-xl { font-family: var(--font-sans); font-size: 72px; line-height: 72px; font-weight: 300; letter-spacing: -0.035em; }
.display { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 300; letter-spacing: -0.025em; }
.title { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.015em; }
.heading { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; }
.data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }