/* Lead Staging design tokens and base components, Option A (Dynamics / Fluent look).
   Token names match the old Broadsheet set so app.css keeps working; the values are new.
   accent = brand blue, accent-2 = warning orange, danger = destructive red. */
:root {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-text: #242424;
  --color-divider: #e0e0e0;
  --color-row: #ebebeb;

  --color-neutral-100: #fafafa;
  --color-neutral-200: #f0f0f0;
  --color-neutral-300: #e0e0e0;
  --color-neutral-400: #d1d1d1;
  --color-neutral-500: #757575;
  --color-neutral-600: #616161;
  --color-neutral-700: #5c5c5c;
  --color-neutral-800: #424242;
  --color-neutral-900: #242424;

  --color-accent: #0f6cbd;
  --color-accent-100: #ebf3fc;
  --color-accent-200: #cfe4fa;
  --color-accent-300: #b4d6fa;
  --color-accent-400: #62abf5;
  --color-accent-500: #2886de;
  --color-accent-600: #0f6cbd;
  --color-accent-700: #0f548c;
  --color-accent-800: #0c3b5e;
  --color-accent-900: #0a2e4a;

  --color-accent-2: #da3b01;
  --color-accent-2-100: #fdf6f3;
  --color-accent-2-200: #fbe3d7;
  --color-accent-2-300: #f4bfab;
  --color-accent-2-400: #e9835e;
  --color-accent-2-500: #da3b01;
  --color-accent-2-600: #b5410f;
  --color-accent-2-700: #8a3707;
  --color-accent-2-800: #6b2a05;
  --color-accent-2-900: #4a1d04;

  --color-ok-100: #f1faf1;
  --color-ok-300: #9fd89f;
  --color-ok-700: #0e700e;
  --color-danger: #b10e1c;
  --color-danger-hover: #960b18;

  --font-heading: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; line-height: 20px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-700); }
button, input, select, textarea { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-200); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 14px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-size: 14px; font-weight: 600; line-height: 20px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-sm);
}
.btn svg { display: block; flex: none; }
.btn:hover { background: var(--color-neutral-200); color: var(--color-text); }
.btn:active { background: var(--color-neutral-300); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: #fff; }
.btn-primary:active { background: var(--color-accent-800); }
.btn-secondary { font-weight: 400; }
.btn-ghost { background: none; border-color: transparent; color: var(--color-accent-700); font-weight: 400; padding: 0 8px; }
.btn-ghost:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); color: #fff; }

/* forms */
.field > label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--color-neutral-700); }
.input {
  width: 100%; min-height: 32px; padding: 5px 10px; font-size: 14px; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-neutral-400); border-bottom-color: var(--color-neutral-500);
  border-radius: var(--radius-sm);
}
.input::placeholder { color: var(--color-neutral-700); opacity: 1; }
.input:hover { border-color: var(--color-neutral-500); }
.input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; }
textarea.input { min-height: 80px; resize: vertical; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--color-neutral-700);
  padding: 10px 12px; background: var(--color-neutral-100); border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--color-row); }
.table tbody tr:hover { background: var(--color-bg); }

/* dialog */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.4); z-index: 40; }
.dialog { width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-size: 20px; line-height: 28px; margin: 0; }
.dialog-body { font-size: 14px; color: var(--color-neutral-800); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }