/* Vista Fire Systems — design tokens, brand guidelines v1 (RELEASED, direction B "Drawing sheet")
   Three layers: primitive -> semantic -> component. Components use semantic/component tokens only.
   Status: RELEASED, signed off by Mac 2026-09-15. */

:root {
  /* ---------- Primitive ---------- */
  --vista-red-500: #DD312B;      /* sampled from the logo; 4.62:1 on white */
  --vista-red-700: #B8231E;      /* pressed / hover only; 6.37:1 on white */
  --vista-black: #000000;        /* ruled by Mac 2026-09-02 */
  --vista-white: #FFFFFF;
  --vista-grey-700: #595959;     /* labels, captions; 7.0:1 on white */
  --vista-grey-300: #D9D9D9;     /* hairlines, grid */
  --vista-grey-050: #F5F5F4;     /* alternate panel, sparingly */
  --vista-exit-green: #00A651;   /* EXCEPTION: exit/emergency symbol LINES on hover/click only; 3.19:1 (graphics); never text */

  --font-montserrat: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-plex-mono: 'IBM Plex Mono', 'Courier New', monospace;

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

  /* ---------- Semantic ---------- */
  --color-paper: var(--vista-white);
  --color-ink: var(--vista-black);
  --color-accent: var(--vista-red-500);
  --color-accent-strong: var(--vista-red-700);
  --color-label: var(--vista-grey-700);
  --color-hairline: var(--vista-grey-300);
  --color-panel: var(--vista-grey-050);

  --font-heading: var(--font-montserrat);
  --font-body: var(--font-montserrat);
  --font-label: var(--font-plex-mono);

  --type-display: 800 clamp(40px, 6vw, 72px)/1.02 var(--font-heading);
  --type-h1: 800 clamp(32px, 4.5vw, 48px)/1.08 var(--font-heading);
  --type-h2: 700 clamp(24px, 3vw, 32px)/1.15 var(--font-heading);
  --type-h3: 700 20px/1.25 var(--font-heading);
  --type-body: 400 17px/1.6 var(--font-body);
  --type-small: 400 14px/1.5 var(--font-body);
  --type-label: 500 12px/1.3 var(--font-label);   /* UPPERCASE, letter-spacing 0.08em */

  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  --line-sheet: 2px;     /* the sheet border */
  --line-cell: 1px;      /* title block cells, dividers */
  --line-accent: 4px;    /* the one red strip */
  --radius: 0;           /* drawings have square corners */

  /* ---------- Component ---------- */
  --sheet-inset: var(--space-4);                 /* desktop; 8px under 600px */
  --sheet-border: var(--line-sheet) solid var(--color-ink);
  --titleblock-cell-border: var(--line-cell) solid var(--color-ink);
  --titleblock-accent: var(--line-accent) solid var(--color-accent);

  --button-border: 2px solid var(--color-ink);
  --button-fg: var(--color-ink);
  --button-bg: var(--color-paper);
  --button-bg-hover: var(--color-ink);
  --button-fg-hover: var(--color-paper);
  --focus-ring: 3px solid var(--color-accent);

  --link-fg: var(--color-ink);
  --link-underline: var(--color-accent);

  /* Spreadsheets (guidelines §8a, added 2026-09-16). Point sizes live in the guidelines;
     these are the colours a generator needs. */
  --sheet-title-fg: var(--color-accent);
  --sheet-title-rule: var(--color-accent);      /* 2pt under row 1 */
  --sheet-label-fg: var(--color-label);         /* mono labels, row 2 */
  --table-header-fg: var(--color-ink);
  --table-header-rule: var(--color-accent);     /* 1.5pt under the header row */
  --table-row-alt: var(--color-panel);          /* #F5F5F4 */
  --table-cell-border: var(--color-hairline);   /* 0.5pt */
  --status-pass-fg: #1A6B1A;  --status-pass-bg: #EBF5EB;
  --status-pending-fg: #856404; --status-pending-bg: #FFF8E1;
  --status-fail-fg: #B71C1C;  --status-fail-bg: #FDECEA;
  --status-none-fg: var(--color-label); --status-none-bg: var(--color-paper);
}