/* Local colour trial only. Base typography, imagery and motion stay in the original styles. */
:root {
  --paper: #f4f4f0;
  --charcoal: #252725;
  --powder-blue: #cadff0;
  --sage: #d8e4d5;
  --butter: #f1e8be;
  --graphite: #575c58;
  --black: var(--charcoal);
  --white: var(--paper);
  --text-dark: var(--charcoal);
  --text-light: var(--paper);
  --muted-dark: var(--graphite);
  --muted-light: #bfc5bf;
  --line-dark: #c3c9c1;
  --line-light: #565e56;
  --focus: var(--charcoal);
}

body {
  background: var(--paper);
  color: var(--charcoal);
}

.section-dark {
  --focus: var(--powder-blue);
}

.section-light,
.hero,
.studio-section,
.about-section,
.contact-section,
.case-study .cs-section,
.case-study .cs-more {
  --muted: var(--graphite);
  --line: var(--line-dark);
  --focus: var(--charcoal);
  background: var(--paper);
  color: var(--charcoal);
}

.site-header,
.portfolio-home .site-header {
  background: rgb(244 244 240 / 94%);
  color: var(--charcoal);
  border-bottom-color: var(--line-dark);
}

::selection {
  background: var(--powder-blue);
  color: var(--charcoal);
}

:focus-visible {
  outline-color: var(--focus);
}

.button-primary,
.hero .button-primary {
  background: var(--powder-blue);
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.button-primary:hover,
.hero .button-primary:hover {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--charcoal);
}

.button-secondary {
  border-color: var(--graphite);
}

.button-secondary:hover {
  background: var(--powder-blue);
  color: var(--charcoal);
  border-color: var(--charcoal);
}

.availability-highlight {
  background: var(--sage);
  color: var(--charcoal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A solid stage is shared with the WebGL clear colour. */
.work-gallery,
.gallery-stage,
.work-cover,
.cs-opening,
.cs-figure img,
.site-footer,
.cs-footer {
  background: var(--charcoal);
}

.gallery-kind,
.gallery-role,
.gallery-status,
.gallery-counter,
.work-group-label,
.work-group-label > span,
.work-entry-number,
.work-kind,
.work-name .gallery-icon,
.work-description,
.work-role,
.work-status {
  color: var(--muted-light);
}

.gallery-description {
  color: #dce1da;
}

.work-index-group,
.work-cover {
  border-color: var(--line-light);
}

.gallery-arrow,
.gallery-case-link {
  border-color: #889188;
}

.gallery-arrow:hover:not(:disabled) {
  background: var(--powder-blue);
  color: var(--charcoal);
  border-color: var(--powder-blue);
}

.gallery-case-link {
  padding-inline: 12px;
  background: var(--powder-blue);
  color: var(--charcoal);
  border-color: var(--powder-blue);
}

.gallery-case-link:hover {
  background: var(--paper);
  color: var(--charcoal);
  border-color: var(--paper);
}

.work-gallery.is-gallery-ready .work-entry.is-current .work-entry-number {
  color: var(--powder-blue);
}

.physics-section {
  --focus: var(--charcoal);
  background: var(--sage);
  color: var(--charcoal);
}

.physics-heading {
  border-top-color: #a9b5a5;
}

.physics-control {
  color: var(--charcoal);
  border-color: var(--graphite);
}

.physics-control:hover,
.physics-control:focus-visible {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--charcoal);
}

.skill-badge {
  background: var(--paper);
  color: var(--charcoal);
  border-color: #b7c2b3;
}

[data-shape="tile"] .skill-badge {
  background: var(--charcoal);
  color: var(--paper);
  border-color: var(--graphite);
}

.skill-badge small {
  color: var(--graphite);
}

/* Balance the tools and capabilities within the same physics scene. */
[data-skill="Responsive UI"] .skill-badge,
[data-skill="User flows"] .skill-badge,
[data-skill="Interaction design"] .skill-badge {
  background: var(--powder-blue);
  color: var(--charcoal);
  border-color: #a0b5bd;
}

/* Introductory words must reflow when readers enlarge their text. */
.cs-lede { overflow-wrap: anywhere; }

.skill-badge:focus-visible {
  outline-color: var(--charcoal);
}

.skill-badge:hover,
.skill-badge[aria-pressed="true"] {
  border-color: var(--charcoal);
}

.capability-group:hover,
.capability-group:focus-visible {
  background: var(--powder-blue);
}

.contact-link {
  background: var(--butter);
  color: var(--charcoal);
}

.contact-link:hover {
  background: var(--powder-blue);
}

.case-study .cs-body strong,
.case-study .cs-body pre {
  color: var(--charcoal);
}

.cs-jumps a:hover,
.cs-jumps a:focus-visible {
  background: var(--powder-blue);
  color: var(--charcoal);
}

.more-work-link img {
  background: var(--paper);
}

.site-intro {
  --focus: var(--powder-blue);
}