hashicorp___style_reference:
  info: "> phòng điều khiển lúc nửa đêm với đèn neon tím — một bề mặt kỹ thuật tối nơi khối lập phương lục giác phát sáng là điểm neo màu sắc duy nhất"

  theme: "dark"

  info: "HashiCorp vận hành một thẩm mỹ phòng điều khiển nửa đêm: các canvas gần như đen nuốt trọn trang, để một tín hiệu thương hiệu xanh tím điện duy nhất mang mọi khoảnh khắc tương tác. Headline sử dụng một geometric sans tùy chỉnh ở weight nặng với negative tracking dày, tạo cho typography một tư thế nén chặt, tự tin thay vì thanh lịch thoáng đãng. Ảnh render khối lập phương lục giác 3D — phát sáng tím và chàm — là hình ảnh nhận diện, xuất hiện bất cứ nơi nào thương hiệu cần cảm giác hữu hình. Bề mặt gần như phẳng với đường viền mảnh và bóng gần như không thể nhận thấy; chiều sâu đến từ gradient washes, không phải elevation. Body copy không màu, cỡ chữ rộng rãi và không trang trí, để brand blue làm công việc dẫn dắt sự chú ý qua các link, active states và tab indicators."

  tokens___colors:

    info: "| Name | Value | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Void Canvas | `#000000` | `--color-void-canvas` | Nền trang chính, nền hero, chân trang — khoảng không gần như đen hấp thụ mọi nội dung khác |"
    info: "| Onyx Surface | `#0d0e12` | `--color-onyx-surface` | Cards, panels, input fields, lớp bề mặt thứ cấp phía trên void |"
    info: "| Obsidian Plate | `#15181e` | `--color-obsidian-plate` | Bậc elevation cao nhất — modals, popovers, overlay containers |"
    info: "| Ash Text | `#656a76` | `--color-ash-text` | Body copy mờ, helper text, metadata, placeholder content |"
    info: "| Steel Secondary | `#3b3d45` | `--color-steel-secondary` | Icon strokes, decorative line work, UI elements cấp ba |"
    info: "| Graphite Border | `#b2b6bd` | `--color-graphite-border` | Borders, dividers, đường viền control không hoạt động ở độ tương phản trung bình |"
    info: "| Fog Divider | `#d5d7db` | `--color-fog-divider` | Dividers tần suất cao, đường viền nhẹ, separators tinh tế, xử lý logo đối tác |"
    info: "| Bone | `#e0e2e5` | `--color-bone` | Đường viền nút trên filled controls, hairline outlines |"
    info: "| Chalk | `#efeff1` | `--color-chalk` | Văn bản chính trên bề mặt tối, headings, body copy ở độ tương phản cao nhất |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Văn bản tương phản tối đa, văn bản nút filled, điểm nhấn bề mặt sáng nhất |"
    info: "| Brand Cobalt | `#2264d6` | `--color-brand-cobalt` | Màu thương hiệu chính — nav items đang hoạt động, links, icon fills, tab indicators, tín hiệu màu sắc chủ đạo |"
    info: "| Signal Blue | `#2b89ff` | `--color-signal-blue` | Màu xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Hyperlink Violet | `#1060ff` | `--color-hyperlink-violet` | Màu tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Plum Glass | `#42225b` | `--color-plum-glass` | Nền badge fill, bề mặt tím đậm trang trí cho category tags |"
    info: "| Amethyst Edge | `#b457ff` | `--color-amethyst-edge` | Đường viền badge, violet accent strokes, decorative outline highlights |"
    info: "| Violet Dawn | `#6c81ff` | `--color-violet-dawn` | Điểm bắt đầu gradient — khởi đầu xanh tím mát của hero và cube illumination |"
    info: "| Iris Glow | `#c08dff` | `--color-iris-glow` | Điểm kết thúc gradient — kết thúc tím ấm của hero gradient, mặt sáng hơn của ảnh render 3D cube |"

  tokens___typography:

    system_ui___body_copy__navigation_links__button_labels__form_inputs__badges___text_stack_làm_việc_chính__system_ui_ở_15_16px_với_line_height_1_6_1_71_tạo_body_text_rộng_rãi__dễ_đọc__weight_500_cho_nav_emphasis__600_cho_button_labels__không_custom_tracking__dựa_vào_default_kerning_của_nền_tảng_____font_system_ui:
      - "**Thay thế:** -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 13, 14, 15, 16, 17px"
      - "**Line height:** 1.5–1.71 cho body, 1.2 cho compact UI text"
      - "**Vai trò:** Body copy, navigation links, button labels, form inputs, badges — text stack làm việc chính. System UI ở 15–16px với line-height 1.6–1.71 tạo body text rộng rãi, dễ đọc. Weight 500 cho nav emphasis, 600 cho button labels. Không custom tracking, dựa vào default kerning của nền tảng."

    hashicorp_sans___tất_cả_headings_và_display_text___một_geometric_sans_tùy_chỉnh_với_tight_negative_tracking__0_01em_nén_chặt_tư_thế_headline__weight_700_ở_82px_neo_hero__weight_600_đảm_nhận_section_headings__positive_tracking__0_1em_xuất_hiện_trên_uppercase_eyebrow_labels__tạo_một_technical_caption_register_giãn_rộng__tính_năng__kern__được_bật_cho_tight_headline_kerning_____font_hashicorp_sans:
      - "**Thay thế:** Inter, Space Grotesk, hoặc General Sans"
      - "**Weights:** 600, 700"
      - "**Sizes:** 13, 17, 19, 26, 34, 42, 52, 82px"
      - "**Line height:** 1.17–1.21 cho display, 1.35 cho subheadings, 1.69 cho các cách dùng cỡ body"
      - "**Letter spacing:** -0.01em trên display sizes, +0.1em trên uppercase eyebrow labels"
      - "**OpenType features:** `\"kern\"`"
      - "**Vai trò:** Tất cả headings và display text — một geometric sans tùy chỉnh với tight negative tracking (-0.01em) nén chặt tư thế headline. Weight 700 ở 82px neo hero; weight 600 đảm nhận section headings. Positive tracking +0.1em xuất hiện trên uppercase eyebrow labels, tạo một technical caption register giãn rộng. Tính năng 'kern' được bật cho tight headline kerning."

    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"
      - "**Sizes:** 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ò | Size | Line Height | Letter Spacing | Token |"
      info: "|---------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.1px | `--text-caption` |"
      info: "| body | 16px | 1.69 | — | `--text-body` |"
      info: "| subheading | 19px | 1.35 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.21 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 34px | 1.19 | -0.01px | `--text-heading` |"
      info: "| heading-lg | 42px | 1.18 | -0.01px | `--text-heading-lg` |"
      info: "| display | 82px | 1.17 | -0.01px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 4px |"
      info: "| cards | 8px |"
      info: "| badges | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(97, 104, 117, 0.05) 0px 1px 1px 0px, rgba(97, 104, 1...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(101, 106, 118, 0.05) 0px 1px 1px 0px, rgba(101, 106,...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset` | `--shadow-subtle-3` |"

    layout:

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

  components:

    hero_gradient_banner:
      vai_trò: "Hero tối full-bleed với đường chéo gradient xanh tím"

      info: "Nền #000000 với linear-gradient(-45deg, #6c81ff → #c08dff) quét từ trên-phải xuống dưới-trái, tạo một dải sáng góc cạnh. Headline ở 82px Hashicorp Sans weight 700 màu #efeff1, tracking -0.82px. Subtext ở 17px system-ui weight 400 màu #b2b6bd. Không có card surface — text nằm trực tiếp trên gradient void. Padding ~80px dọc, nội dung căn giữa hoặc căn trái trong max-width 1200px."

    announcement_pill:
      vai_trò: "Thông báo biên tập nội tuyến phía trên hero headline"

      info: "Pill nhỏ gọn ở ~4px radius chứa một tag chip (ví dụ 'Do Cloud Right, Explained') với viền #b457ff trên nền #42225b, tiếp theo là văn bản mô tả ở 13–14px màu #d5d7db, và link 'Watch now →' màu #2b89ff. Bố cục flex ngang với khoảng cách 8–12px, padding dọc ~3–4px. Hoạt động như một content teaser, không phải primary action."

    outlined_ghost_button:
      vai_trò: "Secondary CTA trên bề mặt tối"

      info: "Nền trong suốt với viền 1px solid #efeff1 ở radius 4px. Text màu #efeff1 ở 15px system-ui weight 500, padding 11px 19px. Biến thể tiêu chuẩn 'Meet The Infrastructure Cloud' / 'Learn more'. Box-shadow: rgba(97,104,117,0.05) 0px 1px 1px, rgba(97,104,117,0.05) 0px 2px 2px — chiều sâu hầu như không thấy, thì thầm elevation thay vì tuyên bố nó."

    filled_primary_button:
      vai_trò: "Hành động chuyển đổi chính"

      info: "Nền solid #2b89ff với text trắng ở 15px system-ui weight 600, radius 4px, padding 11px 19px. Biến thể 'Get started' — nút chromatic có độ bão hòa cao nhất trong hệ thống, được sử dụng một cách tiết kiệm để đánh dấu hành động quan trọng nhất trên một trang."

    text_link_button:
      vai_trò: "Hành động điều hướng cấp ba"

      info: "Không viền, không nền. Text màu #efeff1 ở 15px system-ui weight 500, thường đi kèm với icon (ví dụ '→' cho 'Try HCP'). Padding tối thiểu. Kiểu 'Log in' / 'Contact us' — dựa vào hiệu ứng chuyển màu hover sang #2b89ff để tạo affordance."

    top_navigation_bar:
      vai_trò: "Điều hướng trang chính"

      info: "Trong suốt trên hero, sau đó chuyển sang #0d0e12 khi cuộn. Logo (dấu H lục giác) bên trái, nav items ở 15px system-ui weight 500 màu #b2b6bd, với item đang hoạt động được gạch dưới bằng #2264d6. Cụm hành động căn phải: ghost login + outlined contact + filled get-started. Chiều cao ~64px, padding ngang 24–48px. Nav duy trì radius 4px trên các item tương tác."

    partner_logo_bar:
      vai_trò: "Dải bằng chứng xã hội bên dưới hero"

      info: "Section header 'TRUSTED BY LEADING ORGANIZATIONS' ở uppercase Hashicorp Sans weight 600, tracking +0.1em, size 13px, màu #b2b6bd. Bên dưới: hàng ngang logo đối tác được render bằng #d5d7db ở chiều cao đồng nhất ~24px, cách đều nhau với khoảng cách 32–48px. Logo là đơn sắc — không có màu thương hiệu gốc nào sống sót qua dark-mode treatment."

    feature_split_section:
      vai_trò: "Khối tính năng biên tập hai cột"

      cột_trái: "eyebrow label (Hashicorp Sans 13px uppercase +0.1em màu #b2b6bd) + headline (Hashicorp Sans 34–42px weight 700 màu #efeff1) + body text (16px system-ui màu #b2b6bd với inline links màu #2b89ff) + action buttons. Cột phải: 3D render hoặc product visual. Khoảng cách giữa các cột ~64px. Nền section #0d0e12 để phân biệt với void canvas."

    3d_hexagonal_cube_render:
      vai_trò: "Yếu tố hình ảnh thương hiệu nhận diện"

      info: "Một lăng trụ lục giác đẳng cự phát sáng được render 3D, với các mặt được chiếu sáng bởi gradient tím-xanh (#6c81ff → #c08dff) và ánh sáng tím mềm bên dưới bề mặt. Logo 'H' của HashiCorp được khắc chìm trên mặt trên. Các đường vẽ tinh tế của các yếu tố kiến trúc/mạch điện mở rộng từ đế. Đây là hero visual của hệ thống — mảnh hình ảnh thương hiệu có thể nhận dạng duy nhất."

    tab_navigation:
      vai_trò: "Control chuyển đổi phần nội dung"

      info: "Các tab ngang ở đầu một phần nội dung. Tab không hoạt động: 17px system-ui weight 500 màu #656a76. Tab đang hoạt động: cùng size/weight màu #efeff1 với gạch dưới 2px màu #2264d6. Radius 4px trên bất kỳ trạng thái hover nền nào. Các tab cách nhau bởi khoảng cách ngang 24–32px."

    resource_card:
      vai_trò: "Card nội dung biên tập cho resources/reports"

      info: "Nền #0d0e12 với viền 1px #15181, radius 8px. Padding 24px. Chứa một feature image (16:9 hoặc tương tự), sau đó là headline (Hashicorp Sans 19px weight 600 màu #efeff1) và descriptive text (15px system-ui màu #b2b6bd). Không có drop shadow — sự phân tách hoàn toàn đến từ border và độ tương phản bề mặt."

    featured_report_card:
      vai_trò: "Card nội dung cỡ hero với gradient thumbnail"

      info: "Biến thể lớn hơn của resource card. Thumbnail sử dụng gradient full-bleed (ví dụ linear-gradient(-45deg, #ff8791, #f9b571) cho điểm nhấn ấm) với chart/visual nhúng. Headline ở 26px Hashicorp Sans weight 600, body ở 15px. Chiếm khoảng 2/3 chiều rộng hàng với các companion text cards xếp chồng bên phải."

    badge___category_tag:
      vai_trò: "Nhãn metadata nhỏ gọn"

      info: "Pill nhỏ ở radius 4px với viền 1px. Biến thể mặc định: viền #b457ff trên nền trong suốt hoặc nền #42225b, text màu #efeff1 ở 13px Hashicorp Sans weight 600 với tracking +0.1em. Được sử dụng để phân loại nội dung (ví dụ 'What's new', 'Webinars & events'). Padding ~3px 8px."

    input_field:
      vai_trò: "Input form trên bề mặt tối"

      info: "Nền #0d0e12, viền 1px #3b3d45, radius 4px. Text màu #efeff1 ở 16px system-ui, placeholder màu #656a76. Inset shadow: rgba(97,104,117,0.1) 0px 1px 2px 1px inset để tạo độ lõm tinh tế. Focus state: viền chuyển sang #2b89ff. Padding 11px 16px."

  do_s_and_don_ts:

    nên:
      - "Sử dụng #000000 làm nền trang chính và xếp lớp các bề mặt theo thứ tự #000000 → #0d0e12 → #15181 để tăng dần elevation"
      - "Áp dụng #2264d6 độc quyền cho active states, active nav items và tab indicators — không bao giờ dùng làm decorative fill"
      - "Đặt tất cả heading text bằng Hashicorp Sans weight 600–700 với letter-spacing -0.01em để có tư thế nén chặt, tự tin"
      - "Sử dụng tracking +0.1em trên Hashicorp Sans weight 600 ở 13px cho uppercase eyebrow labels (section headers, dải 'TRUSTED BY')"
      - "Duy trì radius 4px trên tất cả interactive controls (buttons, inputs, badges, nav items) và dành radius 8px cho content cards"
      - "Giữ shadows ở độ mờ rgba(97,104,117,0.05) — chiều sâu nên được cảm nhận, không nhìn thấy"
      - "Sử dụng gradient tím-xanh (#6c81ff → #c08dff) như một nguồn sáng định hướng trên hero sections và 3D cube render"

    không_nên:
      - "Không thêm các màu chromatic khác — tín hiệu thương hiệu là duy nhất và tần suất có ý nghĩa"
      - "Không sử dụng rounded radii trên 8px; hệ thống này là hình học và chính xác, không thân thiện hay mềm mại"
      - "Không sử dụng drop shadows tối hơn 10% opacity — bóng nặng phá vỡ ảo giác void-canvas"
      - "Không sử dụng #2264d6 hoặc #2b89ff làm nền fill cho buttons; filled primary button là ngoại lệ duy nhất và sử dụng #2b89ff một cách tiết kiệm"
      - "Không trộn lẫn positive và negative letter-spacing trong cùng một heading; chọn một tracking register cho mỗi khối"
      - "Không để body text xuống dưới 14px hoặc lên trên 17px — điểm ngọt 15–16px là tiêu chuẩn dễ đọc"
      - "Không sử dụng logo đối tác full-color trong trust bar; tất cả logo phải được render bằng #d5d7db để duy trì dải đơn sắc"

  surfaces:

    info: "| Cấp độ | Name | Value | Mục đích |"
    info: "|--------|------|-------|----------|"
    info: "| 1 | Void Canvas | `#000000` | Nền trang chính — khoảng không cơ sở mà mọi nội dung nổi trên đó |"
    info: "| 2 | Onyx Surface | `#0d0e12` | Cards, input fields, content sections cần tách biệt khỏi void |"
    info: "| 3 | Obsidian Plate | `#15181` | Modals, popovers, elevated overlays yêu cầu tách biệt tối đa |"

  elevation:

    - "**Outlined Ghost Button:** `rgba(97, 104, 117, 0.05) 0px 1px 1px 0px, rgba(97, 104, 117, 0.05) 0px 2px 2px 0px`"
    - "**Top Navigation:** `rgba(101, 106, 118, 0.05) 0px 1px 1px 0px, rgba(101, 106, 118, 0.05) 0px 2px 2px 0px`"
    - "**Input Field:** `rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset`"

  imagery:

    info: "Ngôn ngữ hình ảnh bị chi phối bởi 3D renders thay vì nhiếp ảnh. Tài sản nhận diện là một lăng trụ lục giác được chiếu sáng (đại diện cho logo 'H' của HashiCorp ở dạng thể tích) được render trong gradient tím-xanh với ánh sáng mềm bên dưới. Hình ảnh hỗ trợ bao gồm gradient washes trừu tượng, data charts và các đường vẽ kiến trúc/mạch điện tinh tế. Nhiếp ảnh vắng mặt — đây là một hệ thống hình ảnh UI-first, object-first. Logo đối tác được làm phẳng thành đơn sắc. Mật độ thấp: một hero image mỗi section, với text chiếm phần lớn diện tích hình ảnh."

  layout:

    info: "Canvas tối full-bleed với nội dung được giới hạn trong cột căn giữa max-width 1200px. Hero là gradient tối full-viewport với headline căn giữa (hoặc hơi lệch trái). Các section xen kẽ giữa nền #000000 và #0d0e12 để tạo nhịp điệu thị giác mà không có sự phân cực sáng/tối. Nội dung tuân theo mẫu split 2 cột lặp lại: text-trái/visual-phải, với khoảng cách section 64px rộng rãi. Các phần resource driven-by-tab sử dụng lưới bất đối xứng 1-lớn-cộng-2-nhỏ. Nav là một fixed top bar chuyển từ trong suốt (trên hero) sang solid #0d0e12 (khi cuộn). Mật độ tổng thể rộng rãi — một concept mỗi section, với khoảng thở giữa các khối."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #efeff1"
    - "background: #000000"
    - "surface: #0d0e12"
    - "border: #3b3d45"
    - "accent: #2264d6 (active states, links)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu filled CTA."

    - "**Feature Split Section**: Bố cục hai cột, gap 64px. Trái: eyebrow label ở Hashicorp Sans 13px weight 600 uppercase, tracking +1.3px, màu #b2b6bd. Headline ở Hashicorp Sans 42px weight 700, #efeff1, tracking -0.42px. Body ở system-ui 16px weight 400, #b2b6bd, với inline links màu #2b89ff. Phải: 3D hexagonal cube render với các mặt gradient tím-xanh."

    - "**Tab Navigation + Content**: Hàng tabs — inactive ở system-ui 17px weight 500 #656a76, active ở #efeff1 với gạch dưới 2px #2264d6. Bên dưới: resource card trên bề mặt #0d0e12, viền 1px #15181e, radius 8px, padding 24px. Card headline ở Hashicorp Sans 19px weight 600 #efeff1, body ở system-ui 15px #b2b6bd."

    - "**Partner Logo Bar**: Section header 'TRUSTED BY LEADING ORGANIZATIONS' ở Hashicorp Sans 13px weight 600, tracking +1.3px, màu #b2b6bd. Hàng logo ngang, tất cả logo được render bằng đơn sắc #d5d7db, chiều cao ~24px, khoảng cách 32–48px."

    - "**Badge Component**: Pill radius 4px, viền 1px #b457ff, nền trong suốt, text ở Hashicorp Sans 13px weight 600 uppercase với tracking +1.3px, màu #efeff1. Padding 3px 8px."

  similar_brands:

    - "**Vercel** — Cùng dark-void canvas với electric accent color và geometric sans display type, mặc dù Vercel sử dụng accent ấm hơn và nhiều gradient washes hơn"
    - "**Linear** — Giống hệt compressed headline tracking, dark near-black surface, và một chromatic accent sống động duy nhất (tím cho Linear, xanh tím cho HashiCorp) đánh dấu mọi khoảnh khắc tương tác"
    - "**Stripe** — Cùng gradient-from-edges hero treatment và 3D brand mark làm section anchor, mặc dù canvas của Stripe sáng hơn"
    - "**PlanetScale** — Phù hợp với dark enterprise aesthetic với typography hạn chế, một brand signal bão hòa duy nhất và 3D geometric brand visuals"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-canvas: #000000;
          --color-onyx-surface: #0d0e12;
          --color-obsidian-plate: #15181e;
          --color-ash-text: #656a76;
          --color-steel-secondary: #3b3d45;
          --color-graphite-border: #b2b6bd;
          --color-fog-divider: #d5d7db;
          --color-bone: #e0e2e5;
          --color-chalk: #efeff1;
          --color-pure-white: #ffffff;
          --color-brand-cobalt: #2264d6;
          --color-signal-blue: #2b89ff;
          --color-hyperlink-violet: #1060ff;
          --color-plum-glass: #42225b;
          --color-amethyst-edge: #b457ff;
          --color-violet-dawn: #6c81ff;
          --color-iris-glow: #c08dff;
        
          /* Typography — Font Families */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-hashicorp-sans: 'Hashicorp Sans', 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: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.69;
          --text-subheading: 19px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: -0.01px;
          --text-heading: 34px;
          --leading-heading: 1.19;
          --tracking-heading: -0.01px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: -0.01px;
          --text-display: 82px;
          --leading-display: 1.17;
          --tracking-display: -0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 8px;
          --radius-badges: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Shadows */
          --shadow-subtle: rgba(97, 104, 117, 0.05) 0px 1px 1px 0px, rgba(97, 104, 117, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-2: rgba(101, 106, 118, 0.05) 0px 1px 1px 0px, rgba(101, 106, 118, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-3: rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset;
        
          /* Surfaces */
          --surface-void-canvas: #000000;
          --surface-onyx-surface: #0d0e12;
          --surface-obsidian-plate: #15181;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-canvas: #000000;
          --color-onyx-surface: #0d0e12;
          --color-obsidian-plate: #15181e;
          --color-ash-text: #656a76;
          --color-steel-secondary: #3b3d45;
          --color-graphite-border: #b2b6bd;
          --color-fog-divider: #d5d7db;
          --color-bone: #e0e2e5;
          --color-chalk: #efeff1;
          --color-pure-white: #ffffff;
          --color-brand-cobalt: #2264d6;
          --color-signal-blue: #2b89ff;
          --color-hyperlink-violet: #1060ff;
          --color-plum-glass: #42225b;
          --color-amethyst-edge: #b457ff;
          --color-violet-dawn: #6c81ff;
          --color-iris-glow: #c08dff;
        
          /* Typography */
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-hashicorp-sans: 'Hashicorp Sans', 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: 13px;
          --leading-caption: 1.5;
          --tracking-caption: 0.1px;
          --text-body: 16px;
          --leading-body: 1.69;
          --text-subheading: 19px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: -0.01px;
          --text-heading: 34px;
          --leading-heading: 1.19;
          --tracking-heading: -0.01px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.18;
          --tracking-heading-lg: -0.01px;
          --text-display: 82px;
          --leading-display: 1.17;
          --tracking-display: -0.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
        
          /* Shadows */
          --shadow-subtle: rgba(97, 104, 117, 0.05) 0px 1px 1px 0px, rgba(97, 104, 117, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-2: rgba(101, 106, 118, 0.05) 0px 1px 1px 0px, rgba(101, 106, 118, 0.05) 0px 2px 2px 0px;
          --shadow-subtle-3: rgba(97, 104, 117, 0.1) 0px 1px 2px 1px inset;
        }