mercury___style_reference:
  info: "> Mountain Top Command Center"

  theme: "dark"

  info: "Thiết kế mang cảm giác của một trung tâm chỉ huy lúc hoàng hôn, vừa rộng lớn vừa tập trung. Bảng màu trung tính tối gần như đen (#1e1e2a, #171721) tạo nên một canvas điện ảnh sống động, nơi dòng chữ trắng nhẹ (#ededf3) mang lại độ rõ nét sắc sảo. Mọi năng lượng đều được dồn vào một điểm nhấn xanh tím duy nhất (#5266eb), được dành riêng cho các call-to-action chính, giống như đèn báo hiệu trên bảng điều khiển công nghệ cao. Typography là yếu tố định hình chính, với các custom font được sử dụng ở weight nhẹ cho headline, tạo nên giọng điệu vừa có thẩm quyền vừa dễ tiếp cận. Sự tương phản giữa hình ảnh hero rộng lớn, đầy không khí và giao diện text-driven bên dưới tạo ra một hành trình từ khát vọng đến hành động."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Mercury Blue | `#5266eb` | `--color-mercury-blue` | Nút CTA chính — điểm nhấn sống động duy nhất trong bảng màu trung tính, tập trung hành động của người dùng. |"
    info: "| Ghost Blue | `#cdddff` | `--color-ghost-blue` | Nền nút phụ, hover states — màu xanh nhạt, hư ảo gợi ý tương tác. |"
    info: "| Deep Space | `#171721` | `--color-deep-space` | Lớp nền trang ngoài cùng, tạo chiều sâu. |"
    info: "| Midnight Slate | `#1e1e2a` | `--color-midnight-slate` | Nền chính của trang và các section. |"
    info: "| Graphite | `#272735` | `--color-graphite` | Nền nút tinh tế và các bề mặt tương tác. |"
    info: "| Lead | `#70707d` | `--color-lead` | Border, divider, điểm nhấn UI tinh tế. |"
    info: "| Starlight | `#ededf3` | `--color-starlight` | Màu chữ chính cho headline, body text và navigation. |"
    info: "| Silver | `#c3c3cc` | `--color-silver` | Chữ phụ, footer copy, disabled states. |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Chữ trên nút CTA chính (#5266eb). |"

  tokens___typography:

    arcadiadisplay___tất_cả_headline_chính__sử_dụng_weight_360_nhẹ_ở_kích_thước_lớn_là_lựa_chọn_đặc_trưng__tạo_uy_quyền_thông_qua_sự_kiềm_chế__không_phải_cường_độ_____font_arcadiadisplay:
      - "**Font thay thế:** Inter, Manrope"
      - "**Weights:** 360, 480, 530"
      - "**Kích thước:** 21px, 24px, 28px, 32px, 42px, 49px, 65px"
      - "**Line height:** 1.10-1.20"
      - "**Letter spacing:** Tracking dương nhẹ (0.01-0.02em) để tạo cảm giác thoáng."
      - "**OpenType features:** `\"ss01\" on`"
      - "**Vai trò:** Tất cả headline chính. Sử dụng weight 360 nhẹ ở kích thước lớn là lựa chọn đặc trưng, tạo uy quyền thông qua sự kiềm chế, không phải cường độ."

    arcadia___body_copy__ui_labels__navigation__legal_text_và_heading_nhỏ_hơn__font_chủ_lực_cho_mọi_nội_dung_và_văn_bản_giao_diện_____font_arcadia:
      - "**Font thay thế:** Inter, Manrope"
      - "**Weights:** 360, 400, 420, 480"
      - "**Kích thước:** 12px, 14px, 16px, 18px, 21px"
      - "**Line height:** 1.20-1.50"
      - "**Letter spacing:** Tracking dương nhẹ (0.005-0.02em) để dễ đọc."
      - "**OpenType features:** `\"ss01\" on`"
      - "**Vai trò:** Body copy, UI labels, navigation, legal text và heading nhỏ hơn. Font chủ lực cho mọi nội dung và văn bản giao diện."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 21px | 1.35 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 49px | 1.15 | — | `--text-heading-lg` |"
      info: "| display | 65px | 1.1 | 0.65px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "4px"

    mật_độ: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| inputs | 32px |"
      info: "| buttons | 32px, 40px |"
      info: "| containers | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Element gap:** 12-32px"

  components:

    primary_pill_button:
      vai_trò: "Call-to-action chính trên trang."

      info: "Nền solid 'Mercury Blue' (#5266eb) với chữ 'Pure White' (#ffffff). Bo tròn hoàn toàn với radius 32px. Padding khoảng 16px dọc và 24px ngang. Sử dụng font 'arcadia'."

    header_pill_button:
      vai_trò: "Call-to-action phụ trong thanh navigation."

      info: "Nền trong suốt 'Ghost Blue' (#cdddff ở ~20%) với chữ 'Starlight' (#ededf3). Bo tròn hoàn toàn với radius 40px. Padding 8px 20px. Sử dụng font 'arcadia'."

    ghost_nav_link:
      vai_trò: "Các mục navigation và link không phải chính trong header."

      info: "Nền trong suốt với chữ 'Starlight' (#ededf3). Không có border nhìn thấy được. Vùng hit area rộng nhờ padding, về mặt thị giác chỉ hiển thị dưới dạng text. Sử dụng font 'arcadia'."

    hero_email_input:
      vai_trò: "Trường nhập email trong hero section."

      info: "Nền trong suốt với chữ và placeholder màu 'Starlight' (#ededf3). Phía trái bo tròn hoàn toàn (radius 32px), phía phải vuông (radius 0px) để ghép với nút. Một border mỏng màu 'Lead' (#70707d) được ngụ ý để định hình."

    interactive_feature_link:
      vai_trò: "Các mục có thể chọn trong danh sách tính năng."

      info: "Nền trong suốt với chữ 'Starlight' (#ededf3). Border dưới 1px màu 'Lead' (#70707d) để phân cách các mục. Không có radius. Sử dụng 'arcadiaDisplay' cho tiêu đề."

    footer_link:
      vai_trò: "Link cấp ba trong footer trang."

      info: "Nền trong suốt với chữ 'Silver' (#c3c3cc). Màu chữ nhạt hơn cho thấy mức độ ưu tiên thấp hơn. Sử dụng font 'arcadia'."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng 'arcadiaDisplay' ở weight nhẹ (360) cho tất cả headline chính để duy trì giọng điệu thanh thoát, tinh tế."
      - "Dành riêng điểm nhấn 'Mercury Blue' (#5266eb) cho các CTA chính, hướng đến hành động."
      - "Sử dụng bảng màu trung tính tối (#171721, #1e1e2a) cho mọi nền để tạo môi trường tập trung, sống động."
      - "Tận dụng corner radius cực lớn (32px, 40px) cho tất cả nút chính và phụ, tạo hình dạng 'pill' đặc trưng."
      - "Duy trì độ tương phản cao với chữ 'Starlight' (#ededf3) trên nền tối cho mọi nội dung chính."
      - "Sử dụng khoảng cách dọc rộng rãi (80px+) giữa các section nội dung."
      - "Phân biệt các mục danh sách tương tác bằng border dưới 1px màu 'Lead' (#70707d)."

    không_nên_làm:
      - "Không sử dụng 'Mercury Blue' (#5266eb) cho chữ, nền hoặc các yếu tố trang trí."
      - "Không sử dụng font weight nặng (>530) cho bất kỳ typography nào."
      - "Không áp dụng shadow để tạo độ cao. Thay vào đó, sử dụng sự thay đổi màu sắc và độ mờ."
      - "Không thêm màu bão hòa mới. Bảng màu là đơn sắc cộng với một điểm nhấn xanh."
      - "Không sử dụng corner radius nhỏ cho nút. Chúng luôn phải là pill."
      - "Không sử dụng 'Pure White' (#ffffff) cho body text; dành nó cho chữ trên nút CTA xanh chính."
      - "Không tạo layout dày đặc, lộn xộn. Ưu tiên khoảng thở."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Abyss | `#171721` | Lớp nền trang ngoài cùng. |"
    info: "| 1 | Surface | `#1e1e2a` | Nền section nội dung chính. |"
    info: "| 2 | Interactive | `#272735` | Hover states hoặc các yếu tố tương tác có chứa nội dung. |"

  elevation:

    info: "Elevation đạt được thông qua ánh sáng và màu sắc, không phải shadow. Các yếu tố tương tác sáng lên hoặc áp dụng màu accent thương hiệu khi hover hoặc focus, trông như thể 'phát sáng' từ bên trong giao diện tối. Các bề mặt phân lớp được phân biệt bằng sự thay đổi tinh tế trong bảng màu xám trung tính (ví dụ: Midnight Slate #1e1e2a trên Deep Space #171721)."

  imagery:

    info: "Ngôn ngữ thị giác được phân đôi. Nó mở đầu bằng một bức ảnh full-bleed, đầy không khí về một chiếc bàn đơn độc trong cảnh quan thiên nhiên rộng lớn, thiết lập tâm trạng của tham vọng vô biên và sự tập trung tĩnh lặng. Hình ảnh này thuần túy mang tính không khí, không tập trung vào sản phẩm. Ngoài hero, trang web hoàn toàn text-dominant, không có thêm ảnh chụp hoặc minh họa. Sự tương phản này đặt 'vibe' của thương hiệu lên hàng đầu, sau đó chuyển sang trải nghiệm thuần chức năng, tập trung vào thông tin."

  layout:

    info: "Layout sử dụng hero full-bleed chiếm toàn bộ viewport, với headline và CTA căn giữa trên ảnh nền. Bên dưới hero, trang chuyển sang layout căn giữa max-width (khoảng 1200px) trên nền tối. Nội dung được tổ chức theo các cột đơn giản, một cột duy nhất với khoảng cách dọc rộng rãi, tạo luồng đọc tuyến tính, yên tĩnh. Navigation là thanh trên cùng tối giản, bán trong suốt và có thể trở nên sticky. Cấu trúc tổng thể rộng rãi và không bị lộn xộn."

  agent_prompt_guide:

    quick_color_reference:
      - "**Nền trang:** Midnight Slate (#1e1e2a)"
      - "**Chữ chính:** Starlight (#ededf3)"
      - "**Chữ phụ:** Silver (#c3c3cc)"
      - "**CTA chính:** Mercury Blue (#5266eb)"
      - "**Border/Divider:** Lead (#70707d)"

    example_component_prompts:
      - "`Tạo một hero section với ảnh nền full-bleed không khí về núi non. Căn giữa một display headline: 65px arcadiaDisplay weight 360, màu Starlight (#ededf3). Bên dưới, thêm sub-headline: 21px arcadia weight 400, màu Starlight. Cuối cùng, thêm một nhóm nút CTA: một email input với radius trái 32px ghép với một primary pill button radius 32px.`"

      - "`Xây dựng một primary action button với chữ 'Open account'. Nút có nền 'Mercury Blue' (#5266eb), chữ 'Pure White' (#ffffff), corner radius 32px, padding 16px 24px. Font là 16px arcadia weight 480.`"

      - "`Thiết kế một feature list section trên nền 'Midnight Slate' (#1e1e2a). Mỗi mục là một link với heading text 28px arcadiaDisplay weight 480 màu 'Starlight' (#ededf3), border dưới solid 1px màu 'Lead' (#70707d) với padding dưới 24px.`"

  similar_brands:

    - "**Linear** — Cùng thẩm mỹ dark-mode sâu, typography chính xác và sử dụng một màu accent mạnh duy nhất cho CTA."
    - "**Stripe** — Giao diện dark UI chuyên nghiệp, tập trung vào công nghệ với màu accent riêng biệt và custom typography chất lượng cao."
    - "**Ramp** — Một thương hiệu fintech khác với theme tối tinh tế, typography sạch sẽ và chiến lược một màu accent duy nhất."
    - "**Vercel** — Cũng sử dụng nền đen sâu với chữ sáng, sắc nét và tập trung vào độ chính xác hình học trong UI."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-mercury-blue: #5266eb;
          --color-ghost-blue: #cdddff;
          --color-deep-space: #171721;
          --color-midnight-slate: #1e1e2a;
          --color-graphite: #272735;
          --color-lead: #70707d;
          --color-starlight: #ededf3;
          --color-silver: #c3c3cc;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-arcadiadisplay: 'arcadiaDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arcadia: 'arcadia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.35;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 49px;
          --leading-heading-lg: 1.15;
          --text-display: 65px;
          --leading-display: 1.1;
          --tracking-display: 0.65px;
        
          /* Typography — Weights */
          --font-weight-w360: 360;
          --font-weight-regular: 400;
          --font-weight-w420: 420;
          --font-weight-w480: 480;
          --font-weight-w530: 530;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --element-gap: 12-32px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 32px;
          --radius-3xl-2: 40px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-inputs: 32px;
          --radius-buttons: 32px, 40px;
          --radius-containers: 4px;
        
          /* Surfaces */
          --surface-abyss: #171721;
          --surface-surface: #1e1e2a;
          --surface-interactive: #272735;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-mercury-blue: #5266eb;
          --color-ghost-blue: #cdddff;
          --color-deep-space: #171721;
          --color-midnight-slate: #1e1e2a;
          --color-graphite: #272735;
          --color-lead: #70707d;
          --color-starlight: #ededf3;
          --color-silver: #c3c3cc;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-arcadiadisplay: 'arcadiaDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arcadia: 'arcadia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.35;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 49px;
          --leading-heading-lg: 1.15;
          --text-display: 65px;
          --leading-display: 1.1;
          --tracking-display: 0.65px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 32px;
          --radius-3xl-2: 40px;
        }