/* VerdIQ design tokens — aligned with VerdIQ Brand Book v1 (Oct 2026), from docs/design/tokens.css.
   The semantic names (canvas, panel, ink, accent…) carry the brand values; status hues are
   product-UI only (allowed by the book). */
:root {
  /* Type */
  --font-sans: "Sora", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace; /* every price, quantity, ref, time */
  --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 17px;
  --text-xl: 20px; --text-2xl: 26px; --text-price-sm: 22px; --text-price: 40px; --text-price-lg: 48px;
  --leading: 1.45;
  --tracking-tight: -0.025em; --tracking-price: -0.04em;

  /* Brand */
  --brand-deep: #0E2F24;   /* top bar, primary buttons, agreed */
  --brand-green: #1F7A4C;  /* accent on light: links, live/open, focus, IQ */
  --brand-lime: #A6D96A;   /* ONLY on brand-deep */
  --ivory: #F6F4EE;        /* text on brand-deep */

  /* Neutrals */
  --canvas: #F6F4EE;       /* surface: page background */
  --panel: #FBFAF6;        /* card, always with a 1px border */
  --panel-sunken: #F1EEE6; /* action bars, table heads */
  --ink: #12201A;
  --ink-2: #3E4A44;        /* body secondary */
  --muted: #5A635E;        /* labels, units */
  --placeholder: #8A918C;
  --hairline: #ECE9E0;     /* row dividers */
  --border: #DAD6CB;       /* card edges, inputs, outline buttons */
  --border-strong: #C9C4B7;
  --topbar-text: #C9D6CE;
  --topbar-active: #16402F;

  /* Accent: links, "open/live", focus */
  --accent: var(--brand-green);
  --accent-hover: #186240;
  --accent-ink: #1A6B42;   /* accent text on tint */
  --accent-tint: #E8F0E4;
  --accent-ring: #6FAE7E;  /* "just changed" ring */
  --live-tint: #EDF3E9;

  /* Status: always paired with a shape glyph. */
  --agreed: var(--brand-deep);  /* ■ */
  --agreed-ink: var(--brand-deep);
  --agreed-tint: #DCEACB;
  --attention: oklch(0.5 0.12 60);        /* ◆ / expiring */
  --attention-ink: oklch(0.48 0.12 60);
  --attention-bar: oklch(0.7 0.13 70);    /* countdown < 1 h */
  --attention-tint: oklch(0.96 0.03 60);
  --failed: oklch(0.5 0.12 25);           /* □ */
  --failed-ink: oklch(0.42 0.13 25);
  --failed-tint: oklch(0.96 0.025 25);
  --danger-text: oklch(0.45 0.15 25);     /* Decline / Withdraw text buttons */
  --ended-tint: #ECE9E0;                  /* ○ withdrawn, lapsed, cancelled */

  /* Own verification banner */
  --banner-bg: oklch(0.93 0.035 85);
  --banner-ink: oklch(0.3 0.04 70);

  /* Admin layout (must never look like member view) */
  --admin-bg: oklch(0.975 0.008 85);
  --admin-sidebar: oklch(0.94 0.015 85);
  --admin-strip: oklch(0.85 0.08 75);
  --admin-accent: oklch(0.5 0.12 60);

  /* Shape: pills for buttons and tags, 10 for controls, 16 for panels. Borders, not shadows. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-tag: 999px; --radius-sm: 6px; --radius-control: 10px; --radius-panel: 16px; --radius-dialog: 16px;
  --control-h: 44px;
  --shadow-dialog: 0 12px 40px rgba(14,47,36,.25); /* dialogs, drawer and menus only */
  --scrim: rgba(14,47,36,.5);

  /* Live update highlight: ring + tint, fade over 4s */
  --live-duration: 4s;
}

/* Print (deal recap): black on white, hairlines, no colour carrying meaning */
@media print {
  :root { --ink: #111; --muted: #555; --hairline: #ddd; --border: #111; }
}