/* Serve7 design tokens, matching Priority Matrix (matrix.serve7.io/brand/tokens.css): Inter, cream paper,
   charcoal ink, Serve7 orange accent, teal secondary; light by default, dark with html[data-mode="dark"]. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  --s7-font: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --s7-charcoal: #1F1F1E; --s7-cream: #FDFAF3; --s7-cream-2: #FEFCF7; --s7-white: #FFFFFF;
  --s7-text: #373833; --s7-muted: #6B675F; --s7-sand: #C5BDB1;
  --s7-orange: #DC602D; --s7-orange-deep: #C5511F; --s7-orange-darker: #B3461A; --s7-orange-light: #F69871; --s7-orange-tint: #F2B496;
  --s7-teal: #083731; --s7-teal-mid: #1F5049; --s7-success: #0F8044;
  --s7-radius-btn: 7px; --s7-radius-sm: 10px; --s7-radius-card: 15px; --s7-radius-panel: 20px; --s7-radius-pill: 999px;
  --s7-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06); --s7-shadow-md: 0 4px 16px rgba(0, 0, 0, .08); --s7-shadow-lg: 0 8px 40px rgba(0, 0, 0, .10);

  --color-paper: var(--s7-cream); --color-surface: var(--s7-white); --color-ink: var(--s7-charcoal); --color-text: var(--s7-text);
  --color-muted: var(--s7-muted); --color-rule: var(--s7-sand); --color-rule-soft: rgba(197, 189, 177, .45);
  --color-accent: var(--s7-orange-deep); --color-accent-hover: var(--s7-orange-darker); --color-accent-ink: #fff;
  --color-focus: var(--s7-orange-deep); --color-alert: var(--s7-orange-darker); --color-late: #C62828;
  --raise: 0 1px 2px rgba(32, 32, 30, .12), 0 0 0 1px rgba(32, 32, 30, .04);
  --shadow-card: var(--s7-shadow-sm); --scrim: rgba(32, 32, 30, .32); --track: rgba(32, 32, 30, .06);
  --input-ring: rgba(197, 81, 31, .18);
  /* section colours (Priority Matrix nav palette) */
  --nav-design: #8C5BC0; --nav-build: #2F7D72; --nav-deploy: #2786AA; --nav-manage: #D9971A;
  /* block categories */
  /* U-19: every header with white text measures 4.5:1 or better; amber headers use dark ink text */
  --cat-interact: #1F7391; --cat-set: #5566BC; --cat-check: #D9971A; --cat-integrate: #2F7D72; --cat-terminate: #C5511F;
  --cat-profiles: #1C5C78; --cat-cases: #B5527A; --cat-media: #2C7A4F; --cat-modules: #6B675F; --cat-other: #787267;
  --head-ink-on-amber: #1F1F1E;
  --edge-error: #B4472F;   /* U-07: error lines and labels (4.9:1 on cream), drawn dashed */
  --ok: #2E7D3A; --ok-wash: #E2F1E4; --bad: #C62828; --bad-wash: #FADADA; --warn: #8A5300; --warn-wash: #FBEBC5; --info-wash: rgba(197, 189, 177, .25);
}
html[data-mode="dark"] {
  --color-paper: #161615; --color-surface: #21211F; --color-ink: #F4F0E8; --color-text: #DCD6CB; --color-muted: #A39C90;
  --color-rule: #3B3A36; --color-rule-soft: rgba(244, 240, 232, .09);
  --color-accent: #E8743F; --color-accent-hover: #F28A58; --color-accent-ink: #161615; --color-focus: #F28A58; --color-alert: #F69871; --color-late: #F4A3A3;
  --raise: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(244, 240, 232, .06);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 18px rgba(0, 0, 0, .3); --scrim: rgba(0, 0, 0, .6); --track: rgba(244, 240, 232, .07);
  --input-ring: rgba(242, 138, 88, .22);
  --nav-design: #B58CE3; --nav-build: #4FB3A5; --nav-deploy: #5CB6D9; --nav-manage: #F0B43C;
  --cat-interact: #5CB6D9; --cat-set: #8E9AE6; --cat-check: #F0B43C; --cat-integrate: #4FB3A5; --cat-terminate: #E8743F;
  --cat-profiles: #9FD3EA; --cat-cases: #E08AAE; --cat-media: #6CC28A; --cat-modules: #A39C90; --cat-other: #A39C90;
  --head-ink-on-amber: #161615; --edge-error: #E08A76;
  --ok: #A5D6A7; --ok-wash: rgba(102, 187, 106, .14); --bad: #F4A3A3; --bad-wash: rgba(239, 83, 80, .16); --warn: #F6C66A; --warn-wash: rgba(242, 181, 68, .16); --info-wash: rgba(244, 240, 232, .06);
}