/*
 * member theme — portal-local (legacy generic-named). Owned by /build-theme.
 * Changelog:
 * 2026-07-08 — Update (non-canon, values-only): BRAND RE-ALIGN to the official
 *   "brand logo-MrFlower-Mar2025.docx" brand book (operator decision — reverses the
 *   2026-06-08 "handoff bundle is authoritative" call; brand book now wins). 4 brand
 *   colours restored/mapped onto brand-bearing slots — functional palette (error/
 *   warning/success, pink product accents, neutrals — not covered by the brand book)
 *   left untouched:
 *     PRIMARY sage #68796B  -> --primary-color, --tertiary-color, --tertiary-text-color,
 *       --fifth-text-color, --btn-primary-bg-color (was #4A5740), --color-brand-primary,
 *       --color-text-brand, --color-text-link. Derived shades: --color-brand-primary-dark
 *       #4E4A28->#4E5B51, --color-brand-primary-light #8C8450->#8B978C, --signin-btn-bg
 *       #4A5740->#4E5B51 + hover #3A4732->#3C4740 (sage-dark). White-on-sage passes AA (~4.65:1).
 *     SECONDARY yellow-green #F7FAE8 -> --secondary-bg-color (was #F6F6F4); also already
 *       at --sixth-color.
 *     TERTIARY grayish-yellow #B0AF9C -> --color-border-warm (was #C7C4A4, nearest slot).
 *     ACCENT strong-green #37B14C -> --color-brand-accent (was #FFC154 gold). NOTE: white
 *       text on this accent is only ~2.3:1 — do NOT place text directly on --color-brand-accent.
 *   Live prod (www.mrflower.com.my) still shows the June handoff design; portal now
 *   diverges from live until the live site is re-synced.
 * 2026-07-03 — Correction: removed a duplicate --btn-primary-bg-color/--btn-primary-text-color
 *   declaration that had been added earlier the same day under a mistaken belief the token was
 *   undefined (a grep search missed the pre-existing `--btn-primary-bg-color :` — space before
 *   the colon — at its real declaration further up this :root block, alongside every other
 *   --btn-* token). Since CSS uses the LAST declaration when a custom property repeats in the
 *   same scope, the duplicate had been silently overriding the real, intentionally-set value
 *   (#4A5740, "unified to match --signin-btn-bg-color" per that declaration's own comment) with
 *   #6B6437 for every consumer (homepageHeader avatar circle + cart badge, products.php,
 *   product-detail.php, verify-link.php, the account-page Save buttons). Reverted; single
 *   source of truth restored.
 * 2026-06-23 — Update (non-canon, values-only): --warning-color #ffe139 -> #E0A800
 *   (vivid yellow -> warm gold/amber). Reads as amber on warning UI (cart "cart updated"
 *   notice border/icon + showMessage warning modal icon) per the design. Token-only;
 *   no page touched, no hardcoded value on the banner.
 * 2026-06-08 — Extend (non-canon, prefix --signin-*): added --signin-btn-bg-color
 *   #4A5740 + --signin-btn-hover-bg-color #3A4732 (Mr Flower "Sign In.html" auth
 *   button — a darker green than the brand --btn-primary-bg-color #6B6437; sign-in
 *   page scope only). Additive; no existing token changed. For /reskin-page sign-in.php.
 * 2026-06-08 — Brand sync to the Mr Flower design handoff bundle (latest link
 *   _6CSNL6Ra... ; operator: bundle is now authoritative, overwrite prior live-synced
 *   values). Values-only, 11 tokens: --primary-color #5E5A34->#6B6437, --tertiary-color
 *   #68796B->#6B6437, --btn-primary-bg-color #68796B->#6B6437 (sage->olive/bronze),
 *   --btn-border-radius 0px->30px (square->pill), --primary-text-color #5E5A34->#2C2A22
 *   (olive->warm-dark body text), --default-secondary-bg-color #fff->#FAFAF7 (warm page bg),
 *   --secondary-bg-color #f7f7f7->#F6F6F4, --fourth-text-color #545454->#767470 (muted),
 *   --error-color #fb403a->#FD397A, --success-color #2CAA0D->#00B900, --input-bg-color
 *   #FFFFFF->#F3F3F3. Text-size scale kept (member uses 17px; bundle 14px would regress).
 *   Footer #2A2820 already synced (2026-06-08 prior entry). Portal-wide.
 * 2026-06-08 — Follow-exactly extension (operator: match the bundle's :root precisely).
 *   Text scale: xs 12->11, sm 15->13, md 17->15, lg 24->18, xl 37->24. Font-weights:
 *   medium 400->500, thick 500->600. Buttons: secondary-bg #FFF->#F6F6F4, secondary-text
 *   #fff->#2C2A22, disabled-bg #d3d3d3->#CDCDCD, width-short 100->120px, font-size 17->14px,
 *   button-border 2px #C1BFA9 -> 1px #CDCDCD. Text: tertiary-text #000->#6B6437, fifth-text
 *   #89855D->#6B6437. Borders: --default-border #ddd->#E6E6E6, --primary-border-color
 *   #DEDEDE->#E6E6E6. Listing: header-text-size 17->13px, header-child-color #000->#767470.
 *   NOT in bundle (left as-is, flagged): --input-label/text/placeholder-size (17px),
 *   --footer-text-size (15px), --header-bg/text-color, --warning-color, --secondary-color.
 * 2026-06-08 — Values-only: --footer-bg-color #68796B (sage) -> #2A2820 (dark warm
 *   charcoal). Matches the Mr Flower Homepage.html design (Claude Design handoff
 *   bundle: --color-bg-dark, used for footer + announcement bar). Footer bg now dark
 *   portal-wide; --footer-text-color stays #FFFFFF. Upstream of /build-footer
 *   homepageFooter_v1.0.3.
 * 2026-06-04 — Values-only: --btn-primary-text-color #5E5A34 -> #ffffff. The sage
 *   primary button (--btn-primary-bg-color #68796B) needs white text to match live
 *   (white-on-sage) and pass WCAG AA (olive-on-sage was ~1.4:1; white-on-sage ~4.65:1).
 *   Surfaced by wf-ai-review-runner color-contrast on member/sign-in.php. Portal-wide.
 * 2026-06-04 — Brand refresh to production www.mrflower.com.my (source: live
 *   :root tokens via Playwright). Values-only sync of 16 tokens: red (#E21E25)
 *   -> sage/olive florist palette (primary-text + btn-primary -> #5E5A34 /
 *   #68796B), square buttons (btn-border-radius 0px), sage footer (#68796B),
 *   fixed text sizes (clamp() -> px), input label/text/placeholder 15 -> 17px,
 *   input-border #DEDEDE -> #aaa. No tokens added/removed; filename kept.
 */
@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/heebo/Heebo-Thin.ttf);
}
@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/heebo/Heebo-Light.ttf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/heebo/Heebo-Regular.ttf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/heebo/Heebo-Medium.ttf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/heebo/Heebo-SemiBold.ttf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/heebo/Heebo-Bold.ttf);
}

@font-face {
    font-family: 'MainFont';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/heebo/Heebo-ExtraBold.ttf);
}
/* Montserrat — body/UI font (MrFlower design system).
 * 2026-06-13: fixed mislabeled weights (400 was → Medium.ttf, 500 → SemiBold.ttf)
 * and added 600/700; added Regular+SemiBold files from the design handoff bundle.
 * Weight → file now correct so Montserrat 400/500/600/700 render as intended. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/Montserrat/Montserrat-Medium.ttf);
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/Montserrat/Montserrat-SemiBold.ttf);
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(fonts/Montserrat/Montserrat-Bold.ttf);
}
@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 100;
    src: url(fonts/HelveticaNeue/HelveticaNeueThin.otf);
}
@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 200;
    src: url(fonts/HelveticaNeue/HelveticaNeueUltraLight.otf);
}

@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/HelveticaNeue/HelveticaNeueLight.otf);
}

@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/HelveticaNeue/HelveticaNeueMedium.otf);
}

@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 500;
    src: url(fonts/HelveticaNeue/HelveticaNeueBold.otf);
}

@font-face {
    font-family: 'HelveticaNeue';
    font-style: normal;
    font-weight: 600;
    src: url(fonts/HelveticaNeue/HelveticaNeueHeavy.otf);
}

/* Quinstory — display/heading font (single-file). 2026-06-13: weight range
 * 100–900 so any heading weight (design uses 400) maps to the one .otf. */
@font-face {
    font-family: 'Quinstory';
    font-style: normal;
    font-weight: 100 900;
    src: url(fonts/Quinstory/Quinstory.otf);
}



:root{
    /* 2026-06-14: portal-wide font scale. Edit --font-scale to resize ALL text.
       Every --*-text-size + --fs-* below is calc(basepx * --font-scale). */
    --font-scale: 1.12;
    --fs-10: calc(10px * var(--font-scale));
    --fs-16: calc(16px * var(--font-scale));
    --fs-17: calc(17px * var(--font-scale));
    --fs-20: calc(20px * var(--font-scale));
    --fs-22: calc(22px * var(--font-scale));
    --fs-26: calc(26px * var(--font-scale));
    --fs-28: calc(28px * var(--font-scale));
    --fs-30: calc(30px * var(--font-scale));
    --fs-34: calc(34px * var(--font-scale));
    --fs-38: calc(38px * var(--font-scale));
    --fs-40: calc(40px * var(--font-scale));
    --fs-44: calc(44px * var(--font-scale));
    --fs-46: calc(46px * var(--font-scale));
    --fs-52: calc(52px * var(--font-scale));

    /* NEW STANDARD ROOT CSS */
    /*theme-color*/
    --primary-color : #68796B;
    --secondary-color: #1C2232;
    --tertiary-color: #68796B;
    --fourth-color: #1D253B;
    --fifth-color: #F6F6F4; 
    --sixth-color: #f7fae8;
    --error-color: #FD397A;
    --warning-color: #E0A800;
    --success-color: #00B900;
    --hyperlink-text-color: #0000EE;

 /*webpage*/
    --default-border: 1px solid #E6E6E6;
    --default-bg-color: #fff;
    --default-primary-bg-color: #000;
    --default-secondary-bg-color: #FAFAF7;
    --default-primary-text-color: #000;
    --default-secondary-text-color: #fff;
    --primary-border-color: #E6E6E6;
    --primary-bg-color : #fff;
    --secondary-bg-color: #F7FAE8;
    --primary-text-color:#2C2A22;
    --secondary-text-color : #fff;
    --tertiary-text-color : #68796B;
    --fourth-text-color : #767470;
    --fifth-text-color : #68796B;
    --onhover-text-color: #000;
    --default-border-radius: 10px;
    --xl-text-size: calc(24px * var(--font-scale));
    --lg-text-size: calc(18px * var(--font-scale));
    --md-text-size: calc(15px * var(--font-scale));
    --sm-text-size: calc(13px * var(--font-scale));
    --xs-text-size: calc(11px * var(--font-scale));
    --header-height: auto;
    --border-radius-xs: 5px;
    --border-radius-md: 10px;
    --border-radius-lg: 15px;
    --js-header-height: 80px;

/* font-weight */
    --default-font-weight-thin: 300;
    --default-font-weight-medium: 500;
    --default-font-weight-thick: 600;
    --default-font-weight-bold: 700;
    --default-font-weight-max: 900;

/*button*/
    --btn-primary-bg-color :  #68796B;   /* 2026-07-08 brand re-align: back to brand-book primary sage #68796B (Mar-2025 brand doc). Was #4A5740, before that #6B6437 olive. White text passes AA (~4.65:1). */
    --btn-secondary-bg-color : #F6F6F4;
    --btn-tertiary-bg-color : #fff;
    --btn-disabled-bg-color : #CDCDCD;
    --btn-onHover-primary-bg-color : '';
    --btn-onHover-secondary-bg-color : '';
    --btn-onHover-tertiary-bg-color : '';
    --btn-primary-text-color: #ffffff;
    --btn-secondary-text-color: #2C2A22;
    --btn-tertiary-text-color: #000;
    --btn-disabled-text-color: #9d9d9d;
    --btn-onHover-primary-text-color : '';
    --btn-onHover-secondary-text-color : '';
    --btn-onHover-tertiary-text-color : '';
    --btn-width-long: 200px;
    --btn-width-short: 120px;
    --btn-border-radius: 30px;
    --button-border: 1px solid #CDCDCD;
    --btn-font-size : 14px;

/*input*/
    --input-label-size: 17px;
    --input-text-size: calc(17px * var(--font-scale));
    --input-border-radius: 5px;
    --input-border : 1px solid #aaa;
    --input-bg-color :#F3F3F3;
    --input-width-long: '';
    --input-width-short: '';
    --input-placeholder-size: 17px;
    --input-placeholder-color: #d6d6d6;
    --input-disabled-bg-color: #d6d6d6;
    --input-onfocus-border-color: '';

/*header*/
    --header-bg-color: #fff3e3;
    --header-text-size: calc(17px * var(--font-scale));
    --header-text-color: #000;
    --header-onHover-color: '';

/*footer*/
    --footer-bg-color: #2A2820;
    --footer-text-size: calc(15px * var(--font-scale));
    --footer-text-color: #FFFFFF;
    --footer-onHover-color: '';

/*listing*/
    --listing-header-color: #ffdcad;
    --listing-row-primary-color: #f8f8f8;
    --listing-row-secondary-color: #fff;
    --listing-header-child-color: #767470;
    --listing-row-child-primary-color: #fff3e3;
    --listing-row-child-secondary-color: #fff3e3;
    --listing-header-text-size: calc(13px * var(--font-scale));
    --listing-row-text-size: calc(17px * var(--font-scale));
    --listing-header-child-text-size: calc(17px * var(--font-scale));
    --listing-row-child-text-size: calc(17px * var(--font-scale));

    /* ── Non-canonical extension — prefix: --signin-* (sign-in page scope) ──
       Added 2026-06-08 (see changelog). The Mr Flower "Sign In.html" design
       (Claude Design bundle) hardcodes a DARKER auth-button green than the
       brand button (--btn-primary-bg-color #6B6437). Scoped to the sign-in
       page so the portal-wide button is unaffected. Consumed by
       member/sign-in.php via bg-[color:var(--signin-btn-bg-color)]. */
    --signin-btn-bg-color: #4E5B51;
    --signin-btn-hover-bg-color: #3C4740;

    /* ── Mr Flower design-system primitives (--color-* mirror) ──────────────────
       Added 2026-06-10 via /build-theme (Extend path). Source: the MrFlower design
       system colors_and_type.css (Claude Design bundle). ADDITIVE ONLY — no existing
       token above was changed; the legacy semantic aliases already equal these values.
       Non-canonical extension under the explicit --color-* prefix (the design system's
       own namespace), NOT the locked 126-token canonical schema. Consumed by pages via
       bg-[color:var(--color-bg-warm)] etc. Lets about-us / terms / privacy / the modal
       re-point their inlined one-off hex to real tokens. */
    /* Brand */
    --color-brand-primary:       #68796B;
    --color-brand-primary-dark:  #4E5B51;
    --color-brand-primary-light: #8B978C;
    --color-brand-accent:        #37B14C;
    --color-brand-blush:         #F9E9E2;  /* design token — subtle accents (subcategory border-left, etc.) */
    --color-brand-blush-deep:    #FFDDE0;  /* 2026-06-14: deeper pink — MrFlower design hardcodes this on the product card image frame (distinct from the --color-brand-blush token) */
    /* Backgrounds */
    --color-bg-white:            #FFFFFF;
    --color-bg-warm:             #FAFAF7;
    --color-bg-light:            #F6F6F4;
    --color-bg-pink-subtle:      #FFF9F9;
    --color-bg-cream-subtle:     #FFF9E8;
    --color-bg-dark:             #2A2820;
    --color-bg-dark-mid:         #474747;
    /* Borders */
    --color-border-default:      #E6E6E6;
    --color-border-warm:         #B0AF9C;
    --color-border-product:      #F9E9E2;
    /* Text */
    --color-text-primary:        #2C2A22;
    --color-text-secondary:      #FFFFFF;
    --color-text-muted:          #767470;
    --color-text-brand:          #68796B;
    --color-text-link:           #68796B;
    --color-text-error:          #FD397A;
    --color-text-success:        #00B900;
    --color-text-disabled:       #9D9D9D;
    /* Typography scale (design default; member theme had sm/md but not default) */
    --default-text-size: calc(14px * var(--font-scale));

    /* Status-badge pairs — centralizes colors that were previously hardcoded hex, repeated
       across my-orders.php (order-status pills) and addresses.php ("not deliverable" badge).
       Added 2026-07-03 (design-consistency audit). Values match what was already live —
       this is a rename/centralize, not a re-color. */
    --badge-warning-bg:     #FEF3C7;
    --badge-warning-text:   #B45309;
    --badge-warning-border: #FDE68A;
    --badge-info-bg:        #E8F0FE;
    --badge-info-text:      #1A56DB;
    --badge-purple-bg:      #E0E7FF;
    --badge-purple-text:    #3730A3;
    --badge-success-bg:     #D4EDDA;
    --badge-success-text:   #155724;
    --badge-danger-bg:      #F8D7DA;
    --badge-danger-text:    #721C24;

    /* Design-token audit 2026-07-06 — centralize colors that were hardcoded (repeated)
       across member pages. Values match what was already live (rename/centralize, not re-color).
       - OTP verify box bg: reset-password.php + verify-otp.php (7 hits)
       - Pink accents: product-detail sale pills + about-us/privacy/terms callouts
       - Grey chips: product-detail size/variant selector chips */
    --color-bg-otp:         #F0EDD0;
    --color-pink-soft:      #F2C4C8;
    --color-pink-soft-deep: #ECB1B7;
    --color-pink-dark:      #6B2737;
    --color-pink-vivid:     #E74C6F;
    --color-chip-bg:        #F0F0F0;
    --color-chip-bg-active: #E0E0E0;
    --color-chip-border:    #C8C8C8;
    --color-chip-text:      #555555;
}