/* Shared roles: site chrome, product identity, and functional state.
   Product palettes are generated from products.json; no per-product selectors. */
:root {
  --site-accent: #b44933;
  --site-accent-hover: #913b2a;
  --site-focus: #294f72;
  --accent: var(--site-accent);
  --accent-dark: var(--site-accent-hover);
  --muted: #62665d;
  --state-info: #3f566b;
  --state-info-surface: #e8edf1;
  --state-info-border: #8293a2;
  --state-success: #275d48;
  --state-success-surface: #e4eee7;
  --state-success-border: #729780;
  --state-warning: #785012;
  --state-warning-surface: #f5ead2;
  --state-warning-border: #ab8541;
  --state-error: #9c2738;
  --state-error-surface: #f7e7ea;
  --state-error-border: #bc7480;
  --radius-control: 4px;
  --radius-panel: 6px;
}
[data-product] {
  --action: var(--product-accent);
  --action-hover: var(--product-hover);
  --action-active: var(--product-active);
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--site-focus);
  outline-offset: 4px;
}
.button { min-height: 44px; border-radius: var(--radius-control); }
.primary { background: var(--action, var(--site-accent)); }
.primary:hover { background: var(--action-hover, var(--site-accent-hover)); color: #fffaf3; }
.primary:active { background: var(--action-active, var(--site-accent-hover)); transform: translateY(1px); }
.button:disabled, button:disabled, .button[aria-disabled="true"] {
  background: #e4e3dc; color: #64665f; border-color: #9a9d92; cursor: not-allowed;
}
.button[aria-disabled="true"] { pointer-events: none; }
.text-link { text-underline-offset: 4px; }
.text-link:hover { text-decoration: underline; }
[data-product] .text-link, [data-product] .product-period,
[data-product] .product-hero h1, [data-product] .tool-feature-copy :is(h2,h3),
[data-product] .tool-card-copy h2, [data-product] .product-toc > span,
[data-product] .product-content .eyebrow, [data-product] .workflow-steps article > span,
[data-product] .post-meta > span:first-child, [data-product] .article-header .eyebrow,
[data-product] .search-result small, .search-result[data-product] small {
  color: var(--product-accent);
}
[data-product] .text-link:hover,
[data-product] .post-card h3 a:hover,
.post-card[data-product] h3 a:hover { color: var(--product-hover); }
.tool-feature[data-product], .tool-card[data-product] {
  background: var(--product-surface);
  border-color: var(--product-border);
  border-radius: var(--radius-panel);
}
.tool-feature .tool-description, .tool-card p:not(.tool-headline) { color: var(--muted); }
.pill {
  font-size: 10px; line-height: 1.5; letter-spacing: .3px;
  padding: 3px 7px; border-radius: var(--radius-control); white-space: normal;
}
[data-product] .overline .pill {
  color: var(--product-accent);
  border-color: var(--product-border);
  background: var(--paper);
}
[data-product] .product-hero {
  border-bottom: 2px solid var(--product-border);
}
[data-product] .product-toc a:hover,
[data-product] .product-toc a:focus-visible {
  color: var(--product-accent); border-left-color: var(--product-accent);
  text-decoration: underline; text-underline-offset: 4px;
}
[data-product] .product-content dl,
[data-product] .distribution-box {
  background: var(--product-surface); border-color: var(--product-border);
  border-radius: var(--radius-panel);
}
[data-product] .distribution-box { border-left: 3px solid var(--product-accent); }
[data-product] .distribution-note { border-color: var(--product-border); }
[data-product] .workflow-steps article { border-top-color: var(--product-border); }
[data-product] .post-picture, [data-product] .article-illustration,
.product-symbol {
  color: var(--product-accent); background: var(--product-surface);
  border-color: var(--product-border);
}
[data-product] .article-header {
  border-left: 3px solid var(--product-accent); padding-left: 22px;
}
[data-product] .picture-label { color: var(--product-accent); opacity: 1; }
[data-product] .picture-number { color: var(--muted); }
.journal-timeline .post-card[data-product]::before {
  background: var(--product-accent); box-shadow: 0 0 0 1px var(--product-accent);
}
.filter { min-height: 44px; }
.filter[data-product] { color: var(--product-accent); border-bottom-color: var(--product-border); }
.filter[data-product]:hover { background: var(--product-surface); }
.filter.active {
  background: var(--ink); color: var(--paper);
  text-decoration: underline; text-underline-offset: 4px;
}
.filter.active[data-product] {
  background: var(--product-accent); color: #fffaf3; border-color: var(--product-accent);
}
.filter.active[data-product]:hover { background: var(--product-hover); }
.post-meta > span + span, .post-bottom, .journal-timeline .timeline-date,
.journal-timeline .post-card::after, .journal-ledger .eyebrow,
.journal-ledger .journal-order { color: var(--muted); }
.post-meta > span + span { font-size: 10px; }
.product-symbol {
  display: grid; place-items: center; min-height: 190px;
  border: 1px solid var(--product-border); border-radius: var(--radius-panel);
}
.product-symbol svg { width: 90px; height: 90px; }
/* Diagram accent expresses product identity; ticks and file types keep their own meaning. */
[data-product] .diagram-toolbar, [data-product] .dotori-title {
  color: var(--product-accent); background: var(--product-surface);
  border-color: var(--product-border);
}
[data-product] .diagram-toolbar i { background: var(--product-accent); }
[data-product] .diagram-arrow, [data-product] .dotori-flow b { color: var(--product-accent); }
[data-product] .print-diagram, [data-product] .dotori-diagram {
  border-color: var(--product-border); box-shadow: 5px 6px 0 var(--product-surface);
}
.diagram-body small, .diagram-caption, .dotori-title small, .dotori-flow,
.dotori-flow .dotori-vault, .dotori-agents i { color: var(--muted); }
.format-0 { color: #7d493a; }
.format-1 { color: #4e5e3b; }
.format-2 { color: #625a37; }
/* Status never inherits product color. Text/icon remains the primary cue. */
[data-state="info"] { --state-ink: var(--state-info); --state-surface: var(--state-info-surface); --state-border: var(--state-info-border); }
[data-state="success"] { --state-ink: var(--state-success); --state-surface: var(--state-success-surface); --state-border: var(--state-success-border); }
[data-state="warning"] { --state-ink: var(--state-warning); --state-surface: var(--state-warning-surface); --state-border: var(--state-warning-border); }
[data-state="error"] { --state-ink: var(--state-error); --state-surface: var(--state-error-surface); --state-border: var(--state-error-border); }
[data-state] {
  color: var(--state-ink) !important; background: var(--state-surface);
  border: 1px solid var(--state-border); border-radius: var(--radius-control); padding: 3px 7px;
}
.live-dot, .status-dot { background: var(--state-success); }
[data-state="info"]::before { content: 'ⓘ '; }
[data-state="success"]::before { content: '✓ '; }
[data-state="warning"]::before { content: '⚠ '; }
[data-state="error"]::before { content: '! '; }
@media (max-width: 600px) {
  [data-product] .article-header { padding-left: 15px; }
  .tool-feature .overline, .tool-card .overline { flex-wrap: wrap; row-gap: 10px; }
  .product-toc { flex-wrap: wrap; justify-content: flex-start; row-gap: 12px; }
  .product-toc a { min-height: 44px; display: inline-flex; align-items: center; }
  .filters { gap: 5px; justify-content: flex-start; }
  .filter { font-size: 12px; padding: 8px 12px; }
  .button { font-size: 12px; }
  .tool-feature :is(h2,h3), .tool-card h2, .inner-page > .tool-feature :is(h2,h3) { font-size: 38px; }
  .tool-feature .tool-headline, .tool-card .tool-headline,
  .inner-page > .tool-feature .tool-headline { font-size: 17px; }
}

/* Secondary text keeps a shared readable tone across every surface. */
.brand-divider, kbd, .footer-bottom, .overline > span:first-child,
.sample-notice, .post-card h3 span, .orbit-label, .margin-note,
.sketch-caption, .sketch-caption > span:last-child, .sketch-label,
.terminal-top > span, .terminal-label, .sketch-bottom, .sketch-bottom > span,
.micro, .shelf > h3 > span, .shelf-number, .shelf-arrow, .journal-section .eyebrow {
  color: var(--muted);
}
.sticky-note { color: #5c5939; }
.tick { color: var(--state-success); }

.search-button kbd { color: var(--muted); }
.product-hero > * { min-width: 0; }
@media (max-width: 820px) { .product-hero { grid-template-columns: minmax(0, 1fr); } }

/* The tool listing gives both products the same heading and card roles. */
.inner-page > .tool-feature { grid-template-columns: 1.1fr .9fr; gap: 55px; padding: 34px 42px; }
.inner-page > .tool-feature :is(h2,h3), .tool-card h2 {
  font-size: 38px; font-weight: 650; letter-spacing: -1.5px; line-height: 1.2; margin: 0 0 13px;
}
.inner-page > .tool-feature .tool-headline { font-size: 18px; line-height: 1.7; margin-bottom: 10px; }
.inner-page > .tool-feature .tool-description { font-size: 12px; max-width: 430px; line-height: 1.9; }
@media (max-width: 600px) {
  .inner-page > .tool-feature { grid-template-columns: minmax(0,1fr); gap: 27px; padding: 25px; }
  .inner-page > .tool-feature .tool-headline { font-size: 17px; }
}