/*
Theme Name: Syntax Power Solution
Theme URI: https://syntaxpowersolution.com
Description: Custom Blocksy child theme for the Syntax Power Solution e-commerce website. Provides the Syntax design system (Libre Franklin + Newsreader type, cream/ink/gold palette), WooCommerce product-card and shop styling, WhatsApp ordering, and ACF product fields. Header, footer and homepage are built with Blocksy / Elementor Pro (see README).
Author: Syntax Power Solution
Author URI: https://syntaxpowersolution.com
Template: blocksy
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: syntax-child
Tags: e-commerce, woocommerce, elementor
*/

/* ==========================================================================
   Syntax design tokens — the single source of truth for the brand.
   Reuse these variables in Blocksy, Elementor Global Colors and custom CSS
   so the whole site stays visually consistent with the source design.
   ========================================================================== */
:root {
  --syntax-cream:      #f4f1ea; /* page background */
  --syntax-cream-2:    #faf8f2; /* inputs / subtle surfaces */
  --syntax-ink:        #17140e; /* primary text / dark sections */
  --syntax-ink-2:      #100e09; /* footer */
  --syntax-ink-soft:   #2c271b; /* hover on dark buttons */
  --syntax-gold:       #e6c266; /* primary accent */
  --syntax-gold-2:     #d8b04c; /* accent hover */
  --syntax-gold-ink:   #a9791f; /* link hover / labels */
  --syntax-forest:     #1d3330; /* solar / promo band */
  --syntax-forest-2:   #132522;
  --syntax-muted:      #7a7365; /* secondary text */
  --syntax-muted-2:    #8a8272; /* tertiary text */
  --syntax-line:       rgba(23, 20, 14, .08); /* hairline borders */
  --syntax-line-2:     rgba(23, 20, 14, .14);

  --syntax-font-body:  'Libre Franklin', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --syntax-font-head:  'Newsreader', Georgia, 'Times New Roman', serif;

  --syntax-radius:     16px;
  --syntax-radius-sm:  10px;
  --syntax-radius-pill:999px;
  --syntax-shell:      1240px; /* content max-width in the source design */
}

/* ==========================================================================
   Base — applied site-wide. Component and WooCommerce styles live in
   assets/css/theme.css and assets/css/woocommerce.css (enqueued separately).
   ========================================================================== */
body {
  font-family: var(--syntax-font-body);
  background: var(--syntax-cream);
  color: var(--syntax-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .syntax-serif,
.entry-title, .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
  font-family: var(--syntax-font-head);
  font-weight: 400;
  letter-spacing: -.01em;
}

a { color: inherit; }
a:hover { color: var(--syntax-gold-ink); }

::selection { background: var(--syntax-gold); color: var(--syntax-ink); }

.syntax-tabular { font-variant-numeric: tabular-nums; }