/* linkgap design tokens (docs/PRODUCT_SPEC.md section 5). Exact values; do not edit casually. */
@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root, :root[data-theme="light"] {
  color-scheme: light;
  /* type */
  --font-sans: "InterVariable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;  --lh-xs: 16px;
  --fs-sm: 13px;  --lh-sm: 20px;
  --fs-base: 14px; --lh-base: 22px;
  --fs-md: 16px;  --lh-md: 24px;
  --fs-lg: 20px;  --lh-lg: 28px;
  --fs-xl: 28px;  --lh-xl: 34px;
  --fs-2xl: 36px; --lh-2xl: 40px;
  /* space (4px base) */
  --s-0-5: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  /* radii */
  --r-badge: 4px; --r-control: 6px; --r-card: 8px; --r-modal: 12px; --r-pill: 999px;
  /* shadows */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-md: 0 4px 12px rgb(0 0 0 / .08);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / .14);
  /* surfaces and text */
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F4F4F5; --surface-3: #EBEBEE;
  --border: #E4E4E7; --border-strong: #D4D4D8;
  --text: #18181B; --text-2: #52525B; --text-3: #71717A;
  --accent: #2F5FD0; --accent-hover: #264FB0; --accent-subtle: #EAF0FC; --on-accent: #FFFFFF;
  --focus-ring: #2F5FD0;
  /* status: validated for colour-blind safety; identical in both themes; marks only */
  --good: #0CA30C; --weak: #8B7FD9; --spam: #D03B3B;
  --warning: #B45309; --warning-subtle: #FEF3C7;
  --sample-bg: #FEF3C7; --sample-fg: #92400E;
  --danger-text: #B42318;
  /* layout */
  --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --topbar-h: 52px; --content-max: 1280px;
  --row-h: 40px; --row-h-compact: 32px; --control-h: 32px; --control-h-lg: 36px;
  --ease: cubic-bezier(.2, 0, 0, 1); --dur-fast: 120ms; --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0B0D; --surface: #131316; --surface-2: #1A1A1F; --surface-3: #232329;
    --border: #26262C; --border-strong: #34343C;
    --text: #EDEDF0; --text-2: #A1A1AA; --text-3: #8B8B94;
    --accent: #6E95F0; --accent-hover: #88A8F4; --accent-subtle: #17213A; --on-accent: #0B0B0D;
    --focus-ring: #6E95F0;
    --warning: #F59E0B; --warning-subtle: #2A1E08;
    --sample-bg: #3A2A0A; --sample-fg: #FCD34D;
    --danger-text: #F97066;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px rgb(0 0 0 / .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0B0D; --surface: #131316; --surface-2: #1A1A1F; --surface-3: #232329;
  --border: #26262C; --border-strong: #34343C;
  --text: #EDEDF0; --text-2: #A1A1AA; --text-3: #8B8B94;
  --accent: #6E95F0; --accent-hover: #88A8F4; --accent-subtle: #17213A; --on-accent: #0B0B0D;
  --focus-ring: #6E95F0;
  --warning: #F59E0B; --warning-subtle: #2A1E08;
  --sample-bg: #3A2A0A; --sample-fg: #FCD34D;
  --danger-text: #F97066;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 16px 40px rgb(0 0 0 / .5);
}