/*
 * SPDX-License-Identifier: GPL-2.0-or-later
 *
 * Cinatra design system — first-party, GPL-compatible token snapshot + the
 * element mapping that applies it on top of Storefront for the WooCommerce +
 * Dokan marketplace. Values mirror the Cinatra app design tokens (warm paper,
 * ink, muted indigo; Archivo display + Inter body). Do NOT import the
 * proprietary @cinatra-ai/design package here (WordPress GPL boundary, D11).
 */

:root {
  --cin-bg: #f1f1ed;
  --cin-fg: #15213a;
  --cin-surface: #f7f7f3;
  --cin-surface-strong: #ffffff;
  --cin-surface-muted: #e8e8e3;
  --cin-muted: #5a6477;
  --cin-accent: #364e81;
  --cin-accent-soft: #e6ede7;
  --cin-line: rgba(21, 33, 58, 0.14);
  --cin-line-strong: #15213a;
  --cin-red: #a6384f;
  --cin-radius: 0.625rem;
  --cin-radius-sm: 0.4rem;
  --cin-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.07);
  --cin-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --cin-font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
}

/* --- Base canvas + typography ------------------------------------------- */
body,
body.woocommerce,
.site {
  background-color: var(--cin-bg);
  color: var(--cin-fg);
  font-family: var(--cin-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-breadcrumb,
.entry-title,
.product_title,
.dokan-dashboard h1,
.dokan-store-info h2 {
  font-family: var(--cin-font-display);
  color: var(--cin-fg);
  letter-spacing: -0.012em;
}

h1, .entry-title, .product_title {
  font-weight: 800;
  font-style: italic;
}

a {
  color: var(--cin-accent);
}
a:hover { color: var(--cin-line-strong); }

/* --- Site header / footer ---------------------------------------------- */
.site-header {
  background-color: var(--cin-surface-strong);
  border-bottom: 1px solid var(--cin-line);
}
.site-header,
.site-header a:not(.button) {
  color: var(--cin-fg);
}
.main-navigation ul li a,
.storefront-primary-navigation {
  color: var(--cin-fg);
}
.site-footer {
  background-color: var(--cin-fg);
  color: var(--cin-bg);
}
.site-footer a { color: var(--cin-bg); }

/* --- Buttons ----------------------------------------------------------- */
button,
input[type="button"],
input[type="submit"],
.button,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.dokan-btn,
.dokan-btn-theme {
  background-color: var(--cin-accent) !important;
  color: var(--cin-surface-strong) !important;
  border-radius: var(--cin-radius) !important;
  border: none !important;
  font-family: var(--cin-font-body);
  font-weight: 600;
}
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.dokan-btn-theme:hover {
  background-color: var(--cin-line-strong) !important;
}
.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--cin-accent) !important;
}

/* --- Surfaces: product cards, panels ----------------------------------- */
.woocommerce ul.products li.product,
.dokan-store,
.dokan-dashboard .dokan-dashboard-wrap,
.hentry,
.card {
  background-color: var(--cin-surface-strong);
  border: 1px solid var(--cin-line);
  border-radius: var(--cin-radius);
  box-shadow: var(--cin-shadow-soft);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.price {
  color: var(--cin-accent);
  font-weight: 700;
}

.woocommerce span.onsale,
.dokan-store-open.badge {
  background-color: var(--cin-accent);
  color: var(--cin-surface-strong);
  border-radius: var(--cin-radius-sm);
}

/* --- Form fields ------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.dokan-form-control {
  background-color: var(--cin-surface-strong);
  border: 1px solid var(--cin-line);
  border-radius: var(--cin-radius-sm);
  color: var(--cin-fg);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--cin-accent);
  outline-offset: 1px;
}

/* --- WooCommerce messages / notices ------------------------------------ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--cin-accent);
  background-color: var(--cin-accent-soft);
  border-radius: var(--cin-radius-sm);
}
.woocommerce-error {
  border-top-color: var(--cin-red);
  border-radius: var(--cin-radius-sm);
}

/* --- Dokan store/dashboard accents ------------------------------------- */
.dokan-dashboard .dokan-dashboard-menu ul.dokan-dashboard-menu li.active a,
.dokan-store-tabs ul li.active a {
  background-color: var(--cin-accent);
  color: var(--cin-surface-strong);
}
.dokan-store-info {
  background-color: var(--cin-surface);
  border: 1px solid var(--cin-line);
  border-radius: var(--cin-radius);
}