/* ============================================
   WONE STUDIO - Brand Identity CSS
   Cho Picostrap (Bootstrap 5) child theme
   Version: 1.1 | 07/2026
   ============================================ */

/* ---- WONE Brand Tokens ---- */
:root {
  --wone-primary: #20418E;
  --wone-accent: #2A59B4;
  --wone-hover: #1E4A9C;
  --wone-light: #E7EEFA;
  --wone-surface: #F1F5FB;

  --wone-text: #20418E;
  --wone-text-body: #3C4A5E;
  --wone-text-muted: #8592a6;
  --wone-border: #D2DAE8;

  --wone-ok: #1a9a5f;
  --wone-sale: #e0202a;
  --wone-star: #ffb400;
  --wone-messenger: #0084FF;
  --wone-zalo: #0068FF;

  --wone-radius-sm: 6px;
  --wone-radius-md: 10px;
  --wone-radius-lg: 16px;
  --wone-radius-pill: 999px;

  --wone-shadow-sm: 0 1px 4px rgba(32,65,142,.08);
  --wone-shadow-md: 0 8px 24px rgba(32,65,142,.10);
  --wone-shadow-lg: 0 18px 50px rgba(32,65,142,.16);
}

/* ---- Bootstrap 5 Variable Mapping ---- */
:root {
  --bs-primary: #20418E;
  --bs-primary-rgb: 32, 65, 142;

  --bs-secondary: #2A59B4;
  --bs-secondary-rgb: 42, 89, 180;

  --bs-success: #1a9a5f;
  --bs-success-rgb: 26, 154, 95;

  --bs-danger: #e0202a;
  --bs-danger-rgb: 224, 32, 42;

  --bs-warning: #ffb400;
  --bs-warning-rgb: 255, 180, 0;

  --bs-body-color: #3C4A5E;
  --bs-body-color-rgb: 60, 74, 94;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-line-height: 1.6;

  --bs-link-color: #2A59B4;
  --bs-link-color-rgb: 42, 89, 180;
  --bs-link-hover-color: #1E4A9C;
  --bs-link-hover-color-rgb: 30, 74, 156;

  --bs-border-color: #D2DAE8;
  --bs-border-radius: 10px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-pill: 999px;
}

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--wone-primary);
  font-weight: 700;
}

/* ---- Navbar ---- */
.navbar {
  border-bottom: 1px solid var(--wone-border);
}
.navbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--wone-primary) !important;
  letter-spacing: .04em;
}
.navbar-brand .dot {
  color: var(--wone-accent);
}
.navbar-nav .nav-link {
  font-weight: 600;
  font-size: .9rem;
  color: var(--wone-text-body);
  transition: color .2s;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--wone-accent);
}

/* ---- Buttons ---- */
.btn {
  font-weight: 700;
  border-radius: var(--wone-radius-md);
  padding: .7rem 1.5rem;
  transition: all .2s ease;
}
.btn-primary {
  --bs-btn-bg: var(--wone-primary);
  --bs-btn-border-color: var(--wone-primary);
  --bs-btn-hover-bg: var(--wone-hover);
  --bs-btn-hover-border-color: var(--wone-hover);
  --bs-btn-active-bg: #183672;
  --bs-btn-active-border-color: #183672;
}
.btn-outline-primary {
  --bs-btn-color: var(--wone-primary);
  --bs-btn-border-color: var(--wone-primary);
  --bs-btn-hover-bg: var(--wone-primary);
  --bs-btn-hover-border-color: var(--wone-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--wone-hover);
  --bs-btn-active-color: #fff;
  border-width: 2px;
}
.btn-secondary {
  --bs-btn-bg: var(--wone-accent);
  --bs-btn-border-color: var(--wone-accent);
  --bs-btn-hover-bg: var(--wone-hover);
  --bs-btn-hover-border-color: var(--wone-hover);
}

/* WooCommerce buttons */
.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce .button.alt {
  background-color: var(--wone-primary) !important;
  border-color: var(--wone-primary) !important;
  border-radius: var(--wone-radius-md) !important;
  font-weight: 700;
}
.single_add_to_cart_button:hover,
.woocommerce .button.alt:hover {
  background-color: var(--wone-hover) !important;
  border-color: var(--wone-hover) !important;
}

/* ---- Form controls ---- */
.form-control, .form-select {
  border: 1.5px solid var(--wone-border);
  border-radius: var(--wone-radius-md);
  padding: .7rem .9rem;
  font-size: .9rem;
  color: var(--wone-text-body);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--wone-accent);
  box-shadow: 0 0 0 .2rem rgba(42, 89, 180, .15);
}
.form-label {
  font-weight: 700;
  font-size: .85rem;
  color: var(--wone-primary);
}

/* WooCommerce form inputs */
.woocommerce input.input-text,
.woocommerce select {
  border: 1.5px solid var(--wone-border) !important;
  border-radius: var(--wone-radius-md) !important;
  padding: .7rem .9rem !important;
  font-size: .9rem;
  color: var(--wone-text-body);
}
.woocommerce input.input-text:focus,
.woocommerce select:focus {
  border-color: var(--wone-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(42, 89, 180, .15) !important;
  outline: none;
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--wone-border);
  border-radius: var(--wone-radius-md);
  transition: transform .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wone-shadow-md);
}

/* ---- Badges ---- */
.badge.bg-primary {
  background-color: var(--wone-primary) !important;
}
.badge.bg-secondary {
  background-color: var(--wone-accent) !important;
}

/* ---- WooCommerce product cards ---- */
.woocommerce ul.products li.product {
  border: 1px solid var(--wone-border);
  border-radius: var(--wone-radius-md);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--wone-shadow-md);
}

/* WooCommerce sale badge */
.onsale {
  background-color: var(--wone-sale) !important;
  border-radius: var(--wone-radius-sm);
}

/* WooCommerce star rating */
.star-rating span::before,
.star-rating::before {
  color: var(--wone-star) !important;
}

/* ---- Footer ---- */
#wrapper-footer {
  background: var(--wone-surface);
}

/* ---- Picostrap .bg-light override ---- */
.bg-light {
  background-color: var(--wone-surface) !important;
}

/* ---- WONE utility classes ---- */
.bg-wone-soft {
  background-color: var(--wone-light);
}
.text-wone {
  color: var(--wone-primary);
}
.text-wone-accent {
  color: var(--wone-accent);
}