rainbowkit___style_reference:
  info: "> Modal ví neon lơ lửng trong khoảng không đen — dải cực quang xanh dương pha tím phát sáng xuyên qua bóng tối."

  theme: "dark"

  info: "RainbowKit sử dụng ngôn ngữ crypto-native của nửa đêm: một canvas đen với các thẻ nổi tối, typography sans-serif bo tròn đầy tự tin, và một gradient xanh dương pha tím duy nhất làm trái tim cảm xúc của thương hiệu. Thiết kế tồn tại trong khoảng cách giữa sự nghiêm túc của developer-tool và sự dễ tiếp cận của consumer-app — shadow đậm tạo chiều sâu trên bề mặt tối phẳng, inset white border highlight định nghĩa các cạnh nút, và bán kính 9999px biến mọi tương tác thành những viên pill thân thiện. Màu sắc được sử dụng một cách có chủ đích: signal blue cho hành động chính, aurora gradient cho hero CTA, và chữ trắng tinh trên các lớp xám để phân cấp. Các modal component nổi với stack shadow 24px ấn tượng, xem trước bề mặt sản phẩm của chính toolkit. Lưới đối tác 6 cột bên dưới báo hiệu sự tin cậy của cộng đồng ở quy mô lớn mà không cần đến testimonials."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Signal Blue | `#0e76fd` | `--color-signal-blue` | Primary CTA fill, trạng thái active, brand wordmark, nhấn mạnh link — màu xanh duy nhất có đủ diện tích bề mặt để mang bản sắc thương hiệu |"
    info: "| Aurora Gradient | `linear-gradient(to right, rgb(56, 152, 255), rgb(122, 112, 255))` | `--color-aurora-gradient` | Hero CTA gradient, brand wordmark highlight, vùng chọn được tô — chảy từ xanh bầu trời đến tím điện |"
    info: "| Electric Violet | `#7a70ff` | `--color-electric-violet` | Điểm kết thúc gradient, brand-secondary accent — chỉ xuất hiện như nửa tím mát của aurora |"
    info: "| Deep Iris | `#38228f` | `--color-deep-iris` | Lớp phủ tím cho nền highlight, dải trang trí, và điểm nhấn mềm phía sau nội dung. |"
    info: "| Hyper Pink | `#ff5ca0` | `--color-hyper-pink` | Phổ accent — tùy chọn trình diễn trong showcase tùy chỉnh ví, không phải màu trạng thái UI |"
    info: "| Ember Red | `#fa423c` | `--color-ember-red` | Phổ accent — tùy chọn trình diễn trong showcase tùy chỉnh ví |"
    info: "| Solar Orange | `#ff801f` | `--color-solar-orange` | Phổ accent — tùy chọn trình diễn trong showcase tùy chỉnh ví |"
    info: "| Toxic Green | `#1db847` | `--color-toxic-green` | Phổ accent — tùy chọn trình diễn trong showcase tùy chỉnh ví |"
    info: "| Void | `#000000` | `--color-void` | Canvas trang, bề mặt sâu nhất, viền nút đảo ngược — đen thực sự neo giữ toàn bộ hệ thống |"
    info: "| Obsidian | `#1b1c1e` | `--color-obsidian` | Bề mặt thẻ, code blocks, modal containers, body text trên nền sáng — bề mặt nâng cao chủ lực |"
    info: "| Shadow | `#121314` | `--color-shadow` | Màu tint shadow (dùng trong box-shadow rgba), gần đen với một chút ấm |"
    info: "| Graphite | `#25292e` | `--color-graphite` | Viền mảnh, đường phân cách, icon stroke, secondary text trên nền tối — border trung tính được dùng nhiều nhất trong hệ thống |"
    info: "| Slate | `#2f3334` | `--color-slate` | Viền phụ, đường phân cách tinh tế giữa các section — nằm giữa Graphite và Pewter |"
    info: "| Carbon | `#353a3b` | `--color-carbon` | Icon fill cấp ba, border trạng thái disabled, nền tinh tế |"
    info: "| Pewter | `#646566` | `--color-pewter` | Nền nút disabled, bề mặt ít nhấn mạnh — không bao giờ dùng cho text |"
    info: "| Fog | `#95979c` | `--color-fog` | Helper text mờ, icon phụ, placeholder text — màu xám duy nhất mang thông tin có thể đọc được |"
    info: "| Snow | `#ffffff` | `--color-snow` | Primary text, nút đảo ngược fill, nền bề mặt sáng, icon glyphs, viền highlight mảnh |"
    info: "| Mist | `#f0f1f5` | `--color-mist` | Light-theme surface fallback, màu trắng ngà rất nhẹ cho nền section trên demo |"

  tokens___typography:

    sfrounded___primary_typeface_cho_toàn_bộ_ui___rounded_geometric_sans__được_chọn_vì_các_đầu_chữ_mềm_làm_cho_copy_web3_kỹ_thuật_trở_nên_dễ_tiếp_cận_thay_vì_đáng_sợ____font_sfrounded:
      - "**Thay thế:** Nunito, Inter (biến thể rounded), Avenir Next Rounded"
      - "**Weights:** 400, 500, 600, 700, 800"
      - "**Kích thước:** 11px, 14px, 16px, 18px, 20px, 24px, 40px, 52px"
      - "**Line height:** 1.00–1.33"
      - "**Letter spacing:** Dương trong toàn bộ (0.007–0.032em) — bất thường đối với một display font; tracking mở rộng khi kích thước tăng, tạo cho headlines một nhịp điệu rộng rãi, thân thiện thay vì vẻ ngoài bó chặt của các thương hiệu công nghệ điển hình"
      - "**Vai trò:** Primary typeface cho toàn bộ UI — rounded geometric sans, được chọn vì các đầu chữ mềm làm cho copy Web3 kỹ thuật trở nên dễ tiếp cận thay vì đáng sợ"

    sfmono___code_snippets__lệnh_terminal__chuỗi_kỹ_thuật___lệnh_npm_install_trong_hero____font_sfmono:
      - "**Thay thế:** JetBrains Mono, Fira Code, SF Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.0250em"
      - "**Vai trò:** Code snippets, lệnh terminal, chuỗi kỹ thuật — lệnh npm install trong hero"

    system_ui___fallback_body_copy_khi_web_font_chưa_tải___hầu_như_không_thấy_vì_sfrounded_chiếm_ưu_thế____font_system_ui:
      - "**Weights:** 400"
      - "**Kích thước:** 20px"
      - "**Line height:** 1.05"
      - "**Letter spacing:** 0.0170em"
      - "**Vai trò:** Fallback body copy khi web font chưa tải — hầu như không thấy vì SFRounded chiếm ưu thế"

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_arial:
      - "**Weights:** 400"
      - "**Kích thước:** 13px, 16px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.31 | 0.35px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | 0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.25 | 0.27px | `--text-body` |"
      info: "| subheading | 18px | 1.33 | 0.31px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.2 | 0.3px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.17 | 0.43px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.05 | 0.88px | `--text-heading-lg` |"
      info: "| display | 52px | 1 | 1.3px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 24px |"
      info: "| icons | 12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 12px |"
      info: "| modals | 24px |"
      info: "| buttons | 9999px |"
      info: "| codeBlocks | 12px |"
      info: "| logoFrames | 9999px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.4) 0px 8px 24px 0px` | `--shadow-lg` |"
      info: "| subtle | `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgb(255, 255, 255) 0px 0px 0px 4px` | `--shadow-subtle-2` |"
      info: "| xl | `rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31,...` | `--shadow-xl` |"
      info: "| md | `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px` | `--shadow-md` |"
      info: "| xl-2 | `rgba(0, 0, 0, 0.32) 0px 8px 32px 0px` | `--shadow-xl-2` |"

    layout:

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

  components:

    gradient_primary_cta:
      vai_trò: "Hành động hero — mời khách truy cập vào tài liệu."

      info: "Nút filled với linear-gradient(to right, #3898ff, #7a70ff), chữ trắng ở 16px SFRounded weight 500, letter-spacing 0.27px. Padding 12px 24px. Radius 9999px (pill). Viền highlight trắng inset ở rgba(255,255,255,0.12) để định nghĩa cạnh. Khi nâng lên: shadow mềm hai lớp."

    solid_blue_pill_button:
      vai_trò: "CTA phụ và các hành động điều hướng cố định như 'Connect Wallet'."

      info: "Nền #0e76fd, chữ trắng, 16px SFRounded weight 500. Padding 6px 16px. Radius 9999px. Nằm ở góc trên bên phải của nav. Nhỏ gọn, độ tương phản cao, không thể nhầm lẫn."

    ghost_nav_button_logo___version:
      vai_trò: "Nhận diện thương hiệu trong thanh nav với metadata phiên bản."

      info: "Icon gradient cầu vồng (phong cách app) theo sau là chữ 'RainbowKit' màu trắng ở 14px weight 600, với một badge phiên bản nhỏ (1.3.10) dùng nền Pewter, chữ trắng ở 11px, radius 9999px, padding 1px 5px."

    terminal_code_block:
      vai_trò: "Lệnh cài đặt copy-paste trong hero."

      info: "Bề mặt tối (#1b1c1 hoặc gần đen) với viền trắng tinh tế. Chứa chữ monospace (SFMono 14px) hiển thị lệnh npm. Bao gồm một nút icon copy nhỏ ở bên phải. Padding ~12px 18px. Radius 12px."

    wallet_connection_modal:
      vai_trò: "Showcase sản phẩm — component RainbowKit thực tế nổi trên landing page."

      info: "Thẻ ở radius 24px, bề mặt Obsidian (#1b1c1e), shadow nặng (rgba(0,0,0,0.4) 0px 8px 24px). Hàng header với tiêu đề 'Connect a Wallet' và icon X đóng. Body có nhãn 'Popular', sau đó là danh sách các mục ví (Rainbow, Coinbase Wallet, MetaMask, WalletConnect) với icon thương hiệu và chevron mũi tên phải. Phần 'More' bên dưới với Ledger Live. Tất cả chữ trắng ở 16px SFRounded weight 500."

    wallet_list_item:
      vai_trò: "Tùy chọn có thể chọn bên trong modal kết nối."

      hàng_với: "icon thương hiệu ví hình tròn (32px), tên ví màu trắng 16px weight 500, chevron phải tùy chọn. Trạng thái hover tinh tế sẽ nâng nền hàng lên. Padding ~12px dọc, 16px ngang."

    what_is_a_wallet_info_card:
      vai_trò: "Thẻ thông tin giáo dục giải thích về ví bên cạnh modal kết nối."

      info: "Cùng bề mặt Obsidian và shadow như modal. Chứa heading 'What is a Wallet?' màu trắng 20px, theo sau là các đoạn văn ngắn của body text (14-16px) và icon tính năng nhỏ nội dòng. Hoạt động như một bề mặt giáo dục phụ bên cạnh hành động chính."

    mobile_preview_card:
      vai_trò: "Trình diễn UI ví trên khung điện thoại, thể hiện hành vi responsive."

      info: "Khung điện thoại dọc với các góc bo tròn, hiển thị cùng modal 'Connect a Wallet' được thu nhỏ. Nền hơi sáng hơn để tách khỏi canvas. Hoạt động như một ảnh chụp màn hình sản phẩm trực quan, không phải component tương tác."

    section_heading_block:
      vai_trò: "Tiêu đề section căn giữa với copy hỗ trợ."

      info: "Khối chữ căn giữa. Heading chính màu trắng 20-24px SFRounded weight 600. Đoạn văn hỗ trợ màu Fog (#95979c) 16px weight 400. Khoảng cách dọc rộng rãi phía trên và dưới. Được dùng để giới thiệu lưới đối tác."

    partner_logo_grid_item:
      vai_trò: "Dấu hiệu tin cậy thương hiệu — lưới logo đối tác 6×n."

      info: "Vùng chứa logo hình tròn (radius 9999px) với logo thực tế của thương hiệu. Bên dưới: tên thương hiệu màu trắng 14px weight 500. Khoảng cách giữa các mục 40-60px ngang. Không có nền fill — logo nổi trên Void. Logo là tài sản thương hiệu đầy đủ màu sắc, không phải đơn sắc."

    inset_highlight_border:
      vai_trò: "Dấu hiệu hình ảnh xác định của các element tương tác trên bề mặt tối."

      info: "Viền inset 1px ở rgba(255,255,255,0.12) được áp dụng cho các nút và thẻ nâng cao. Tạo hiệu ứng cạnh sáng tinh tế mô phỏng ánh sáng chiếu vào đỉnh của một bề mặt vật lý — lý do duy nhất khiến các nút trông 'nổi' trong một UI hoàn toàn tối."

    gradient_brand_wordmark:
      vai_trò: "Tiêu đề hero 'RainbowKit'."

      info: "Chữ được render với aurora gradient (#3898ff → #7a70ff) dưới dạng CSS background-clip:text fill, ở 40-52px SFRounded weight 700, letter-spacing 1.3px. Gradient được áp dụng cho toàn bộ từ, không phải từng chữ cái riêng lẻ."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng radius 9999px cho mọi nút, tag, và pill — radius là tín hiệu thân thiện của thương hiệu"
      - "Áp dụng viền trắng inset 1px (rgba(255,255,255,0.12)) cho tất cả các element tương tác nâng cao trên bề mặt Obsidian"
      - "Chỉ sử dụng aurora gradient (linear-gradient(to right, #3898ff, #7a70ff)) cho primary hero CTA và wordmark — việc dành riêng nó làm cho nó cảm thấy cao cấp"
      - "Mặc định dùng #0e76fd cho tất cả các nút hành động phụ và nhấn mạnh link"
      - "Đặt body copy ở 16px SFRounded weight 400 với 0.27px letter-spacing; headlines ở 40-52px weight 700 với 0.88-1.3px letter-spacing"
      - "Thả nổi các thẻ sản phẩm với rgba(0, 0, 0, 0.4) 0px 8px 24px 0px — shadow nặng là thứ làm cho modal cảm thấy như một cửa sổ vào sản phẩm"
      - "Giữ canvas ở #000000 thực sự — không bao giờ làm ấm nó bằng off-black, void là điểm mấu chốt"

    không_nên_làm:
      - "Không sử dụng các màu accent chromatic (Hyper Pink, Ember Red, Solar Orange, Toxic Green) làm trạng thái UI ngữ nghĩa — chúng là các tùy chọn trình diễn, không phải token success/error/warning"
      - "Không áp dụng shadow cho text hoặc chính canvas — shadow chỉ thuộc về các thẻ nổi, nền thì không có shadow"
      - "Không sử dụng letter-spacing âm — SFRounded được thiết kế cho tracking dương; siết chặt nó sẽ chống lại các chữ cái bo tròn"
      - "Không giới thiệu font body thứ hai — SFRounded xử lý mọi thứ từ caption 11px đến display 52px; một serif hoặc system fallback phá vỡ sự gắn kết"
      - "Không đặt thẻ trắng hoặc sáng trên canvas — mọi bề mặt phải ở trong phạm vi Obsidian/Graphite để bảo tồn void"
      - "Không sử dụng #25292 cho text — nó là màu viền, độ tương phản trên nó không đủ cho copy có thể đọc được"
      - "Không bo tròn ảnh điện thoại hoặc ảnh chụp màn hình sản phẩm với bán kính nhỏ — chúng nên là 24px+ hoặc kế thừa hoàn toàn khung thiết bị"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void Canvas | `#000000` | Nền trang, nền tối full-bleed |"
    info: "| 1 | Obsidian Card | `#1b1c1` | Modals, code blocks, containers nâng cao phía trên canvas |"
    info: "| 2 | Graphite Edge | `#25292` | Viền mảnh phân cách và phác thảo các element trên Obsidian |"
    info: "| 3 | Deep Iris Feature | `#38228f` | Bề mặt thẻ có tint thương hiệu cho các component cao cấp hoặc nổi bật |"

  elevation:

    - "**Thẻ sản phẩm nổi và modals:** `rgba(0, 0, 0, 0.4) 0px 8px 24px 0px`"
    - "**Inset highlight nút:** `rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset`"
    - "**Nút gradient chính (hover/elevated):** `rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31, 0.04) 0px 5px 15px 0px`"
    - "**Thẻ nâng cao tinh tế:** `rgba(0, 0, 0, 0.1) 0px 4px 12px 0px`"
    - "**Thẻ thương hiệu nổi bật:** `rgba(0, 0, 0, 0.32) 0px 8px 32px 0px`"
    - "**Focus ring:** `rgb(255, 255, 255) 0px 0px 0px 4px`"

  imagery:

    info: "Hình ảnh thưa thớt và tập trung vào sản phẩm. Nội dung trực quan duy nhất là ảnh chụp màn hình sản phẩm của chính component RainbowKit (modal kết nối ví và bản xem trước điện thoại di động) cộng với lưới logo đối tác 6 cột. Logo là tài sản thương hiệu đầy đủ màu sắc được trình bày trong khung tròn (radius 9999px), không bao giờ là đơn sắc. Không có nhiếp ảnh, không có minh họa, không có đồ họa trừu tượng, không có 3D renders. Ảnh chụp màn hình modal phục vụ như cả hình ảnh tiếp thị và bằng chứng sản phẩm — chúng CHÍNH LÀ hero. Canvas void tự nó là một lựa chọn thiết kế: sự vắng mặt của hình ảnh trang trí báo hiệu sự nghiêm túc của developer-tool trong khi typography bo tròn và gradient CTA đẩy ngược lại về phía sự ấm áp của consumer-app."

  layout:

    info: "Canvas tối full-bleed (#000000) với tất cả nội dung được căn giữa trong max-width 1200px. Hero: stack một cột căn giữa — brand wordmark → H1 headline → subtext → terminal code block → gradient CTA. Bên dưới hero, một khu vực showcase sản phẩm nổi chồng lên ranh giới section: bố cục 2 cột của modal kết nối ví (trái), một thẻ thông tin giáo dục (giữa), và bản xem trước điện thoại di động (phải), mỗi cái nổi với shadow nặng. Nhịp điệu section xen kẽ: headline căn giữa → lưới logo đối tác 6 cột → dải kết thúc căn giữa. Khoảng cách section dọc lớn (80-120px) để cho canvas tối thở. Navigation là một thanh trên cùng tối giản (logo+phiên bản trái, một CTA phải) không có mega-menu hoặc sidebar. Thẻ xem trước di động chồng lên section tiếp theo để tạo dòng chảy trực quan giữa các dải."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #ffffff (chính), #95979c Fog (mờ)"
    - "background: #000000 Void (canvas), #1b1c1e Obsidian (thẻ)"
    - "border: #25292e Graphite (viền mảnh), rgba(255,255,255,0.12) (inset highlights)"
    - "accent: aurora gradient #3898ff → #7a70ff"
    - "primary action: #0e76fd (filled action)"

  example_component_prompts:

    tạo_một_primary_action_button: "nền #0e76fd, chữ #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính."

    solid_blue_nav_button: ": Xây dựng một nút pill nhỏ gọn với nền #0e76fd, chữ 'Connect Wallet' màu trắng ở 16px SFRounded weight 500, padding 6px 16px, radius 9999px, không shadow."

    wallet_connection_modal_card: ": Tạo một thẻ trên nền #1b1c1e Obsidian với radius 24px, shadow rgba(0,0,0,0.4) 0px 8px 24px 0px. Header: 'Connect a Wallet' màu trắng 16px SFRounded weight 600, với icon × đóng nhỏ ở góc trên bên phải màu #95979c. Body: nhãn 'Popular' màu Fog 14px, sau đó 4 hàng danh sách (Rainbow, Coinbase Wallet, MetaMask, WalletConnect) mỗi hàng có icon thương hiệu 32px, tên màu trắng 16px, và chevron phải màu #95979c."

    terminal_code_block: ": Render một container code tối màu #1b1c1e Obsidian với radius 12px và viền Graphite 1px. Bên trong: chữ monospace 'npm init @rainbow-me/rainbowkit@latest' ở 14px trong SFMono, màu trắng. Bên phải: icon copy nhỏ ở 16px màu #95979c. Padding 12px 18px."

    gradient_brand_wordmark: ": Hiển thị 'RainbowKit' dưới dạng chữ với aurora gradient (linear-gradient(to right, #3898ff, #7a70ff)) được áp dụng qua background-clip:text, ở 40-52px SFRounded weight 700, letter-spacing 0.88-1.3px, fill trắng nơi gradient được mask. Căn giữa nó trên canvas void."

  similar_brands:

    - "**WalletConnect** — Cùng canvas void tối với các modal sản phẩm nổi và một accent xanh duy nhất — category kết nối ví đã hội tụ về ngôn ngữ hình ảnh này"
    - "**Privy** — Cách tiếp cận giống hệt: canvas đen, CTA hình pill, typography sans bo tròn, và gradient xanh dương pha tím làm khoảnh khắc thương hiệu chính"
    - "**Dynamic** — Cùng UI midnight-mode với nút pill, hình học bo tròn, và một accent chromatic duy nhất (xanh) trên nền đen tinh khiết"
    - "**Web3Auth** — Developer-tool dark UI với auth modals nổi, khoảnh khắc gradient thương hiệu, và typography bo tròn làm dịu sự nghiêm trọng của mật mã"
    - "**Stripe (docs)** — Cùng cách tiếp cận floating-card-on-dark để showcase các component sản phẩm, mặc dù accent của Stripe là tím thay vì xanh"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #0e76fd;
          --color-aurora-gradient: #3898ff;
          --gradient-aurora-gradient: linear-gradient(to right, rgb(56, 152, 255), rgb(122, 112, 255));
          --color-electric-violet: #7a70ff;
          --color-deep-iris: #38228f;
          --color-hyper-pink: #ff5ca0;
          --color-ember-red: #fa423c;
          --color-solar-orange: #ff801f;
          --color-toxic-green: #1db847;
          --color-void: #000000;
          --color-obsidian: #1b1c1e;
          --color-shadow: #121314;
          --color-graphite: #25292e;
          --color-slate: #2f3334;
          --color-carbon: #353a3b;
          --color-pewter: #646566;
          --color-fog: #95979c;
          --color-snow: #ffffff;
          --color-mist: #f0f1f5;
        
          /* Typography — Font Families */
          --font-sfrounded: 'SFRounded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfmono: 'SFMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.31;
          --tracking-caption: 0.35px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: 0.27px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: 0.31px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.3px;
          --text-heading: 24px;
          --leading-heading: 1.17;
          --tracking-heading: 0.43px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: 0.88px;
          --text-display: 52px;
          --leading-display: 1;
          --tracking-display: 1.3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 24px;
          --radius-icons: 12px;
          --radius-pills: 9999px;
          --radius-inputs: 12px;
          --radius-modals: 24px;
          --radius-buttons: 9999px;
          --radius-codeblocks: 12px;
          --radius-logoframes: 9999px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.4) 0px 8px 24px 0px;
          --shadow-subtle: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgb(255, 255, 255) 0px 0px 0px 4px;
          --shadow-xl: rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31, 0.04) 0px 5px 15px 0px;
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.32) 0px 8px 32px 0px;
        
          /* Surfaces */
          --surface-void-canvas: #000000;
          --surface-obsidian-card: #1b1c1;
          --surface-graphite-edge: #25292;
          --surface-deep-iris-feature: #38228f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #0e76fd;
          --color-aurora-gradient: #3898ff;
          --color-electric-violet: #7a70ff;
          --color-deep-iris: #38228f;
          --color-hyper-pink: #ff5ca0;
          --color-ember-red: #fa423c;
          --color-solar-orange: #ff801f;
          --color-toxic-green: #1db847;
          --color-void: #000000;
          --color-obsidian: #1b1c1e;
          --color-shadow: #121314;
          --color-graphite: #25292e;
          --color-slate: #2f3334;
          --color-carbon: #353a3b;
          --color-pewter: #646566;
          --color-fog: #95979c;
          --color-snow: #ffffff;
          --color-mist: #f0f1f5;
        
          /* Typography */
          --font-sfrounded: 'SFRounded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfmono: 'SFMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.31;
          --tracking-caption: 0.35px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: 0.27px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: 0.31px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.3px;
          --text-heading: 24px;
          --leading-heading: 1.17;
          --tracking-heading: 0.43px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: 0.88px;
          --text-display: 52px;
          --leading-display: 1;
          --tracking-display: 1.3px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.4) 0px 8px 24px 0px;
          --shadow-subtle: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgb(255, 255, 255) 0px 0px 0px 4px;
          --shadow-xl: rgba(27, 29, 31, 0.1) 0px 10px 30px 0px, rgba(27, 29, 31, 0.04) 0px 5px 15px 0px;
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
          --shadow-xl-2: rgba(0, 0, 0, 0.32) 0px 8px 32px 0px;
        }