andercore___style_reference:
  info: "> Steel blueprint at midnight"

  theme: "dark"

  info: "Andercore vận hành trên ngôn ngữ công nghiệp chiaroscuro: canvas gần như đen (#0b0405) với chữ trắng sắc nét, góc vuông 4px, và một màu đỏ duy nhất được phân bổ có kiểm soát (#e32735) làm tất cả công việc kể chuyện. Trang web xen kẽ giữa một dải navigation sáng và các section tối full-bleed, nơi đường viền (1px, #382e30) định nghĩa cấu trúc thay vì shadow hay độ cao. Archivo mang độ chính xác hình học ở mọi kích cỡ với tracking -0.02em chặt chẽ, trong khi Space Mono ở 12px đóng dấu nhãn kiểu dụng cụ công nghiệp lên badge và step counter. Màu đỏ không bao giờ trang trí — nó kích hoạt, đánh dấu hành động chính duy nhất, gạch chân step đang hoạt động, và các kết nối UI quan trọng. Toàn bộ hệ thống mang cảm giác như một phòng điều khiển: dày đặc, có chủ đích, và được thắp sáng bởi một đèn báo duy nhất."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Signal Red | `#e32735` | `--color-signal-red` | Màu hành động đỏ cho filled button, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung |"
    info: "| Carbon | `#0b0405` | `--color-carbon` | Nền section chính, canvas tối full-bleed, secondary button fill |"
    info: "| Graphite | `#150e0f` | `--color-graphite` | Bề mặt gần đen thay thế cho card và panel nâng cao trên section tối |"
    info: "| Steel | `#382e30` | `--color-steel` | Hairline border trên nền tối, cạnh card, đường chia bảng, đường viền UI mockup |"
    info: "| Slate | `#858182` | `--color-slate` | Secondary text, badge border, badge label, helper copy mờ |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Primary text trên nền tối, nav và hero overlay type, inverted button text, nền section sáng |"
    info: "| Foil | `#000000` | `--color-foil` | SVG icon fill, chi tiết vector trang trí |"

  tokens___typography:

    archivo___tất_cả_interface_type___headline_40_56px__weight_500__subhead_24px__weight_500__body_và_ui_14_16px__weight_400__nav_link_12_14px__geometric_grotesque_với_tracking__0_02em_chặt_chẽ_mang_lại_độ_chính_xác_công_nghiệp__weight_500_không_phải_700_cho_display_type_giữ_hệ_thống_kiềm_chế_thay_vì_ồn_ào_____font_archivo:
      - "**Thay thế:** Inter, DM Sans, Geist"
      - "**Weights:** 400, 500"
      - "**Kích cỡ:** 12, 14, 16, 24, 40, 56"
      - "**Line height:** 1.10–1.50"
      - "**Letter spacing:** -0.02em ở mọi kích cỡ"
      - "**Vai trò:** Tất cả interface type — headline (40/56px, weight 500), subhead (24px, weight 500), body và UI (14/16px, weight 400), nav link (12/14px). Geometric grotesque với tracking -0.02em chặt chẽ mang lại độ chính xác công nghiệp; weight 500 (không phải 700) cho display type giữ hệ thống kiềm chế thay vì ồn ào."

    space_mono___badge_label__step_counter__01___02___03__industrial_tag_stamp___monospace_face_báo_hiệu_độ_chính_xác_của_thiết_bị_đo_và_số_serial__tương_phản_với_hình_học_tỷ_lệ_của_archivo____font_space_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Roboto Mono"
      - "**Weights:** 400"
      - "**Kích cỡ:** 12"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Badge label, step counter ('01', '02', '03'), industrial tag stamp — monospace face báo hiệu độ chính xác của thiết bị đo và số serial, tương phản với hình học tỷ lệ của Archivo"

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.32px | `--text-body` |"
      info: "| subheading | 24px | 1.2 | -0.48px | `--text-subheading` |"
      info: "| heading | 40px | 1.2 | -0.8px | `--text-heading` |"
      info: "| display | 56px | 1.1 | -1.12px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 4px |"
      info: "| badges | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 32px"
      - "**Element gap:** 24px"

  components:

    primary_cta_button_red_filled:
      vai_trò: "Hành động ưu tiên cao duy nhất trên bất kỳ bề mặt nào"

      info: "Filled Signal Red (#e32735), chữ trắng ở 14px Archivo weight 500, padding 12px 24px, radius 4px. Không shadow, không gradient. Hình chữ nhật không viền nằm phẳng trên canvas tối."

    ghost_dark_button:
      vai_trò: "Hành động phụ khi có primary red CTA"

      info: "Dark fill (#0b0405 hoặc #150e0f), border 1px #382e30, chữ trắng ở 14px Archivo weight 500, padding 12px 24px, radius 4px. Đối tác yên tĩnh về mặt thị giác bên cạnh red CTA."

    navigation_header:
      vai_trò: "Navigation cấp cao nhất và xác thực"

      info: "Nền trắng (#ffffff), nav link Archivo 14px chữ tối, logo bên trái (wordmark 'ANDERCORE'), utility link và CTA bên phải. Thanh cố định mỏng, không shadow, tách biệt khỏi section tối bên dưới bằng sự thay đổi nền chứ không phải border."

    industrial_badge___tag:
      vai_trò: "Nhãn danh mục, section eyebrow, tem trạng thái"

      info: "Border 1px #858182, text Space Mono 12px #858182, padding 8px 12px, radius 4px. Fill trong suốt để nó đọc như một nhãn dụng cụ được viền, không phải chip được tô màu."

    step_progress_indicator:
      vai_trò: "Điều hướng quy trình nhiều bước (Request → Quote → Track'n'Trace)"

      info: "Hàng ngang các step label bằng Archivo 14px. Step đang hoạt động: chữ đỏ (#e32735) với thanh gạch chân đỏ 2px. Step không hoạt động: chữ #858182, không gạch chân. Số step ('01', '02', '03') bằng Space Mono 12px căn phải."

    feature_card_with_ui_mockup:
      vai_trò: "Hiển thị challenge/solution ba cột"

      info: "Card tối trên canvas #0b0405, không border hoặc border 1px #382e30, padding 32px. Chứa một UI mockup nhỏ (mini browser/panel) trong màu tối nhạt hơn (#150e0f hoặc #1a1213) với icon/dot accent đỏ #e32735. Heading bằng Archivo 24px trắng, body bằng 14px #858182."

    dark_content_section:
      vai_trò: "Khối nội dung chính sau hero"

      info: "Nền full-bleed #0b0405, vertical padding 80px, max-width 1200px căn giữa. White Archivo heading ở 40px, body mờ #858182 ở 16px. Section eyebrow qua Space Mono badge phía trên heading."

    chat_interface_card:
      vai_trò: "Trực quan hóa product walkthrough"

      info: "Panel hiển thị bong bóng hội thoại trên nền tối nhạt hơn (#1a1213 ngụ ý). User bubble: fill #382e30 với chữ trắng. Assistant bubble: viền hoặc fill nhạt hơn. Avatar Andercore 'A' mark trong Signal Red. Nằm cạnh ảnh full-bleed của người dùng bên phải."

    hero_with_photographic_overlay:
      vai_trò: "Tuyên bố thương hiệu above-the-fold"

      info: "Ảnh full-bleed (chủ đề xe tải/công nghiệp) với dark gradient overlay, display headline 56px Archivo weight 500 trắng, line-height 1.10, tracking -1.12px. Body subtext 16px chữ trắng mờ. Primary red CTA + ghost dark button nội dòng bên dưới."

    connector_line___accent_divider:
      vai_trò: "Luồng thị giác giữa các card hoặc section"

      info: "Đường 1px #382e30 với các node vuông nhỏ (#ffffff) tại điểm nối. Thỉnh thoảng kết thúc bằng node vuông đỏ #e32735 hoặc Andercore 'A' mark. Kết nối ba card challenge theo chiều dọc thành một hệ thống duy nhất."

    eyebrow___section_label:
      vai_trò: "Nhãn chữ hoa nhỏ hoặc tracked phía trên heading section"

      info: "Space Mono 12px hoặc Archivo 12px weight 500, viết hoa toàn bộ khi dùng, màu #858182, đôi khi kết hợp với accent gạch chân đỏ 1px #e32735."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng Signal Red #e32735 cho hành động chính duy nhất trên mỗi bề mặt — không bao giờ dùng làm fill trang trí hay nền"
      - "Đặt tất cả góc thành radius 4px — không ngoại lệ, không pill shape, không cạnh cứng radius 0"
      - "Phân cách section tối với vertical padding 80px và dựa vào sự thay đổi giá trị nền thay vì divider hay shadow"
      - "Dùng Archivo 500 (không phải 700) cho heading 40px trở lên để giữ trọng lượng kiềm chế và nhất quán"
      - "Áp dụng letter-spacing -0.02em cho tất cả Archivo type ở mọi kích cỡ để có mật độ công nghiệp chặt chẽ"
      - "Đóng dấu số step, mã serial và nhãn kỹ thuật bằng Space Mono 12px — không bao giờ dùng Archivo cho những thứ này"
      - "Định nghĩa cạnh card và panel bằng border 1px #382e30 trên nền tối, không bao giờ dùng box-shadow hay sự thay đổi tint nền"

    don_t:
      - "Đừng thêm drop shadow, glow, hay elevation dựa trên blur — cấu trúc chỉ dựa trên đường kẻ"
      - "Đừng dùng #e32735 cho body text, icon, hay secondary UI — nó là màu hành động, được phân bổ có kiểm soát"
      - "Đừng bo góc quá 4px — không có radius 8px, 12px, 16px, hay pill ở bất kỳ đâu"
      - "Đừng đặt heading ở bold (700+); weight 500 Archivo ở 40–56px là giọng nói tối đa"
      - "Đừng xen kẽ section sáng và tối trong cùng một luồng nội dung — trang chủ yếu là tối sau hero"
      - "Đừng dùng Archivo cho numeric step counter, product code, hay instrumentation label — đó là lãnh thổ của Space Mono"
      - "Đừng thêm gradient fill vào button hay card — gradient duy nhất trong hệ thống (trắng→đỏ) được dành riêng cho quá trình chuyển tiếp hero-to-content"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas — Light | `#ffffff` | Navigation bar, dải sáng xen kẽ |"
    info: "| 1 | Canvas — Dark | `#0b0405` | Nền section nội dung chính, dải tối full-bleed |"
    info: "| 2 | Card Surface | `#150e0f` | Panel nâng cao và feature card trên section tối |"

  elevation:

    info: "Không có drop shadow. Cấu trúc được định nghĩa hoàn toàn bằng hairline border 1px (#382e30 trên nền tối, #e5e5e5 ngụ ý trên nền sáng) và stack giá trị bề mặt 4 cấp. Component nằm phẳng trên canvas của chúng, được phân cách bằng đường kẻ thay vì nâng lên bằng blur — cách tiếp cận phòng điều khiển công nghiệp."

  imagery:

    info: "Nhiếp ảnh là hình ảnh chủ đạo: chủ đề công nghiệp (xe tải logistics, công trường xây dựng, công nhân đội mũ bảo hộ) được chụp trong điều kiện golden-hour hoặc ánh sáng yếu đầy tâm trạng. Ảnh full-bleed với dark gradient overlay để hòa vào nền section #0b0405. UI mockup (mini browser panel, chat interface) xuất hiện dưới dạng sơ đồ tối-trên-tối phẳng với accent dot đỏ, không bao giờ là ảnh chụp màn hình sản phẩm thực tế. Andercore 'A' mark hoạt động vừa là logo vừa là token UI đỏ nhỏ (avatar, connector node). Không có phong cách minh họa — mọi thứ đều là nhiếp ảnh, sơ đồ, hoặc typography thuần túy trên canvas tối."

  layout:

    info: "Trang chạy ở max-width 1200px căn giữa, nhưng hầu hết section là dải tối full-bleed. Hero là ảnh full-bleed với dark overlay, headline căn trái ở phần ba dưới cùng. Content section theo nhịp điệu một cột: section eyebrow badge → heading → body text, với primary CTA căn phải. Lưới feature ba cột xuất hiện bên trong section tối với gutter 32px bằng nhau. Luồng step progress sử dụng split 2/3-trái text, 1/3-phải visual (chat + ảnh). Vertical spacing rộng rãi: 80px giữa các section, card padding 32px, element gap 24px. Navigation là thanh cố định trắng mỏng ở trên cùng — bề mặt sáng nhất quán duy nhất trên một trang chủ yếu là tối."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ffffff (trên nền tối) / #0b0405 (trên nền sáng)"
    - "background: #0b0405 (section tối) / #ffffff (nav)"
    - "border: #382e30 (trên nền tối) / #858182 (badge)"
    - "accent: #e32735 (Signal Red)"
    - "muted text: #858182 (Slate)"
    - "primary action: #e32735 (filled action)"

    3_5_example_component_prompts:

    - "*Tạo một dark hero section*: Nền full-bleed #0b0405, vertical padding 80px. Display headline 56px Archivo weight 500, #ffffff, letter-spacing -1.12px, line-height 1.10. Subtext 16px Archivo weight 400, #858182. Primary CTA: fill #e32735, chữ trắng 14px Archivo weight 500, padding 12px 24px, radius 4px. Ghost button bên cạnh: fill #150e0f, border 1px #382e30, chữ trắng, padding và radius tương tự."

    - "*Tạo một hàng feature ba cột*: Nền #0b0405, khoảng cách 32px giữa các cột. Mỗi card: border 1px #382e30, padding 32px, radius 4px. Eyebrow badge phía trên: Space Mono 12px, chữ #858182, border 1px #858182, padding 8px 12px. Card heading 24px Archivo weight 500, #ffffff. Body 14px Archivo weight 400, #858182."

    - "*Tạo một step progress indicator*: Hàng ngang trên #0b0405. Ba step được gắn nhãn 'Request', 'Quote', 'Track'n'Trace' bằng Archivo 14px. Step đang hoạt động: chữ #e32735 với thanh gạch chân 2px #e32735. Step không hoạt động: chữ #858182, không gạch chân. Số step '01', '02', '03' bằng Space Mono 12px #858182, căn phải."

    - "*Tạo một dark content section*: Nền #0b0405, max-width 1200px căn giữa, vertical padding 80px. Section heading 40px Archivo weight 500, #ffffff, letter-spacing -0.80px. Body paragraph 16px Archivo weight 400, #858182. Red accent CTA button góc trên-phải: fill #e32735, chữ trắng 'Get access now', padding 12px 24px, radius 4px."

    - "*Tạo một industrial badge/tag*: Fill trong suốt, border 1px #858182, text Space Mono 12px #858182, padding 8px 12px, radius 4px. Dùng làm section eyebrow phía trên heading."

  gradient_system:

    info: "Hệ thống sử dụng chính xác một gradient: chuyển tiếp ngang trắng-đỏ (linear-gradient 90deg, #ffffff 18%, #e32735) chỉ áp dụng cho cạnh hero image overlay hoặc cho decorative connector line chuyển từ canvas sang signal. Không có gradient nào khác — button, card và nền đều là flat fill."

  similar_brands:

    - "**Kommo** — Cùng canvas gần đen với một chromatic accent duy nhất được phân bổ có kiểm soát cho primary action, geometric sans kiểu Archivo xuyên suốt"
    - "**Tensor** — Tông công nghiệp/B2B với card border dựa trên đường 1px, góc 4px, và một signal color đỏ-cam duy nhất trên nền đen sâu"
    - "**Framer** — Section tối full-bleed với radius sắc nét 4px, không shadow, và một geometric grotesk chặt chẽ làm typeface duy nhất"
    - "**Vercel** — Layout căn giữa max-width 1200px, góc tối thiểu sắc nét, section chủ yếu là tối, và bảng màu đơn sắc với một accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-red: #e32735;
          --color-carbon: #0b0405;
          --color-graphite: #150e0f;
          --color-steel: #382e30;
          --color-slate: #858182;
          --color-chalk: #ffffff;
          --color-foil: #000000;
        
          /* Typography — Font Families */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.12px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-cards: 4px;
          --radius-badges: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-canvas-light: #ffffff;
          --surface-canvas-dark: #0b0405;
          --surface-card-surface: #150e0f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-red: #e32735;
          --color-carbon: #0b0405;
          --color-graphite: #150e0f;
          --color-steel: #382e30;
          --color-slate: #858182;
          --color-chalk: #ffffff;
          --color-foil: #000000;
        
          /* Typography */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.48px;
          --text-heading: 40px;
          --leading-heading: 1.2;
          --tracking-heading: -0.8px;
          --text-display: 56px;
          --leading-display: 1.1;
          --tracking-display: -1.12px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-md: 4px;
        }