/*
 * Shopify token bridge for Harmony's Way WooCommerce theme.
 *
 * The Shopify theme.css references ~70 CSS custom properties that are normally
 * produced by the Shopify theme editor (settings.css). Since we only pasted
 * the component CSS, those tokens are undefined at runtime and most rules
 * silently break. This file defines them, mapped to the existing --hw-*
 * palette where a meaningful equivalent exists, or to reasonable defaults.
 *
 * Unitless values (e.g. --base-body-size: 16) are intentional: Shopify's
 * component CSS uses them inside calc() expressions like
 *   calc(14px / 16 * var(--base-body-size) + 0px)
 * so they must not carry a unit.
 *
 * Header color model (matches the OpenCart reference):
 *   - Top strip (.header-container--top): light, dark text, on page bg.
 *   - Bottom nav (.header-container--bottom): solid --hw-accent green,
 *     white text. Tokens are re-declared on that element further down.
 */
:root {
    /* ---------- Fonts ---------- */
    /* Mirrors OC's Bootstrap root font stack so any pasted OC CSS that
       references var(--bs-font-sans-serif) resolves correctly here too. */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-size: 0.8125rem;
    /* Shared font-size for header action elements (nav links, account button,
       cart button) so they visually align. Tune once, affects all three. */
    --hw-header-action-font-size: 17px;
    /* Footer surface — matches Shopify's footer token set. */
    --color-background-footer: #1d1d1d;
    --color-text-footer: var(--hw-on-accent, #ffffff);
    --color-borders-footer: rgba(255, 255, 255, 0.15);
    --color-accent-footer: var(--hw-accent, #32432d);
    /* Corner radius for card-style surfaces (category cards, product cards). */
    --border-radius-cards: 12px;

    /* ---------- Surfaces ---------- */
    --color-background-main: var(--hw-bg);
    --color-opacity-background-main: rgba(250, 247, 240, 0);
    --color-secondary-background-main: var(--hw-top-bg);
    --color-third-background-main: var(--hw-card);
    --color-fourth-background-main: #f4f4f4;

    --color-background-cards: var(--hw-card);
    --color-background-tooltip: var(--hw-text);
    --color-background-widget-header: transparent;

    /* ---------- Text / foreground ---------- */
    --color-text-main: var(--hw-text);
    --color-secondary-text-main: rgba(29, 39, 29, 0.6);
    --color-foreground-main: var(--hw-text);
    --color-text-cards: var(--hw-text);
    --color-foreground-cards: var(--hw-text);
    --color-foreground-tooltip: var(--hw-on-accent, #ffffff);

    /* ---------- Accent / calls-to-action ---------- */
    --color-accent-main: var(--hw-accent);
    --color-accent-cards: var(--hw-accent);
    --color-foreground-accent-main: var(--hw-on-accent, #ffffff);
    --color-foreground-accent-cards: var(--hw-on-accent, #ffffff);

    /* ---------- Header tokens (defaults = TOP strip: light / dark text) ---------- */
    --color-background-header: var(--hw-bg);
    --color-text-header: var(--hw-text);
    --color-foreground-header: var(--hw-on-accent, #ffffff);
    --color-accent-header: var(--hw-accent);
    --color-borders-header: var(--hw-border);
    --color-foreground-accent-header: var(--hw-on-accent, #ffffff);

    /* Used when .site-header--absolute hero layouts are active (hover-to-reveal). */
    --color-background-header-absolute: var(--hw-accent);
    --color-text-header-absolute: var(--hw-on-accent, #ffffff);
    --color-foreground-header-absolute: var(--hw-on-accent, #ffffff);
    --color-borders-header-absolute: rgba(255, 255, 255, 0.15);
    --color-secondary-background-header-absolute: var(--hw-accent-2);
    --color-opacity-background-header: rgba(50, 67, 45, 0);
    --color-opacity-background-header-absolute: rgba(50, 67, 45, 0);

    /* ---------- Borders / dividers ---------- */
    --color-borders-main: var(--hw-border);
    /* Singular spelling, used ~89 times across the component CSS and never
       defined until now — every one of those fell through to a hardcoded cream
       fallback, so the Border brand setting did nothing on most of the site. */
    --color-border: var(--hw-border);
    --color-borders-cards: var(--hw-border);
    --color-borders-forms-primary: var(--hw-accent);
    --color-borders-forms-secondary: rgba(29, 39, 29, 0.2);
    --divider-color: var(--hw-border);
    --divider-height: 1px;
    --divider-style: solid;
    --divider-vertical-space: 1rem;
    --widget-borders-color: var(--hw-border);

    /* ---------- Shadows ---------- */
    --color-shadow-cards: rgba(38, 44, 34, 0.08);
    --color-shadow-buttons: rgba(0, 0, 0, 0.08);
    --shadow-x-cards: 0;
    --shadow-y-cards: 12px;
    --shadow-blur-cards: 24px;
    --shadow-x-buttons: 0;
    --shadow-y-buttons: 0;
    --shadow-blur-buttons: 0;

    /* ---------- Typography (unitless where Shopify expects it) ---------- */
    --base-body-size: 16;
    --base-body-line: 1.5;
    --base-body-spacing: 0;
    --base-headings-size: 70;
    --base-headings-line: 1.15;
    --base-headings-spacing: -0.01em;
    --base-menu-size: 14;

    --font-stack-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-stack-headings: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-style-body: normal;
    --font-style-headings: normal;
    --font-weight-body: 400;
    --font-weight-body-bold: 700;
    --font-weight-buttons: 700;
    --font-weight-headings: 700;
    --font-weight-menu: 600;

    /* ---------- Header-specific sizing ---------- */
    --header-logo: 55px;
    /* Visual logo image height. Decoupled from --header-logo (row height) so
       the image can be bigger than the strip without pushing the strip taller. */
    --header-logo-image: 90px;

    /* ---------- Forms & buttons ---------- */
    --border-radius-buttons: 9999px;   /* pill shape matches Shopify reference */
    --border-radius-forms: 6px;
    --border-width-buttons: 1px;
    --border-width-cards: 1px;
    --border-width-forms: 1px;

    /* ---------- Grid / cards / media ---------- */
    --card-text-width: 100%;
    --image-fit-padding: 0;
    --image-height: auto;
    --image-height-desktop: auto;
    --image-height-mobile: auto;
    --aspect-ratio: 1;
    --grid-aspect-mobile: 1;
    --column-desktop: 4;
    --column-mobile: 2;
    --row-desktop: 1;
    --row-mobile: 1;
    --horizontal-alignment: center;
}

/*
 * Bottom nav bar: re-declare header tokens so Shopify's section-header.css
 * rules (.header-container .button--solid { background: var(--color-text-header); ... })
 * produce the green/white scheme on the lower menu row only.
 *
 *   background-header   -> solid green surface
 *   text-header         -> white (also used as solid-button fill; OK visually)
 *   foreground-header   -> accent (text inside solid buttons)
 *   borders-header      -> subtle white
 */
.header-container--bottom {
    --color-background-header: var(--hw-accent);
    --color-text-header: var(--hw-on-accent, #ffffff);
    --color-foreground-header: var(--hw-accent);
    --color-accent-header: var(--hw-on-accent, #ffffff);
    --color-borders-header: rgba(255, 255, 255, 0.15);
    color: var(--hw-on-accent, #ffffff);
}