/* August 2026 design-lab refinement.
   Test instance only. This file intentionally overrides the prototype without
   changing any production stylesheet. */

:root {
  --color-sky: #31d9ca;
  --color-deep-blue: #0b7f79;
  --color-lilac: #66d8d1;
  --color-blush: #73e6dc;
  --color-plum: #0f4f4c;
  --color-ink: #11171a;

  --color-navy-900: #080b0d;
  --color-navy-800: #0d1114;
  --color-navy-700: #13191d;
  --color-cream: #f6fbfa;
  --color-powder: #edf8f7;
  --color-dusty-pink: #e4f5f3;
  --color-lilac-soft: #e8f8f6;

  --surface-a: #f8fbfb;
  --surface-b: #eef7f6;
  --surface-c: #e3f2f0;
  --on-surface: #11171a;
  --on-surface-muted: #596469;
  --on-surface-border: #d4e3e1;
  --on-dark: #f7fbfb;
  --on-dark-muted: #aebfc1;
  --on-dark-border: #253136;
  --color-heading-light: #0e292a;
  --color-focus: #19bfb2;
}

:root[data-theme="dark"] {
  --surface-a: #0d1114;
  --surface-b: #10171a;
  --surface-c: #152124;
  --on-surface: #f2f7f7;
  --on-surface-muted: #a9b8bb;
  --on-surface-border: #263438;
  --color-heading-light: #baf6ef;
  --color-focus: #4ce4d7;
}

body {
  background: var(--surface-a);
}

.c-site-header {
  background: color-mix(in srgb, var(--surface-a) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-sky) 22%, var(--on-surface-border));
}

.c-navigation__link:hover,
.c-navigation__link[aria-current="page"] {
  color: var(--color-sky);
}

.c-navigation__link[aria-current="page"] {
  border-block-end-color: var(--color-sky);
}

.c-button--primary {
  background: var(--color-sky);
  color: #06100f;
}

.c-button--ghost {
  border-color: color-mix(in srgb, var(--color-sky) 72%, var(--on-surface-border));
}

.c-button--ghost:hover {
  background: var(--color-sky);
  color: #06100f;
}

.c-button--soft,
.c-carousel__control:hover {
  background: color-mix(in srgb, var(--color-sky) 20%, var(--surface-a));
}

.c-eyebrow,
.c-product-card__category,
.c-creates__index,
.c-section-heading h2 em,
.c-creates h2 em,
.c-meet__copy h2 em {
  color: var(--color-sky);
}

.c-hero,
.c-band,
.c-site-footer {
  background: var(--color-navy-900);
}

.c-hero__copy h1 em,
.c-hero__copy h1 strong,
.c-process-head h2 em,
.c-final-cta h2 em {
  color: var(--color-sky);
}

.c-hero__blob,
.c-hero__paw,
.c-hero__bone,
.c-band__grain,
.c-band__paw,
.c-featured__blob,
.c-meet__accent,
.c-site-footer__accent {
  display: none;
}

.c-hero__line {
  background: currentColor;
  opacity: 0.35;
}

.c-hero__divider {
  color: var(--color-sky);
}

.c-hero__paw-small {
  background: var(--color-sky);
}

.c-hero__transition path {
  fill: var(--surface-b);
}

.c-band--featured {
  background: var(--surface-b);
}

.c-section-heading h2,
.c-creates h2,
.c-creates__link,
.c-product-card__title {
  color: var(--color-heading-light);
}

.c-product-card__frame {
  border: 1px solid color-mix(in srgb, var(--color-sky) 14%, var(--on-surface-border));
}

.c-creates {
  background: var(--surface-a);
}

.c-creates__list,
.c-creates__item {
  border-color: color-mix(in srgb, var(--color-sky) 16%, var(--on-surface-border));
}

/* The commission layout stays intact; only the palette is aligned. */
.c-band--commissions {
  background: #080b0d;
}

.c-timeline__number {
  -webkit-text-stroke-color: var(--color-sky);
}

.c-timeline__icon,
.c-timeline__path {
  color: var(--color-sky);
}

.c-band--meet {
  background: #0a0e10;
}

.c-meet__divider {
  color: var(--color-sky);
  opacity: 0.32;
}

.c-site-footer {
  border-top: 1px solid #1d2a2d;
}

/* The large AI teaser is replaced by the compact floating preview below. */
.c-ai-teaser {
  display: none;
}

.c-ai-widget {
  position: fixed;
  top: 5.75rem;
  right: max(1rem, env(safe-area-inset-right));
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.c-ai-widget__trigger {
  width: 3.15rem;
  height: 3.15rem;
  border: 1px solid color-mix(in srgb, var(--color-sky) 55%, #243235);
  border-radius: 50%;
  background: #0b1012;
  color: #d9fffb;
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.c-ai-widget__trigger:hover,
.c-ai-widget__trigger[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: var(--color-sky);
  box-shadow: 0 0.9rem 2.2rem rgb(0 0 0 / 0.26), 0 0 0 0.18rem rgb(49 217 202 / 0.1);
}

.c-ai-widget__mark {
  width: 1.45rem;
  height: 1.45rem;
  border: 1.5px solid currentColor;
  border-radius: 46% 54% 52% 48%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.c-ai-widget__panel {
  width: min(21rem, calc(100vw - 2rem));
  overflow: hidden;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-sky) 28%, #273437);
  background: color-mix(in srgb, #0c1113 96%, transparent);
  color: #f4fbfa;
  box-shadow: 0 1.2rem 3.2rem rgb(0 0 0 / 0.35);
  transform-origin: top right;
}

.c-ai-widget__panel[hidden] {
  display: none;
}

.c-ai-widget__preview {
  height: 10.5rem;
  background-image:
    linear-gradient(to top, #0c1113 0%, rgb(12 17 19 / 0.18) 58%, transparent 100%),
    url("../assets/images/brand/ai-teaser-preview.png");
  background-size: 210%, 210%;
  background-position: 100% 58%, 100% 58%;
  background-repeat: no-repeat;
}

.c-ai-widget__body {
  padding: 1.1rem 1.15rem 1.2rem;
}

.c-ai-widget__label {
  margin: 0 0 0.25rem;
  color: var(--color-sky);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.c-ai-widget__title {
  margin: 0 0 0.45rem;
  font-size: 1.15rem;
  color: #ffffff;
}

.c-ai-widget__copy {
  margin: 0;
  color: #afbec0;
  font-size: 0.9rem;
  line-height: 1.55;
}

.c-ai-widget__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid #28403f;
  border-radius: 999px;
  color: #d7fffb;
  font-size: 0.78rem;
  font-weight: 700;
}

.c-ai-widget__status::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--color-sky);
  box-shadow: 0 0 0 0.2rem rgb(49 217 202 / 0.11);
}

@media (max-width: 47.9375rem) {
  .c-ai-widget {
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
  }

  .c-ai-widget__panel {
    transform-origin: bottom right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-ai-widget__trigger {
    transition: none;
  }
}