warp___style_reference:
  info: "> Màn hình terminal dưới ánh kính hổ phách"

  theme: "dark"

  info: "Warp vận hành như một phòng điều khiển mờ tối: canvas ấm áp gần như đen, bề mặt sản phẩm lấy cảm hứng từ terminal, và typography hình học chặt chẽ mang phong cách command line được in ấn. Bảng màu gần như hoàn toàn đơn sắc với tông ấm — không có xanh lam lạnh hay xám vô trùng — mang đến cho mọi màn hình ánh hổ phách của một buổi code đêm khuya. Màu nhấn được sử dụng cực kỳ hạn chế: một màu vàng gold nhẹ và một màu xanh lam-xám duy nhất chỉ xuất hiện khi terminal cần dấu câu syntax hoặc một link cần nổi bật. Các component phẳng, dày đặc và không trọng lượng — không có decorative shadow, không có độ sâu skeuomorphic, không có button bo tròn mềm mại. Mọi element đều có chỗ đứng nhờ sự chính xác của typography và negative tracking rộng ở kích thước display."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Warm Off-White | `#faf9f6` | `--color-warm-off-white` | Headline chính, body text, nav links — màu kem ấm đọc mềm hơn trắng tinh trên nền charcoal |"
    info: "| Bone Gray | `#868684` | `--color-bone-gray` | Secondary text, captions, muted labels — midtone tách biệt khỏi Off-White mà vẫn giữ ấm |"
    info: "| Pale Stone | `#b4b4b2` | `--color-pale-stone` | Tertiary text, ghost button labels, low-emphasis copy |"
    info: "| Faint Linen | `#e3e2e0` | `--color-faint-linen` | Hairline borders, divider mờ, selected state outlines |"
    info: "| Smoke Charcoal | `#2f2f2f` | `--color-smoke-charcoal` | Bề mặt card, nested panels, nền cửa sổ terminal |"
    info: "| Iron Veil | `#383838` | `--color-iron-veil` | Neutral hỗ trợ cho secondary UI, divider, và muted labels. Không dùng làm màu CTA chính |"
    info: "| Slate Hearth | `#40403f` | `--color-slate-hearth` | Bề mặt cao nhất — modal overlays, floating panels |"
    info: "| Deep Ember | `#121212` | `--color-deep-ember` | Canvas trang, nền section — màu gần đen ấm làm nền tảng cho toàn bộ hệ thống |"
    info: "| Smoked Onyx | `#1e1e1d` | `--color-smoked-onyx` | Footer, nền section dạng band, phân cách dọc tinh tế |"
    info: "| Absolute | `#000000` | `--color-absolute` | Màu tối nhất, nav text, icon strokes, image masks |"
    info: "| Ink Black | `#080808` | `--color-ink-black` | Deep text, hairline borders cần biến mất vào canvas |"
    info: "| Gold Leaf | `#bd9f65` | `--color-gold-leaf` | Code syntax strings, keyword highlights, inline emphasis — chỉ xuất hiện bên trong nội dung terminal, không bao giờ là UI button |"
    info: "| Muted Cobalt | `#6f839f` | `--color-muted-cobalt` | Code syntax identifiers, secondary link text, tag accents — điểm nhấn lạnh đối trọng với vàng ấm |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    matter___typeface_chính_cho_mọi_ui_text___headlines__body__nav__và_labels__geometric_grotesque_tùy_chỉnh_với_nhịp_điệu_cơ_học__custom_font_đặc_trưng__letter_spacing_thắt_chặt_mạnh_ở_kích_thước_display__0_030em_ở_56_68px_và_mở_rộng_cho_tracked_small_caps_0_200em_ở_11px__tạo_cho_hệ_thống_hai_giọng_nói_riêng_biệt_từ_một_family_____font_matter:
      - "**Thay thế:** Söhne (premium) hoặc Inter (free fallback)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 19px"
      - "**Line height:** 0.91-1.40"
      - "**Letter spacing:** -0.030em ở 40-68px, -0.020em ở 20-32px, -0.010em ở 18-19px, 0 đến +0.020em ở 14-16px, +0.100em ở 12px, +0.200em ở 11px"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Vai trò:** Typeface chính cho mọi UI text — headlines, body, nav, và labels. Geometric grotesque tùy chỉnh với nhịp điệu cơ học; custom font đặc trưng. Letter-spacing thắt chặt mạnh ở kích thước display (-0.030em ở 56-68px) và mở rộng cho tracked small caps (0.200em ở 11px), tạo cho hệ thống hai giọng nói riêng biệt từ một family."

    geist_mono___chuỗi_command_line_bên_trong_button_và_inline_code_chips___monospace_duy_nhất_chạm_đến_ui_người_dùng____font_geist_mono:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Chuỗi command-line bên trong button và inline code chips — monospace duy nhất chạm đến UI người dùng"

    matter_mono___biến_thể_monospace_của_matter_dành_cho_code_blocks_và_product_mockup_bodies____font_matter_mono:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0120em"
      - "**Vai trò:** Biến thể monospace của Matter dành cho code blocks và product mockup bodies"

    inter___secondary_support_face_cho_body_copy_khi_không_có_bản_quyền_matter__hiếm_khi_xuất_hiện_trong_hệ_thống____font_inter:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.00-1.38"
      - "**Letter spacing:** -0.0140em, -0.0120em"
      - "**Vai trò:** Secondary support face cho body copy khi không có bản quyền Matter; hiếm khi xuất hiện trong hệ thống"

    matter_regular___matter_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_matter_regular:
      - "**Weights:** 400"
      - "**Sizes:** 11px, 12px, 14px, 16px, 18px, 19px, 20px, 22px, 24px, 32px, 40px, 48px, 56px, 68px"
      - "**Line height:** 0.91, 1, 1.1, 1.15, 1.19, 1.2, 1.3, 1.35, 1.38, 1.4"
      - "**Letter spacing:** -0.03, -0.02, -0.01, 0.01, 0.02, 0.1, 0.2"
      - "**Vai trò:** Matter Regular — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    matter_sq_regular___matter_sq_regular___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_matter_sq_regular:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 42px"
      - "**Line height:** 1, 1.2, 1.4"
      - "**Letter spacing:** 0.01"
      - "**Vai trò:** Matter SQ Regular — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption-tracked | 11px | 1.2 | 2.2px | `--text-caption-tracked` |"
      info: "| body-sm | 14px | 1.38 | 0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.38 | 0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.19 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.1 | -1.44px | `--text-heading-lg` |"
      info: "| display | 68px | 1 | -2.04px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 66 | 66px | `--spacing-66` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 4px |"
      info: "| cards | 8px |"
      info: "| icons | 8px |"
      info: "| pills | 50px |"
      info: "| images | 20px |"
      info: "| buttons | 4px |"
      info: "| heroMask | 110px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(33, 126, 255, 0.5) 0px 0px 32px 10px` | `--shadow-xl` |"

    layout:

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

  components:

    primary_download_button:
      vai_trò: "Hero CTA — filled, cảm giác command line trắng trên trắng"

      info: "Fill #faf9f6 đặc, text #121212, Matter Medium 500 ở 16px, radius 4px, padding 10px 16px. Kèm icon mũi tên nhỏ hướng xuống (16px) bên phải label. Không shadow, không border. Nằm phẳng trên nền tối như element phát sáng duy nhất trên trang."

    ghost_nav_link:
      vai_trò: "Secondary nav items và link \"Contact sales\""

      info: "Fill trong suốt, text #faf9f6, Matter Regular 400 ở 14-16px, không border, không padding. Màu chuyển sang #b4b4b2 khi hover. Kế thừa radius 4px của nav trên bất kỳ biến thể dạng pill nào."

    terminal_product_mockup:
      vai_trò: "Hero visual asset — sản phẩm, được hiển thị"

      info: "Cửa sổ tối với góc bo tròn 8px, body #2f2f2f, thanh chrome #383838 ở trên cùng. Ba vòng tròn traffic-light macOS (đỏ/vàng/xanh lá) ở 10px góc trên bên trái. Code hiển thị bằng Geist Mono hoặc Matter Mono ở 12-14px, với syntax được tô màu bằng #bd9f65 cho string và #6f839f cho identifier, tất cả trên panel smoke charcoal."

    top_navigation_bar:
      vai_trò: "Header trang cố định"

      info: "Nền #000000, góc bo tròn 4px trên container. Bên trái: brand mark (glyph Warp hình quả táo ở 18px trong #faf9f6) + nav items bằng Matter ở 16px. Bên phải: ghost link \"Contact sales\" + button filled \"Download for Mac\". Nằm phía trên announcement banner."

    announcement_banner:
      vai_trò: "Dải tin tức đầu trang"

      info: "Dải mỏng, fill #000000, text Matter Regular căn giữa ở 12-14px trong #faf9f6, kèm link \"Learn more\" inline với weight hơi đậm hơn hoặc gạch chân. Border dưới 1px trong #2f2f2f."

    section_heading_block:
      vai_trò: "Mở đầu section như \"Coding Tools\""

      info: "Matter Regular 400 ở 48-68px, màu #6f839f (xanh lam-xám) hoặc #faf9f6, letter-spacing -1.44px đến -2.04px. Căn trái với lề trái rộng rãi. Tông xanh lam-xám mát trên heading tạo sự khác biệt với body kem ấm, tạo ra một pivot màu sắc có chủ đích ở cấp section."

    hero_block:
      vai_trò: "Layout chia đôi above-the-fold"

      info: "Hai cột trên desktop (text trái, terminal visual phải) với khối text giới hạn ~520px. Headline ở 68px Matter Regular, #faf9f6, tracking -2.04px. Sub-headline ở 18-20px Matter Regular, #b4b4b2. Stack CTA: button trắng filled phía trên dòng lệnh `brew install` bằng Geist Mono 16px với glyph command-prompt màu xanh lá."

    brew_install_command_chip:
      vai_trò: "Inline developer-flavored CTA"

      info: "Nền trong suốt, Geist Mono 400 ở 16px, text #faf9f6, có tiền tố là vòng tròn xanh lá nhỏ (#7ba564) đóng vai trò prompt indicator. Không border, không nền — nằm như raw terminal text bên dưới Download button."

    footer:
      vai_trò: "Footer trang"

      info: "Nền #1e1e1d, lưới link nhiều cột, Matter Regular ở 14px trong #b4b4b2 cho link, #868684 cho tiêu đề cột, border mỏng trên #e3e2e0. Khoảng cách hàng giữa các link là 8-10px chặt chẽ."

    atmospheric_hero_image:
      vai_trò: "Xử lý ảnh nền cho hero"

      info: "Ảnh phong cảnh full-bleed (núi, sương mù) với grading tối ấm — toàn bộ ảnh được xử lý để nằm sau overlay #121212 ở độ mờ ~40% để ảnh đọc như tâm trạng, không phải nội dung. Góc được mask ở 110px trên terminal mockup nổi phía trên. Ảnh không phải wallpaper trang trí; nó mang tâm trạng về đêm của thương hiệu."

  do_s_and_don_ts:

    do:
      - "Dùng Matter (hoặc Söhne làm bản trả phí thay thế, Inter làm free fallback) cho mọi UI text — không bao giờ thay thế bằng slab hoặc humanist sans"
      - "Đặt display headline ở 48-68px với letter-spacing từ -1.44px đến -2.04px; negative tracking là thứ làm cho type có cảm giác engineered, không phải editorial"
      - "Dùng tracking 0.200em (2.2px) trên 11px uppercase labels cho giọng tracked-eyebrow của hệ thống"
      - "Sử dụng #bd9f65 (Gold Leaf) và #6f839f (Muted Cobalt) chỉ trong bối cảnh terminal/code — không bao giờ trên UI buttons, tags, hoặc badges"
      - "Duy trì bảng màu xám ấm: mọi neutral từ #2f2f2f trở lên nên có tông hổ phách nhẹ, không phải ánh xanh lam lạnh"
      - "Dùng radius 4px trên mọi button và nav elements, 8px trên cards và icons, 20px+ trên images — radius nhỏ nhưng không sắc nét định nghĩa sự chính xác tĩnh lặng của hệ thống"
      - "Kết hợp button filled trắng với ghost text link bên cạnh cho primary actions; tránh xếp chồng hai filled buttons"

    don_t:
      - "Đừng đưa vào màu thương hiệu chính sáng — sức mạnh của hệ thống đến từ sự kiềm chế; chromatic accents chỉ dành cho syntax"
      - "Đừng thêm drop shadows vào cards, modals, hoặc buttons — ánh sáng xanh lam được dành riêng cho một signature element, không phải độ cao chung chung"
      - "Đừng dùng #ffffff thuần cho text trên nền tối — luôn dùng #faf9f6, warm off-white, để giữ tông hổ phách của hệ thống"
      - "Đừng áp dụng hình dạng pill bo tròn (9999px) cho buttons — Warp dùng 4px, không bao giờ bo tròn hoàn toàn; button góc sắc là một phần của bản sắc"
      - "Đừng phá vỡ nhịp điệu element-gap 10px với 15px hoặc 18px — hệ thống thở theo bội số của 2 và 10"
      - "Đừng dùng màu xanh lam-xám mát #6f839f cho body text hoặc UI chrome — nó chỉ tồn tại bên trong terminal code và section headings"
      - "Đừng chèn icons không phải mono-weight và outlined — icons nên khớp với độ chính xác của type, không làm mềm nó"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#121212` | Nền toàn trang, hero và section grounds |"
    info: "| 1 | Banded Section | `#1e1e1d` | Footer và các dải section xen kẽ |"
    info: "| 2 | Card | `#2f2f2f` | Terminal mockup panels, product card containers |"
    info: "| 3 | Elevated Control | `#383838` | Button fills, hover surfaces |"
    info: "| 4 | Floating Panel | `#40403f` | Modals, popovers, sticky overlays |"

  elevation:

    - "**Signature glow accent:** `0 0 32px 10px rgba(33, 126, 255, 0.5)`"

  imagery:

    info: "Warp pha trộn hai phạm vi thị giác: ảnh phong cảnh atmospheric và ảnh chụp màn hình terminal. Hero sử dụng ảnh núi tối full-bleed (được xử lý với overlay #121212 ấm ở độ mờ khoảng 40%) tạo tâm trạng về đêm, trầm mặc — không phổ biến cho một công cụ developer và có chủ đích điện ảnh. Hình ảnh sản phẩm là chính IDE/terminal, được hiển thị dưới dạng macOS window mockups đầy đủ với traffic-light controls, hiển thị bằng Geist Mono và Matter Mono với syntax vàng và xanh lam-xám. Icons là thin-stroke, outlined, và mono-color trong #faf9f6. Không có illustrations, không 3D renders, không stock photography về con người — ngôn ngữ thị giác là terminal + phong cảnh, không có gì ở giữa."

  layout:

    info: "Warp sử dụng container căn giữa max-width 1200px với khoảng cách dọc thoải mái (section gaps 80-120px). Hero là split hai cột: khối text trái (giới hạn ~520px) với headline, sub-headline, CTA filled, và inline brew-install command; terminal mockup full-bleed nổi phải với góc masked 110px. Các section tiếp theo chuyển sang text căn giữa + stack terminal mockup căn giữa, với feature headings (màu #6f839f mát) lệch trái để phá vỡ pattern căn giữa. Navigation là top bar cố định với announcement banner phía trên. Không sidebar, không mega-menu, không card grid — sections là các stack dọc của headline + screenshot, để hình ảnh terminal mang trọng lượng thị giác."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #121212"
    - "surface card: #2f2f2f"
    - "text primary: #faf9f6"
    - "text secondary: #868684"
    - "text muted: #b4b4b2"
    - "border hairline: #e3e2e0"
    - "primary action: không có màu CTA riêng biệt"

    example_component_prompts:

    - "**Hero section**: Background #121212. Headline ở 68px Matter weight 400, #faf9f6, letter-spacing -2.04px, line-height 1.00. Subheadline ở 20px Matter weight 400, #b4b4b2, letter-spacing -0.2px. primary action: không có màu CTA riêng biệt"

    - "**Terminal product mockup**: Radius 8px, body #2f2f2f, title bar 32px #383838 với ba vòng tròn traffic-light 10px (đỏ #ff5f57, vàng #febc20, xanh lá #28c840) ở góc trên bên trái. Code body bằng Geist Mono 13px, text nền #faf9f6, string values #bd9f65, identifiers #6f839f. Drop shadow: none."

    info: "Không có màu primary action riêng biệt nào được quan sát; sử dụng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled."

    - "**Section heading + terminal stack**: Cột căn giữa, max-width 900px. Eyebrow label ở 11px Matter 400, +2.2px letter-spacing, #b4b4b2, all caps. Heading ở 48px Matter 400, #6f839f, letter-spacing -1.44px. Sub-copy ở 18px Matter 400, #868684, max độ dài dòng 60ch. Bên dưới: terminal mockup ở full column width."

    - "**Ghost nav link**: Fill trong suốt, text #faf9f6, Matter 400 16px, không border, padding ngang 8px. Khi hover: text chuyển sang #b4b4b2. Kế thừa radius 4px của nav chỉ khi được bọc trong pill container."

  warm_cool_chromatic_tension:

    info: "Lựa chọn đặc biệt nhất của Warp là từ chối màu xanh lam-xám mát thống trị thiết kế công cụ developer. Mọi neutral đều ấm (xám pha hổ phách từ #e3e2e0 đến #080808), nhưng hai chromatic accents lại mát: #bd9f65 là vàng ấm và #6f839f là xanh lam-xám mát. Hệ thống sống trong một đường seam ấm-mát duy nhất này — gold strings trên cool identifiers bên trong warm panels trên warm canvas. Khi nghi ngờ, hãy tự hỏi: màu này nghiêng về ngọn nến hay mặt trăng? Ngọn nến là bề mặt, mặt trăng là code."

  similar_brands:

    - "**Linear** — Cùng dark-canvas premium typography với custom geometric sans và aggressive negative tracking trên kích thước display; cả hai đều hạn chế chromatic color và để trắng trên tối mang hierarchy"
    - "**Raycast** — Developer tool với bảng màu tối ấm tương tự và bố cục hero product-forward; cả hai đều đưa IDE/terminal lên làm hero visual thay vì hình ảnh marketing trừu tượng"
    - "**Vercel** — Geometric grotesque chặt chẽ, button radius 4px, content max-width 1200px, bề mặt phẳng không drop shadows — cùng cách tiếp cận restraint-first với dark mode"
    - "**Arc Browser** — Canvas tối ấm với typography kem tương phản cao và bảng màu nhấn hạn chế duy nhất; cả hai đều xử lý thẩm mỹ terminal/command-line như một ngôn ngữ thị giác"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-off-white: #faf9f6;
          --color-bone-gray: #868684;
          --color-pale-stone: #b4b4b2;
          --color-faint-linen: #e3e2e0;
          --color-smoke-charcoal: #2f2f2f;
          --color-iron-veil: #383838;
          --color-slate-hearth: #40403f;
          --color-deep-ember: #121212;
          --color-smoked-onyx: #1e1e1d;
          --color-absolute: #000000;
          --color-ink-black: #080808;
          --color-gold-leaf: #bd9f65;
          --color-muted-cobalt: #6f839f;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-mono: 'Matter Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-sq-regular: 'Matter SQ Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption-tracked: 11px;
          --leading-caption-tracked: 1.2;
          --tracking-caption-tracked: 2.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: 0.14px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.44px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: -2.04px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-64: 64px;
          --spacing-66: 66px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 20-24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-full: 50px;
          --radius-full-2: 110px;
        
          /* Named Radii */
          --radius-nav: 4px;
          --radius-cards: 8px;
          --radius-icons: 8px;
          --radius-pills: 50px;
          --radius-images: 20px;
          --radius-buttons: 4px;
          --radius-heromask: 110px;
        
          /* Shadows */
          --shadow-xl: rgba(33, 126, 255, 0.5) 0px 0px 32px 10px;
        
          /* Surfaces */
          --surface-canvas: #121212;
          --surface-banded-section: #1e1e1d;
          --surface-card: #2f2f2f;
          --surface-elevated-control: #383838;
          --surface-floating-panel: #40403f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-off-white: #faf9f6;
          --color-bone-gray: #868684;
          --color-pale-stone: #b4b4b2;
          --color-faint-linen: #e3e2e0;
          --color-smoke-charcoal: #2f2f2f;
          --color-iron-veil: #383838;
          --color-slate-hearth: #40403f;
          --color-deep-ember: #121212;
          --color-smoked-onyx: #1e1e1d;
          --color-absolute: #000000;
          --color-ink-black: #080808;
          --color-gold-leaf: #bd9f65;
          --color-muted-cobalt: #6f839f;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-matter-mono: 'Matter Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-regular: 'Matter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-matter-sq-regular: 'Matter SQ Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption-tracked: 11px;
          --leading-caption-tracked: 1.2;
          --tracking-caption-tracked: 2.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.38;
          --tracking-body-sm: 0.14px;
          --text-body: 16px;
          --leading-body: 1.38;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -1.44px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: -2.04px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-64: 64px;
          --spacing-66: 66px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 14px;
          --radius-2xl: 20px;
          --radius-full: 50px;
          --radius-full-2: 110px;
        
          /* Shadows */
          --shadow-xl: rgba(33, 126, 255, 0.5) 0px 0px 32px 10px;
        }