/*
Theme Name: Zen Bliss
Theme URI: https://zenbliss.ca
Template: kadence
Description: Kadence child theme for zenbliss.ca. Carries design tokens only (fonts, colours, colour schemes, shapes, layout widths). Everything functional lives in the Zen Bliss Core plugin.
Author: Zen Bliss
Version: 1.0.0
Requires PHP: 8.1
Text Domain: zen-bliss-child
*/

/*
 * Design tokens ported from the live Shopify theme (Dawn 16, config/settings_data.json + assets/zb.css).
 * Spec: woocommerce-site/docs/spec-design-layout.md, section 1 (1.1 fonts, 1.2 colour schemes, 1.3 shape, 1.4-1.5 tokens).
 * Font files are self-hosted by the integrator; this file only names the families.
 * Breakpoints follow Dawn: 750px and 990px (phone styles are the default, larger screens override).
 */
:root{
  /* palette (settings_data colour schemes + zb.css) */
  --zb-green:#1f6b17;            /* primary buttons, links, accent-2 announcement bar, active chip */
  --zb-green-900:#0f3a0c;        /* inverse + scheme-4 background */
  --zb-green-100:#dcebd8;        /* scheme-5; badge pill; checked option */
  --zb-mist:#eef4ef;             /* scheme-2 background band */
  --zb-sky:#dbe7f1;              /* scheme-3 background; help-me-choose banner */
  --zb-gold:#b8892f;             /* scheme-4 button; notice border; wizard eyebrow */
  --zb-star:#e0a62b;             /* rating stars */
  --zb-ink:#14201a;              /* text in every light scheme, headings */
  --zb-body:rgba(20,32,26,.75);  /* Dawn body text = 75% ink (#4f5853 on white) */
  --zb-ink-2:#4d5b51;
  --zb-ink-3:#77847b;
  --zb-line:#dde5dd;
  --zb-tile:#fdfdfd;
  --zb-white:#ffffff;

  /* type */
  --zb-font-heading:"Plus Jakarta Sans",sans-serif;
  --zb-font-heading-weight:700;
  --zb-font-body:"DM Sans",sans-serif;
  --zb-font-body-weight:400;
  --zb-font-body-bold:700;
  --zb-body-size:15px;           /* 16px from 750px */
  --zb-body-line:1.8;
  --zb-body-tracking:.6px;
  --zb-heading-line:1.273;
  --zb-heading-tracking:.66px;
  --zb-h0:44px; --zb-h1:33px; --zb-h2:22px; --zb-h3:18.7px; --zb-h4:16.5px; --zb-h5:13.2px;   /* phone */
  --zb-input-size:13px;
  --zb-input-tracking:.4px;

  /* layout */
  --zb-page-width:1200px;        /* includes the side padding, as Dawn's .page-width */
  --zb-gutter:15px;              /* 50px from 750px */
  --zb-header-gutter:30px;       /* 32px from 750px, 50px from 990px */
  --zb-section-gap:0px;
  --zb-grid-gap:12px;            /* zb product grid; 16px from 990px */

  /* shape */
  --zb-r:16px;                   /* cards, media, popups, text boxes */
  --zb-r-sm:10px;
  --zb-btn-radius:40px;          /* pill */
  --zb-btn-border:1px;
  --zb-btn-min-h:47px;
  --zb-btn-min-w:122px;
  --zb-btn-pad-x:30px;
  --zb-btn-font:15px;
  --zb-pill-radius:40px;         /* variant pills, badges */
  --zb-pill-border:rgba(20,32,26,.55);
  --zb-input-radius:12px;
  --zb-input-border:rgba(20,32,26,.55);
  --zb-card-border:rgba(20,32,26,.10); /* Dawn cards, popups and drawer; zb-card itself uses --zb-line */
  --zb-shadow:0 12px 30px -12px rgba(15,58,12,.18);
  --zb-logo-width:80px;
}
@media (min-width:750px){
  :root{
    --zb-body-size:16px; --zb-gutter:50px; --zb-header-gutter:32px;
    --zb-h0:57.2px; --zb-h1:44px; --zb-h2:26.4px; --zb-h3:19.8px; --zb-h5:14.3px;
  }
}
@media (min-width:990px){
  :root{ --zb-header-gutter:50px; --zb-grid-gap:16px; }
}

/*
 * Colour schemes as classes. Each section sets one; the scheme supplies the variables zb.css and the Dawn shims read
 * (background, text, button, secondary button / link). Dawn names (.color-scheme-2, .color-background-1, ...) are kept
 * as aliases so markup copied from the Liquid sections works unchanged.
 * --zb-text is the heading colour; --zb-text-body is Dawn's 75% body text for that scheme.
 */
.zb-scheme-1,.color-scheme-1,.zb-scheme-background-1,.color-background-1{
  --zb-bg:#ffffff;--zb-text:#14201a;--zb-text-body:rgba(20,32,26,.75);--zb-btn-bg:#1f6b17;--zb-btn-text:#ffffff;--zb-btn2-text:#1f6b17;--zb-link:#1f6b17}
.zb-scheme-2,.color-scheme-2,.zb-scheme-background-2,.color-background-2{
  --zb-bg:#eef4ef;--zb-text:#14201a;--zb-text-body:rgba(20,32,26,.75);--zb-btn-bg:#1f6b17;--zb-btn-text:#ffffff;--zb-btn2-text:#1f6b17;--zb-link:#1f6b17}
.zb-scheme-3,.color-scheme-3{
  --zb-bg:#dbe7f1;--zb-text:#14201a;--zb-text-body:rgba(20,32,26,.75);--zb-btn-bg:#1f6b17;--zb-btn-text:#ffffff;--zb-btn2-text:#1f6b17;--zb-link:#1f6b17}
.zb-scheme-4,.color-scheme-4{
  --zb-bg:#0f3a0c;--zb-text:#ffffff;--zb-text-body:rgba(255,255,255,.75);--zb-btn-bg:#b8892f;--zb-btn-text:#ffffff;--zb-btn2-text:#ffffff;--zb-link:#ffffff}
.zb-scheme-5,.color-scheme-5{
  --zb-bg:#dcebd8;--zb-text:#14201a;--zb-text-body:rgba(20,32,26,.75);--zb-btn-bg:#1f6b17;--zb-btn-text:#ffffff;--zb-btn2-text:#1f6b17;--zb-link:#1f6b17}
.zb-scheme-inverse,.color-inverse{
  --zb-bg:#0f3a0c;--zb-text:#ffffff;--zb-text-body:rgba(255,255,255,.75);--zb-btn-bg:#ffffff;--zb-btn-text:#0f3a0c;--zb-btn2-text:#ffffff;--zb-link:#ffffff}
.zb-scheme-accent-1,.zb-scheme-accent-2,.color-accent-1,.color-accent-2{
  --zb-bg:#1f6b17;--zb-text:#ffffff;--zb-text-body:rgba(255,255,255,.75);--zb-btn-bg:#ffffff;--zb-btn-text:#1f6b17;--zb-btn2-text:#ffffff;--zb-link:#ffffff}

.zb-scheme-1,.zb-scheme-2,.zb-scheme-3,.zb-scheme-4,.zb-scheme-5,.zb-scheme-inverse,.zb-scheme-accent-1,.zb-scheme-accent-2,
.zb-scheme-background-1,.zb-scheme-background-2,
.color-scheme-1,.color-scheme-2,.color-scheme-3,.color-scheme-4,.color-scheme-5,.color-inverse,.color-accent-1,.color-accent-2,
.color-background-1,.color-background-2{
  background:var(--zb-bg);color:var(--zb-text-body);
}
:is(.zb-scheme-1,.zb-scheme-2,.zb-scheme-3,.zb-scheme-4,.zb-scheme-5,.zb-scheme-inverse,.zb-scheme-accent-1,.zb-scheme-accent-2,
.zb-scheme-background-1,.zb-scheme-background-2,
.color-scheme-1,.color-scheme-2,.color-scheme-3,.color-scheme-4,.color-scheme-5,.color-inverse,.color-accent-1,.color-accent-2,
.color-background-1,.color-background-2) :is(h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5){
  color:var(--zb-text);
}