/* IDNL LTD design tokens + base components — v2, 2026-11-09
   Source of truth: I:\accounts\idnltd\Style\brand-style.md
   Use: <link rel="stylesheet" href="idnl.css"> in any IDNL web tool, then build on the variables.
   Dark theme: set data-theme="dark" on <html>, or leave it to prefers-color-scheme. */

:root {
  /* Brand */
  --idnl-navy: #06284D;          /* the logo navy — identity colour */
  --idnl-navy-hover: #0B3A6B;
  --idnl-steel: #3D6EA8;         /* links, secondary emphasis, info */
  --idnl-copper: #B8612E;        /* the single accent: one use per view */

  /* Role tokens (swap in dark theme; components use THESE, not the raw brand values) */
  --idnl-brand: var(--idnl-navy);        /* headings, labels, rules */
  --idnl-brand-fill: var(--idnl-navy);   /* filled bars, primary buttons */
  --idnl-on-brand: #FFFFFF;

  /* Neutrals — cool-biased greys, never pure grey or pure black for text */
  --idnl-text: #2A3140;
  --idnl-grey: #5A6070;          /* body copy in documents */
  --idnl-muted: #8A94A6;         /* captions, footers, metadata */
  --idnl-line: #D6D9E5;
  --idnl-row: #F4F5FA;           /* alternating table rows */
  --idnl-paper: #F7F8FB;         /* app background */
  --idnl-surface: #FFFFFF;       /* cards, document page */

  /* Status — reports and dashboards only, never decoration */
  --idnl-ok: #2E7D4F;    --idnl-ok-bg: #E6F2EA;
  --idnl-warn: #A86A0F;  --idnl-warn-bg: #FBF1DF;
  --idnl-fail: #B3261E;  --idnl-fail-bg: #F9E6E4;
  --idnl-info: #3D6EA8;  --idnl-info-bg: #E8EFF8;

  /* Chart series, in order of use */
  --idnl-chart-1: #06284D;
  --idnl-chart-2: #4A78B0;
  --idnl-chart-3: #B8612E;
  --idnl-chart-4: #5E8C6A;
  --idnl-chart-5: #8A94A6;
  --idnl-chart-6: #C9A86A;

  /* Type — the Helvetica/Arial grotesque family everywhere (PDF: Liberation Sans, metric-identical) */
  --idnl-font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --idnl-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --idnl-fs-xs: 0.75rem;    /* 12 — footers, badges */
  --idnl-fs-sm: 0.8125rem;  /* 13 — table cells, meta */
  --idnl-fs-md: 0.875rem;   /* 14 — UI body */
  --idnl-fs-lg: 1rem;       /* 16 — document body on web */
  --idnl-fs-xl: 1.25rem;    /* 20 — card titles */
  --idnl-fs-2xl: 1.5rem;    /* 24 — page titles */
  --idnl-fs-3xl: 2rem;      /* 32 — document titles (INVOICE, REPORT) */

  /* Space — 4 pt grid */
  --idnl-s1: 4px; --idnl-s2: 8px; --idnl-s3: 12px; --idnl-s4: 16px;
  --idnl-s5: 24px; --idnl-s6: 32px; --idnl-s7: 48px;
  --idnl-radius: 4px;
  --idnl-radius-lg: 8px;
  --idnl-rule: 1px;                  /* web divider; PDF uses 0.7 pt */
  --idnl-shadow: 0 1px 2px rgba(6, 40, 77, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --idnl-brand: #9DBCE6;
    --idnl-brand-fill: #1C3F6E;
    --idnl-steel: #7FA3D6;
    --idnl-copper: #D9834F;
    --idnl-text: #E6EAF0;
    --idnl-grey: #AAB3C2;
    --idnl-muted: #7E889A;
    --idnl-line: #2A3647;
    --idnl-row: #172130;
    --idnl-paper: #0C1320;
    --idnl-surface: #121A26;
    --idnl-ok: #6CC08B;   --idnl-ok-bg: #16301F;
    --idnl-warn: #E0A84A; --idnl-warn-bg: #3A2A0E;
    --idnl-fail: #F28B82; --idnl-fail-bg: #3E1715;
    --idnl-info: #7FA3D6; --idnl-info-bg: #15263D;
    --idnl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --idnl-brand: #9DBCE6;
  --idnl-brand-fill: #1C3F6E;
  --idnl-steel: #7FA3D6;
  --idnl-copper: #D9834F;
  --idnl-text: #E6EAF0;
  --idnl-grey: #AAB3C2;
  --idnl-muted: #7E889A;
  --idnl-line: #2A3647;
  --idnl-row: #172130;
  --idnl-paper: #0C1320;
  --idnl-surface: #121A26;
  --idnl-ok: #6CC08B;   --idnl-ok-bg: #16301F;
  --idnl-warn: #E0A84A; --idnl-warn-bg: #3A2A0E;
  --idnl-fail: #F28B82; --idnl-fail-bg: #3E1715;
  --idnl-info: #7FA3D6; --idnl-info-bg: #15263D;
  --idnl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ---------- Base ---------- */
.idnl, .idnl body {
  font-family: var(--idnl-font);
  font-size: var(--idnl-fs-md);
  line-height: 1.5;
  color: var(--idnl-text);
  background: var(--idnl-paper);
  font-variant-numeric: tabular-nums;
}
.idnl h1, .idnl h2, .idnl h3 { color: var(--idnl-brand); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; }
.idnl h1 { font-size: var(--idnl-fs-2xl); }
.idnl h2 { font-size: var(--idnl-fs-xl); }
.idnl h3 { font-size: var(--idnl-fs-lg); }
.idnl a { color: var(--idnl-steel); text-decoration: none; }
.idnl a:hover { text-decoration: underline; }
.idnl :focus-visible { outline: 2px solid var(--idnl-steel); outline-offset: 2px; }

/* Section label: "BILL TO", "PAYMENT DETAILS", "FINDINGS" */
.idnl-label { font-size: var(--idnl-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--idnl-brand); }

/* Navy divider, as under the letterhead header */
.idnl-rule { border: 0; border-top: var(--idnl-rule) solid var(--idnl-brand); margin: var(--idnl-s4) 0; }

/* ---------- Table — the letterhead items table ---------- */
.idnl-table { width: 100%; border-collapse: collapse; font-size: var(--idnl-fs-sm); background: var(--idnl-surface); }
.idnl-table th { background: var(--idnl-brand-fill); color: var(--idnl-on-brand); text-align: left; font-weight: 700; padding: var(--idnl-s2) var(--idnl-s3); }
.idnl-table td { padding: var(--idnl-s2) var(--idnl-s3); color: var(--idnl-grey); border-bottom: 1px solid var(--idnl-line); vertical-align: top; }
.idnl-table tbody tr:nth-child(even) td { background: var(--idnl-row); }
.idnl-table .num { text-align: right; }
.idnl-table tfoot td { color: var(--idnl-brand); font-weight: 700; border-top: 2px solid var(--idnl-brand); border-bottom: 0; background: none; }

/* ---------- Status badge ---------- */
.idnl-badge { display: inline-block; font-size: var(--idnl-fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px var(--idnl-s2); border-radius: var(--idnl-radius); line-height: 1.4; }
.idnl-badge.ok   { color: var(--idnl-ok);   background: var(--idnl-ok-bg); }
.idnl-badge.warn { color: var(--idnl-warn); background: var(--idnl-warn-bg); }
.idnl-badge.fail { color: var(--idnl-fail); background: var(--idnl-fail-bg); }
.idnl-badge.info { color: var(--idnl-info); background: var(--idnl-info-bg); }

/* ---------- Buttons ---------- */
.idnl-btn { font: inherit; font-weight: 700; font-size: var(--idnl-fs-md); padding: var(--idnl-s2) var(--idnl-s4); border-radius: var(--idnl-radius); border: 1px solid var(--idnl-brand-fill); background: var(--idnl-brand-fill); color: var(--idnl-on-brand); cursor: pointer; }
.idnl-btn:hover { background: var(--idnl-navy-hover); border-color: var(--idnl-navy-hover); }
.idnl-btn.secondary { background: transparent; color: var(--idnl-brand); }
.idnl-btn.accent { background: var(--idnl-copper); border-color: var(--idnl-copper); color: #fff; }

/* ---------- Card / panel ---------- */
.idnl-card { background: var(--idnl-surface); border: 1px solid var(--idnl-line); border-radius: var(--idnl-radius-lg); padding: var(--idnl-s4); box-shadow: var(--idnl-shadow); }

/* ---------- Evidence block (reports) ---------- */
.idnl-evidence { font-family: var(--idnl-mono); font-size: var(--idnl-fs-xs); background: var(--idnl-row); border-left: 3px solid var(--idnl-brand); padding: var(--idnl-s2) var(--idnl-s3); white-space: pre-wrap; overflow-x: auto; color: var(--idnl-text); }

/* ---------- Document footer line ---------- */
.idnl-footer { font-size: var(--idnl-fs-xs); color: var(--idnl-muted); text-align: center; border-top: var(--idnl-rule) solid var(--idnl-brand); padding-top: var(--idnl-s2); }