:root {
  /* Brand */
  --color-brand-primary: #dd3333;
  --color-brand-primary-hover: #c12424;
  --color-brand-primary-active: #a51d1d;
  --color-brand-secondary: #0b2f73;
  --color-brand-secondary-hover: #082255;
  --color-brand-surface: #fef1f1;


  /* Text — đều đạt AA+ trên nền trắng */
  --color-text-primary: #111111;   /* 19.8:1 AAA */
  --color-text-body: #1f2937;      /* 14.7:1 AAA */
  --color-text-muted: #4b5563;     /* 7.6:1  AAA */
  --color-text-subtle: #6b7280;    /* 5.1:1  AA  */
  --color-text-inverse: #ffffff;
  --color-text-accent: #c12424;    /* chỉ cho link / discount */

  /* Surface */
  --color-surface-base: #ffffff;
  --color-surface-raised: #f9fafb;
  --color-surface-sunken: #f2f4f7;
  --color-surface-inverse: #0f172a;

  /* Border */
  --color-border-subtle: #e5e7eb;
  --color-border-default: #d1d5db;
  --color-border-strong: #9ca3af;
  --color-border-brand: #dd3333;

  /* Status */
  --color-status-success: #16a34a;
  --color-status-success-bg: #dcfce7;
  --color-status-success-text: #166534;
  --color-status-warning: #d97706;
  --color-status-warning-bg: #fef3c7;
  --color-status-error: #dc2626;
  --color-status-error-bg: #fee2e2;
  --color-status-error-text: #991b1b;
  --color-status-info: #2563eb;
  --color-status-info-bg: #eff6ff;

  /* Savings / Greentech (USP) */
  --color-savings: #047857;
  --color-savings-bg: #d1fae5;
  --color-greentech: #047857;
  --color-greentech-bg: #ecfdf5;

  /* CMYK (cho swatch mực màu) */
  --color-cyan: #00bcd4;
  --color-magenta: #e91e63;
  --color-yellow: #ffeb3b;
  --color-key-black: #1f2937;

  --color-star: #facc15;
  --color-focus-ring: #2563eb;

  /* Spacing 4pt */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;

  /* Radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-pill: 999px;

  /* Shadow (neutral, không nhuộm đỏ) */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm: 0 2px 4px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 8px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.06);
  --shadow-lg: 0 12px 24px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);
  --shadow-brand: 0 4px 12px rgba(221,51,51,0.18);

  /* Motion */
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index thang chuẩn */
  --z-header: 100;
  --z-tabnav: 50;
  --z-compare-tray: 90;
  --z-filter-drawer: 200;
  --z-backdrop: 150;
  --z-toast: 9999;

  /* Layout */
  --container-max: 1280px;
  --header-height: 72px;

  /* Fluid typography: clamp(min_mobile, preferred, max_desktop) */
  --fs-h1: clamp(1.375rem, 1.05rem + 1.6vw, 1.875rem);  /* 22px → 30px */
  --fs-h2: clamp(1.25rem, 1.1rem + 0.9vw, 1.5rem);       /* 20px → 24px */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.5vw, 1.25rem);    /* 18px → 20px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-md: 1.0625rem;  /* 17px */
  --fs-base: 1rem;     /* 16px — body */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-xs: 0.75rem;    /* 12px */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --font-heading: 'Be Vietnam Pro', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-numeric: 'Inter', 'SF Mono', ui-monospace, monospace;
}