/* Isometric Stack theme (int-theme-shortlist.html, theme 5). Loaded last on
   every page. Cool blue-grey paper, navy ink, one deep-blue accent, white
   cards on a soft border, bold display type. Light is the default mode; the
   homepage's isometric layer figure is the theme's centrepiece. */

/* Light palette from the mockup. */
[data-theme="light"] {
  --surface-page: #EEF0F6;
  --surface-card: #FFFFFF;
  --surface-raised: #E4E7F0;
  --surface-wash: rgba(22, 26, 46, 0.03);
  --border-subtle: #DDE0EA;
  --border-strong: #C7CBDB;
  --text-primary: #161A2E;
  --text-muted: #5B6178;
  --text-faint: #646A80;
  --accent: #3343C3;

  /* Status and data colours: the dark theme's light red and amber read at
     1.7 to 2.4:1 on this paper, and #DC2626 at 4.2:1. These clear 4.5:1 on
     the page and on white cards. */
  --status-error: #B91C1C;
  --status-error-soft: rgba(185, 28, 28, 0.08);
  --status-error-hairline: rgba(185, 28, 28, 0.30);
  --status-warning: #A14A07;
  --status-warning-soft: rgba(161, 74, 7, 0.08);
  --status-warning-hairline: rgba(161, 74, 7, 0.30);
  --accent-red: #B91C1C;
  --accent-amber: #A14A07;

  /* The homepage graph band and its fades still sat on the old warm paper
     (#F3F1EE); they follow the page now, with labels in the theme's greys. */
  --ink: #EEF0F6;
  --scrim0: #EEF0F6;
  --ink-fg: #161A2E;
  --ink-fg2: #5B6178;
  --ink-fg3: #646A80;

  /* Code snippets on white: the comment and type colours were translucent
     tints made for the old paper (2.5 and 3.6:1); solid theme colours now. */
  --syn-punct: #3A3F55;
  --syn-dim: #646A80;
  --syn-type: #4F46E5;
}

/* Soft, consistent corners: 10px on controls, 14px on cards and panels. */
:root {
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 14px;
  --radius-2xl: 14px;
  --radius-pill: 10px;
}

/* Bold display type. Headings carry inline weights, so this needs
   !important to win. */
h1 { font-weight: var(--weight-bold) !important; letter-spacing: -0.04em !important; }

/* Plain paper: no dot grid, no film grain. */
body::before, body::after { display: none; }

/* Buttons that set a 100px pill radius inline (the nav and homepage CTAs)
   follow the theme's 10px corner too. Round icon buttons (50%) stay round. */
[style*="border-radius: 100px"] { border-radius: var(--radius-pill) !important; }

/* Closing CTA bands on code review and verum borrowed the terminal surface:
   page-coloured in dark, white in light. Every other page closes on the page
   colour, so these follow it in both themes. */
.cr-cta, .vm-cta { background: var(--surface-page); }

/* Light only: one rule everywhere, the page is blue-grey and cards are white.
   The homepage's raised bands (mission, proof, ROI) drop to the page colour,
   and anything inside them that sat on the page colour to stand out from the
   band turns white instead. Dark keeps its bands. */
[data-theme="light"] #mission,
[data-theme="light"] #proof,
[data-theme="light"] #roi,
[data-theme="light"] #connect { background: #EEF0F6 !important; --surface-page: #FFFFFF; }