/* Unseenly design tokens — graphite palette. Generated from tokens.json. */

:root {
  color-scheme: dark;
  --surface-000: #0f1114;
  --surface-100: #171a1f;
  --surface-200: #1f242b;
  --line: #2a3038;
  --line-strong: #5f6b7a;
  --ink: #eaeef3;
  --ink-muted: #9aa6b4;
  --ink-faint: #6f7d8c;
  --accent: #3d8bff;
  --accent-hover: #5c9dff;
  --accent-soft: #3d8bff1f;
  --accent-ink: #7db0ff;
  --on-accent: #041225;
  --success: #3fc9a0;
  --danger: #ff6b6b;
  --focus: #7db0ff;
  --veil: #0f1114e6;
  --lock: #232931;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px #00000066;
  --shadow-pop: 0 12px 32px #00000099;
  --font-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --surface-000: #f4f5f7;
    --surface-100: #ffffff;
    --surface-200: #e9ecf0;
    --line: #dde1e7;
    --line-strong: #7f8996;
    --ink: #14181d;
    --ink-muted: #535c67;
    --ink-faint: #858e9a;
    --accent: #1663d6;
    --accent-hover: #0f4fae;
    --accent-soft: #1663d617;
    --accent-ink: #0f4fae;
    --on-accent: #f2f7ff;
    --success: #0f7a5c;
    --danger: #c0392b;
    --focus: #0f4fae;
    --veil: #14181de6;
    --lock: #dfe3e9;
    --shadow-card: 0 1px 2px #16181c14;
    --shadow-pop: 0 12px 32px #16181c1f;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --surface-000: #f4f5f7;
  --surface-100: #ffffff;
  --surface-200: #e9ecf0;
  --line: #dde1e7;
  --line-strong: #7f8996;
  --ink: #14181d;
  --ink-muted: #535c67;
  --ink-faint: #858e9a;
  --accent: #1663d6;
  --accent-hover: #0f4fae;
  --accent-soft: #1663d617;
  --accent-ink: #0f4fae;
  --on-accent: #f2f7ff;
  --success: #0f7a5c;
  --danger: #c0392b;
  --focus: #0f4fae;
  --veil: #14181de6;
  --lock: #dfe3e9;
  --shadow-card: 0 1px 2px #16181c14;
  --shadow-pop: 0 12px 32px #16181c1f;
}

.display-l { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.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; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; }
.mono-sm { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }