/* Modal kontaktowy + modal portfolio „See all” - light mode */

html[data-theme="light"] #portfolio-all-modal [data-portfolio-all-scrim] {
  background-color: rgb(14 14 17 / 0.42);
}

html[data-theme="light"] #portfolio-all-modal [data-portfolio-all-dialog] {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  box-shadow:
    0 16px 40px rgb(0 0 0 / 0.08),
    0 32px 64px rgb(0 0 0 / 0.06);
}

html[data-theme="light"] #portfolio-all-modal-title {
  color: var(--brand-text);
}

html[data-theme="light"]
  #portfolio-all-modal
  [data-portfolio-all-dialog]
  > button[data-portfolio-all-close] {
  color: color-mix(in srgb, var(--brand-muted) 90%, transparent);
}

@media (hover: hover) {
  html[data-theme="light"]
    #portfolio-all-modal
    [data-portfolio-all-dialog]
    > button[data-portfolio-all-close]:hover {
    background-color: color-mix(in srgb, var(--brand-text) 7%, transparent);
    color: var(--brand-text);
  }
}

html[data-theme="light"]
  #portfolio-all-modal
  [data-portfolio-all-dialog]
  > button[data-portfolio-all-close]:focus-visible {
  outline-color: color-mix(in srgb, var(--brand-text) 32%, transparent);
}

html[data-theme="light"] #contact-modal [data-contact-scrim] {
  background-color: rgb(14 14 17 / 0.42);
}

html[data-theme="light"] #contact-modal [data-contact-dialog] {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  box-shadow:
    0 16px 40px rgb(0 0 0 / 0.08),
    0 32px 64px rgb(0 0 0 / 0.06);
}

html[data-theme="light"] #contact-modal-title,
html[data-theme="light"] #contact-modal-title span {
  color: var(--brand-text);
}

html[data-theme="light"] #contact-modal-title > span:last-child {
  color: color-mix(in srgb, var(--brand-text) 88%, transparent);
}

html[data-theme="light"]
  #contact-modal
  [data-contact-form-step]
  > div:first-child
  > p {
  color: var(--brand-muted);
}

html[data-theme="light"] #contact-modal-form label {
  color: color-mix(in srgb, var(--brand-muted) 88%, var(--brand-text));
}

html[data-theme="light"] #contact-modal-form .flex.items-baseline > span {
  color: color-mix(in srgb, var(--brand-muted) 72%, transparent);
}

html[data-theme="light"] #contact-modal .contact-modal-field {
  border-color: var(--brand-border);
  background-color: var(--brand-surface);
  color: var(--brand-text);
}

html[data-theme="light"] #contact-modal .contact-modal-field::placeholder {
  color: color-mix(in srgb, var(--brand-muted) 78%, transparent);
}

html[data-theme="light"] #contact-modal .contact-modal-field:focus {
  border-color: color-mix(in srgb, var(--brand-border) 35%, var(--brand-text));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-text) 14%, transparent);
}

html[data-theme="light"] #contact-modal select.contact-modal-field {
  color: color-mix(in srgb, var(--brand-text) 94%, transparent);
}

html[data-theme="light"] #contact-modal .relative > svg {
  color: color-mix(in srgb, var(--brand-muted) 88%, transparent);
}

html[data-theme="light"] #contact-modal [data-contact-email-alt] p {
  color: var(--brand-muted);
}

html[data-theme="light"] .contact-modal-panel select option {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

html[data-theme="light"] #contact-modal-success p {
  color: var(--brand-muted);
}

html[data-theme="light"] .contact-modal-success-title {
  background-image: linear-gradient(
    92deg,
    var(--brand-text) 0%,
    var(--brand-text) 22%,
    var(--brand-accent-text) 40%,
    var(--brand-accent) 50%,
    var(--brand-accent-text) 60%,
    var(--brand-text) 78%,
    var(--brand-text) 100%
  );
}

html[data-theme="light"] #contact-modal [data-contact-dialog] > button[data-contact-close] {
  color: color-mix(in srgb, var(--brand-muted) 90%, transparent);
}

@media (hover: hover) {
  html[data-theme="light"]
    #contact-modal
    [data-contact-dialog]
    > button[data-contact-close]:hover {
    background-color: color-mix(in srgb, var(--brand-text) 7%, transparent);
    color: var(--brand-text);
  }
}

html[data-theme="light"]
  #contact-modal
  [data-contact-dialog]
  > button[data-contact-close]:focus-visible {
  outline-color: color-mix(in srgb, var(--brand-text) 32%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .contact-modal-success-title {
    background: none;
    -webkit-text-fill-color: var(--brand-text);
    color: var(--brand-text);
    animation: none;
  }
}