/* Interaction roles. Component styles own composition, not state colors.
   --ui-fg / --ui-bg are state outputs consumed by existing component geometry. */
.locale-status:empty { display: none; }
.locale-status {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 120;
  padding: 16px;
  background: var(--navigation-surface);
  color: var(--navigation-text);
}
:root {
  --ui-ink: #fff;
  --ui-inverse: #111317;
  --ui-link: #3fa8ff;
  --ui-blue: #1272d5;
  --ui-blue-pressed: #0b59ac;
  --ui-hover-surface: rgb(255 255 255 / 10%);
  --ui-border: rgb(255 255 255 / 34%);
  --ui-disabled-bg: #363b45;
  --ui-disabled-fg: #b1b8c4;
  --ui-error: #ff9b9b;
  --ui-duration: 180ms;
  --ui-duration-image: 420ms;
  --ui-ease: cubic-bezier(.2, .7, .2, 1);
  --ui-height-compact: 26px;
  --ui-height-standard: 44px;
  --ui-height-large: 56px;
}

:root[data-theme="light"] {
  --ui-ink: #111317;
  --ui-inverse: #fff;
  --ui-link: #0967c4;
  --ui-hover-surface: rgb(17 19 23 / 7%);
  --ui-border: rgb(17 19 23 / 28%);
  --ui-disabled-bg: #d7dce3;
  --ui-disabled-fg: #59616e;
  --ui-error: #a52c36;
}

/* Two button variants, three sizes. Compact is reserved for header controls. */
[data-ui="primary"], [data-ui="secondary"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: var(--ui-control-height, var(--ui-height-standard));
  padding: 0 22px;
  border: 1px solid var(--ui-button-border, transparent);
  border-radius: 999px;
  background: var(--ui-bg, var(--ui-ink));
  color: var(--ui-fg, var(--ui-inverse));
  font: var(--font-weight-medium) var(--type-button-size)/1.2 var(--font-sans);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
}
[data-ui="secondary"] {
  --ui-bg: transparent;
  --ui-fg: var(--ui-ink);
  --ui-button-border: var(--ui-border);
}
[data-ui-size="compact"] {
  --ui-control-height: var(--ui-height-compact);
  padding-inline: 14px;
  font-size: var(--type-caption-size);
}
[data-ui-size="large"] { --ui-control-height: var(--ui-height-large); padding-inline: 28px; }

.header-contact[data-ui-size="compact"] {
  --ui-bg: var(--ui-blue);
  --ui-fg: #fff;
  min-width: 76px;
  padding-inline: 10px;
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-regular, 400);
}

/* Every focusable element gets a theme-aware, two-tone keyboard indicator.
   Inset card rings remain visible inside the clipping boundary. */
:where(a[href], button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-link);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ui-inverse);
}
:where(.case-card__link, .blog-card__link, .collection-tile, .case-detail-gallery__figure, .case-pagination__link):focus-visible {
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--ui-inverse);
}
.projects-card:has(:focus-visible) { outline: 2px solid var(--ui-link); outline-offset: 2px; }
.projects-card__cta:focus-visible { outline: none; box-shadow: none; }

/* Editorial links remain distinguishable without hover, also when visited. */
:where(.contact-board__text, .cookie-notice__text, .blog-article__markdown, .work-policy__body) a {
  color: var(--ui-fg, var(--ui-link));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--ui-duration) var(--ui-ease), text-decoration-color var(--ui-duration) var(--ui-ease);
}
:where(.work-breadcrumbs a, .blog-article__back, .brand, .work-logo, .site-navigation__brand) {
  color: var(--ui-fg, inherit);
  transition: color var(--ui-duration) var(--ui-ease);
}
:where(.site-navigation__item, .profile-chip, .project-filters__button, .menu-toggle, .site-navigation__close, .theme-switch, .language-switch, .work-lightbox__close, .scene-debug-panel__close, .scene-debug-panel__reset) {
  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
}
.project-filters__button {
  background: var(--ui-bg, var(--ui-selection-bg, transparent));
  color: var(--ui-fg, var(--ui-selection-fg, var(--muted)));
}
.project-filters__button[aria-pressed="true"] { --ui-selection-bg: var(--ui-ink); --ui-selection-fg: var(--ui-inverse); }
.menu-toggle, .site-navigation__close { color: var(--ui-fg, var(--ui-ink)); }
.menu-toggle span { background: currentColor; }
.work-lightbox__close { background: var(--ui-bg, #222631); color: var(--ui-fg, #fff); }
.scene-debug-panel__close { background: var(--ui-bg, var(--ui-hover-surface)); color: var(--ui-fg, var(--ui-ink)); }

.header-contact[data-ui]:active { --ui-bg: var(--ui-blue-pressed); }

@media (hover: hover) and (pointer: fine) {
  .header-contact[data-ui]:hover:not(:active) {
    --ui-bg: color-mix(in srgb, var(--ui-blue) 85%, white);
  }
}

.shared-site-tail .footer-chip:active { --ui-bg: var(--ui-blue-pressed); --ui-fg: #fff; }
@media (hover: hover) and (pointer: fine) {
  .shared-site-tail .footer-chip:hover:not(:active) { --ui-bg: var(--ui-blue); --ui-fg: #fff; }
}

/* Hover exists only for precise pointers. Touch gets the same pressed state. */
@media (hover: hover) and (pointer: fine) {
  :where([data-ui="primary"], [data-ui="secondary"]):not(:disabled):hover {
    --ui-bg: var(--ui-blue); --ui-fg: #fff; --ui-button-border: transparent;
  }
  :where(.hero-links .profile-chip, .site-navigation .profile-chip, .project-filters__button, .site-navigation:not(.is-open) .site-navigation__item):hover {
    --ui-bg: var(--ui-blue); --ui-fg: #fff;
  }
  :where(.contact-board__text a, .cookie-notice__text a, .blog-article__markdown a, .work-policy__body a):hover {
    --ui-fg: var(--ui-ink); text-decoration-thickness: 2px;
  }
  :where(.contact-footer__nav a, .contact-footer__policy, .footer-chip, .site-navigation.is-open .site-navigation__item, .work-breadcrumbs a, .blog-article__back, .brand, .work-logo, .site-navigation__brand, .scene-debug-panel__reset):hover {
    --ui-fg: var(--ui-link); --ui-border-current: currentColor;
  }
  :where(.menu-toggle, .site-navigation__close):hover { --ui-fg: var(--ui-link); }
  :where(.theme-switch, .language-switch):hover { --ui-settings-surface: var(--navigation-control-hover); }
  :where(.work-lightbox__close, .scene-debug-panel__close):hover { --ui-bg: var(--ui-blue); --ui-fg: #fff; }

  :where(.projects-card, .case-card:has(a[href]), .blog-card, .case-pagination__link):hover {
    --ui-card-action-bg: var(--ui-blue); --ui-card-action-fg: #fff;
  }
  .shared-site-alias .projects-card:hover::before { transform: scale(1.055); }
  .case-card:has(a[href]):hover .case-card__image { transform: scale(calc(var(--case-cover-scale) + .035)); }
  :where(.collection-tile:hover img, .case-detail-gallery__figure:hover img, .blog-card:hover .blog-card__image) { transform: scale(1.035); }
}

/* Focus does not imitate hover or shift content. Arrow emphasis accompanies its ring. */
:where(.projects-card, .case-card, .blog-card, .case-pagination__link):has(:focus-visible),
.case-pagination__link:focus-visible { --ui-card-action-bg: var(--ui-blue); --ui-card-action-fg: #fff; }
:where(.projects-card, .case-card, .blog-card):has(a:active), .case-pagination__link:active { --ui-card-action-bg: var(--ui-blue-pressed); --ui-card-action-fg: #fff; }
:where([data-ui], .hero-links .profile-chip, .site-navigation .profile-chip, .project-filters__button, .site-navigation:not(.is-open) .site-navigation__item, .work-lightbox__close, .scene-debug-panel__close):not(:disabled):active {
  --ui-bg: var(--ui-blue-pressed); --ui-fg: #fff; --ui-button-border: transparent;
}
:where(.contact-board__text a, .cookie-notice__text a, .blog-article__markdown a, .work-policy__body a, .contact-footer__nav a, .contact-footer__policy, .footer-chip, .site-navigation.is-open .site-navigation__item, .work-breadcrumbs a, .blog-article__back):active { --ui-fg: var(--ui-link); }
:where(.menu-toggle, .site-navigation__close):active { --ui-fg: var(--ui-link); }
:where(.theme-switch, .language-switch):active { --ui-settings-surface: var(--navigation-control-pressed); }

/* Form states: calm underline, visible keyboard focus, clear checked mark. */
.contact-field { border-bottom-color: var(--ui-field-line, var(--footer-line)); }
.contact-field:focus-within { --ui-field-line: var(--ui-link); }
.contact-field__input:focus-visible { outline: none; box-shadow: none; }
.contact-field:has(:user-invalid) { --ui-field-line: var(--ui-error); }
.contact-consent__check {
  border: 1px solid var(--ui-link);
  background: color-mix(in srgb, var(--ui-link) 10%, transparent);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
}
.contact-consent__check:checked {
  border-color: var(--ui-blue);
  background: var(--ui-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m4 9 3 3 7-7' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact-consent__check:user-invalid { border-color: var(--ui-error); }
.contact-board__status[data-state="error"] { color: var(--ui-error); }
:where(button, input, textarea, select):disabled {
  --ui-bg: var(--ui-disabled-bg); --ui-fg: var(--ui-disabled-fg);
  opacity: 1;
  cursor: not-allowed;
}
[aria-busy="true"] [data-ui]:disabled { cursor: wait; }
.scene-debug-field__range:disabled, .scene-debug-panel__reset:disabled { opacity: .55; }
.case-card__status { color: rgb(255 255 255 / 76%); }

/* Image cards retain their image-safe white arrows in both themes. */
.case-card { color: #fff; }
.projects-card__arrow, .case-card__arrow, .blog-card__arrow > [aria-hidden="true"] { color: #fff; }

@media (pointer: coarse) {
  /* Keep the compact visual header; enlarge only its invisible tap region. */
  :where(.header-contact, .theme-switch, .language-switch, .menu-toggle, .site-navigation__close) { position: relative; }
  :where(.header-contact, .theme-switch, .language-switch, .menu-toggle, .site-navigation__close)::after { content: ""; position: absolute; inset: -9px 0; }
  .project-filters__button { min-height: var(--ui-height-standard); }
  .contact-field__input { font-size: max(16px, var(--type-body-lg-size)); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ui-duration: 0ms; --ui-duration-image: 0ms; }
}