/* Haier design system — tokens. Light (Blue) is default; set data-theme="dark" for Dark (Gold). */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --font-sans: "Effra", "Thonburi", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-thai: "Thonburi", "Noto Sans Thai", "Effra", sans-serif;
}
:root, [data-theme="light"] {
  --haier-blue: #005aaa;
  --innovation-blue: #32beff;
  --intelligent-blue-start: #33a6de;
  --intelligent-blue-mid: #2862ae;
  --intelligent-blue-end: #232d67;
  --beige-1: #fffaf2;
  --beige-2: #faf1e1;
  --beige-3: #eadfcc;
  --beige-4: #d1c5b0;
  --gray-1: #fafafa;
  --gray-2: #ededed;
  --gray-3: #c1c1c1;
  --gray-4: #6f6f6f;
  --black: #000000;
  --white: #ffffff;
  --gold-100: #f5e7c4;
  --gold-200: #e2c486;
  --gold-300: #c9a45c;
  --gold-400: #9c7a3c;
  --gold-900: #15120d;
  --surface-page: var(--beige-1);
  --surface-card: var(--white);
  --surface-sunken: var(--beige-2);
  --surface-stage: var(--gray-1);
  --border: var(--gray-3);
  --border-strong: var(--gray-4);
  --ink: var(--black);
  --ink-muted: var(--gray-4);
  --ink-link: var(--haier-blue);
  --action: var(--haier-blue);
  --action-hover: #004a8c;
  --on-action: var(--white);
  --accent: var(--innovation-blue);
  --on-accent: var(--black);
  --focus-ring: var(--haier-blue);
  --success: #1e7a46;
  --warning: #9a5b00;
  --danger: #c0261f;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-overlay: 0 8px 32px rgba(0,0,0,0.16);
}
[data-theme="dark"] {
  --haier-blue: #005aaa;
  --innovation-blue: #32beff;
  --intelligent-blue-start: #33a6de;
  --intelligent-blue-mid: #2862ae;
  --intelligent-blue-end: #232d67;
  --beige-1: #fffaf2;
  --beige-2: #faf1e1;
  --beige-3: #eadfcc;
  --beige-4: #d1c5b0;
  --gray-1: #fafafa;
  --gray-2: #ededed;
  --gray-3: #c1c1c1;
  --gray-4: #6f6f6f;
  --black: #000000;
  --white: #ffffff;
  --gold-100: #f5e7c4;
  --gold-200: #e2c486;
  --gold-300: #c9a45c;
  --gold-400: #9c7a3c;
  --gold-900: #15120d;
  --surface-page: var(--gold-900);
  --surface-card: #201b14;
  --surface-sunken: #0c0a07;
  --surface-stage: #2a241a;
  --border: #4a3f2c;
  --border-strong: var(--gold-400);
  --ink: var(--beige-1);
  --ink-muted: var(--beige-4);
  --ink-link: var(--gold-200);
  --action: var(--gold-300);
  --action-hover: var(--gold-200);
  --on-action: var(--gold-900);
  --accent: var(--gold-100);
  --on-accent: var(--black);
  --focus-ring: var(--gold-200);
  --success: #7fd3a0;
  --warning: #f2b451;
  --danger: #ff8a7f;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,164,92,0.18);
  --shadow-overlay: 0 12px 40px rgba(0,0,0,0.7);
}
body { background: var(--surface-page); color: var(--ink); font-family: var(--font-sans); }

/* Type styles */
.display { font-family: var(--font-sans); font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -0.5px; }
.display-light { font-family: var(--font-sans); font-size: 48px; line-height: 60px; font-weight: 300; }
.h1 { font-family: var(--font-sans); font-size: 32px; line-height: 44px; font-weight: 700; }
.h2 { font-family: var(--font-sans); font-size: 24px; line-height: 34px; font-weight: 700; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 500; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 400; }
.thai-heading { font-family: var(--font-thai); font-size: 24px; line-height: 36px; font-weight: 700; }
.thai-body { font-family: var(--font-thai); font-size: 16px; line-height: 28px; font-weight: 400; }