/* ==========================================================================
   MASTER COLOR PALETTE - CAO THIÊN PHÁT (M3 x XIAOMI SYSTEM)
   ========================================================================== */
:root {
  /* 1. M3 CORE COLORS */
  --md-sys-color-primary: #3877F5;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-gradient: linear-gradient(79deg, #00c0fa -15.26%, #015eea 110.25%);
  --md-sys-color-primary-gradient-hover: linear-gradient(90deg, #14c8ff 0%, #1c76ff 100%);

  --md-sys-color-primary-container: #ebf1fe;
  --md-sys-color-on-primary-container: #3877F5;

  --md-sys-color-secondary: #849cbc;

  /* 2. SURFACES & BACKGROUNDS (Hệ màu Xám/Trắng siêu sạch) */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #253746;

  --md-sys-color-surface-container: #f5f5f7;
  --md-sys-color-surface-container-high: #f2f3f5;

  --md-sys-color-outline: #eef1f5;
  --md-sys-color-outline-variant: #e8e8e8;

  /* 3. SEMANTIC COLORS (Đồng bộ theo hệ thống Tag) */
  --md-sys-color-error: #fa1406;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: rgba(250, 20, 6, .1);
  --md-sys-color-on-error-container: #fa1406;

  --md-sys-color-success: #50c050;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #f2fbf2;
  --md-sys-color-on-success-container: #50c050;

  --md-sys-color-warning: #e40046;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #e4004610;
  --md-sys-color-on-warning-container: #e40046;
  --md-sys-color-warning-gradient: linear-gradient(90deg, #e40046 0%, #b90039 100%);

  /* 4. BRAND COLORS */
  --zalo-color: #0068ff;
  --on-zalo-color: #ffffff;
  --zalo-color-30: #0066ff30;
  --zalo-shadow-color: #0066ff0f;

  /* 5. SHAPE & SPACING */
  --md-sys-shape-corner-xs: 4px;
  --md-sys-shape-corner-sm: 8px;
  --md-sys-shape-corner-md: 12px;
  --md-sys-shape-corner-lg: 16px;
  --md-sys-shape-corner-full: 100px;

  /* 6. ELEVATION */
  --md-sys-elevation-level-0: none;
  --md-sys-elevation-level-1: 0px 0px 1px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level-2: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.30);
  --md-sys-elevation-level-3: 0px 2px 4px 1px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.30);

  /* 7. TRANSITIONS & FOCUS (Chuẩn tương tác) */
  --md-sys-motion-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-duration-short: 200ms;

  --md-sys-outline-width: 2px;
  --md-sys-outline-offset: -2px;
}

/* ==========================================================================
   TYPOGRAPHY TOKENS & RESET
   ========================================================================== */
:root {
  --md-sys-font-brand: 'MiSans Latin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --md-sys-typescale-display-large: 400 57px/64px var(--md-sys-font-brand);
  --md-sys-typescale-display-medium: 400 45px/52px var(--md-sys-font-brand);
  --md-sys-typescale-display-small: 400 36px/44px var(--md-sys-font-brand);

  --md-sys-typescale-headline-large: 400 32px/40px var(--md-sys-font-brand);
  --md-sys-typescale-headline-medium: 500 28px/36px var(--md-sys-font-brand);
  --md-sys-typescale-headline-small: 500 24px/32px var(--md-sys-font-brand);

  --md-sys-typescale-title-large: 500 22px/28px var(--md-sys-font-brand);
  --md-sys-typescale-title-medium: 500 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-title-small: 500 14px/20px var(--md-sys-font-brand);

  --md-sys-typescale-body-large: 400 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-body-medium: 400 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-body-small: 400 12px/16px var(--md-sys-font-brand);

  --md-sys-typescale-label-large: 500 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-label-medium: 500 12px/16px var(--md-sys-font-brand);
  --md-sys-typescale-label-small: 500 11px/16px var(--md-sys-font-brand);

  --md-sys-typescale-price-large: 700 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-price-medium: 700 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-price-small: 700 12px/16px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-large: 500 16px/24px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-medium: 500 14px/20px var(--md-sys-font-brand);
  --md-sys-typescale-price-del-small: 500 12px/16px var(--md-sys-font-brand);
}