/*
 Theme Name:   JaseBleu Thème Enfant
 Theme URI:    https://jasebleu.com
 Description:  Thème enfant pour la boutique WooCommerce JaseBleu – Le style qui parle Québécois.
 Author:       Valérie Tremblay
 Author URI:   https://jasebleu.com
 Template:     twentytwentyfour
 Version:      1.0.0
 Text Domain:  jasebleu-enfant
*/

:root {
  --bleu-quebec: #005DA4;
  --blanc-neige: #F8F9FA;
  --gris-pierre: #A3B1BF;
  --or-boreal: #E3B23C;
}

body {
  background-color: var(--blanc-neige);
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4 {
  color: var(--bleu-quebec);
  letter-spacing: 0.02em;
}

a {
  color: var(--bleu-quebec);
  text-decoration-thickness: 0.12em;
}
a:hover,
a:focus {
  color: var(--or-boreal);
}

button,
.button,
.wp-element-button,
input[type="submit"],
.wc-block-components-button {
  background-color: var(--or-boreal);
  color: #0B1F2E;
  border-radius: 999px;
  padding: 0.6em 1.6em;
  border: none;
  font-weight: 600;
}
button:hover,
.button:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
.wc-block-components-button:hover {
  background-color: var(--bleu-quebec);
  color: #ffffff;
}

.add_to_cart_button,
.single_add_to_cart_button {
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.site-header,
.wp-site-header {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.site-footer,
.wp-site-footer {
  background-color: #0B1F2E;
  color: #E5E7EB;
}
.site-footer a,
.wp-site-footer a {
  color: #E5E7EB;
}
.site-footer a:hover,
.wp-site-footer a:hover {
  color: var(--or-boreal);
}

.woocommerce ul.products li.product,
.wc-block-grid__product {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
  color: var(--bleu-quebec);
  font-weight: 600;
}

.woocommerce span.onsale {
  background-color: var(--bleu-quebec);
  border-radius: 999px;
}

.jasebleu-tagline {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gris-pierre);
}