/* CMCBench design tokens and global rules (brief Section 5).
   Component looks live inline in each artboard; this sheet holds the
   swappable tokens, focus ring, tooltips, keyframes and reduced motion. */

:root {
  /* 5.2 colour tokens (light theme) */
  --surface-0: #F6F6F8;
  --surface-1: #FFFFFF;
  --surface-2: #F0F0F5;
  --surface-3: #E7E7EE;
  --surface-4: #D7D7E2;
  --border: #E1E1E9;
  --divider: #EEEEF3;
  --text-primary: #16161D;
  --text-secondary: #52525E;
  --text-tertiary: #656575;
  --accent: #3D56E0;
  --accent-tint: rgba(61, 86, 224, 0.10);
  --accent-tint-5: rgba(61, 86, 224, 0.05);
  --accent-line: rgba(61, 86, 224, 0.35);
  --accent-soft: #8FA6F5;
  --warm: #C05617;
  --warm-tint: rgba(192, 86, 23, 0.10);
  --warm-tint-6: rgba(192, 86, 23, 0.06);
  --warm-muted: #D9B8A3;
  --amber: #C26200;
  --amber-tint: rgba(194, 98, 0, 0.10);
  --amber-tint-5: rgba(194, 98, 0, 0.05);
  --teal: #2F8F9D;
  --magenta: #C13AB5;
  --magenta-tint: rgba(193, 58, 181, 0.10);
  --violet: #7B5BD6;
  --violet-tint: rgba(123, 91, 214, 0.10);
  --warm-text: #A84B14;
  --amber-text: #A85500;
  --teal-text: #237580;
  --magenta-text: #A2358F;
  --violet-text: #6A4BC8;
  --sample-bg: #FFF4E5;
  --sample-text: #8A4B00;
  --sample-border: #F2D2A6;
  --ink-blue: #1F3A93;
  --stamp-red: #B3261E;
  --redaction: #111111;
  --row-hover: #FAFAFC;
  --tier-mid: #C9C9D6;
  --lavender-end: #EFEFFB;
  --primary-hover: #2A2A35;

  /* 5.4 series palette, in order */
  --series-1: #3D56E0; /* indigo */
  --series-2: #C05617; /* burnt orange */
  --series-3: #2F8F9D; /* teal */
  --series-4: #8E4E86; /* plum */
  --series-5: #A0782C; /* bronze */
  --series-6: #3F6FB5; /* steel blue */
  --series-7: #C13AB5; /* rose */
  --series-8: #5B6475; /* slate */

  /* 5.4 taxonomy axis dots */
  --axis-length: #C9A27E;
  --axis-task: #3D56E0;
  --axis-taskDetail: #8FA6F5;
  --axis-perception: #B59BE0;
  --axis-structure: #9DB0F2;
  --axis-family: #D98AD0;
  --axis-modality: #2F8F9D;
  --axis-capture: #8C8C99;
  --axis-source: #5B6475;

  /* 8.2 family avatar colours (white letters pass 4.5:1) */
  --fam-agentic: #3D56E0;
  --fam-coding: #5B6475;
  --fam-idp: #8E4E86;
  --fam-hosted: #3F6FB5;
  --fam-open: #237580;
  --fam-baseline: #8A6524;
  --fam-reference: #5B6475;

  /* 2.0 additions (site-requirements DS-05, DS-10, B-10; CMC.color) */
  --plum: #8E4E86;
  --bronze: #A0782C;
  --steel-blue: #3F6FB5;
  --slate: #5B6475;
  --grey: #8C8C99;
  --plum-text: #7A4273;
  --grey-text: #656575;
  --bronze-text: #8A6524;
  --axis-notation: #C26200;
  --axis-archetype: #8E4E86;
  --axis-materialStage: #A0782C;
  --axis-ctdSection: #3F6FB5;
  --axis-locale: #237580;
  --axis-templateOrigin: #5B6475;
  --axis-era: #8C8C99;
  --docfam-batch: #3D56E0;
  --docfam-qc: #2F8F9D;
  --docfam-stability: #C05617;
  --docfam-lab: #A0782C;
  --docfam-ctd: #3F6FB5;
  --docfam-regulatory: #5B6475;
  --err-omission: #5B6475;
  --err-fabrication: #C13AB5;
  --err-qualifier: #C05617;
  --err-precision: #C26200;
  --err-position: #3D56E0;
  --err-dates: #2F8F9D;
  --err-records: #8E4E86;
  --err-other: #8C8C99;
  --err-omission-text: #5B6475;
  --err-fabrication-text: #A2358F;
  --err-qualifier-text: #A84B14;
  --err-precision-text: #A85500;
  --err-position-text: #3D56E0;
  --err-dates-text: #237580;
  --err-records-text: #7A4273;
  --err-other-text: #656575;
  --split-heldout-bg: rgba(61, 86, 224, 0.10);
  --split-heldout-text: #3D56E0;
  --split-public-bg: #F0F0F5;
  --split-public-text: #656575;
  /* CMCParse dimension colours: final, equal to CMC.parse.dimension(id).color; not the series order (series 2 is the SCR colour) */
  --dim-pd1: #3D56E0;
  --dim-pd2: #2F8F9D;
  --dim-pd3: #5B6475;
  --dim-pd4: #C26200;
  --dim-pd5: #8E4E86;
  --dim-pd6: #A0782C;
  --dim-pd7: #C13AB5;
  --dim-x: #C05617;

  /* 5.5 typography */
  --sans: "Overused Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* 5.7 radius and elevation */
  --r-pill: 999px;
  --r-control: 10px;
  --r-card: 14px;
  --r-popover: 12px;
  --r-chip: 8px;
  --shadow-card: 0 4px 24px rgba(22, 22, 29, 0.04);
  --shadow-popover: 0 12px 32px rgba(22, 22, 29, 0.12);
  --shadow-overlay: 0 24px 64px rgba(22, 22, 29, 0.18);
  --shadow-lift: 0 8px 24px rgba(22, 22, 29, 0.08);

  /* 11 motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* 5.6 layout */
  --container: 1152px;
}

/* Global resets the artboards rely on */
.cmc-root, .cmc-root * { box-sizing: border-box; }
.cmc-root {
  font-family: var(--sans);
  color: var(--text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.cmc-root button, .cmc-root input, .cmc-root select, .cmc-root textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.cmc-root button { cursor: pointer; }
.cmc-root button:disabled { cursor: default; }
.cmc-root h1, .cmc-root h2, .cmc-root h3, .cmc-root h4, .cmc-root p { margin: 0; }
.cmc-root a { color: inherit; }
.cmc-root table { border-collapse: collapse; }
.cmc-root .num, .cmc-root .mono { font-variant-numeric: tabular-nums; }
.cmc-root .mono { font-family: var(--mono); }
.cmc-root ::selection { background: rgba(61, 86, 224, 0.18); }

/* 5.7 focus ring: keyboard focus only */
.cmc-root :focus { outline: none; }
.cmc-root :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* G8 abbreviations */
.cmc-root abbr[title] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
}

/* Custom disclosure triangles only (Safari draws its own marker) */
.cmc-root summary { list-style: none; }
.cmc-root summary::-webkit-details-marker { display: none; }

/* Screen-reader-only text (captions, live regions) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* 5.10 tooltip: add class "cmc-tip" and data-tip="…" to any focusable
   element; also expose the same text to assistive tech (aria-label,
   aria-describedby or an sr-only span). "cmc-tip-below" flips it. */
.cmc-tip { position: relative; }
.cmc-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text-primary);
  color: #FFFFFF;
  font: 400 13px/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
  transition-delay: 0ms;
}
.cmc-tip.cmc-tip-below::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.cmc-tip.cmc-tip-left::after { left: 0; transform: translate(0, 4px); }
.cmc-tip.cmc-tip-right::after { left: auto; right: 0; transform: translate(0, 4px); }
.cmc-tip:hover::after, .cmc-tip:focus-visible::after, .cmc-tip:focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 120ms;
}
.cmc-tip.cmc-tip-left:hover::after, .cmc-tip.cmc-tip-left:focus-visible::after { transform: translate(0, 0); }
.cmc-tip.cmc-tip-right:hover::after, .cmc-tip.cmc-tip-right:focus-visible::after { transform: translate(0, 0); }
.cmc-tip.cmc-tip-left:focus-within::after, .cmc-tip.cmc-tip-right:focus-within::after { transform: translate(0, 0); }
.cmc-tip[data-tip=""]::after { display: none; }
/* WCAG 1.4.13: components set data-tip-off on Escape and clear it on blur/mouseleave */
.cmc-tip[data-tip-off]::after, .cmc-tip[data-tip-off="true"]::after { display: none; }

/* Thin scrollbars for the internal scrollers (table, mosaic, code) */
.cmc-scroll { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
.cmc-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cmc-scroll::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 8px; }
.cmc-scroll::-webkit-scrollbar-track { background: transparent; }
.cmc-noscrollbar { scrollbar-width: none; }
.cmc-noscrollbar::-webkit-scrollbar { display: none; }

/* 5.6 section separator hairline */
.cmc-hairline {
  height: 1px;
  margin: 0 64px;
  background: linear-gradient(90deg, rgba(61, 86, 224, 0) 0%, rgba(61, 86, 224, 0.2) 50%, rgba(61, 86, 224, 0) 100%);
}

/* 11 motion keyframes */
@keyframes cmc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmc-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes cmc-rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cmc-word-in { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes cmc-overlay-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes cmc-row-pulse { 0% { background-color: rgba(61, 86, 224, 0.10); } 100% { background-color: rgba(61, 86, 224, 0); } }
@keyframes cmc-box-pulse { 0% { stroke-opacity: 1; fill-opacity: 0.12; } 40% { stroke-opacity: 1; fill-opacity: 0.32; } 100% { stroke-opacity: 1; fill-opacity: 0.22; } }
@keyframes cmc-scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 71% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes cmc-draw { from { stroke-dashoffset: var(--cmc-len, 400); } to { stroke-dashoffset: 0; } }
@keyframes cmc-ticker-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cmc-ticker-out { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes cmc-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.cmc-anim-fade { animation: cmc-fade-in 300ms var(--ease-out) both; }
.cmc-anim-rise { animation: cmc-rise-in 300ms var(--ease-out) both; }
.cmc-anim-word { display: inline-block; animation: cmc-word-in 520ms var(--ease-out) both; }
.cmc-anim-overlay { animation: cmc-overlay-in 200ms var(--ease-out) both; }
.cmc-anim-row-pulse { animation: cmc-row-pulse 1.2s var(--ease-out) both; }
.cmc-anim-box-pulse { animation: cmc-box-pulse 600ms var(--ease-in-out) 1 both; }
.cmc-anim-scroll-dot { animation: cmc-scroll-dot 1.6s var(--ease-in-out) infinite; }
.cmc-anim-draw { stroke-dasharray: var(--cmc-len, 400); animation: cmc-draw 400ms var(--ease-out) both; }
.cmc-anim-ticker-in { animation: cmc-ticker-in 300ms var(--ease-out) both; }
.cmc-anim-toast { animation: cmc-toast-in 200ms var(--ease-out) both; }

/* 11 reduced motion: every item falls back to instant, loops stop in JS
   (CMC.prefersReducedMotion()). The row pulse becomes a static tint. */
@media (prefers-reduced-motion: reduce) {
  .cmc-root, .cmc-root *, .cmc-root *::before, .cmc-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* brief 11: hover states keep their 120 ms, and the inspector keeps a 200 ms fade */
  .cmc-root .cmc-rm-keep { transition-duration: 120ms !important; }
  .cmc-root .cmc-rm-fade { animation: cmc-fade-in 200ms var(--ease-out) both !important; }
  .cmc-anim-scroll-dot { animation: none !important; }
  .cmc-anim-row-pulse { animation: none !important; background-color: rgba(61, 86, 224, 0.10); }
  .cmc-anim-word { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* Print: keep the specimen pages and charts in colour */
@media print {
  .cmc-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}