/* IndoCerdas ink, paper, and neutral interaction states. */
:root {
  --brand-ink: #141414;
  --brand-paper: #fff;
  --brand-surface: #f5f5f5;
  --brand-line: #dedede;
  --brand-muted: #5f5f5f;
  --brand-action-hover: #343434;
  --brand-selected: #ededed;
  --brand-selected-line: #c7c7c7;
  accent-color: var(--brand-ink);
}

::selection {
  color: var(--brand-ink);
  background: var(--brand-selected-line);
}

:where(a, button, summary, input):focus-visible {
  outline-color: var(--brand-ink);
}

.ic-site-footer .ic-footer-app,
#nav-shell.ic-site-nav .nav-actions a.use-app,
body.sx-page #nav-shell.ic-site-nav .nav-actions a.use-app,
.sol-page .sol-pill,
.bid-page .bid-pill,
.bid-page main .bid-primary,
.system-page main .system-button {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-paper);
}

.ic-site-footer .ic-footer-app:hover,
#nav-shell.ic-site-nav .nav-actions a.use-app:hover,
body.sx-page #nav-shell.ic-site-nav .nav-actions a.use-app:hover,
.sol-page .sol-pill:hover,
.bid-page .bid-pill:hover:not(:disabled),
.bid-page main .bid-primary:hover,
.system-page main .system-button:hover {
  background-color: var(--brand-action-hover);
  border-color: var(--brand-action-hover);
  color: var(--brand-paper);
}

.hero.hero-specializations .hero-app-cta,
.bid-page .bid-ink .bid-pill,
body.sx-page .sx-eudia-hero .sx-actions > .sx-primary,
body.kb-page .kb-hero > .kb-link {
  background-color: var(--brand-paper);
  border-color: var(--brand-paper);
  color: var(--brand-ink) !important;
}

.hero.hero-specializations .hero-app-cta:hover,
.bid-page .bid-ink .bid-pill:hover:not(:disabled),
body.sx-page .sx-eudia-hero .sx-actions > .sx-primary:hover,
body.kb-page .kb-hero > .kb-link:hover {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected);
}

#nav-shell.ic-site-nav .drop[open] > div a:is(:hover, [aria-current="page"]),
.sol-nav .sol-drop-links a:is(:hover, [aria-current="page"]) {
  background-color: var(--brand-selected);
  color: var(--brand-ink);
}

#nav-shell.ic-site-nav.expanded .nav-sections a.mobile-only,
.sol-nav.expanded .sol-mobile-app,
.sol-footer a,
.ic-site-footer .ic-footer-nav a:hover {
  color: var(--brand-ink);
}

/* Match media and existing product demonstrations to the site palette. */
.sol-hero-photo,
.ad-page,
.kos-model,
.system-stack-art,
.system-page :is(.system-catalog, .system-media),
.legal-pillars .lp-reference-art,
.ic-unveil .native-product-demo,
.source-chat .sc-media,
.format-demo .fd-media,
.native-workflow .nwf-canvas,
.bid-motion,
.bid-page .bid-study-evidence,
.kb-page .lk-demo-source,
.sol-page :is(.sol-visual, .sol-tool-art, .sol-faq),
.ui-motion-stage,
.sx-page :is(.sx-eudia-media, .sx-task, .sx-closing),
:is(.sc-source-dialog, .fd-document-dialog) {
  filter: grayscale(1);
}

/* Landing page and its demonstrations. */
.hero.hero-specializations .hero-app-cta:focus-visible,
.knowledge-os .kos-toggle:focus-visible,
.legal-pillars .lp-pillar-open:focus-visible {
  outline-color: var(--brand-paper);
}

.legal-pillars .lp-pillar-riset .lp-pillar-open:focus-visible,
.administration-demo :is(.ad-options button, .ad-original-link):focus-visible {
  outline-color: var(--brand-ink);
}

.legal-pillars .lp-pillar-riset {
  background: radial-gradient(ellipse at 90% 0, #fff, transparent 65%), linear-gradient(155deg, #f4f4f4, #e2e2e2);
}
.legal-pillars .lp-pillar-susun {
  background: linear-gradient(155deg, #161616, #353535);
}
.lp-pillar-cta, .source-chat .sc-send:not(:disabled) { background-color: var(--brand-ink); }
.lp-pillar-cta:hover, .source-chat .sc-send:not(:disabled):hover { background-color: var(--brand-action-hover); }

.source-chat .sc-media, .format-demo .fd-media {
  background: linear-gradient(145deg, #202020, #6d6d6d 52%, #d8d8d8);
}
.format-demo .fd-pane.fd-document { background: linear-gradient(150deg, #ffffff8c, #f3f3f355); }

.native-workflow .nwf-canvas {
  background-image: radial-gradient(circle, #ffffff5c 1.7px, transparent 1.9px), linear-gradient(145deg, #202020, #555 42%, #a8a8a8 76%, #e8e8e8);
  background-size: 29px 29px, 100% 100%;
}
.native-workflow .nwf-edge { color: var(--brand-paper); }
.native-workflow .nwf-hop.is-active .nwf-node {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
}
.native-workflow .nwf-hop.is-active .nwf-node-icon { color: var(--brand-paper); }

.knowledge-os .kos-stage { background: radial-gradient(ellipse at 62% 54%, #2a2a2a, #171717 73%); }
.knowledge-os .kos-layer.is-active {
  background: linear-gradient(105deg, #2d2d2d, #232323);
  box-shadow: inset 0 0 0 1px #ffffff45;
}
.knowledge-os .kos-layer.is-active .kos-toggle { color: var(--brand-paper); }
.knowledge-os .kos-layer.is-active .kos-plus::after { background-color: var(--brand-paper); }

.administration-demo { background-color: var(--brand-paper); }
.ad-options button[aria-selected="true"] .ad-option-title,
.ad-assistant-status,
.ad-original-link .ad-original-arrow {
  color: var(--brand-ink);
}
.ad-assistant-tabs b {
  color: var(--brand-ink);
  border-bottom-color: var(--brand-ink);
}
.ad-original-link:hover {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected-line);
}

.ic-unveil .native-product-demo .case-source-list .case-source-highlight,
.ic-unveil .native-product-demo .case-rail button[aria-current="step"] {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected-line);
  color: var(--brand-ink);
}

.edu-research .edu-panel {
  background-color: var(--brand-surface);
  border-color: var(--brand-line);
}
.edu-research .edu-history li.edu-history-current {
  color: var(--brand-ink);
  background-color: var(--brand-selected);
}

/* Solution overview and the shared simulations. */
.bid-page main a:focus-visible,
.bid-page main :is(button, input, summary):focus-visible {
  outline-color: var(--brand-ink);
}
.bid-page .bid-paper { background: linear-gradient(120deg, #f2f2f2, #d9d9d9); }
.bid-page :is(.bid-band, .bid-study, .bid-kb-example, .bid-table-scroll) { background-color: var(--brand-surface); }
.bid-page .bid-study .bid-expand, .bid-page .bid-work-body dl { background-color: var(--brand-paper); }
.bid-page .bid-entry:hover { background-color: var(--brand-selected); }

.bid-motion .lk-stage {
  background: radial-gradient(ellipse at 85% 90%, #e1e1e1, #a2a2a2 34%, #444 78%);
}
.bid-motion-admin, .bid-rs-demo {
  background: radial-gradient(ellipse at 80% 95%, #ddd, transparent 64%), linear-gradient(130deg, #252525, #787878);
}
.bid-motion :is(.lk-legal-memo, .lk-source-column, .lk-library-file, .rs-rail, .rs-prompt) { background-color: var(--brand-surface); }
.bid-motion :is(.lk-selected, .lk-reading, .rs-reading-status),
.bid-rs-demo .rs-inline-link { color: var(--brand-ink); }
.bid-rs-demo .rs-reading-status > span { background-color: var(--brand-ink); }

.sol-page {
  --sol-paper: var(--brand-paper);
  --sol-ink: var(--brand-ink);
  --sol-muted: var(--brand-muted);
  --sol-line: var(--brand-line);
  --sol-stage-light: #eee;
  --sol-stage-dark: #bdbdbd;
}

.sol-page .sol-story { background-color: #eee; }
.sol-page main .sol-story-copy p { color: #484848; }
.sol-page .sol-footer { background-color: var(--brand-surface); color: var(--brand-ink); }
.sol-page :is(.sol-case-copy, .sol-story-copy, .sol-faq-copy) a,
.sol-page .sol-tool h3 span,
.sol-page .sol-case-nav a:is(:hover, :focus-visible) { color: var(--brand-ink); }

.sol-page .sol-visual--reader { background: linear-gradient(138deg, #e8e8e8 10%, var(--sol-stage-dark)); }
.sol-page .sol-visual--motion { background: radial-gradient(ellipse at 10% 15%, #dedede, #929292); }
.sol-page .sol-visual--result { background: linear-gradient(160deg, var(--sol-stage-light) 8%, #b3b3b3); }
.sol-page .sol-tool-art--paper { background: linear-gradient(145deg, #eee, #b7b7b7); }
.sol-page .sol-tool-art--files { background: linear-gradient(145deg, #c0c0c0, #797979); }
.sol-page .sol-tool-art--steps { background: linear-gradient(145deg, #767676, #282828); }
.sol-page .sol-tool-art--sources { background: linear-gradient(145deg, #e5e5e5, #9a9a9a); }

.sol-page :is(.sol-file, .sol-doc-mark, .sol-library-spaces, .sol-ui-table thead, .sol-question, .sol-research-source) {
  background-color: var(--brand-surface);
  border-color: var(--brand-line);
}
.sol-page .sol-doc-mark { color: var(--brand-muted); }
.sol-page .sol-send {
  background-color: var(--brand-ink);
  color: var(--brand-paper);
}
.sol-page :is(.sol-library-check, .sol-library-preview-note) svg { color: var(--brand-ink); }
.sol-page .sol-tool-art--steps .sol-mini-window svg { color: var(--brand-paper); }
.sol-page .sol-ui-table tbody tr:last-child,
.sol-page .sol-library-spaces strong,
.sol-page .sol-library-row--selected,
.sol-page .sol-capacity label:has(:checked),
.sol-page .sol-tool-art--sources .sol-mini-window > span:last-child {
  background-color: var(--brand-selected);
  color: var(--brand-ink);
}
.sol-page .sol-capacity label:has(:checked) { border-color: var(--brand-selected-line); }

.edu-source-quote mark,
.sol-page .sol-document mark,
.bid-motion .ba-source mark {
  background-color: var(--brand-selected);
  color: var(--brand-ink);
}

/* Platform and audience pages. */
body.sx-page .sx-primary,
body.kb-page .kb-link {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-paper) !important;
}

body.sx-page .sx-primary:hover,
body.kb-page .kb-link:hover {
  background-color: var(--brand-action-hover);
  border-color: var(--brand-action-hover);
}

.kb-page .kb-hero .kb-eyebrow { color: var(--brand-paper); }
.kb-page .kb-section .kb-eyebrow, .kb-page .kb-source-list a > span { color: var(--brand-ink); }
.kb-page .kb-steps article:nth-child(2),
.kb-page .kb-source-list a:last-child { background-color: var(--brand-surface); }
.kb-page .kb-source-list a:hover { border-color: var(--brand-selected-line); }

.kb-page .kb-motion-hero .ui-motion-stage {
  background: radial-gradient(ellipse at 100% 100%, #cfcfcf33, transparent 65%), linear-gradient(145deg, #171717, #585858 65%, #aaa);
}
.sx-page .sx-feature > .sx-feature-checks > article { background-color: var(--brand-surface); }
.sx-page .sx-film-workflow .is-active .sx-flow-node {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected-line);
  color: var(--brand-ink);
}
.system-page {
  --system-paper: var(--brand-surface);
  --system-line: var(--brand-line);
  --system-accent: var(--brand-paper);
}
.system-page .system-layer-links a.is-current { color: var(--brand-ink); }
.system-page .system-kicker,
.system-page main .system-link,
.system-page .system-citation strong span,
.system-page .system-chat-answer sup { color: var(--brand-ink); }

.system-atlas {
  background: radial-gradient(ellipse at 81% 56%, #464646, transparent 56%), linear-gradient(147deg, #171717, #292929);
}
.system-catalog, .system-format { background: linear-gradient(148deg, #fafafa, #ededed); }
.system-project, .system-chat {
  background: radial-gradient(ellipse at 90% 100%, #555, transparent 68%), linear-gradient(135deg, #1d1d1d, #353535 75%);
}
.system-workflow {
  background: radial-gradient(circle at 2px 2px, #a8a8a83f 1.2px, transparent 1.7px) 0 0 / 22px 22px, linear-gradient(140deg, #f8f8f8, #e9e9e9);
}
.system-page :is(.system-icon-box, .system-flow li > span, .system-example-grid > div) {
  background-color: var(--brand-surface);
  border-color: var(--brand-line);
  color: var(--brand-muted);
}
.system-page .system-citation {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected-line);
}
.system-page .system-flow li + li::before { background-color: var(--brand-selected-line); }
.system-page .system-flow li:last-child {
  background-color: var(--brand-ink);
  border-color: var(--brand-ink);
}
.system-page .system-source-list a:hover {
  background-color: var(--brand-selected);
  border-color: var(--brand-selected-line);
}

/* The guide uses the same swatches shown on the site. */
.brand-guide {
  --ink: var(--brand-ink);
  --ivory: var(--brand-paper);
  --ash: #d6d6d6;
  --graphite: var(--brand-muted);
  --line: var(--brand-line);
}
.brand-guide :is(.cover .index, .mast nav a, .sources a) { color: var(--brand-paper); }
.brand-guide .contents a span { color: var(--brand-ink); }