:root {
  --navy-900: #0A1A33; --navy-800: #0E2242; --navy-700: #132E58;
  --navy-600: #1A3A6E; --navy-500: #22488A; --navy-400: #3560A6;
  --navy-300: #6E8FC4; --navy-200: #AFC2E0; --navy-100: #DCE5F2; --navy-50: #F1F5FB;
  --color-primary: var(--navy-600); --color-primary-hover: var(--navy-700);
  --color-primary-active: var(--navy-800); --color-primary-soft: var(--navy-100); --color-primary-tint: var(--navy-50);
  --color-bg: #F7F8FA; --color-surface: #FFFFFF; --color-surface-2: #F1F5FB;
  --color-text: #14181F; --color-text-muted: #5A6472; --color-border: #E3E7EE; --color-border-strong: #CBD3E0;
  --color-success: #0F7A44; --color-success-soft: #E6F4EC; --color-warning: #8A5200; --color-warning-soft: #FDF3E3;
  --color-danger: #C02626; --color-danger-soft: #FBEAEA; --color-accent: #C8952A;
  --brand-shopee: #EE4D2D; --brand-lazada: #0F146D; --brand-tiktokshop: #010101;
  --color-accent-ink: var(--navy-900); --color-accent-soft: #FFF8E8; --color-focus: #22488A;
  --font-sans: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); --fs-h1: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --fs-h3: 1.125rem; --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem;
  --fs-price: clamp(1.25rem, 1.1rem + .8vw, 1.75rem);
  --fs-hero: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(10,26,51,.06); --shadow-md: 0 2px 8px rgba(10,26,51,.08); --shadow-lg: 0 8px 24px rgba(10,26,51,.12);
  --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(.2,.7,.3,1); --container-max: 1280px;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* G1.2 additions — design lock §6.2 */
:root {
  --gutter: 16px; --header-h: 56px; --nav-h: 44px;
  --card-radius: var(--radius-md);
  --img-ratio-product: 1 / 1; --img-ratio-category: 4 / 3; --img-ratio-article: 16 / 9;
  /* Stacking scale (G-corrective): one ladder for the whole storefront. Every z-index in
     site.css references a token from this list — no bare numbers, no 9999 escape hatches.
     Rungs are spaced so a layer can be slipped between two of them without a rewrite. */
  --z-base: 0;        /* normal page flow: cards, grids, sidebars — must stay at auto/0  */
  --z-sticky: 20;     /* sticky catalog controls that ride over page content only        */
  --z-header: 100;    /* sticky site header + primary nav (own stacking context)         */
  --z-dropdown: 200;  /* mega-menu / nav dropdowns — resolved inside the header context  */
  --z-overlay: 290;   /* full-bleed scrim behind a drawer or sheet                       */
  --z-drawer: 300;    /* mobile drawer and the filter bottom sheet                       */
  --z-modal: 400;     /* reserved: dialogs, and anything that must beat the drawer       */
  /* Chatbot rungs. The launcher rides above sticky catalog/cart controls but stays under
     the scrim so the mobile nav drawer covers it; the open panel is a dialog, so it sits
     on the modal rung and beats the header, its dropdowns and the drawer. */
  --z-chat-launcher: 250;
  --z-chat-panel: var(--z-modal);
  --lh-tight: 1.25; --lh-body: 1.55;
  --content-narrow: 800px;
  --color-overlay: rgba(10, 26, 51, .55);
}
@media (min-width: 768px)  { :root { --gutter: 24px; --header-h: 64px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }