/* ============================================================================
   Sutton Health & Safety Training — Document Brand Kit (print-first)
   Transcribed from projects/sutton-website/design/tokens.css — do not invent hues.
   Used across Sutton Health & Safety print documents so the whole pack looks like one company.
   Build target: open in a browser -> Print -> Save as PDF (Letter, default margins).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root{
  --cpr-ink:#0F172A; --cpr-muted-ink:#475569; --cpr-deep-medical:#164E63;
  --cpr-training-teal:#0E7490; --cpr-clinical-cyan:#22D3EE; --cpr-action-green:#047857;
  --cpr-warm-signal:#B45309; --cpr-warning-red:#DC2626; --cpr-clean-surface:#F8FAFC;
  --cpr-white-surface:#FFFFFF; --cpr-soft-cyan:#ECFEFF; --cpr-line-gray:#CBD5E1;
  --cpr-soft-gray:#E2E8F0; --cpr-amber-soft:#FEF3C7; --cpr-green-soft:#DCFCE7;
  --cpr-blue-soft:#DBEAFE; --cpr-red-soft:#FEE2E2;
  --cpr-font-heading:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cpr-font-body:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
body{
  font-family:var(--cpr-font-body); color:var(--cpr-ink); background:var(--cpr-clean-surface);
  font-size:16px; line-height:1.5; margin:0; padding:0;
}

/* --- Page shell: a "sheet" that reads like paper on screen and prints clean --- */
.sheet{
  background:var(--cpr-white-surface); max-width:820px; margin:24px auto; padding:56px 60px 40px;
  box-shadow:0 1px 3px rgba(15,23,42,.12); border-top:6px solid var(--cpr-deep-medical);
}

/* --- Masthead --- */
.masthead{display:flex; align-items:center; gap:16px; border-bottom:2px solid var(--cpr-deep-medical); padding-bottom:16px; margin-bottom:8px;}
.masthead img.logo{width:52px; height:52px; border-radius:8px;}
.masthead .brand-name{font-family:var(--cpr-font-heading); font-weight:800; font-size:20px; color:var(--cpr-deep-medical); line-height:1.15;}
.masthead .brand-tag{font-size:12.5px; color:var(--cpr-muted-ink); margin-top:2px;}
.masthead .brand-contact{margin-left:auto; text-align:right; font-size:11.5px; color:var(--cpr-muted-ink); line-height:1.5;}
.masthead .brand-contact b{color:var(--cpr-ink);}

/* --- Document title block --- */
.doc-kicker{font-family:var(--cpr-font-heading); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; color:var(--cpr-training-teal); margin:22px 0 4px;}
h1.doc-title{font-family:var(--cpr-font-heading); font-weight:800; font-size:30px; line-height:1.2; color:var(--cpr-ink); margin:0 0 4px;}
.doc-sub{font-size:14px; color:var(--cpr-muted-ink); margin:0 0 6px;}

/* --- Headings --- */
h2{font-family:var(--cpr-font-heading); font-weight:700; font-size:20px; color:var(--cpr-deep-medical); margin:26px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--cpr-line-gray);}
h3{font-family:var(--cpr-font-heading); font-weight:700; font-size:16px; color:var(--cpr-deep-medical); margin:18px 0 6px;}
p{margin:0 0 10px;} ul,ol{margin:0 0 12px; padding-left:22px;} li{margin:3px 0;}
a{color:var(--cpr-training-teal);}
strong,b{color:var(--cpr-ink);}
small{font-size:12px; color:var(--cpr-muted-ink);}
hr{border:none; border-top:1px solid var(--cpr-line-gray); margin:20px 0;}

/* --- Tables --- */
table{width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:14px;}
th,td{border:1px solid var(--cpr-line-gray); padding:8px 10px; text-align:left; vertical-align:top;}
thead th{background:var(--cpr-deep-medical); color:#fff; font-family:var(--cpr-font-heading); font-weight:600; font-size:13px;}
tbody tr:nth-child(even){background:var(--cpr-clean-surface);}

/* --- Callout boxes --- */
.box{border:1px solid var(--cpr-line-gray); border-left:4px solid var(--cpr-training-teal); background:var(--cpr-white-surface); border-radius:8px; padding:12px 16px; margin:12px 0;}
.box.note{border-left-color:var(--cpr-training-teal); background:var(--cpr-soft-cyan);}
.box.good{border-left-color:var(--cpr-action-green); background:var(--cpr-green-soft);}
.box.warn{border-left-color:var(--cpr-warm-signal); background:var(--cpr-amber-soft);}
.box.stop{border-left-color:var(--cpr-warning-red); background:var(--cpr-red-soft);}
.box .box-label{font-family:var(--cpr-font-heading); font-weight:700; font-size:12px; letter-spacing:.03em; text-transform:uppercase; margin-bottom:4px; display:block;}
.box.note .box-label{color:var(--cpr-deep-medical);} .box.good .box-label{color:#065F46;}
.box.warn .box-label{color:#92400E;} .box.stop .box-label{color:#991B1B;}

/* --- Chips / tags --- */
.chip{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid var(--cpr-line-gray); background:var(--cpr-soft-gray); color:var(--cpr-muted-ink); margin:0 4px 4px 0;}
.chip.green{background:var(--cpr-green-soft); color:#065F46; border-color:#86EFAC;}
.chip.teal{background:var(--cpr-soft-cyan); color:var(--cpr-deep-medical); border-color:#93C5FD;}
.chip.amber{background:var(--cpr-amber-soft); color:#92400E; border-color:#FCD34D;}

/* --- Signature blocks --- */
.sig-grid{display:flex; gap:40px; margin-top:26px; flex-wrap:wrap;}
.sig{flex:1 1 300px;}
.sig .line{border-bottom:1.5px solid var(--cpr-ink); height:34px; margin-bottom:5px;}
.sig .cap{font-size:12px; color:var(--cpr-muted-ink);}
.fill{border-bottom:1px solid var(--cpr-muted-ink); display:inline-block; min-width:180px;}

/* --- Footer / legal line (repeats visually per printed page via running element) --- */
.legal-footer{margin-top:30px; padding-top:12px; border-top:1px solid var(--cpr-line-gray); font-size:10.5px; color:var(--cpr-muted-ink); line-height:1.5;}
.legal-footer .draft{color:var(--cpr-warning-red); font-weight:700;}

/* --- Utility --- */
.two-col{display:flex; gap:24px; flex-wrap:wrap;} .two-col>*{flex:1 1 300px;}
.muted{color:var(--cpr-muted-ink);} .center{text-align:center;} .nowrap{white-space:nowrap;}
.small-caps{font-variant:small-caps; letter-spacing:.03em;}
.page-break{break-before:page;}

/* --- Contract / long-doc components (promoted so Codex never re-invents them) --- */
ol.legal{counter-reset:item; padding-left:0; list-style:none;}
ol.legal > li{counter-increment:item; margin:7px 0 7px 30px; position:relative;}
ol.legal > li::before{content:counters(item,".") ". "; position:absolute; left:-30px; font-weight:600; color:var(--cpr-deep-medical);}
.toc{columns:2; column-gap:32px; font-size:14px;}
.toc a{display:block; margin:3px 0; text-decoration:none; color:var(--cpr-ink);}
.exhibit-cover{border:2px solid var(--cpr-deep-medical); border-radius:10px; padding:20px 22px; background:var(--cpr-clean-surface); margin:8px 0 16px;}

/* --- Print rules --- */
@page{size:Letter; margin:0.6in;}
@media print{
  body{background:#fff;}
  .sheet{box-shadow:none; margin:0; max-width:none; padding:0; border-top:none;}
  .no-print{display:none !important;}
  h2,h3{break-after:avoid;} table,.box,.sig-grid{break-inside:avoid;}
  thead{display:table-header-group;}
}