/* Design system tokens (ByTheLaw Design System — Figma file Nh1mWEnVNOlfj0rnB7HoJX). */
:root {
  /* Primary (teal) palette */
  --color-primary-50: #EDF8F8;
  --color-primary-100: #D0ECEC;
  --color-primary-150: #AFDFDF;
  --color-primary-200: #91D4D4;
  --color-primary-300: #6DC5C5;
  --color-primary-400: #49B6B6;
  --color-primary-500: #43A8A8;
  --color-primary-600: #3F9E9E;
  --color-primary-700: #398E8E;
  --color-primary-800: #338080;
  --color-primary-900: #173A3A;

  /* Semantic */
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --accent: var(--color-primary-500);
  --accent-text: #ffffff;
  --accent-hover: var(--color-primary-600);
  --line: #e5e7eb;
  --line-soft: rgba(93, 108, 111, 0.4);
  --warn: #d97706;
  --error: #ef4444;
  --success: #16a34a;
  --highlight-soft: #fff4a6;   /* light marker yellow for anonymized spans */
  --surface-subtle: #f7f8f8;
  --surface-hover: #f3f4f6;
  --text-title: #1f2937;
  --text-secondary: #5d6c6f;
  --neutral-300: #b9c0c0;
  --neutral-700: #3e4646;

  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;
  --border-radius: var(--radius-lg);
  --border-radius-lg: var(--radius-2xl);

  /* Shadows */
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-md: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow: var(--shadow-md);

  /* Blur */
  --blur-modal: 12px;

  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "DM Sans", "Inter", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}