vana___style_reference:
  info: "> Bản đồ chòm sao kỹ thuật số trên nền canvas nửa đêm — giao diện giao thức tối nơi ánh xanh điện truy vết địa hình dữ liệu do người dùng sở hữu trên một trường sao các ký tự ASCII."

  theme: "dark"

  info: "Vana vận hành như một canvas tối, nơi dữ liệu thuộc về người dùng: các bề mặt gần đen làm nền cho một màu xanh điện rực rỡ, hoạt động không chỉ như trang trí mà còn như tín hiệu. Bản đồ thế giới ASCII-art ở hero không phải là đồ họa mà là một kết cấu dữ liệu — mật độ ký tự tạo thành các lục địa, gợi ý rằng giao thức đang truy vết dữ liệu cá nhân trên toàn cầu. Typography mang phong cách hình học và tiết chế (Cofo Sans) với một biến thể pixel dành cho các nhãn metadata kỹ thuật, tạo ra sự căng thẳng giữa văn xuôi dễ đọc và ký hiệu máy móc chính xác. Các button có góc vuông (2px radius) và tối giản, để màu xanh đảm nhận ngôn ngữ hành động. Bảng màu được cố tình thu hẹp: một màu xanh thương hiệu, hai tông tím, và một chồng các bề mặt gần đen, với xanh lá và hồng chỉ xuất hiện như những dấu câu màu sắc hiếm hoi trên các control có viền và marker trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Electric Indigo | `#0000ff` | `--color-electric-indigo` | Nền CTA chính, text thương hiệu, pattern ASCII trang trí — màu tín hiệu làm cho các hành động trở nên nổi bật trên nền canvas tối |"
    info: "| Cobalt Pulse | `#4141fc` | `--color-cobalt-pulse` | Viền button, điểm nhấn phụ — sáng hơn Electric Indigo một chút, dùng cho outlined controls và hover states |"
    info: "| Periwinkle Veil | `#8b8bfe` | `--color-periwinkle-veil` | Viền action dạng outline, điểm nhấn tím nhạt — viền ghost button và các nét trang trí nhẹ |"
    info: "| Lime Beacon | `#7fd579` | `--color-lime-beacon` | Dấu câu màu sắc hiếm — con trỏ, biến thể outlined button, chỉ thị vị trí trên bản đồ dữ liệu |"
    info: "| Orchid Whisper | `#d896ff` | `--color-orchid-whisper` | Dấu câu màu sắc hiếm — biến thể outlined button, điểm nhấn icon trang trí |"
    info: "| Midnight Void | `#0d0d0d` | `--color-midnight-void` | Nền trang — canvas nền mà mọi thứ nổi trên đó |"
    info: "| Carbon Panel | `#161616` | `--color-carbon-panel` | Bề mặt card và panel — cao hơn canvas một bậc cho các khối nội dung có chứa |"
    info: "| Graphite Lift | `#252525` | `--color-graphite-lift` | Bề mặt tối cao hơn cho card, header và panel có chứa. Không dùng làm màu CTA chính |"
    info: "| Steel Hover | `#3b3b3b` | `--color-steel-hover` | Bề mặt cao nhất, nền button neutral dạng filled — màu sáng nhất trong dãy neutral |"
    info: "| Pure Signal | `#ffffff` | `--color-pure-signal` | Heading chính, text button, text tương phản cao — giọng text to nhất |"
    info: "| Soft Mist | `#eaeaea` | `--color-soft-mist` | Body text, copy phụ, nền nhẹ — nhẹ hơn Pure Signal cho đoạn văn và mô tả |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Viền trong các phần sáng, gạch chân link — chỉ hiện rõ trên nền trắng |"
    info: "| Warm Filament | `#b8ad97` | `--color-warm-filament` | SVG stroke và fill trang trí — điểm nhấn tông ấm cho đồ họa trừu tượng và chi tiết minh họa |"

  tokens___typography:

    cofo_sans___typeface_chính_trên_toàn_bộ_ui___heading_ở_64px_weight_700__body_ở_14_16px_weight_400__nav_links_ở_13_14px__tracking__0_02em_ở_64px_tạo_cảm_giác_heading_kỹ_thuật__nén_chặt__hầu_hết_các_thương_hiệu_crypto_dữ_liệu_dùng_tracking_rộng_hơn_ở_kích_thước_này_____font_cofo_sans:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 13px, 14px, 16px, 24px, 64px"
      - "**Line height:** 1.00–1.25"
      - "**Letter spacing:** -0.02em ở 64px, -0.015em ở 24px, -0.02em ở 13–16px"
      - "**Vai trò:** Typeface chính trên toàn bộ UI — heading ở 64px weight 700, body ở 14–16px weight 400, nav links ở 13–14px. Tracking -0.02em ở 64px tạo cảm giác heading kỹ thuật, nén chặt; hầu hết các thương hiệu crypto/dữ liệu dùng tracking rộng hơn ở kích thước này."

    cofo_sans_pixel___nhãn_metadata_kỹ_thuật___nav_links_có_dấu_chấm_đầu_build__about__community__tools__thẻ_uppercase_nhỏ__và_chú_thích_máy_móc_chính_xác__biến_thể_pixel_tạo_ra_nhịp_điệu_gần_monospace__báo_hiệu__system_metadata__so_với__văn_xuôi_con_người_____font_cofo_sans_pixel:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 10px, 13px, 14px"
      - "**Line height:** 1.00–1.25"
      - "**Letter spacing:** -0.02em đến -0.002em"
      - "**Vai trò:** Nhãn metadata kỹ thuật — nav links có dấu chấm đầu (BUILD, ABOUT, COMMUNITY, TOOLS), thẻ uppercase nhỏ, và chú thích máy móc chính xác. Biến thể pixel tạo ra nhịp điệu gần monospace, báo hiệu 'system metadata' so với 'văn xuôi con người'."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.25 | -0.2px | `--text-caption` |"
      info: "| body-lg | 16px | 1.5 | -0.32px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.15 | -0.36px | `--text-subheading` |"
      info: "| display | 64px | 1.1 | -1.28px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "4px"

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      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: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 2px |"
      info: "| large | 16px |"
      info: "| pills | 1440px |"
      info: "| buttons | 2px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    navigation_bar:
      vai_trò: "Site navigation cấp cao nhất"

      info: "Thanh ngang, full-width, nền #0d0d0d với đường viền dưới mảnh (hairline) màu #ffffff (1px). Logo 'vana' căn trái, dùng Cofo Sans weight 700 ở 16px. Nav links căn phải, dùng Cofo Sans Pixel ở 10–13px uppercase với chỉ thị dấu chấm nhỏ phía trước. Vertical padding 22px, horizontal padding 24px."

    filled_primary_button:
      vai_trò: "CTA chính (GET STARTED)"

      info: "Nền #0000ff, text #ffffff dùng Cofo Sans weight 700 ở 13–14px uppercase, letter-spacing -0.02em. Padding 11px 20px. Border-radius 2px. Không shadow, không gradient. Hình dạng chữ nhật phẳng với 2px radius được cố tình sắc nét — nó đọc như một lệnh giao thức, không phải nút marketing."

    outlined_ghost_button:
      vai_trò: "Hành động phụ (OUR VISION, START BUILDING)"

      info: "Nền trong suốt, viền 1px màu #8b8bfe hoặc #ffffff, text #ffffff dùng Cofo Sans weight 700 ở 13–14px uppercase. Padding 11px 20px. Border-radius 2px. Một số biến thể có icon mũi tên dẫn đầu (→). Dạng outline để màu xanh làm việc ở nơi khác trong khi button này giữ trung tính."

    chromatic_outlined_button:
      vai_trò: "Biến thể action nhấn mạnh"

      info: "Nền trong suốt, viền 1px màu #7fd579 (lime) hoặc #d896ff (orchid), text cùng màu. Padding và 2px radius giống các button khác. Các biến thể hiếm này thêm dấu câu màu sắc — dùng có chủ đích để thu hút mắt đến các hành động giao thức cụ thể."

    pill_button:
      vai_trò: "Biến thể action bo tròn"

      info: "Border-radius 1440px (bo tròn hoàn toàn). Cùng token màu với các biến thể filled hoặc outlined. Dùng cho các hành động dạng tag hoặc control nhỏ gọn, nơi hình dạng pill báo hiệu một kiểu tương tác khác."

    feature_card:
      vai_trò: "Hiển thị bốn cột tính năng (Connect, Move, Control, Build)"

      info: "Nền #161616 với viền 1px màu #ffffff (độ mờ 12%) hoặc #333333 nhẹ. Padding 24–32px. Border-radius 2px. Icon căn giữa trên cùng (24–32px, #ffffff hoặc màu nhấn, stroke mảnh). Title dùng Cofo Sans weight 700 ở 16–24px, #ffffff. Description dùng Cofo Sans weight 400 ở 14px, #eaeaea. Không shadow — sự phân tách đến từ chồng bề mặt, không phải độ cao."

    hero_section:
      vai_trò: "Full-bleed landing hero"

      info: "Nền tối full-viewport với pattern bản đồ thế giới ASCII-art được render bằng #0000ff ở độ mờ thấp trên toàn bộ chiều rộng. Headline ở 64px Cofo Sans weight 700, #ffffff, letter-spacing -1.28px, căn trái lệch tâm. Subtext ở 16px weight 400, #eaeaea. Cặp CTA (filled + outlined) bên dưới. Một marker con trỏ #7fd579 nhỏ nằm trên bản đồ như một chỉ thị vị trí tương tác."

    section_header:
      vai_trò: "Khối title section căn giữa"

      info: "Title ở 24–64px Cofo Sans weight 700, #ffffff, căn giữa. Subtitle ở 16px weight 400, #eaeaea, căn giữa, max-width ~640px. Vertical spacing 48px phía trên và dưới. Pattern header này lặp lại trên các section tính năng và nội dung."

    pixel_nav_link:
      vai_trò: "Mục navigation với chỉ thị dấu chấm"

      info: "Cofo Sans Pixel ở 10–13px uppercase, #ffffff. Có dấu chấm nhỏ (•) phía trước cùng màu. Letter-spacing chặt. Font pixel + dấu chấm đầu là micro-style navigation đặc trưng — nó đọc như metadata giao thức, không phải menu website."

    split_content_section:
      vai_trò: "Bố cục hai cột text + hình ảnh"

      info: "Dải nền sáng hoặc tối. Cột trái: heading màu #0000ff hoặc #ffffff ở 24–40px, body text ở 14–16px, outlined CTA button. Cột phải: 3D render hoặc minh họa full-bleed. Dùng cho các section giải thích giao thức."

    band_divider:
      vai_trò: "Dải phân cách màu full-width"

      info: "Nền #0000ff hoặc #4141fc đặc, full-bleed, cao 80–120px. Chứa text căn trái màu #ffffff ở 14–16px. Hoạt động như một khoảng dừng thị giác giữa các section nội dung chính."

  do_s_and_don_ts:

    do:
      - "Dùng #0000ff làm màu CTA dạng filled duy nhất — không có màu xanh nào khác được làm nền button"
      - "Đặt border-radius là 2px trên tất cả button và card hình chữ nhật; chỉ dùng 1440px cho control dạng pill"
      - "Đặt nền trang là #0d0d0d và các bề mặt bậc là #161616 → #252525 → #3b3b3b để tạo độ cao — không bao giờ dùng shadow để phân tách"
      - "Dùng Cofo Sans weight 700 cho tất cả heading và text button; dành weight 400 cho body copy và mô tả"
      - "Dùng Cofo Sans Pixel với dấu chấm đầu (•) cho nav links, thẻ và nhãn metadata kỹ thuật"
      - "Áp dụng letter-spacing -0.02em ở 64px và -0.015em ở 24px — tracking chặt là lựa chọn đặc trưng, không phải mặc định"
      - "Giữ bảng màu sắc hẹp: nếu cần màu thứ hai, dùng nó làm viền 1px hoặc stroke icon, không bao giờ làm nền fill"

    don_t:
      - "Không dùng shadow hoặc hiệu ứng đổ bóng cho độ cao card — chồng bề mặt (#0d0d0d → #161616 → #252525) là hệ thống độ cao"
      - "Không đưa vào các màu xanh mới ngoài họ #0000ff / #4141fc / #8b8bfe — màu xanh thương hiệu là duy nhất"
      - "Không dùng #7fd579 hoặc #d896ff cho nền hoặc fill lớn — đây là màu dấu câu, chỉ dùng cho viền mảnh và icon nhỏ"
      - "Không đặt border-radius trên 2px cho card hoặc button (trừ hình dạng pill ở 1440px) — góc sắc là có chủ đích"
      - "Không dùng #ffffff cho body copy — dành nó cho heading và text button; dùng #eaeaea cho đoạn văn"
      - "Không render pattern ASCII-art ở độ mờ đầy đủ — nó nên ở độ mờ 10–20% để đọc như kết cấu, không phải nội dung"
      - "Không trộn font pixel và không pixel trong cùng một khối text — chỉ dùng Cofo Sans Pixel cho các nhãn và mục navigation độc lập"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Midnight Void | `#0d0d0d` | Nền trang cơ sở — canvas mà mọi thứ nằm trên |"
    info: "| 2 | Carbon Panel | `#161616` | Card, feature panel, container nội dung — cao hơn canvas một bậc |"
    info: "| 3 | Graphite Lift | `#252525` | Card nâng cao, hover states, panel tương tác — bậc độ cao thứ hai |"
    info: "| 4 | Steel Hover | `#3b3b3b` | Bề mặt neutral cao nhất — button neutral dạng filled, active states |"

  elevation:

    info: "Thiết kế này cố tình tránh drop shadows. Sự phân tách đạt được hoàn toàn thông qua chồng bề mặt: #0d0d0d → #161616 → #252525 → #3b3b3b, với viền mảnh 1px màu #ffffff (độ mờ 10–20%) để phân định thêm. Cách xử lý phẳng củng cố thẩm mỹ giao thức/dòng lệnh — các bề mặt có cảm giác như terminal panels, không phải card nổi. Không có element nào nên có vẻ 'nhấc lên' khỏi trang; mọi thứ nằm phẳng trong chồng tối."

  imagery:

    info: "Ngôn ngữ hình ảnh bị chi phối bởi kết cấu bản đồ thế giới ASCII-art trong hero — mật độ ký tự tạo thành các đường viền lục địa bằng #0000ff ở độ mờ thấp, gợi ý một cấu trúc liên kết dữ liệu hơn là bản đồ theo nghĩa đen. Một marker con trỏ #7fd579 nhỏ nằm trên bản đồ như một chỉ thị vị trí tương tác. Hình ảnh phụ là cấu trúc đám mây/bong bóng 3D render màu #0000ff và #4141fc với các bề mặt chấm hình học, dùng trong các section bố cục split. Đồ họa trừu tượng ưa chuộng các dạng hình học, tính toán (lưới, nút kết nối, khối xếp chồng) hơn hình ảnh hữu cơ hoặc nhiếp ảnh. Icons là minh họa đường nét mảnh màu #ffffff, căn giữa phía trên title card. Không có nhiếp ảnh, không có hình ảnh lối sống — hệ thống hình ảnh là data-art thuần túy, không phải ảnh marketing."

  layout:

    info: "Mô hình trang là centered max-width (1200px) cho các khối nội dung, với nền tối full-bleed kéo dài đến mép viewport. Hero là full-bleed với bản đồ ASCII trải dài toàn bộ chiều rộng, headline căn trái trên kết cấu. Các section tiếp theo dùng section header căn giữa (title + subtitle stack) theo sau là lưới card tính năng 4 cột. Nhịp điệu bố cục là: hero tối → section tính năng tối → dải split-content sáng → dải phân cách xanh. Navigation là thanh trên cùng tối giản (logo trái, 4 link phải) với viền dưới mảnh. Card được sắp xếp trong các cột có chiều rộng bằng nhau với khoảng cách 16–20px. Mật độ tổng thể là comfortable — khoảng trống dọc rộng rãi giữa các section (48px+) với các khối nội dung có cảm giác đo lường và không vội vã."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #ffffff (heading, button), #eaeaea (body)"
    - "background: #0d0d0d (trang), #161616 (card), #252525 (nâng cao)"
    - "border: #ffffff ở độ mờ 10–20% (hairlines), #333333 (phần sáng)"
    - "accent: #0000ff (thương hiệu), #4141fc (xanh phụ), #8b8bfe (tím nhạt)"
    - "primary action: #3b3b3b (filled action)"

    3_ví_dụ_component_prompts:
    - "Tạo một Primary Action Button: nền #3b3b3b, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng cách xử lý filled này cho CTA chính."
    - "Tạo một feature card trên trang tối: nền #161616, viền 1px màu #ffffff ở độ mờ 15%, border-radius 2px, padding 24px. Icon đường nét mảnh căn giữa màu #ffffff ở 32px. Title dùng Cofo Sans weight 700, #ffffff, 16px. Description dùng Cofo Sans weight 400, #eaeaea, 14px."
    - "Tạo một nav bar: nền full-width #0d0d0d, viền dưới 1px màu #ffffff ở độ mờ 10%, padding 22px 24px. Logo 'vana' căn trái dùng Cofo Sans weight 700, #ffffff, 16px. Bốn link căn phải dùng Cofo Sans Pixel, 10–13px, uppercase, #ffffff, mỗi link có dấu chấm nhỏ (•) phía trước."

  signature_elements:

    info: "Ba yếu tố xác định bản sắc thị giác của Vana và nên được giữ nguyên trên tất cả các trang:"

    - "**Kết cấu bản đồ thế giới ASCII-art hero** — Mật độ ký tự màu #0000ff ở độ mờ 10–20% tạo thành các đường viền lục địa. Đây là yếu tố thị giác dễ nhận biết nhất. Nó nên xuất hiện trên landing page chính và bất kỳ section lớn nào giới thiệu khái niệm địa lý hoặc mạng lưới."

    - "**Nav links font pixel với dấu chấm đầu** — Mọi mục navigation dùng Cofo Sans Pixel với dấu • dẫn đầu. Micro-style này báo hiệu 'protocol metadata' và phân biệt nav với menu website tiêu chuẩn."

    - "**Button góc sắc 2px** — Tất cả button hình chữ nhật dùng border-radius 2px. Điều này được cố tình sắc nét — nó đọc như một lệnh hệ thống, không phải một affordance marketing. Kết hợp với chồng bề mặt phẳng (không shadow), button có cảm giác như terminal inputs hơn là web CTAs."

  color_usage_hierarchy:

    info: "Bảng màu hoạt động dựa trên các quy tắc tần suất nghiêm ngặt:"

    - "**#0000ff** là màu duy nhất lấp đầy các khu vực lớn (pattern hero, CTA buttons, band dividers). Nó xuất hiện thường xuyên trong body text và viền nhưng không bao giờ làm nền trang."
    - "**#4141fc và #8b8bfe** là họ màu xanh cho outlined controls và điểm nhấn phụ. Chúng không bao giờ nên lấp đầy các bề mặt lớn."
    - "**#7fd579 và #d896ff** xuất hiện với tổng số ít hơn 10 lần trên toàn bộ site. Chúng là dấu chấm than màu sắc — chỉ dùng chúng cho viền 1px, icon nhỏ hoặc marker con trỏ. Không bao giờ làm nền."
    - "**Các màu neutral tạo thành một chồng nghiêm ngặt** — #0d0d0d (canvas) → #161616 (card) → #252525 (nâng cao) → #3b3b3b (cao nhất). Mỗi bậc tăng +21–37 luminance. Không element nào được bỏ qua một bậc."

  similar_brands:

    - "**Protocol Labs** — Cùng cách tiếp cận canvas tối + một điểm nhấn xanh điện duy nhất cho thương hiệu giao thức dữ liệu, với cách xử lý nhãn kỹ thuật gần monospace tương tự trong navigation"
    - "**The Graph** — UI tối dành cho developer với một màu xanh rực rỡ làm điểm nhấn màu sắc duy nhất, component góc sắc và chồng bề mặt neutral tiết chế"
    - "**Helium** — Hero tối với nền kết cấu (hình ảnh bản đồ/mạng lưới) và một màu xanh thương hiệu duy nhất, nhắm đến đối tượng crypto/infrastructure với chrome marketing tối thiểu"
    - "**Ocean Protocol** — Câu chuyện chủ quyền dữ liệu với giao diện tối, điểm nhấn xanh điện và 3D render hình học/trừu tượng làm hình ảnh hỗ trợ"
    - "**Ceramic (ComposeDB)** — Thẩm mỹ devtool tối với component 2px-radius sắc nét, bảng màu xanh hẹp và nhãn metadata kỹ thuật trong biến thể monospace"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-indigo: #0000ff;
          --color-cobalt-pulse: #4141fc;
          --color-periwinkle-veil: #8b8bfe;
          --color-lime-beacon: #7fd579;
          --color-orchid-whisper: #d896ff;
          --color-midnight-void: #0d0d0d;
          --color-carbon-panel: #161616;
          --color-graphite-lift: #252525;
          --color-steel-hover: #3b3b3b;
          --color-pure-signal: #ffffff;
          --color-soft-mist: #eaeaea;
          --color-charcoal: #333333;
          --color-warm-filament: #b8ad97;
        
          /* Typography — Font Families */
          --font-cofo-sans: 'Cofo Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cofo-sans-pixel: 'Cofo Sans Pixel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.25;
          --tracking-caption: -0.2px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.15;
          --tracking-subheading: -0.36px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: -1.28px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-2xl: 16px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-cards: 2px;
          --radius-large: 16px;
          --radius-pills: 1440px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-midnight-void: #0d0d0d;
          --surface-carbon-panel: #161616;
          --surface-graphite-lift: #252525;
          --surface-steel-hover: #3b3b3b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-indigo: #0000ff;
          --color-cobalt-pulse: #4141fc;
          --color-periwinkle-veil: #8b8bfe;
          --color-lime-beacon: #7fd579;
          --color-orchid-whisper: #d896ff;
          --color-midnight-void: #0d0d0d;
          --color-carbon-panel: #161616;
          --color-graphite-lift: #252525;
          --color-steel-hover: #3b3b3b;
          --color-pure-signal: #ffffff;
          --color-soft-mist: #eaeaea;
          --color-charcoal: #333333;
          --color-warm-filament: #b8ad97;
        
          /* Typography */
          --font-cofo-sans: 'Cofo Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cofo-sans-pixel: 'Cofo Sans Pixel', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.25;
          --tracking-caption: -0.2px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.15;
          --tracking-subheading: -0.36px;
          --text-display: 64px;
          --leading-display: 1.1;
          --tracking-display: -1.28px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-2xl: 16px;
          --radius-full: 1440px;
        }