codex_io___style_reference:
  info: "> Ngọn hải đăng Citrine trong khoảng không — khối lập phương xanh chanh phát sáng neo giữa căn phòng tối, với chữ trắng mảnh và các vòng node rải rác lơ lửng xung quanh."

  theme: "mixed"

  info: "Codex.io giao tiếp bằng một cử chỉ kịch tính duy nhất: khối lập phương citrine phát quang lơ lửng trong khoảng không carbon sâu thẳm, được bao quanh bởi các blockchain node đang quay quanh quỹ đạo. Giao diện gần như hoàn toàn tối với một điểm nhấn xanh chanh điện (#e5ff5d) làm tất cả công việc về màu sắc — hành động chính, nét icon, khối trang trí, dấu hiệu thương hiệu. Typography là một sans-serif nhân văn duy nhất (Neue Haas Grotesk) được thiết lập với tracking tự tin, hơi chặt, nơi headline display 80px chiếm trọn hàng và các label nhỏ nhận được positive tracking. Trang dao động giữa các section tối dày đặc chứa sơ đồ chòm sao và một đoạn đảo màu kem nơi các khối lập phương khổng lồ trong suốt đóng khung một thông điệp trung tâm. Mọi màn hình nên tạo cảm giác như đang nhìn vào phòng server qua viewport — tối, yên tĩnh, được nhấn mạnh bởi một tín hiệu sáng duy nhất."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Citrine Signal | `#e5ff5d` | `--color-citrine-signal` | Nút hành động chính, phần tô khối thương hiệu, nét icon nhấn, khối 3D trang trí, dấu logo nổi bật — giọng màu duy nhất của hệ thống |"
    info: "| Carbon Black | `#111111` | `--color-carbon-black` | Canvas trang, văn bản chính trên section sáng, màu border chủ đạo, phần tô nút trên section đảo (sáng) |"
    info: "| Bone White | `#f9f9f9` | `--color-bone-white` | Văn bản chính trên canvas tối, nav và body text, phần tô icon sáng, chữ ghost button |"
    info: "| Graphite | `#2b2b2b` | `--color-graphite` | Bề mặt nâng cao trên carbon, panel phụ, biến thể card tối hơn |"
    info: "| Ash | `#6e6e6e` | `--color-ash` | Bề mặt card mờ, lớp nền cấp ba đằng sau khối nội dung |"
    info: "| Stone | `#9c9c9c` | `--color-stone` | Body text mờ, text link phụ, border ưu tiên thấp, label trợ giúp |"
    info: "| Smoke | `#565656` | `--color-smoke` | Đường phân cách, border tinh tế, nét trang trí trong minh họa |"
    info: "| Chalk | `#d6d6d6` | `--color-chalk` | Border card trên section tối, đường phân cách mảnh giữa các khối nội dung |"
    info: "| Cream Paper | `#eeeeee` | `--color-cream-paper` | Nền section sáng — điểm đảo màu ấm duy nhất phá vỡ nhịp điệu tối |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Văn bản tương phản tối đa, silhouette logo, phần tô trang trí cạnh cứng |"
    info: "| Sand | `#b7b3a2` | `--color-sand` | Phần tô trang trí pha ấm, điểm nhấn minh họa — màu trung tính có sắc thái duy nhất |"

  tokens___typography:

    neue_haas_grotesk_text___kiểu_chữ_duy_nhất_trên_toàn_hệ_thống__weight_400_dùng_cho_body__nav_và_hầu_hết_ui__weight_500_dành_riêng_cho_label_nhấn_mạnh_và_chữ_nút__headline_display_ở_80px_với_line_height_0_90_tạo_nên_các_hàng_monolithic_đặc_trưng__label_nhỏ_10_12px_dùng_positive_tracking__0_020_đến__0_032em_để_đọc_như_dấu_hiệu_tiện_ích_in_hoa__hình_học_nhân_văn_của_haas_grotesk___đầu_chữ_hơi_nhân_văn__độ_tương_phản_nét_đều___mang_lại_cho_giao_diện_tối_một_chất_lượng_ấm_áp__editorial_thay_vì_cảm_giác_như_terminal_____font_neue_haas_grotesk_text:
      - "**Thay thế:** Inter, Söhne, Neue Haas Grotesk Display"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 10, 12, 16, 20, 24, 80"
      - "**Line height:** 1.20–1.50 body, 0.90 display, 1.30 subhead"
      - "**Letter spacing:** -0.01em ở 80px display, 0em ở 16–24px body, +0.020 đến +0.032em ở 10–12px utility labels"
      - "**OpenType features:** `\"kern\" on, \"liga\" on`"
      - "**Vai trò:** Kiểu chữ duy nhất trên toàn hệ thống. Weight 400 dùng cho body, nav và hầu hết UI; weight 500 dành riêng cho label nhấn mạnh và chữ nút. Headline display ở 80px với line-height 0.90 tạo nên các hàng monolithic đặc trưng. Label nhỏ (10–12px) dùng positive tracking (+0.020 đến +0.032em) để đọc như dấu hiệu tiện ích in hoa. Hình học nhân văn của Haas Grotesk — đầu chữ hơi nhân văn, độ tương phản nét đều — mang lại cho giao diện tối một chất lượng ấm áp, editorial thay vì cảm giác như terminal."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|------|"
      info: "| utility-label | 10px | 1.5 | 0.32px | `--text-utility-label` |"
      info: "| caption | 12px | 1.5 | 0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subhead | 20px | 1.3 | — | `--text-subhead` |"
      info: "| heading-sm | 24px | 1.2 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.1 | -0.48px | `--text-heading` |"
      info: "| display | 80px | 0.9 | -0.8px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "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` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| buttons | 4px |"
      info: "| decorative | 20px |"

    layout:

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

  components:

    citrine_primary_button:
      vai_trò: "CTA chính trên toàn site"

      info: "Nền #e5ff5d, chữ #111111, radius 4px, padding 12px 24px. Neue Haas Grotesk Text 500 ở 16px. Bao gồm một pixel icon nhỏ bên trái. Màu xanh chanh trên nền carbon tạo tín hiệu thu hút chú ý cao nhất trong hệ thống — sử dụng tiết kiệm, không quá một cái trên mỗi viewport."

    dark_primary_button:
      vai_trò: "Hành động chính trên section đảo màu kem/sáng"

      info: "Nền #111111, chữ #f9f9f9, radius 4px, padding 12px 24px. Phiên bản đảo ngược của Citrine Primary. Điểm nhấn xanh chanh chuyển thành một glyph pixel nhỏ bên trái (citrine hoặc dark tùy section) để hành động luôn mang hạt giống thương hiệu."

    ghost_button:
      vai_trò: "Hành động phụ, đi kèm với primary"

      info: "Nền trong suốt, border #f9f9f9 1px trên section tối / border #111111 trên section sáng, chữ in hoa Neue Haas 500 ở 12px với +0.032em tracking, radius 4px, padding 10px 20px. Đọc như một chip tiện ích hơn là CTA cạnh tranh."

    navigation_bar:
      vai_trò: "Điều hướng cấp cao nhất"

      info: "Trong suốt trên canvas tối. Bên trái: wordmark CODEX bằng #f9f9f9 weight 500 ở 20px, tracking 0.027em. Giữa-phải: link nav (PRODUCT, PRICING, CUSTOMERS, COMPARE, AGENTS, DOCS) bằng Neue Haas 500 ở 12px với +0.027em tracking, #f9f9f9, cách nhau 32px. Bên phải: Citrine Primary Button. Radius 8px trên container nav."

    citrine_cube:
      vai_trò: "Yếu tố nhận diện thương hiệu — khối lập phương 3D phát sáng"

      info: "Khối lập phương xanh chanh trong suốt (#e5ff5d với highlight gradient bên trong gợi ý khối lượng) được render dưới dạng khối isometric 3D. Xuất hiện trong hero (canh giữa phía trên headline), trong sơ đồ chòm sao (là node trung tâm), và trong đoạn đảo màu kem (là cụm 3–4 khối lớn đóng khung nội dung). Các cạnh khối phát sáng — đây là nơi duy nhất gradient, ánh sáng và chiều sâu tồn tại trong hệ thống."

    constellation_network_diagram:
      vai_trò: "Hình ảnh trực quan thể hiện phạm vi phủ sóng đa chain"

      info: "Khối Citrine Cube trung tâm với 12–16 icon blockchain node được sắp xếp theo vòng tròn xung quanh. Mỗi node là một hình tròn 40px với nền tối, icon chain màu xanh chanh hoặc trắng bên trong, được kết nối với trung tâm bằng các đường đứt nét mảnh #565656. Thể hiện định vị '80+ networks' thông qua hình học trực quan thay vì danh sách."

    node_icon_ring:
      vai_trò: "Container tái sử dụng cho icon chain/crypto"

      info: "Hình tròn 40px với border 1px #2b2b2b trên nền tối, hoặc #d6d6d6 trên nền sáng. Icon canh giữa, 20px, màu xanh chanh hoặc trắng. Được sử dụng rải rác trong hero, trong sơ đồ chòm sao và trong minh họa tính năng."

    display_headline:
      vai_trò: "Tiêu đề hero và cấp section"

      info: "Neue Haas Grotesk Text 400 ở 80px, line-height 0.90, letter-spacing -0.01em, #f9f9f9 trên nền tối, #111111 trên nền sáng. Text-transform: uppercase. Leading chặt và kích thước lớn làm cho 4 dòng chữ lấp đầy toàn bộ viewport. Weight 400 (không phải 700) là lựa chọn đặc trưng — nó thì thầm thay vì la hét, để khối lập phương xanh làm phần la hét."

    section_heading:
      vai_trò: "Tiêu đề section cấp trung"

      info: "Neue Haas 500 ở 24px, line-height 1.20, #f9f9f9 trên nền tối. Dùng để gắn nhãn giải thích phụ và khối tính năng."

    body_text:
      vai_trò: "Đoạn văn bản và mô tả"

      info: "Neue Haas 400 ở 16px, line-height 1.50, #f9f9f9 cho body chính, #9c9c9c cho body mờ/trợ giúp. Chiều rộng đọc thoải mái tối đa 560px trong cột nội dung."

    feature_pill:
      vai_trò: "Thẻ tiện ích nhỏ làm nổi bật khả năng"

      label_nhỏ_gọn: "in hoa Neue Haas 500 ở 10–12px với +0.032em tracking, chữ #e5ff5d, tùy chọn nền radius 4px. Được sử dụng trong hàng như 'TRADING-READY · SUB-SECOND · ALL-IN-ONE' với một dấu chấm/icon xanh chanh nhỏ ở đầu."

    logo_cloud_row:
      vai_trò: "Bằng chứng xã hội — dấu hiệu thương hiệu khách hàng"

      info: "Hai hàng canh giữa logo trắng đơn sắc trên canvas carbon. Logo ở độ mờ 60%, tô #f9f9f9, cách đều nhau qua flex với khoảng cách cột 48px. Không có nền card — logo nổi trực tiếp trên canvas tối."

    split_feature_block:
      vai_trò: "Giải thích hai cột với text bên trái, hình ảnh bên phải"

      info: "Cột text (40% chiều rộng) với heading + 2 đoạn body canh trái. Cột hình ảnh (60%) canh giữa, chứa minh họa chòm sao hoặc khối. Khoảng cách cột 80px, canh giữa theo chiều dọc. Nền tối, chữ #f9f9f9."

    reversal_band:
      vai_trò: "Section sáng phá vỡ nhịp điệu tối"

      info: "Dải nền #eeeeee full-width với các khối Citrine Cube 3D lớn nổi ở mép trái và phải (3–4 khối mỗi bên, xoay nhẹ, chồng lên nhau). Stack nội dung canh giữa: display headline 80px #111111, subheading 16px #9c9c9c, hàng CTA (dark button + ghost button). Padding trên/dưới 80px."

  do_s_and_don_ts:

    do:
      - "Sử dụng #e5ff5d (Citrine Signal) cho chính xác một hành động chính trên mỗi viewport và để Citrine Cube mang dấu hiệu thương hiệu ở mọi nơi khác"
      - "Đặt display headline ở 80px Neue Haas 400, line-height 0.90, uppercase — weight thì thầm trên kiểu chữ khổng lồ là giọng nói đặc trưng của hệ thống"
      - "Sử dụng radius 4px cho tất cả element tương tác (nút, mục nav, thẻ) và 12px cho card — không bao giờ làm tròn nút thành pill"
      - "Áp dụng +0.027 đến +0.032em letter-spacing cho tất cả label tiện ích in hoa 10–12px để đọc như dấu hiệu terminal/UI thay vì văn xuôi"
      - "Phá vỡ nhịp điệu tối với chính xác một dải đảo màu kem (#eeeeee) trên mỗi trang chính — sự đặt lại độ sáng là nhịp kịch tính của trang"
      - "Kết nối node trong sơ đồ chòm sao bằng đường đứt nét mảnh #565656 — cấu trúc liên kết mạng CHÍNH LÀ nội dung, không phải trang trí"
      - "Giữ tất cả hình ảnh ở dạng iconographic và đơn sắc (trắng hoặc xanh chanh) — không bao giờ đưa ảnh chụp, gradient hoặc minh họa trang trí"

    don_t:
      - "Không sử dụng điểm nhấn màu thứ hai — sức mạnh của hệ thống đến từ kỷ luật một màu; thêm xanh dương, đỏ hoặc tím phá hủy tỷ lệ tín hiệu trên nhiễu"
      - "Không đặt display headline ở weight 700 hoặc 600 — weight 400 ở 80px là đặc trưng; in đậm làm nó trở nên chung chung"
      - "Không sử dụng nút hình pill (9999px) — radius 4px sắc nét và kiến trúc, pill sẽ có cảm giác consumer/dễ thương"
      - "Không đặt nội dung trên nền card bo tròn có bóng đổ — mọi thứ nằm phẳng trên canvas carbon hoặc dải đảo màu kem, không có lồng ghép"
      - "Không sử dụng nhiều sắc thái xanh chanh cho trạng thái hover/active — màu xanh là nhị phân (bật/tắt); dựa vào chuyển đổi độ mờ và bước bề mặt cho thay đổi trạng thái"
      - "Không đưa nhiều hơn một dải sáng trên mỗi trang — xếp chồng các section sáng làm loãng tác động của đoạn đảo màu"
      - "Không sử dụng ảnh chụp, hình ảnh lối sống hoặc khuôn mặt người — hệ thống là cơ sở hạ tầng trừu tượng, không phải sản phẩm tiêu dùng"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Carbon Canvas | `#111111` | Nền trang — phần lớn trải nghiệm sống ở đây |"
    info: "| 2 | Graphite Panel | `#2b2b2b` | Card và panel nâng cao nằm trên carbon canvas |"
    info: "| 3 | Ash Plate | `#6e6e6` | Bề mặt phụ mờ, nền logo cloud |"
    info: "| 4 | Cream Reversal | `#eeeeee` | Section sáng — dải sáng duy nhất đặt lại mắt |"

  elevation:

    - "**Nav container:** `none — nằm phẳng trên canvas`"
    - "**Citrine Primary Button:** `none — màu phẳng, không bóng`"
    - "**Cards:** `none — dựa vào bước màu từ canvas lên bề mặt`"
    - "**Citrine Cube:** `inner gradient + outer glow (rgba(229,255,93,0.15) 0 0 40px) để mô phỏng phát xạ ánh sáng`"

  imagery:

    info: "Không có ảnh chụp ở bất kỳ đâu. Ngôn ngữ hình ảnh hoàn toàn được xây dựng từ: (1) Khối Citrine Cube 3D — đối tượng hero của thương hiệu, được render dưới dạng khối isometric trong suốt với highlight gradient bên trong và outer glow mềm, (2) icon blockchain node trong khung tròn, được sắp xếp theo mẫu chòm sao/vòng, (3) đường kết nối đứt nét mảnh giữa các node gợi ý cấu trúc liên kết mạng. Thẩm mỹ là trực quan hóa dữ liệu trừu tượng hơn là minh họa — icon có cảm giác như glyph terminal, không phải minh họa thân thiện. Tất cả hình ảnh sống trên canvas thuần (không có container card, không có mặt nạ bo tròn) và sử dụng điểm nhấn xanh chanh một cách tiết kiệm để nhấn mạnh. Xử lý màu sắc bị giới hạn nghiêm ngặt: xanh chanh cho khối và icon nhấn, trắng cho mọi thứ khác. Section sáng duy nhất (đảo màu kem) giới thiệu cụm khối lớn như thay đổi bố cục duy nhất."

  layout:

    info: "Max-width 1280px, canh giữa. Trang là một stack dọc các dải full-width, hầu hết là tối với padding section dọc 80px. Hero là bố cục headline-canh-giữa-trên-khối với các icon node rải rác quay quanh khối — khối nằm phía trên headline text, không phải phía sau. Bên dưới hero, một dải logo cloud canh giữa không thay đổi nền. Section thứ hai là split 2 cột: text trái (40%), hình ảnh chòm sao phải (60%), cả hai canh giữa theo chiều dọc. Section thứ ba là đảo màu canh giữa — nền kem, khối lớn ở mép trái/phải, headline và CTA xếp chồng trong cột trung tâm. Điều hướng là thanh trên cùng phẳng không có nền. Nhịp điệu là: HERO TỐI → LOGO CLOUD TỐI → TÍNH NĂNG TỐI → ĐẢO MÀU SÁNG → (TIẾP TỤC TỐI). Sử dụng grid là tối thiểu — hầu hết nội dung là stack canh giữa hoặc split 2 cột, không có card grid."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "canvas: #111111 (Carbon Black)"
    - "surface elevated: #2b2b2b (Graphite)"
    - "text primary: #f9f9f9 (Bone White)"
    - "text muted: #9c9c9c (Stone)"
    - "border: #d6d6d6 trên card tối, #9c9c9c cho hairline"
    - "brand accent / primary action: #e5ff5d (filled action)"
    - "reversal light section: #eeeeee (Cream Paper)"

    3_ví_dụ_component_prompts:

    - "Tạo một Primary Action Button: nền #e5ff5d, chữ #111111, radius 9999px, padding pill nhỏ gọn. Sử dụng xử lý filled này cho CTA chính."

    - "*Xây dựng một khối tính năng chòm sao:* Carbon Black canvas, bố cục hai cột (40% / 60% split, 80px gap, canh giữa theo chiều dọc). Cột trái: heading \"Raw blockchain data is complex to parse\" bằng Neue Haas 500 ở 24px, #f9f9f9, line-height 1.20. Hai đoạn body bằng Neue Haas 400 ở 16px, #9c9c9c. Cột phải: Citrine Cube canh giữa với 12–16 blockchain node circle (40px, tô #2b2b2b, border 1px, icon chain 20px bằng #e5ff5d hoặc #f9f9f9) được sắp xếp theo vòng tròn, mỗi node kết nối với trung tâm khối bằng đường đứt nét 1px #565656."

  the_citrine_cube_rule:

    info: "Khối lập phương trong suốt xanh chanh 3D là element có chiều sâu duy nhất trong hệ thống. Nó không phải trang trí — nó là logo của thương hiệu được mở rộng vào không gian. Mọi màn hình nên: (a) chứa ít nhất một khối, (b) tham chiếu hình học của khối trong một icon phẳng, hoặc (c) sắp xếp icon node theo mẫu chòm sao ngụ ý khối ở trung tâm. Màn hình không có sự hiện diện của khối sẽ có cảm giác chưa hoàn chỉnh. Độ trong suốt và phát sáng của khối đạt được thông qua highlight gradient bên trong (xanh chanh nhạt → xanh chanh bão hòa → xanh chanh đậm hơn) và outer glow mềm rgba(229,255,93,0.15) ở độ mờ 40px. Không bao giờ render khối dưới dạng hình vuông 2D phẳng."

  similar_brands:

    - "**Helius** — Cùng canvas tối blockchain API với một màu nhấn sống động và sơ đồ đa chain kiểu chòm sao"
    - "**Alchemy** — Dark infrastructure API với typography hạn chế, bề mặt đơn sắc và kỷ luật màu nhấn tối thiểu"
    - "**Chainbase** — Blockchain data API với layout dark-mode tương tự, một neon accent và trực quan hóa cấu trúc liên kết mạng"
    - "**Messari** — Nền tảng dữ liệu crypto tối với humanist sans typography, label tiện ích in hoa với positive tracking và logo cloud đơn sắc"
    - "**Privy** — Thương hiệu cơ sở hạ tầng crypto sử dụng canvas tối, một màu bão hòa cho CTA và hình ảnh trang trí tối thiểu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-citrine-signal: #e5ff5d;
          --color-carbon-black: #111111;
          --color-bone-white: #f9f9f9;
          --color-graphite: #2b2b2b;
          --color-ash: #6e6e6e;
          --color-stone: #9c9c9c;
          --color-smoke: #565656;
          --color-chalk: #d6d6d6;
          --color-cream-paper: #eeeeee;
          --color-pure-black: #000000;
          --color-sand: #b7b3a2;
        
          /* Typography — Font Families */
          --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-utility-label: 10px;
          --leading-utility-label: 1.5;
          --tracking-utility-label: 0.32px;
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subhead: 20px;
          --leading-subhead: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -0.48px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -0.8px;
        
          /* 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;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24-32px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-full: 1440px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-buttons: 4px;
          --radius-decorative: 20px;
        
          /* Surfaces */
          --surface-carbon-canvas: #111111;
          --surface-graphite-panel: #2b2b2b;
          --surface-ash-plate: #6e6e6;
          --surface-cream-reversal: #eeeeee;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-citrine-signal: #e5ff5d;
          --color-carbon-black: #111111;
          --color-bone-white: #f9f9f9;
          --color-graphite: #2b2b2b;
          --color-ash: #6e6e6e;
          --color-stone: #9c9c9c;
          --color-smoke: #565656;
          --color-chalk: #d6d6d6;
          --color-cream-paper: #eeeeee;
          --color-pure-black: #000000;
          --color-sand: #b7b3a2;
        
          /* Typography */
          --font-neue-haas-grotesk-text: 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-utility-label: 10px;
          --leading-utility-label: 1.5;
          --tracking-utility-label: 0.32px;
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subhead: 20px;
          --leading-subhead: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.24px;
          --text-heading: 48px;
          --leading-heading: 1.1;
          --tracking-heading: -0.48px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -0.8px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-full: 1440px;
        }