/* ─────────────────────────────────────────────────────────────────────────
   Verista design tokens — from the design handoff (2026-09-04).

   These values are final: colours, type scale and spacing all come from the
   handoff's token tables. The brand palette matches the `:root` block in
   verista-client/src/styles.scss, so the marketing site and the product stay
   in step. When the design system lands in the Angular app, that file should
   read from these rather than restating them.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand ───────────────────────────────────────────────────── */
  --v-navy: #0f2d45;          /* dark sections, table header, gradient start */
  --v-primary: #1a5276;       /* links, eyebrows, progress fills, gradient end */
  --v-secondary: #2e86c1;     /* primary button, band numerals, audit dots */
  --v-accent: #5dade2;        /* accents on navy, reversed mark bars */
  --v-footer: #0b2337;        /* footer only */

  /* ── Ink ─────────────────────────────────────────────────────── */
  --v-ink: #212529;
  --v-ink-2: #495057;         /* log descriptions */
  --v-ink-3: #4a5b6b;         /* body copy in sections */
  --v-muted: #6c757d;
  --v-muted-2: #6b7a8a;       /* captions, sub-lines */
  --v-faint: #8b98a5;         /* monospace numerals */
  --v-disabled: #adb5bd;
  --v-dot: #dee2e6;

  /* ── Surfaces & rules ────────────────────────────────────────── */
  --v-surface: #f4f6f8;       /* alternating band background */
  --v-light: #f8f9fa;         /* table column-header strip */
  --v-verista-cell: #f7fafc;  /* Verista column in the comparison */
  --v-white: #ffffff;
  --v-hairline: #e3e8ed;
  --v-hairline-2: #dbe2e9;
  --v-hairline-3: #dee2e6;
  --v-bar-track: #e9ecef;

  --v-gradient: linear-gradient(135deg, #0f2d45, #1a5276);

  /* ── Status ──────────────────────────────────────────────────── */
  --v-success: #1e8449;
  --v-success-2: #198754;     /* completed timeline connectors */
  --v-warning: #d4ac0d;
  --v-warning-bg: #fff3cd;
  --v-warning-ink: #856404;
  --v-danger: #c0392b;

  /* ── Recognition levels 1–8 (level 5 takes ink text) ─────────── */
  --v-level-1: #1a5276;
  --v-level-2: #1e8449;
  --v-level-3: #2e86c1;
  --v-level-4: #148f77;
  --v-level-5: #d4ac0d;
  --v-level-6: #ca6f1e;
  --v-level-7: #c0392b;
  --v-level-8: #7b241c;

  /* ── On navy ─────────────────────────────────────────────────── */
  --v-on-navy: rgba(255, 255, 255, .8);
  --v-on-navy-dim: rgba(255, 255, 255, .5);
  --v-rule-navy: rgba(255, 255, 255, .16);

  /* ── Type ────────────────────────────────────────────────────── */
  --v-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --v-mono: ui-monospace, Menlo, monospace;

  /* ── Layout ──────────────────────────────────────────────────── */
  --v-max: 1180px;            /* content width */
  --v-gutter: 40px;           /* desktop gutter */
  --v-band: 96px;             /* desktop band padding */
  --v-nav-h: 64px;

  /* ── Shadows — these three only ──────────────────────────────── */
  --v-shadow-card: 0 1px 4px rgba(0, 0, 0, .08);
  --v-shadow-raised: 0 4px 16px rgba(15, 45, 69, .1);
  --v-shadow-hero: 0 24px 60px rgba(6, 20, 32, .34);
}

@media (max-width: 1199px) { :root { --v-band: 72px; } }
@media (max-width: 767px) {
  :root { --v-gutter: 18px; --v-band: 52px; --v-nav-h: 56px; }
}