/*
 * MRIYA Field UI Tokens v1 — late-loading compatibility layer.
 *
 * This file intentionally sits after landing.css and woocommerce.css. It
 * standardizes shared component roles without rewriting page composition.
 */

:root {
  --mriya-shadow-300: 0 18px 44px rgba(2, 62, 138, 0.14);
  --mriya-color-text-inverse: var(--mriya-neutral-0);
  --mriya-motion-fast: 120ms;
  --mriya-motion-base: 160ms;
  --mriya-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

.mriya-skip-link {
  position: fixed;
  top: var(--mriya-space-100);
  left: var(--mriya-space-100);
  z-index: 10000;
  padding: var(--mriya-space-100) var(--mriya-space-200);
  border-radius: var(--mriya-radius-md);
  background: var(--mriya-color-bg-brand);
  color: var(--mriya-color-text-inverse);
  font-weight: 700;
  transform: translateY(calc(-100% - var(--mriya-space-300)));
}

.mriya-skip-link:focus {
  color: var(--mriya-color-text-inverse);
  transform: translateY(0);
}

/* Shared keyboard treatment for landing and commerce actions. */
body.mriya-landing :where(a, button, input, select, textarea, summary):focus-visible,
body.mriya-demo-product-page :where(a, button, input, select, textarea):focus-visible,
body.mriya-cart-page :where(a, button, input, select, textarea, summary):focus-visible,
body.mriya-checkout-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 0;
  box-shadow: var(--mriya-focus-ring);
}

/* Shared header/navigation remains approved in geometry and gains one state contract. */
.site-header {
  box-shadow: var(--mriya-shadow-200);
}

.site-nav a,
.header-call,
.header-buy {
  transition-duration: var(--mriya-motion-base);
  transition-timing-function: var(--mriya-motion-ease);
}

.site-nav a:focus-visible,
.header-call:focus-visible,
.header-buy:focus-visible {
  box-shadow: 0 0 0 2px var(--mriya-blue-900), 0 0 0 5px var(--mriya-yellow-400);
}

/* Landing components. */
body.mriya-landing .button {
  min-height: var(--mriya-control-height-lg);
  border-radius: var(--mriya-radius-md);
  color: var(--mriya-color-action-primary-text);
  font-family: var(--mriya-font-ui);
  font-weight: 700;
  transition: transform var(--mriya-motion-fast) var(--mriya-motion-ease), background-color var(--mriya-motion-fast) var(--mriya-motion-ease), border-color var(--mriya-motion-fast) var(--mriya-motion-ease), box-shadow var(--mriya-motion-fast) var(--mriya-motion-ease);
}

body.mriya-landing .button--primary {
  background: var(--mriya-color-action-primary);
}

body.mriya-landing .button--primary:hover {
  background: var(--mriya-color-action-primary-hover);
}

body.mriya-landing .button--primary:active {
  background: var(--mriya-color-action-primary-active);
  transform: translateY(0);
}

body.mriya-landing .button--ghost {
  color: var(--mriya-color-text-inverse);
}

body.mriya-landing .button:disabled,
body.mriya-landing .button.is-loading {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

body.mriya-landing .benefit-card,
body.mriya-landing .faq-item {
  border-color: var(--mriya-color-border-subtle);
  border-radius: var(--mriya-radius-lg);
}

body.mriya-landing .benefit-card:hover,
body.mriya-landing .faq-item:hover {
  border-color: var(--mriya-color-border-default);
  box-shadow: var(--mriya-shadow-100);
}

body.mriya-landing .review-card {
  border-radius: var(--mriya-radius-xl);
  box-shadow: var(--mriya-shadow-100);
}

body.mriya-landing .lead-form {
  border-radius: var(--mriya-radius-xl);
  box-shadow: var(--mriya-shadow-300);
}

body.mriya-landing .lead-form input,
body.mriya-landing .lead-form textarea,
body.mriya-landing .lead-form select,
body.mriya-landing .modal__form input {
  border-radius: var(--mriya-radius-md);
}

body.mriya-landing .lead-form input,
body.mriya-landing .lead-form select,
body.mriya-landing .modal__form input {
  min-height: var(--mriya-control-height-md);
}

body.mriya-landing .lead-form input:focus,
body.mriya-landing .lead-form textarea:focus,
body.mriya-landing .lead-form select:focus,
body.mriya-landing .modal__form input:focus {
  border-color: var(--mriya-color-focus);
  box-shadow: var(--mriya-focus-ring);
}

body.mriya-landing .lead-form input[aria-invalid="true"],
body.mriya-landing .modal__form input[aria-invalid="true"] {
  border-color: var(--mriya-color-danger);
  box-shadow: 0 0 0 2px var(--mriya-color-danger-bg), 0 0 0 4px rgba(180, 35, 24, 0.2);
}

body.mriya-landing .form-status:not(:empty) {
  padding: var(--mriya-space-100) var(--mriya-space-150);
  border-radius: var(--mriya-radius-md);
}

body.mriya-landing .form-status.is-success {
  background: var(--mriya-color-success-bg);
  color: var(--mriya-color-success);
}

body.mriya-landing .form-status.is-error {
  background: var(--mriya-color-danger-bg);
  color: var(--mriya-color-danger);
}

body.mriya-landing .lead-form .form-status.is-success,
body.mriya-landing .lead-form .form-status.is-error {
  color: var(--mriya-color-text-primary);
}

body.mriya-landing .modal__dialog {
  border-radius: var(--mriya-radius-xl);
  box-shadow: var(--mriya-shadow-overlay);
}

/* Commerce components. Layout stays owned by woocommerce.css; this layer owns roles/states. */
body.mriya-demo-product-page .mriya-variation-tile,
body.mriya-checkout-page .mriya-delivery-choice__tile,
body.mriya-checkout-page .wc-block-components-radio-control-accordion-option,
body.mriya-checkout-page .wc-block-components-radio-control__option {
  border-radius: var(--mriya-radius-lg);
  transition: border-color var(--mriya-motion-base) var(--mriya-motion-ease), background-color var(--mriya-motion-base) var(--mriya-motion-ease), box-shadow var(--mriya-motion-base) var(--mriya-motion-ease);
}

body.mriya-demo-product-page .mriya-variation-tile.is-selected,
body.mriya-checkout-page .mriya-delivery-choice__tile.is-selected {
  border-color: var(--mriya-color-border-strong);
  box-shadow: 0 0 0 1px var(--mriya-color-border-strong);
}

body.mriya-cart-page .mriya-cart-summary,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-sidebar,
body.mriya-checkout-page .mriya-checkout-block .wc-block-checkout__sidebar {
  border-radius: var(--mriya-radius-xl);
  box-shadow: var(--mriya-shadow-200);
}

body.mriya-checkout-page .mriya-checkout-block .wc-block-checkout__main > fieldset,
body.mriya-checkout-page .mriya-checkout-block .wc-block-checkout__main > .wc-block-checkout__payment-method,
body.mriya-checkout-page .mriya-checkout-block .wc-block-checkout__main > .wc-block-checkout__terms {
  border-radius: var(--mriya-radius-lg);
}

body.mriya-checkout-page .mriya-checkout-block .wc-block-components-text-input input,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-combobox input,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-select select {
  min-height: var(--mriya-control-height-lg);
  border-radius: var(--mriya-radius-md);
}

body.mriya-checkout-page .mriya-checkout-block .wc-block-components-text-input input:focus,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-combobox input:focus,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-select select:focus {
  border-color: var(--mriya-color-focus);
  box-shadow: var(--mriya-focus-ring);
}

body.mriya-checkout-page .mriya-checkout-block .wc-block-components-validation-error,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-notice-banner.is-error,
body.mriya-checkout-page .woocommerce-error {
  border-radius: var(--mriya-radius-md);
}

body.mriya-demo-product-page .mriya-commerce-placeholder div.product form.cart .single_add_to_cart_button,
body.mriya-cart-page .mriya-cart-summary .wc-block-cart__submit-button,
body.mriya-checkout-page .mriya-checkout-block .wc-block-components-checkout-place-order-button {
  min-height: var(--mriya-control-height-lg);
  border-radius: var(--mriya-radius-md);
  font-size: var(--mriya-font-size-300);
  font-weight: 800;
}

body.mriya-cart-page .mriya-cart-summary__continue,
body.mriya-cart-page .wc-block-cart-item__remove-link,
body.mriya-cart-page .mriya-cart-item__configure {
  border-radius: var(--mriya-radius-md);
}

@media (max-width: 820px) {
  body.mriya-landing .site-footer__copy,
  body.mriya-landing .site-footer__copy p {
    min-width: 0;
    max-width: 100%;
  }

  body.mriya-landing .site-footer__copy p {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-nav a,
  .header-call,
  .header-buy,
  body.mriya-landing .button,
  body.mriya-demo-product-page .mriya-variation-tile,
  body.mriya-checkout-page .mriya-delivery-choice__tile,
  body.mriya-checkout-page .wc-block-components-radio-control-accordion-option,
  body.mriya-checkout-page .wc-block-components-radio-control__option {
    transition: none;
  }
}