/* =========================================================================
   TKT PUMPS · DESIGN TOKENS · v2.1 (đồng bộ từ "TKT Design System 2.0" — Claude Design)
   Màu chủ đạo snap về Brand Guideline 2024 (đo logo live, duyệt 2026-10-02):
   Cobalt #004F9F (C100 M70 Y0 K0) · Tangerine #EF7D00 (C0 M60 Y100 K0).
   Drop-in thay cho frontend/brand-guideline/tkt-design-system/tokens.css.
   GIỮ NGUYÊN TÊN BIẾN của repo v2.0 → không vỡ components.css / base.css / overrides.
   Chỉ đổi GIÁ TRỊ + thêm một số token mới (đánh dấu NEW).
   Giá trị cũ ghi trong comment "was" để rollback.
   ========================================================================= */

:root {
  /* 1. BRAND · BLUE (60%) */
  --tkt-blue-900: #052651;   /* was #001A3D · footer, nền đậm */
  --tkt-blue-800: #073670;   /* was #002B5C · gradient hero */
  --tkt-blue-700: #083B7C;   /* was #003E80 · khối đậm */
  --tkt-blue-600: #004F9F;   /* was #005090 · PRIMARY = Cobalt brand 2024 (logo). Bản design: #0B4EA2, ΔE 1,05 */
  --tkt-blue-500: #1B6CCB;   /* was #1A6FB8 · nội suy 600↔400 (DS 2.0 không định nghĩa) */
  --tkt-blue-400: #2B86E6;   /* was #2D8DE0 · gradient sáng */
  --tkt-blue-300: #8FB8EB;   /* was #5BAEF5 */
  --tkt-blue-200: #C9DAF0;   /* was #A8D2F7 · chữ trên nền đậm */
  --tkt-blue-100: #DCE6F2;   /* was #DDEBFA */
  --tkt-blue-050: #EEF4FC;   /* was #F0F6FD · hover, tag */

  /* 2. BRAND · ORANGE (≤10% — CTA, giá, điểm nhấn) */
  --tkt-orange-900: #8F4400; /* was #8C3D00 · 7,0:1 trên trắng */
  --tkt-orange-700: #B05400; /* was #B85800 · chữ cam trên nền sáng — 5,1:1 trắng / 4,7:1 Mist (bản design #C45C00 trượt AA) */
  --tkt-orange-600: #D66F00; /* was #E07000 · hover/gradient đậm, cùng sắc #EF7D00 */
  --tkt-orange-500: #EF7D00; /* was #FF8C1F · CORE accent = Tangerine brand 2024 (logo). Chữ trên nền cam: --fg-1 (5,7:1). CẤM chữ trắng (2,8:1) */
  --tkt-orange-400: #F5983A; /* was #FFA040 */
  --tkt-orange-300: #FFB255; /* NEW · chữ cam trên nền đậm — chỉ trên blue-800/900 (≥ 7:1) hoặc chữ ≥ 24px */
  --tkt-orange-200: #FFCD99;
  --tkt-orange-100: #FFE3C2;
  --tkt-orange-050: #FFF2E4; /* was #FFF3E6 */

  /* 3. SEMANTIC */
  --semantic-success:      #167A41; /* was #1F8A5B · chữ */
  --semantic-success-dot:  #22B35E; /* NEW · chấm tồn kho, online */
  --semantic-success-bg:   #E8F7EE;
  --semantic-warn:         var(--tkt-orange-900); /* was #B45309 · "Chỉ còn 1" */
  --semantic-warn-bg:      #FFF2E4;
  --semantic-danger:       #B42323; /* was #B83447 */
  --semantic-danger-line:  #D93F3F; /* NEW · viền field lỗi */
  --semantic-danger-bg:    #FDECEC;
  --semantic-info:         var(--tkt-blue-600);
  --semantic-info-bg:      var(--tkt-blue-050);

  /* 4. SURFACE */
  --bg-canvas: #F2F6FB;      /* was #F4F7FB · Mist */
  --bg-tint:   #EAF1FA;      /* was #EAF1F9 */
  --bg-pure:   #FFFFFF;
  --bg-elev:   #F7FAFD;      /* was #FAFCFE · nền ô thông số, footer thẻ */
  --bg-media:  #F5F7FA;      /* NEW · nền khung ảnh sản phẩm */
  --bg-dark:   #052651;      /* was #001A3D */

  /* 5. FOREGROUND · INK (solid, không dùng rgba để giữ contrast khi chồng lớp) */
  --fg-1: #0A2346;           /* was #0A1A33 · Ink */
  --fg-2: #2A4268;           /* was rgba(...,.74) · Ink 700 */
  --fg-3: #4A5D78;           /* was rgba(...,.54) · body dài */
  --fg-caption: #56677F;     /* NEW · caption, nhãn — vẫn đạt 4.5:1 trên trắng */
  --fg-4: #8E9BB0;           /* was rgba(...,.36) · disabled */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: #C9DAF0;   /* was rgba(255,255,255,.78) */
  --fg-on-dark-3: #8FA9CC;
  --fg-on-dark-4: rgba(255,255,255,.36);

  /* 6. LINE (NEW) */
  --line:      #DCE4EE;      /* viền field, divider */
  --line-soft: #EEF2F7;      /* divider trong thẻ */
  --line-input:#D4DDE8;      /* viền chip/nút trắng */

  /* 7. GLASS — chỉ lớp nổi: header, ô tìm hero, dock, thanh lệnh sticky */
  --glass-fill:        rgba(255,255,255,0.62);
  --glass-fill-hi:     rgba(255,255,255,0.82);
  --glass-fill-tint:   rgba(220,235,250,0.55);
  --glass-stroke:      rgba(255,255,255,0.90);
  --glass-stroke-edge: rgba(0,79,159,0.08);
  --glass-spec:        rgba(255,255,255,0.95);
  --glass-blur:        24px;     /* was 28px */
  --glass-sat:         180%;
  --glass-dark-fill:   rgba(255,255,255,0.08);
  --glass-dark-stroke: rgba(255,255,255,0.18);

  /* 8. TYPOGRAPHY — giữ nguyên scale repo; font production = SVN-AGG self-host.
     (Bản Claude Design dùng TeXGyreAdventor chỉ làm font xem trước.) */
  --font-display: "SVN-Avant Garde Gothic", "Jost", system-ui, sans-serif;
  --font-body:    "SVN-Avant Garde Gothic", "Jost", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --t-display-1: 128px; --t-display-2: 96px; --t-title-1: 72px; --t-title-2: 56px; --t-title-3: 40px;
  --t-heading-1: 28px;  --t-heading-2: 22px; --t-heading-3: 18px;
  --t-body-lg: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --t-eyebrow: 12px; /* was 11px */
  --t-mono: 13px; --t-micro: 10px;
  --w-light: 300; --w-book: 400; --w-medium: 500; --w-demi: 600; --w-bold: 700;
  --ls-display: -0.02em; --ls-title: -0.015em; --ls-heading: -0.01em; --ls-body: 0;
  --ls-eyebrow: 0.2em;       /* was .22em */
  --ls-mono: 0.01em;

  /* 9. SPACING · 4pt — không đổi */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;

  /* 10. RADIUS — không đổi; bản design có 14/18px → snap về 12/16/20 khi port */
  --r-2: 2px; --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-20: 20px;
  --r-24: 24px; --r-28: 28px; --r-32: 32px; --r-40: 40px; /* NEW · thẻ trưng bày hero */
  --r-pill: 999px;

  /* 11. ELEVATION */
  --elev-0: none;
  --elev-1: 0 0 0 1px var(--line);                                   /* NEW nghĩa: viền-bóng cho tile */
  --elev-2: 0 4px 12px -6px rgba(10,35,70,.30);
  --elev-3: 0 20px 40px -32px rgba(0,79,159,.50);                   /* tile / panel nổi trên Mist */
  --elev-4: 0 24px 48px -20px rgba(0,79,159,.50);                   /* dock, popover */
  --elev-5: 0 40px 80px -40px rgba(10,35,70,.50);                    /* modal, sheet */
  --elev-glass:    0 16px 32px -16px rgba(10,35,70,.30), inset 0 1px 0 rgba(255,255,255,.95);
  --elev-glass-hi: 0 24px 48px -28px rgba(0,79,159,.55), inset 0 1px 0 rgba(255,255,255,.95);
  --elev-showcase: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 10px rgba(255,255,255,.05), 0 60px 100px -40px rgba(0,0,0,.65); /* NEW */
  --elev-cta:       0 8px 20px rgba(214,111,0,.32), inset 0 1px 0 rgba(255,255,255,.45);
  --elev-cta-hover: 0 14px 30px rgba(214,111,0,.44), inset 0 1px 0 rgba(255,255,255,.55);

  /* 12. MOTION */
  --ease-out:    cubic-bezier(0.22, 0.8, 0.2, 1);  /* was (.22,1,.36,1) */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; --dur-5: 720ms;
  --dur-fill: 800ms;        /* NEW · hiệu ứng lấp đầy nút từ đáy */
  --ease-fill: cubic-bezier(0.33, 1, 0.68, 1); /* NEW · easing lấp màu nút (DS 2.1 Thư viện thành phần) */
  --tilt-max: 9deg;         /* NEW · nghiêng ảnh hero theo con trỏ — tối đa */

  /* 13. LAYOUT — không đổi, thêm sidebar danh mục */
  --container-max: 1440px; --container-pad-desktop: 48px; --container-pad-tablet: 32px; --container-pad-mobile: 20px;
  --content-max: 1320px;    /* NEW · trang danh mục / chiến dịch */
  --sidebar-w: 284px;       /* NEW · cột "Tìm đúng bơm" */
  --grid-cols: 12; --grid-gap-desktop: 32px; --grid-gap-mobile: 16px;
  --h-nav: 72px; --h-nav-pill: 64px; --h-util: 38px;
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; --z-tooltip: 3000;

  /* 14. LEGACY ALIAS — tkt-global.css (theme cha) & trang giải pháp. Xoá khi đã thay hết. */
  --tkt-cobalt:     var(--tkt-blue-600);
  --tkt-navy-deep:  var(--tkt-blue-900);
  --tkt-industrial: var(--tkt-blue-800);
  --tkt-steel-blue: var(--tkt-blue-500);
  --tkt-tangerine:  var(--tkt-orange-500);
  --tkt-tech-gray:  var(--bg-canvas);
  --tkt-smoke:      var(--fg-caption);
  --tkt-charcoal:   var(--fg-1);
  --tkt-teal:       var(--semantic-success);
}