/* ===========================================
   IVELONA — Design System CSS (mu-plugin)
   Version : 1.0 | 2026-03-14
   Source  : brand_mvp.md Design Tokens
   Deploy : wp-content/mu-plugins/ via mu-php loader
   =========================================== */

/* ---- Design Tokens ---- */
:root {
  /* Couleurs */
  --iv-primary:        #2E6B50;
  --iv-primary-hover:  #245A42;
  --iv-secondary:      #C9B08A;
  --iv-secondary-hover:#B89D75;
  --iv-accent:         #B87B5A;
  --iv-accent-hover:   #A5694B;
  --iv-neutral-dark:   #2C2E30;
  --iv-neutral-light:  #FAF4EC;
  --iv-white:          #FFFFFF;
  --iv-border:         #E2DCD4;
  --iv-muted:          #8A8680;

  /* Typographie */
  --iv-font-body:      'Plus Jakarta Sans', sans-serif;
  --iv-font-display:   'Source Serif 4', serif;

  --iv-fs-xs:          0.75rem;
  --iv-fs-sm:          0.875rem;
  --iv-fs-base:        1rem;
  --iv-fs-lg:          1.125rem;
  --iv-fs-xl:          1.5rem;
  --iv-fs-2xl:         2rem;
  --iv-fs-3xl:         2.5rem;

  --iv-fw-regular:     400;
  --iv-fw-medium:      500;
  --iv-fw-semibold:    600;
  --iv-fw-bold:        700;

  --iv-lh-tight:       1.25;
  --iv-lh-base:        1.6;
  --iv-lh-loose:       1.8;

  --iv-ls-wordmark:    0.12em;
  --iv-ls-caps:        0.06em;

  /* Spacing (base 4px) */
  --iv-space-1:        0.25rem;
  --iv-space-2:        0.5rem;
  --iv-space-3:        0.75rem;
  --iv-space-4:        1rem;
  --iv-space-6:        1.5rem;
  --iv-space-8:        2rem;
  --iv-space-12:       3rem;
  --iv-space-16:       4rem;
  --iv-space-24:       6rem;

  /* Border Radius */
  --iv-radius-sm:      4px;
  --iv-radius-md:      8px;
  --iv-radius-lg:      12px;
  --iv-radius-xl:      16px;
  --iv-radius-full:    9999px;

  /* Shadows */
  --iv-shadow-sm:      0 1px 3px rgba(44, 46, 48, 0.08);
  --iv-shadow-md:      0 4px 12px rgba(44, 46, 48, 0.10);
  --iv-shadow-lg:      0 8px 24px rgba(44, 46, 48, 0.12);

  /* Transitions */
  --iv-transition:     200ms ease-in-out;
}

/* ---- Base Styles ---- */

body {
  font-family: var(--iv-font-body);
  font-size: var(--iv-fs-base);
  font-weight: var(--iv-fw-regular);
  line-height: var(--iv-lh-base);
  color: var(--iv-neutral-dark);
  background-color: var(--iv-neutral-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Headings ---- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--iv-font-display);
  font-weight: var(--iv-fw-semibold);
  line-height: var(--iv-lh-tight);
  color: var(--iv-neutral-dark);
  margin-top: 0;
}

h1 {
  font-size: var(--iv-fs-3xl);
  margin-bottom: var(--iv-space-6);
}

h2 {
  font-size: var(--iv-fs-2xl);
  margin-bottom: var(--iv-space-4);
}

h3 {
  font-size: var(--iv-fs-xl);
  margin-bottom: var(--iv-space-3);
}

h4 {
  font-size: var(--iv-fs-lg);
  margin-bottom: var(--iv-space-2);
}

h5, h6 {
  font-size: var(--iv-fs-base);
  font-weight: var(--iv-fw-bold);
  margin-bottom: var(--iv-space-2);
}

/* ---- Links ---- */

a {
  color: var(--iv-primary);
  text-decoration: none;
  transition: color var(--iv-transition);
}

a:hover,
a:focus {
  color: var(--iv-primary-hover);
  text-decoration: underline;
}

/* ---- Buttons ---- */

.iv-btn,
.wp-block-button__link,
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iv-space-2);
  padding: var(--iv-space-3) var(--iv-space-6);
  font-family: var(--iv-font-body);
  font-size: var(--iv-fs-sm);
  font-weight: var(--iv-fw-semibold);
  line-height: 1;
  letter-spacing: var(--iv-ls-caps);
  text-transform: uppercase;
  color: var(--iv-neutral-light);
  background-color: var(--iv-primary);
  border: 2px solid var(--iv-primary);
  border-radius: var(--iv-radius-md);
  cursor: pointer;
  transition: all var(--iv-transition);
  text-decoration: none;
}

.iv-btn:hover,
.iv-btn:focus,
.wp-block-button__link:hover,
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--iv-primary-hover);
  border-color: var(--iv-primary-hover);
  color: var(--iv-neutral-light);
  text-decoration: none;
}

/* Button — Secondary (outline) */
.iv-btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.woocommerce .button.alt {
  background-color: transparent;
  color: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-btn--secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.woocommerce .button.alt:hover {
  background-color: var(--iv-primary);
  color: var(--iv-neutral-light);
}

/* Button — Accent (CTA fort) */
.iv-btn--accent {
  background-color: var(--iv-accent);
  border-color: var(--iv-accent);
  color: var(--iv-white);
}

.iv-btn--accent:hover {
  background-color: var(--iv-accent-hover);
  border-color: var(--iv-accent-hover);
}

/* ---- Cards ---- */

.iv-card {
  background-color: var(--iv-white);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-6);
  box-shadow: var(--iv-shadow-sm);
  transition: box-shadow var(--iv-transition), transform var(--iv-transition);
}

.iv-card:hover {
  box-shadow: var(--iv-shadow-md);
  transform: translateY(-2px);
}

/* WooCommerce product cards */
.woocommerce ul.products li.product {
  background-color: var(--iv-white);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-space-4);
  box-shadow: var(--iv-shadow-sm);
  transition: box-shadow var(--iv-transition), transform var(--iv-transition);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--iv-shadow-md);
  transform: translateY(-2px);
}

/* ---- Badges ---- */

.iv-badge {
  display: inline-block;
  padding: var(--iv-space-1) var(--iv-space-3);
  font-family: var(--iv-font-body);
  font-size: var(--iv-fs-xs);
  font-weight: var(--iv-fw-semibold);
  letter-spacing: var(--iv-ls-caps);
  text-transform: uppercase;
  color: var(--iv-neutral-dark);
  background-color: var(--iv-secondary);
  border-radius: var(--iv-radius-full);
  line-height: 1.4;
}

.iv-badge--accent {
  background-color: var(--iv-accent);
  color: var(--iv-white);
}

/* WooCommerce sale badge */
.woocommerce span.onsale {
  background-color: var(--iv-accent);
  color: var(--iv-white);
  font-family: var(--iv-font-body);
  font-size: var(--iv-fs-xs);
  font-weight: var(--iv-fw-semibold);
  letter-spacing: var(--iv-ls-caps);
  text-transform: uppercase;
  border-radius: var(--iv-radius-md);
  padding: var(--iv-space-1) var(--iv-space-3);
  min-height: auto;
  min-width: auto;
  line-height: 1.4;
}

/* ---- Form Elements ---- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
  font-family: var(--iv-font-body);
  font-size: var(--iv-fs-base);
  color: var(--iv-neutral-dark);
  background-color: var(--iv-white);
  border: 1px solid var(--iv-border);
  border-radius: var(--iv-radius-md);
  padding: var(--iv-space-3) var(--iv-space-4);
  transition: border-color var(--iv-transition), box-shadow var(--iv-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--iv-primary);
  box-shadow: 0 0 0 3px rgba(46, 107, 80, 0.15);
  outline: none;
}

/* ---- Utility: Muted Text ---- */

.iv-muted {
  color: var(--iv-muted);
  font-size: var(--iv-fs-sm);
}

/* ---- Utility: Section Alternating Background ---- */

.iv-section--alt {
  background-color: var(--iv-white);
}

/* ---- Wordmark Header ---- */

.site-title,
.site-branding .site-title a {
  font-family: var(--iv-font-body);
  font-weight: var(--iv-fw-semibold);
  letter-spacing: var(--iv-ls-wordmark);
  text-transform: uppercase;
  color: var(--iv-primary);
}

.site-title a:hover {
  color: var(--iv-primary-hover);
  text-decoration: none;
}

/* ---- WooCommerce Price ---- */

.woocommerce .price,
.woocommerce .amount {
  color: var(--iv-neutral-dark);
  font-weight: var(--iv-fw-semibold);
}

.woocommerce del .amount {
  color: var(--iv-muted);
  font-weight: var(--iv-fw-regular);
}

.woocommerce ins .amount {
  color: var(--iv-accent);
  font-weight: var(--iv-fw-bold);
}

/* ---- Breadcrumbs ---- */

.woocommerce .woocommerce-breadcrumb,
.rank-math-breadcrumb {
  font-size: var(--iv-fs-sm);
  color: var(--iv-muted);
}

.woocommerce .woocommerce-breadcrumb a,
.rank-math-breadcrumb a {
  color: var(--iv-primary);
}

/* ---- Star Ratings ---- */

.woocommerce .star-rating span::before {
  color: var(--iv-accent);
}

/* ---- Notices / Messages ---- */

.woocommerce-message {
  border-top-color: var(--iv-primary);
}

.woocommerce-error {
  border-top-color: var(--iv-accent);
}

.woocommerce-info {
  border-top-color: var(--iv-secondary);
}