phantom___style_reference:
  info: "> Không gian mơ oải hương với bóng ma tím violet. Một thế giới pastel chuyển sang tím đậm vào những khoảnh khắc chính, với linh vật bóng ma thân thiện dạo chơi giữa các section."

  theme: "mixed"

  info: "Phantom sử dụng custom typeface siêu mảnh (Phantom, weight 350/400) và bảng màu tím violet kép để biến một crypto wallet thành sản phẩm thân thiện, không phải trading terminal. Trang web luân phiên giữa bề mặt oải hương nhạt và các section tím đậm, với linh vật bóng ma thương hiệu đóng vai trò là nhân vật duy nhất trong hệ thống. Mọi interactive element đều được bo tròn mạnh — pill ở 100px, button lớn ở 32px, hero panel ở 24px — tạo cho toàn bộ giao diện cảm giác mềm mại, phồng nhẹ. Shadow đặc trưng không phải xám mà là tím pha thương hiệu (#e2dffe ở 0px 0px 4px), khiến ngay cả những elevation nhỏ cũng mang đậm bản sắc. Type được set tight (-0.025em) và lớn, với display line ở 80–96px đọc vào thấy nhẹ nhàng thay vì ồn ào nhờ low weight."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Midnight Violet | `#3c315b` | `--color-midnight-violet` | Nền section tối, primary text trên bề mặt sáng, nav text — tím đậm thương hiệu neo bản sắc và tạo độ nặng cho hero/section tối |"
    info: "| Lavender Whisper | `#e2dffe` | `--color-lavender-whisper` | Shadow pha thương hiệu, accent wash mềm, glow elevation nhẹ — thay thế shadow xám trung tính để elevation luôn on-brand |"
    info: "| Ghost Lilac | `#ab9ff2` | `--color-ghost-lilac` | Accent tím hỗ trợ cho chi tiết trang trí và emphasis tần suất thấp. Không nâng lên làm màu CTA chính |"
    info: "| Cornflower Pop | `#4a87f2` | `--color-cornflower-pop` | Accent hiếm cho CTA được highlight hoặc button nổi bật — xanh lam tím sáng hơn, dùng tiết kiệm để nhấn mạnh |"
    info: "| Cream Glow | `#ffffc4` | `--color-cream-glow` | Bề mặt pastel trang trí — lớp phủ vàng nhạt cho feature card hoặc callout vui tươi trong hệ tím |"
    info: "| Blush Mist | `#ffdadc` | `--color-blush-mist` | Bề mặt pastel trang trí — lớp phủ hồng nhạt cho feature card hoặc callout vui tươi trong section sáng |"
    info: "| Emerald Mint | `#2ec08b` | `--color-emerald-mint` | Accent xanh lá hỗ trợ cho chi tiết trang trí và emphasis tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |"
    info: "| Cloud Canvas | `#fdfcfe` | `--color-cloud-canvas` | Canvas trang, bề mặt card sáng, button text trên nền tối — nền gần trắng làm nền cho mọi thứ |"
    info: "| Charcoal Ink | `#1c1c1c` | `--color-charcoal-ink` | Primary text trên bề mặt sáng, text trên accent cream/blush — màu đọc tối |"
    info: "| Frost White | `#f4f2f4` | `--color-frost-white` | Bề mặt sáng thứ cấp, nền panel nhẹ, section fill sáng — trắng ngà ấm cho elevation |"
    info: "| Ash Veil | `#e9e8ea` | `--color-ash-veil` | Bề mặt cấp ba, hairline border, disabled state — xám nhẹ gần như vô hình để phân cách cấu trúc |"
    info: "| Slate Mute | `#86848d` | `--color-slate-mute` | Helper text mờ, icon thứ cấp, nav item không active — xám trung cho nội dung giảm emphasis |"

  tokens___typography:

    phantom___typeface_duy_nhất___custom_phantom_với_hai_weight_siêu_nhẹ__weight_350_cho_display_headline__400_cho_body_và_ui_text__cách_tiếp_cận_single_weight_light_là_phản_convention_cho_crypto_vốn_mặc_định_headline_bold_700__nét_chữ_mảnh_khiến_phantom_mang_cảm_giác_editorial_và_tĩnh_lặng__không_hung_hăng_hay_tài_chính__letterform_custom___thấy_rõ_ở_chữ__a__bo_tròn_và__e__mở___tạo_cho_thương_hiệu_dấu_vân_tay_typographic_riêng_biệt_mà_không_system_font_nào_sao_chép_được_____font_phantom:
      - "**Thay thế:** Inter (weight 350/400) hoặc Satoshi cho geometry gần nhất; tránh system-ui vì thiếu các đường cong custom"
      - "**Weights:** 350, 400"
      - "**Cỡ chữ:** 13px, 15px, 16px, 20px, 24px, 30px, 64px, 80px, 96px"
      - "**Line height:** 1.0–1.4"
      - "**Letter spacing:** -0.025em (áp dụng toàn bộ; -0.325px ở 13px đến -2.4px ở 96px)"
      - "**Vai trò:** Typeface duy nhất — custom Phantom với hai weight siêu nhẹ. Weight 350 cho display/headline, 400 cho body và UI text. Cách tiếp cận single-weight light là phản-convention cho crypto (vốn mặc định headline bold 700); nét chữ mảnh khiến Phantom mang cảm giác editorial và tĩnh lặng, không hung hăng hay tài chính. Letterform custom — thấy rõ ở chữ 'a' bo tròn và 'e' mở — tạo cho thương hiệu dấu vân tay typographic riêng biệt mà không system font nào sao chép được."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.35 | -0.325px | `--text-caption` |"
      info: "| body-sm | 15px | 1.4 | -0.375px | `--text-body-sm` |"
      info: "| subheading | 20px | 1.25 | -0.5px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.21 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.25 | -0.75px | `--text-heading` |"
      info: "| heading-lg | 64px | 1.1 | -1.6px | `--text-heading-lg` |"
      info: "| display | 80px | 1 | -2px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| body | 4px |"
      info: "| pill | 100px |"
      info: "| cards | 24px |"
      info: "| buttons | 100px |"
      info: "| largeButtons | 32px |"
      info: "| smallElements | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgb(226, 223, 254) 0px 0px 4px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 16px"

  components:

    pill_navigation_container:
      vai_trò: "Thanh navigation cấp cao nhất"

      info: "Container pill nổi với border-radius 100px, background #fdfcfe trên section sáng hoặc transparent trên section tối. Chứa logo, nav link (Phantom font 15px/weight 350, text #1c1c1c), icon tìm kiếm, và Download CTA. Padding 8px dọc, 16px ngang. Không border nhìn thấy trên section sáng; thêm border 1px #e9e8ea mờ trên section tối."

    primary_filled_cta_download_phantom:
      vai_trò: "Button chuyển đổi chính"

      info: "Hình pill với radius 100px, background #ab9ff2 (Ghost Lilac), text #fdfcfe ở 15px Phantom weight 400. Padding 12px 24px. Shadow pha thương hiệu #e2dffe ở 0px 0px 4px. Không border. Nằm ở góc trên phải nav và giữa hero."

    ghost_pill_button_see_more:
      vai_trò: "Navigation thứ cấp hoặc hành động learn-more"

      info: "Hình pill với radius 100px, background #fdfcfe trên section sáng hoặc transparent trên section tối. Text màu #ab9ff2 (section sáng) hoặc #fdfcfe (section tối) ở 15px Phantom weight 400. Icon mũi tên tùy chọn (↗) màu #ab9ff2. Padding 10px 20px. Không shadow."

    display_headline:
      vai_trò: "Hero và section H1"

      info: "Text căn giữa ở 80–96px Phantom weight 350, line-height 1.0–1.1, letter-spacing -2.0 đến -2.4px. Màu #1c1c1c trên section sáng, #fdfcfe trên section tối. Word wrap qua 2–3 dòng với ngắt dòng tự nhiên. Linh vật bóng ma thay thế một từ hoặc nằm inline trong headline."

    subheadline_eyebrow_text:
      vai_trò: "Tiêu đề phụ section"

      info: "14–16px Phantom weight 400, #ab9ff2 hoặc #1c1c1c opacity 0.6. Nằm căn giữa phía trên display headline như dòng giới thiệu nhẹ nhàng."

    ghost_mascot_character:
      vai_trò: "Nhân vật thương hiệu tích hợp vào copy"

      info: "Nhân vật bóng ma Phantom hiển thị màu #ab9ff2 (Ghost Lilac), cỡ inline với headline text (~60–80px). Xuất hiện trong headline thay thế một từ (ví dụ 'Trading tools for [ghost] everyone'). Đóng vai trò dấu câu thị giác và neo thương hiệu."

    section_panel_light:
      vai_trò: "Nền section nội dung sáng"

      info: "Background full-width #f4f2f4 hoặc #fdfcfe, với nội dung căn giữa ở max-width 1200px. Section gap 64px dọc. Chứa display headline + ghost mascot tùy chọn + pill CTA tùy chọn."

    section_panel_dark:
      vai_trò: "Nền section nội dung tối"

      info: "Background full-width #3c315b (Midnight Violet), với nội dung căn giữa ở max-width 1200px. Display text đảo màu thành #fdfcfe. Ghost mascot màu #ab9ff2 vẫn là element màu sắc duy nhất. Dùng cho section bảo mật/nhận dạng."

    nav_dropdown_item:
      vai_trò: "Link dropdown navigation"

      info: "Text link ở Phantom 15px/350, màu #1c1c1c trên nền sáng, #fdfcfe trên nền tối. Không gạch chân. Icon chevron xuống màu #86848d. Hover: màu chuyển sang #ab9ff2. Không thay đổi background."

    pastel_feature_card:
      vai_trò: "Card nội dung trang trí"

      info: "Hình chữ nhật bo tròn radius 24px, background #ffffc4 (Cream Glow) hoặc #ffdadc (Blush Mist). Padding 32px. Nội dung màu #1c1c1c. Không shadow hoặc border. Dùng tiết kiệm cho accent section vui tươi."

    success_badge:
      vai_trò: "Chỉ báo trạng thái"

      info: "Pill nhỏ radius 100px, background #2ec08b (Emerald Mint), text #fdfcfe ở 13px Phantom weight 400. Padding 4px 12px. Dùng cho xác nhận giao dịch và trạng thái thành công."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Phantom font weight 350 cho mọi display/headline text; không bao giờ dùng trên weight 400 trong toàn bộ hệ thống"
      - "Áp dụng -0.025em letter-spacing đồng nhất; không bao giờ set type với tracking mặc định hoặc dương"
      - "Dùng border-radius 100px cho mọi button, tag, và nav container — pill là bắt buộc, không phải tùy chọn"
      - "Luân phiên nền section giữa #fdfcfe/#f4f2f4 (sáng) và #3c315b (tối) để tạo nhịp oải hương-sang-tím đậm đặc trưng"
      - "Dùng shadow pha thương hiệu #e2dffe ở 0px 0px 4px cho elevation button — không bao giờ dùng drop shadow xám hoặc đen"
      - "Căn giữa mọi nội dung chính ở max-width 1200px với section gap dọc 64px+"
      - "Tích hợp nhân vật ghost mascot inline trong display headline như một sự thay thế từ"

    không_nên_làm:
      - "Không bao giờ dùng weight 600+ trong Phantom — hệ thống là whisper-light, bold phá vỡ tông"
      - "Không bao giờ dùng shadow xám (#000000) — mọi elevation phải là #e2dffe pha thương hiệu"
      - "Không bao giờ dùng góc nhọn dưới 16px radius trên interactive element — hệ thống bo tròn mạnh"
      - "Không bao giờ dùng #2ec08b (xanh lá) ngoài ngữ cảnh badge success/transactional — nó mang tính ngữ nghĩa, không trang trí"
      - "Không bao giờ xếp chồng nhiều hơn một ghost mascot mỗi section — nhân vật là dấu câu, không phải wallpaper"
      - "Không bao giờ dùng xám trung tính (#86848d) cho body text — chỉ dùng cho icon và metadata giảm emphasis"
      - "Không bao giờ tạo layout hero nhiều cột — nội dung chính phải là vertical stack căn giữa"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Cloud Canvas | `#fdfcfe` | Nền trang cơ bản, hero section sáng |"
    info: "| 1 | Frost White | `#f4f2f4` | Section fill sáng, elevation card nhẹ |"
    info: "| 2 | Cream Glow | `#ffffc4` | Bề mặt feature card pastel trang trí |"
    info: "| 3 | Blush Mist | `#ffdadc` | Bề mặt feature card pastel trang trí |"
    info: "| 4 | Midnight Violet | `#3c315b` | Nền section tối, hero panel tối full-bleed |"

  elevation:

    - "**Primary CTA button (filled):** `0px 0px 4px 0px #e2dffe — ánh tím pha thương hiệu thay thế shadow xám trung tính`"
    - "**Ghost/outline button:** `none — dựa vào border 1px và độ tương phản fill pha thương hiệu`"
    - "**Section panels:** `none — bề mặt phẳng, không drop shadow`"

  imagery:

    info: "Ưu tiên illustration với nhân vật ghost mascot custom là hình ảnh lặp lại duy nhất. Không có photography, không có product screenshot trên bề mặt chính. Ghost xuất hiện inline trong headline, như element trang trí độc lập, và như neo section. Hình ảnh hỗ trợ là flat vector illustration trong bảng màu pastel accent (#ffffc4, #ffdadc, #ab9ff2). Icon là kiểu outlined nét mảnh, weight 1.5px, màu #86848d hoặc #ab9ff2. Mật độ thị giác thấp — ghost và type lớn làm nhiệm vụ chính, với khoảng trắng rộng rãi xung quanh."

  layout:

    info: "Căn giữa, nội dung max-width 1200px với các dải nền full-bleed luân phiên. Nhịp trang là: section oải hương sáng → section tím đậm → oải hương sáng, lặp lại xuống trang. Mỗi section theo pattern: eyebrow text tùy chọn → display headline (80–96px, căn giữa, thường 2 dòng) → ghost mascot inline tùy chọn → pill CTA đơn. Không có multi-column grid trong hero section — mọi thứ là vertical stack căn giữa. Navigation là một pill ngang đơn nổi ở trên cùng, không phải thanh full-width. Khoảng thở dọc rộng rãi: 64px+ giữa các section, 48px+ giữa các element chính. Layout đối xứng và căn giữa xuyên suốt — không có composition bất đối xứng hoặc chia đôi trong nội dung chính."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text (trên nền sáng): #1c1c1c"
    - "text (trên nền tối): #fdfcfe"
    - "background (canvas): #fdfcfe"
    - "background (section tối): #3c315b"
    - "border / hairline: #e9e8ea"
    info: "Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì tự tạo màu CTA filled."
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Dark Security Section**: Nền full-width #3c315b. Display headline ở 64px Phantom weight 350, #fdfcfe, line-height 1.1, letter-spacing -1.6px, căn giữa. Ghost mascot màu #ab9ff2 inline. Ghost pill button: radius 100px, background #fdfcfe, text #3c315b, padding 10px 20px, icon mũi tên màu #ab9ff2."

    - "**Pastel Feature Card**: Radius 24px, background #ffffc4, padding 32px. Heading ở 24px Phantom weight 350, #1c1c1c. Body ở 16px Phantom weight 400, #1c1c1c. Không shadow hoặc border."

    - "**Ghost Pill Secondary Button**: Radius 100px, background transparent trên section tối hoặc #fdfcfe trên section sáng, border 1px #ab9ff2, text #ab9ff2 ở 15px Phantom weight 400, padding 10px 20px, icon mũi tên (↗) theo sau."

  similar_brands:

    - "**Coinbase** — Cùng cách luân phiên section sáng/tối với display headline căn giữa, dù Coinbase dùng hệ màu xanh lam thay vì tím violet của Phantom"
    - "**Rainbow Wallet** — Cùng bảng màu pastel vui tươi và ngôn ngữ pill-button bo tròn cho sản phẩm crypto consumer, với cá tính mascot-driven tương tự"
    - "**Linear** — Cùng cách tiếp cận custom typeface siêu mảnh với letter-spacing tight và cỡ chữ display lớn tĩnh lặng"
    - "**Stripe** — Cùng layout max-width căn giữa với các dải bề mặt luân phiên và một accent màu duy nhất cho CTA"
    - "**Framer** — Cùng khoảng thở dọc rộng rãi, stack căn giữa, và chuyển tiếp section pastel-trên-nền-tối"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-violet: #3c315b;
          --color-lavender-whisper: #e2dffe;
          --color-ghost-lilac: #ab9ff2;
          --color-cornflower-pop: #4a87f2;
          --color-cream-glow: #ffffc4;
          --color-blush-mist: #ffdadc;
          --color-emerald-mint: #2ec08b;
          --color-cloud-canvas: #fdfcfe;
          --color-charcoal-ink: #1c1c1c;
          --color-frost-white: #f4f2f4;
          --color-ash-veil: #e9e8ea;
          --color-slate-mute: #86848d;
        
          /* Typography — Font Families */
          --font-phantom: 'Phantom', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.35;
          --tracking-caption: -0.325px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.375px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: -0.6px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.75px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.6px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -2px;
        
          /* Typography — Weights */
          --font-weight-w350: 350;
          --font-weight-regular: 400;
        
          /* 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-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 96px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-body: 4px;
          --radius-pill: 100px;
          --radius-cards: 24px;
          --radius-buttons: 100px;
          --radius-largebuttons: 32px;
          --radius-smallelements: 16px;
        
          /* Shadows */
          --shadow-sm: rgb(226, 223, 254) 0px 0px 4px 0px;
        
          /* Surfaces */
          --surface-cloud-canvas: #fdfcfe;
          --surface-frost-white: #f4f2f4;
          --surface-cream-glow: #ffffc4;
          --surface-blush-mist: #ffdadc;
          --surface-midnight-violet: #3c315b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-violet: #3c315b;
          --color-lavender-whisper: #e2dffe;
          --color-ghost-lilac: #ab9ff2;
          --color-cornflower-pop: #4a87f2;
          --color-cream-glow: #ffffc4;
          --color-blush-mist: #ffdadc;
          --color-emerald-mint: #2ec08b;
          --color-cloud-canvas: #fdfcfe;
          --color-charcoal-ink: #1c1c1c;
          --color-frost-white: #f4f2f4;
          --color-ash-veil: #e9e8ea;
          --color-slate-mute: #86848d;
        
          /* Typography */
          --font-phantom: 'Phantom', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.35;
          --tracking-caption: -0.325px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.375px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.5px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: -0.6px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.75px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.6px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -2px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 96px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-sm: rgb(226, 223, 254) 0px 0px 4px 0px;
        }