/* Tenderlots design tokens v0.1 (28 Oct 2026)
   Base: IBM Carbon (product theme "White"), adapted for a dense, light-only working tool.
   Brand colour: aubergine (chosen over teal, 28 Oct 2026). Change --tb-brand-* only. */

:root {
  /* ---------- Colour: brand (punctuation only) ---------- */
  --tb-brand-60: #7b2d73;   /* aubergine: primary action, links, focus. 8.52:1 on white */
  --tb-brand-70: #632459;   /* hover. 10.9:1 */
  --tb-brand-80: #451940;   /* pressed, app header surface. 14.3:1 */
  --tb-brand-10: #f8ecf6;   /* selected row, highlighted quote clause */
  --tb-brand-20: #e8cde4;   /* selection, header accents, avatars */

  /* ---------- Colour: neutrals (Carbon gray) ---------- */
  --tb-canvas: #ffffff;
  --tb-surface-1: #f4f4f4;  /* inputs, table header, alternate bands */
  --tb-surface-2: #e8e8e8;  /* hover on surface-1 */
  --tb-surface-3: #e0e0e0;  /* disabled fill, skeleton base */
  --tb-hairline: #e0e0e0;   /* decorative 1px dividers */
  --tb-border: #8d8d8d;     /* control borders: 3.32:1, passes non-text 3:1 */
  --tb-border-strong: #161616;

  --tb-ink: #161616;        /* primary text */
  --tb-ink-muted: #525252;  /* secondary text, meta */
  --tb-ink-subtle: #6f6f6f; /* helper, captions. NOT IBM's #8c8c8c, which fails AA */
  --tb-ink-disabled: #8d8d8d; /* disabled only (exempt from contrast) */
  --tb-ink-on-brand: #ffffff;

  /* ---------- Colour: semantic (always paired with icon + text) ---------- */
  --tb-error: #da1e28;        --tb-error-bg: #fff1f1;
  --tb-warning-text: #8e6a00; --tb-warning-fill: #f1c21b; --tb-warning-bg: #fcf4d6;
  --tb-caution-text: #ba4e00; --tb-caution-fill: #ff832b; --tb-caution-bg: #fff2e8;
  --tb-success: #198038;      --tb-success-bg: #defbe6;
  --tb-info: #0f62fe;         --tb-info-bg: #edf5ff;  /* informational only, never brand */
  --tb-unknown: #6f6f6f;      --tb-unknown-bg: #f4f4f4;

  /* Deadline urgency (badge = icon + "n days" text + colour) */
  --tb-deadline-critical: var(--tb-error);        /* 0 to 7 days */
  --tb-deadline-soon: var(--tb-caution-text);     /* 8 to 14 days */
  --tb-deadline-normal: var(--tb-ink-muted);      /* 15+ days */
  --tb-deadline-none: var(--tb-unknown);          /* no deadline stated */

  /* ---------- Type ---------- */
  --tb-font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --tb-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; /* quoted clauses only */
  --tb-font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;          /* codes, page refs, IDs */

  /* size / line-height / tracking (Carbon productive scale; body capped at 16px) */
  --tb-text-caption: 12px;   --tb-lh-caption: 16px;   --tb-track-caption: 0.32px;
  --tb-text-body-sm: 14px;   --tb-lh-body-sm: 18px;   --tb-track-body: 0.16px; /* table cells, chips */
  --tb-text-body: 14px;      --tb-lh-body: 20px;      /* default app body */
  --tb-text-reading: 16px;   --tb-lh-reading: 24px;   /* quotes, reasons, long prose */
  --tb-text-h4: 16px;        --tb-lh-h4: 22px;        /* section headings, weight 600 */
  --tb-text-h3: 20px;        --tb-lh-h3: 28px;        /* card / panel titles, 400 */
  --tb-text-h2: 24px;        --tb-lh-h2: 32px;        /* page title, 400 */
  --tb-text-h1: clamp(28px, 2vw + 20px, 32px); --tb-lh-h1: 1.25; /* tender title, 300 on desktop */
  --tb-weight-light: 300;
  --tb-weight-regular: 400;
  --tb-weight-semibold: 600;

  /* ---------- Spacing (4px grid) ---------- */
  --tb-space-1: 2px;
  --tb-space-2: 4px;
  --tb-space-3: 8px;
  --tb-space-4: 12px;
  --tb-space-5: 16px;
  --tb-space-6: 24px;
  --tb-space-7: 32px;
  --tb-space-8: 40px;
  --tb-space-9: 48px;
  /* fluid layout spacing: phones never get desktop padding */
  --tb-gutter: clamp(12px, 2.5vw, 32px);
  --tb-section-gap: clamp(16px, 3vw, 40px);
  --tb-card-pad: clamp(12px, 1.5vw, 16px);

  /* ---------- Sizing ---------- */
  --tb-control-sm: 32px;   /* dense desktop buttons, table actions */
  --tb-control-md: 40px;   /* default inputs and buttons */
  --tb-control-lg: 48px;   /* touch targets on phones */
  --tb-row-compact: 32px;  /* Matches table, dense */
  --tb-row-default: 40px;
  --tb-row-tall: 56px;     /* two-line rows */
  --tb-header-h: 48px;
  --tb-page-max: 1440px;
  --tb-reading-max: 72ch;

  /* ---------- Radius ---------- */
  --tb-radius-0: 0px;      /* buttons, inputs, cards, tables, modals */
  --tb-radius-1: 2px;      /* checkbox, document status badge */
  --tb-radius-pill: 999px; /* chips and tags only */

  /* ---------- Shadow (overlays only; cards use hairlines) ---------- */
  --tb-shadow-0: none;
  --tb-shadow-menu: 0 2px 6px rgba(0, 0, 0, 0.3);
  --tb-shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.18);
  --tb-focus-ring: inset 0 0 0 2px var(--tb-brand-60), inset 0 0 0 3px var(--tb-canvas);
  --tb-focus-outline: 2px solid var(--tb-brand-60);
  --tb-focus-offset: 1px;

  /* ---------- Z-index ---------- */
  --tb-z-base: 0;
  --tb-z-sticky: 100;     /* table header, filter bar */
  --tb-z-header: 200;
  --tb-z-dropdown: 300;
  --tb-z-drawer: 400;
  --tb-z-modal: 500;
  --tb-z-toast: 600;
  --tb-z-tooltip: 700;

  /* ---------- Motion (Carbon productive) ---------- */
  --tb-dur-fast: 70ms;
  --tb-dur-quick: 110ms;
  --tb-dur-moderate: 150ms;
  --tb-dur-slow: 240ms;
  --tb-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --tb-ease-enter: cubic-bezier(0, 0, 0.38, 0.9);
  --tb-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);

  /* ---------- Breakpoints (reference; use in media queries) ----------
     sm 360 | md 672 | lg 1056 | xl 1312 | max 1440 */

  color-scheme: light; /* light only: no automatic dark mode */
}

/* Alternative brand for comparison: set data-brand="teal" on <html> */
:root[data-brand="teal"] {
  --tb-brand-60: #007d79; --tb-brand-70: #005d5d; --tb-brand-80: #004144; --tb-brand-10: #d9fbfb; --tb-brand-20: #9ef0f0;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tb-dur-fast: 0ms; --tb-dur-quick: 0ms; --tb-dur-moderate: 0ms; --tb-dur-slow: 0ms; }
}

/* ---------- No browser defaults ---------- */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; background: var(--tb-canvas); color: var(--tb-ink);
  font: var(--tb-weight-regular) var(--tb-text-body)/var(--tb-lh-body) var(--tb-font-sans);
  letter-spacing: var(--tb-track-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--tb-brand-20); color: var(--tb-ink); }
:focus { outline: none; }
:focus-visible { outline: var(--tb-focus-outline); outline-offset: var(--tb-focus-offset); }
a { color: var(--tb-brand-60); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--tb-brand-70); }
a:active { color: var(--tb-brand-80); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tb-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--tb-surface-1) inset;
  transition: background-color 9999s;
}
* { scrollbar-width: thin; scrollbar-color: var(--tb-border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--tb-border); }
::-webkit-scrollbar-track { background: transparent; }