/* Haier design system — generated from the system's tokens.json.
 * Two themes: Blue (default, beige ground) and Gold (dark-grey ground).
 * Set data-theme="blue" or "gold"; nothing else picks a colour. */
:root, [data-theme="blue"] {
  --haier-blue: #005AAA; /* Brand colour, the only strong colour. Digital #005AAA (R0 G90 B170); print Pantone 286C, CMYK 100/70/0/0. Fill for the logo, primary buttons and small accents; white text on it is 6.9:1. As text on beige or white it is 6.2-6.9:1, but on the Gold theme's dark-grey ground it is 1.7:1, so use `action` for text and links. Blue tone stays within about 10% of any surface. */
  --haier-light-blue: #32BEFF; /* Haier Light Blue. Digital R50 G190 B255; print Pantone 2995C, CMYK 80/0/0/0. Accent fill, and in the Blue theme the accent that sits on Haier Blue. 2.0:1 on beige, so never text on a light ground; text on it is `black` (10:1). */
  --innovation-blue: #23B8EB; /* Accent colour "Innovation Blue": a solid cyan blue for highlights and tiles. Value read from the guide's colour swatch (RGB 35/184/235); the guide prints no code for it. Text on it is `black`. */
  --intelligent-blue-light: #38C6F4; /* Accent "Intelligent Blue", top stop of its vertical gradient. Value read from the guide's gradient swatch; no printed code. */
  --intelligent-blue-deep: #212A61; /* Accent "Intelligent Blue", bottom stop of the gradient (a deep navy). Only used together with intelligent-blue-light, top to bottom; white text on the navy end. Value read from the guide's swatch. */
  --black: #000000; /* Process Black. Digital R0 G0 B0; print C0 M0 Y0 K100. Text on light grounds and on `haier-light-blue`. */
  --haier-grey: #6E6E6E; /* Haier Grey. Digital R110 G110 B110; print Pantone Cool Grey 9C, K70. Practically the same as gray-4; use gray-4 for borders and haier-grey for solid grey fills. White text on it is 5.1:1. */
  --haier-light-grey: #D9D9D9; /* Haier Light Grey. Digital R217 G217 B217; print Pantone Cool Gray 1C, K10. Light grey fills and dividers; text on it is `black`. */
  --white: #FFFFFF; /* White. Digital R255 G255 B255; print C0 M0 Y0 K0. Text and the wordmark on blue, black or dark grey; card surfaces. */
  --beige-1: #FFFAF2; /* Beige 1. Digital #FFFAF2 (RGB 255/250/242); print Pantone Warm Gray 1C, CMYK 0/2/3/0. The main body colour: page background, and the guide's colour for secondary fascia panels, side columns and product-area back panels. */
  --beige-2: #FAF1E1; /* Beige 2. Digital #FAF1E1 (RGB 250/241/225); print Pantone 7528C, CMYK 3/5/10/0. Bands and panels one step off the body. */
  --beige-3: #EADFCC; /* Beige 3. Digital #EADFCC (RGB 234/223/204); print Pantone 7530C, CMYK 10/10/15/0. Wells and larger fills. */
  --beige-4: #D1C5B0; /* Beige 4. Digital #D1C5B0 (RGB 209/197/176); print Pantone 7531C, CMYK 0/6/16/18. The deepest beige; secondary text in the Gold theme (6.7:1 on dark-grey). */
  --gray-1: #FAFAFA; /* Gray 1. Digital #FAFAFA (RGB 250/250/250); print Pantone Cool Gray 1C, CMYK 0/0/0/2. Neutral page or panel ground where no warm tone is wanted. */
  --gray-2: #EDEDED; /* Gray 2. Digital #EDEDED (RGB 237/237/237); print Pantone Cool Gray 5C, CMYK 0/0/0/5. Stage and border zone: light fills. */
  --gray-3: #C1C1C1; /* Gray 3. Digital #C1C1C1 (RGB 193/193/193); print Pantone 430C, CMYK 0/0/0/25. Borders and decorative rules (1.7:1 on beige-1, so never for text or control edges on the Blue theme); control edges in the Gold theme. */
  --gray-4: #6F6F6F; /* Gray 4. Digital #6F6F6F (RGB 111/111/111); print Pantone Cool Gray 11C, CMYK 0/0/0/50. Borders of controls on light grounds (4.5-5:1) and the darkest of the grey zone. */
  --dark-grey: #3A3A3A; /* Dark grey: the colour of the primary fascia panel and plinth on store displays, and the headline ink of the guide. Read from the guide's vector artwork (#3A3A3A); it is named but not given a code in the palette page. */
  --gold-1: #D0AD8D; /* Gold 1, the lightest golden beige of the Gold theme. Not in the guide's palette: sampled from the golden-beige tones of the 2026 cover artwork, so treat as a derived colour. Heading, link and button colour on the dark-grey ground (5.4:1 on dark-grey, 10:1 on black); text on it is `black`. */
  --gold-2: #B89670; /* Gold 2. Derived from the 2026 cover artwork (not in the guide's palette). Accent fill and mid band on dark grounds (4.1:1 on dark-grey, so large text and shapes only); text on it is `black` (7.6:1). */
  --gold-3: #947558; /* Gold 3. Derived from the 2026 cover artwork. Decorative band and rule colour only: 2.7:1 on dark-grey, never text. */
  --gold-4: #634D36; /* Gold 4, the deepest golden brown. Derived from the 2026 cover artwork. Decorative band colour only, 1.4:1 on dark-grey: never text or a control edge. */
  --surface: var(--beige-1); /* Page and slide background. Blue theme: the Beige 1 zone. Gold theme: the dark-grey fascia. Ink, ink-muted and action read on it in both themes. */
  --surface-alt: var(--beige-2); /* Bands, header strips and media wells behind product images. Blue: Beige 2. Gold: #2C2C2C, derived (darker than the ground). Ink, ink-muted and action read on it in both themes. */
  --surface-raised: var(--white); /* Cards, inputs and menus that sit on surface. Blue: white. Gold: #454545, derived (lighter than the ground). Ink and action read on it in both themes; ink-muted 5.6:1 in Gold. */
  --surface-brand: var(--haier-blue); /* Full-bleed Haier Blue panels (the blue logo blocks); the same in both themes, since Haier Blue is the brand. Text on it is `on-brand`; keep to small areas. For a theme-aware feature panel use `feature`. */
  --surface-dark: var(--dark-grey); /* A panel that stays dark grey in both themes (fascia header band, hero band). Text on it is `on-dark`. */
  --ink: var(--black); /* Primary text and icons on surface, surface-alt, surface-raised and accent. Blue theme: black. Gold theme: Beige 1 (10.9:1 on dark-grey). */
  --ink-muted: #595959; /* Secondary text, captions and metadata on surface, surface-alt and surface-raised (5.3:1 or better in Blue, 5.6:1 or better in Gold). Blue value is derived from gray-4 to clear 4.5:1 on beige-3. */
  --on-brand: #FFFFFF; /* Text and the white wordmark on surface-brand or haier-blue (6.9:1). */
  --on-dark: #FFFFFF; /* Text and the white wordmark on surface-dark or dark-grey (11:1). */
  --action: var(--haier-blue); /* Links, primary button fill, focus ring and active states. Blue theme: Haier Blue (6.2:1 or better on beige). Gold theme: Gold 1 (4.6:1 or better on dark-grey and its raised surfaces). */
  --action-hover: #004A8C; /* Hover and pressed state of `action`. Derived: a step darker than Haier Blue in Blue, a step lighter than Gold 1 in Gold; not palette colours. */
  --on-action: var(--white); /* Text on an `action` fill: white on Haier Blue (Blue theme), black on Gold 1 (Gold theme, 10:1). Never hard-code white on `action`. */
  --action-soft: #E3EDF7; /* Tinted background behind `action` text (brand Tag, hover of the secondary Button). Derived: a pale blue tint in Blue (`action` on it 5.8:1), a deep golden brown in Gold (`action` on it 5.2:1). */
  --accent: var(--haier-light-blue); /* Accent fill for highlights, the accent Button and Tag. Blue theme: Haier Light Blue. Gold theme: Gold 2. Text on it is `on-accent`. */
  --on-accent: var(--black); /* Text on an `accent` fill: black on Haier Light Blue (10:1) and on Gold 2 (7.6:1). */
  --line: var(--gray-3); /* Decorative hairlines and card outlines; below 3:1 on purpose, so no control edge or meaningful icon uses it. Blue: Gray 3. Gold: #595959, derived. */
  --line-strong: var(--gray-4); /* Borders of inputs and other controls, and icons that carry meaning: 4.5:1 or better on surface, surface-alt and surface-raised in Blue (Gray 4), 5.3:1 or better in Gold (Gray 3). */
  --danger: #B3261E; /* Error text and error borders on surface, surface-alt and surface-raised (4.7:1 or better in both themes). Not in the guide; added so forms can report errors. Always pair with a message. */
  --heading: var(--haier-blue); /* Colour of display headings and slide titles on surface. Blue: Haier Blue (6.6:1 on Beige 1). Gold: Gold 1 (5.4:1 on dark-grey). Body text stays `ink`. */
  --logo-ink: var(--haier-blue); /* Colour of the wordmark placed on surface: the blue wordmark in Blue, the white wordmark in Gold. Always use the official logo files; only their fill changes. */
  --feature: var(--haier-blue); /* Full-bleed feature panel of a theme (slide section dividers, hero band): Haier Blue in Blue, black in Gold. Text on it is `on-feature`. */
  --on-feature: var(--white); /* Text and the white wordmark on `feature` (6.9:1 on Haier Blue, 21:1 on black). */
  --feature-accent: var(--haier-light-blue); /* Accent line, number or small shape on a `feature` panel: Haier Light Blue on Haier Blue (3.3:1, so large or decorative only), Gold 1 on black (10:1). */
  --band-a: var(--beige-3); /* Lightest of the three bands of the cover artwork and slide covers (drawn from the 2026 cover art): Beige 3 in Blue, Gold 4 in Gold. Decorative only. */
  --band-b: var(--beige-4); /* Middle band of the cover artwork: Beige 4 in Blue, Gold 3 in Gold. Decorative only. */
  --band-c: var(--haier-grey); /* Third band of the cover artwork: Haier Grey in Blue, Gold 2 in Gold. Decorative only. */
  --art-slab: var(--haier-blue); /* The solid slab in the cover artwork and slide covers: Haier Blue in Blue, Gold 1 in Gold. Decorative only. */
  --art-chip: var(--haier-light-blue); /* The small chip beside the slab in the cover artwork: Haier Light Blue in Blue, Beige 1 in Gold. Decorative only. */
  --focus-ring: 0 0 0 2px #fffaf2, 0 0 0 4px #005aaa;
}
[data-theme="gold"] {
  --haier-blue: #005AAA;
  --haier-light-blue: #32BEFF;
  --innovation-blue: #23B8EB;
  --intelligent-blue-light: #38C6F4;
  --intelligent-blue-deep: #212A61;
  --black: #000000;
  --haier-grey: #6E6E6E;
  --haier-light-grey: #D9D9D9;
  --white: #FFFFFF;
  --beige-1: #FFFAF2;
  --beige-2: #FAF1E1;
  --beige-3: #EADFCC;
  --beige-4: #D1C5B0;
  --gray-1: #FAFAFA;
  --gray-2: #EDEDED;
  --gray-3: #C1C1C1;
  --gray-4: #6F6F6F;
  --dark-grey: #3A3A3A;
  --gold-1: #D0AD8D;
  --gold-2: #B89670;
  --gold-3: #947558;
  --gold-4: #634D36;
  --surface: var(--dark-grey);
  --surface-alt: #2C2C2C;
  --surface-raised: #454545;
  --surface-brand: var(--haier-blue);
  --surface-dark: var(--dark-grey);
  --ink: var(--beige-1);
  --ink-muted: var(--beige-4);
  --on-brand: #FFFFFF;
  --on-dark: #FFFFFF;
  --action: var(--gold-1);
  --action-hover: #E3C9AD;
  --on-action: var(--black);
  --action-soft: #4A3B2A;
  --accent: var(--gold-2);
  --on-accent: var(--black);
  --line: #595959;
  --line-strong: var(--gray-3);
  --danger: #FF9A8F;
  --heading: var(--gold-1);
  --logo-ink: var(--white);
  --feature: var(--black);
  --on-feature: var(--white);
  --feature-accent: var(--gold-1);
  --band-a: var(--gold-4);
  --band-b: var(--gold-3);
  --band-c: var(--gold-2);
  --art-slab: var(--gold-1);
  --art-chip: var(--beige-1);
  --focus-ring: 0 0 0 2px #3a3a3a, 0 0 0 4px #d0ad8d;
}
:root {
  --space-1: 4px; /* Icon-to-label gap. */
  --space-2: 8px; /* Inside tags and compact controls. */
  --space-3: 12px; /* Between related rows. */
  --space-4: 16px; /* Card padding, page gutter on phones. */
  --space-5: 24px; /* Between grouped elements. */
  --space-6: 32px; /* Between sections; slide side margin. */
  --space-7: 48px; /* Section padding. */
  --space-8: 64px; /* Large section breaks. */
  --space-9: 96px; /* Cover and hero bands. */
}
:root {
  --radius-sm: 4px; /* Buttons, inputs, tags. */
  --radius-md: 8px; /* Cards, media wells and icon tiles. */
  --radius-lg: 16px; /* Large panels. */
  --radius-pill: 999px; /* Status dots only. */
}
:root {
}
:root {
  --logo-letter-height: 300mm; /* Illuminated LOGO on the primary fascia: front-lit resin letters with brushed silver metal edging, 300 mm letter height. */
  --slogan-letter-height: 60mm; /* Product category marketing slogan: deep grey acrylic engraved lettering, 60 mm letter height. */
  --selling-icon-height: 120mm; /* Selling point icon (freezer/wine walls): 3 mm porcelain-white acrylic or crystal-effect graphic film, 120 mm high. */
  --fascia-shadow-gap: 5mm; /* Continuous shadow gap reserved between the primary and secondary fascia as a craftsmanship joint. */
  --plinth-light-temp: 4500K; /* Colour temperature of the illuminated lower edge of the dark-grey plinth on wall and stand modules. */
  --plinth-light-temp-fz: 6000K; /* Colour temperature of the illuminated plinth lower edge in the FZ platform-base detail drawing. */
  --screen-size-large: 50-55in; /* Recommended screen module on WM and RF wall modules (50-55 inch display). */
  --screen-size-compact: 43.8in; /* Recommended screen module on WH and CAC wall modules (43.8 inch display). */
}
:root {
  --font-sans: "Montserrat", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: 700 64px/72px var(--font-sans); /* Hero numbers and cover titles. One per view. */
  --text-headline: 700 40px/52px var(--font-sans); /* Page and section headlines. */
  --text-title: 700 28px/40px var(--font-sans); /* Card titles, panel headings, guide-style page titles. */
  --text-subtitle: 500 20px/32px var(--font-sans); /* Lead-in lines under a headline. */
  --text-slogan: 700 20px/28px var(--font-sans); /* Category marketing slogans under the logo. Use the guide's exact string; never reword. */
  --text-body-lg: 400 18px/30px var(--font-sans); /* Intro paragraphs. */
  --text-body: 400 16px/28px var(--font-sans); /* Default running text. */
  --text-body-sm: 400 14px/24px var(--font-sans); /* Dense tables, card descriptions. */
  --text-label: 600 14px/20px var(--font-sans); /* Buttons, nav items, form labels, tags. */
  --text-caption: 500 12px/18px var(--font-sans); /* Footnotes and metadata. */
  --text-slide-title: 700 48px/58px var(--font-sans); /* One title per slide, in `heading` on `surface` and `on-feature` on `feature`. */
  --text-slide-subtitle: 500 28px/38px var(--font-sans); /* Line under the slide title. */
  --text-slide-body: 400 24px/36px var(--font-sans); /* Slide body text and lists; keep to eight lines. */
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-latin-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Thai";
  src: url("fonts/NotoSansThai-thai-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}