/**
 * Rizon Theme Mode - Base CSS
 * Contains design tokens and shared rules for both themes.
 * Loads for all pages when the plugin is active.
 */

/* ================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================ */

:root {
  /* Shared transitions - disabled during page load */
  --rizon-transitions-enabled: 1;
  --rizon-transition-duration: 0.3s;
  --rizon-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Initial load: disable transitions to prevent theme-anim on page load */
html[data-rizon-theme="dark"] body,
html[data-rizon-theme="light"] body {
  transition: none !important;
}

/* After DOM ready: enable transitions */
@media (prefers-reduced-motion: no-preference) {
  html.js-rizon-ready [data-rizon-theme] body,
  html.js-rizon-ready [data-rizon-theme] * {
    transition:
      background-color var(--rizon-transition-duration) var(--rizon-transition-ease),
      border-color var(--rizon-transition-duration) var(--rizon-transition-ease),
      color var(--rizon-transition-duration) var(--rizon-transition-ease),
      box-shadow var(--rizon-transition-duration) var(--rizon-transition-ease),
      fill var(--rizon-transition-duration) var(--rizon-transition-ease),
      stroke var(--rizon-transition-duration) var(--rizon-transition-ease);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rizon-transitions-enabled: 0;
    --rizon-transition-duration: 0;
  }

  [data-rizon-theme] *,
  [data-rizon-theme] *::before,
  [data-rizon-theme] *::after {
    transition-duration: 0 !important;
    animation-duration: 0 !important;
  }
}

/* ================================
   TOGGLE STYLES
   ================================ */

.rizon-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.rizon-theme-toggle:focus {
  outline: 2px solid var(--rizon-focus-ring, #2e89ff);
  outline-offset: 2px;
}

.rizon-theme-toggle:focus:not(:focus-visible) {
  outline: none;
}

.rizon-theme-toggle__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Light mode: show sun icon, hide moon icon */
html[data-rizon-theme="light"] .rizon-theme-toggle__icon--sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-rizon-theme="light"] .rizon-theme-toggle__icon--moon {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

/* Dark mode: show moon icon, hide sun icon */
html[data-rizon-theme="dark"] .rizon-theme-toggle__icon--moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

html[data-rizon-theme="dark"] .rizon-theme-toggle__icon--sun {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

/* Color inheritance for icons */
.rizon-theme-toggle__icon svg {
  width: 18px;
  height: 18px;
}

/* ================================
   BODY CLASSES FOR BACKWARDS COMPATIBILITY
   ================================ */

body.rizon-theme-dark [data-rizon-theme] {
  /* fallback for JS-less */
}

body.rizon-theme-light [data-rizon-theme] {
  /* fallback for JS-less */
}

/* ================================
   WOOCOMMERCE COMMON STYLES
   ================================ */

/* Ensure brand-consistent buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart,
.woocommerce .added_to_cart,
.woocommerce .checkout-button,
.woocommerce #place_order,
ul.products li.product .button,
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce .actions .button {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-choice {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Select2 overrides */
.woocommerce .select2-container .select2-choice,
.woocommerce .select2-container .select2-choices {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.woocommerce .select2-drop-active,
.woocommerce .select2-dropdown {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Notices */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Quantity inputs */
.woocommerce .quantity input.qty,
.woocommerce #content .quantity input.qty,
.woocommerce .quantity input.minus,
.woocommerce .quantity input.plus,
.woocommerce #content .quantity input.minus,
.woocommerce #content .quantity input.plus {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Summary area on single product */
.woocommerce #primary div.product .summary,
.woocommerce #primary div.product .product_meta {
  transition:
    background-color 0.3s ease;
}

/* Price styling */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  transition: color 0.3s ease;
}

/* Sale badges */
.woocommerce span.onsale,
.woocommerce ul.products li.product span.onsale {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  transition: color 0.3s ease;
}

/* ================================
   ACCESSIBILITY
   ================================ */

/* Visible focus rings */
*:focus-visible {
  outline: 2px solid var(--rizon-focus-ring, #2e89ff);
  outline-offset: 2px;
}

/* Skip link */
.rizon-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--rizon-bg, #01091c);
  color: var(--rizon-text, #fff);
  z-index: 999999;
  transition: top 0.3s;
}

.rizon-skip-link:focus {
  top: 0;
}

/* Screen reader text */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}