osmo___style_reference:
  info: "> bảo tàng developer trên nền concrete gray"

  theme: "light"

  info: "Osmo mang phong cách editorial brutalist dành cho web craftspeople: một canvas concrete gray được đóng dấu bởi display type đen cỡ lớn, sau đó được chấm phá bằng ba cú đấm màu phẫu thuật — một màu xanh vôi phóng xạ (radioactive lime) cho brand accents, một màu tím đậm (deep violet) cho featured cards, và một màu đỏ chu sa (vermillion red) cho các chú thích viết tay. Hệ thống từ chối lối mặc định soft-SaaS: các góc được phân chia giữa độ chính xác phẫu thuật 2–5px và bo tròn pill cực đại 1600px, tạo ra sự căng thẳng thị giác giữa các content tiles chính xác như máy và các control hình viên ngậm (lozenge) chunky. Typography đảm nhận phần lớn công việc truyền tải thông qua các display cuts Haffer XH có thể chạy tới 150px với negative tracking mạnh, trong khi font label monospaced đóng dấu metadata kỹ thuật. Mật độ compact và content-led, với các product cards nghiêng xòe ra như portfolio của developer được ghim lên tường gallery."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Concrete | `#f4f4f4` | `--color-concrete` | Canvas trang, bề mặt card, và hầu hết border work — màu off-white mà mọi thứ đặt lên |"
    info: "| Ash Gray | `#eaeaea` | `--color-ash-gray` | Lớp bề mặt nâng cao (elevated surface layer), trường nhập liệu, nền card phụ |"
    info: "| Bone | `#e1e1e1` | `--color-bone` | Divider tinh tế, phân cách danh sách, nền bề mặt cấp ba |"
    info: "| Smoke | `#b8b8b8` | `--color-smoke` | Viền ảnh mờ, đường viền trạng thái disabled, viền badge |"
    info: "| Graphite | `#4f4c4c` | `--color-graphite` | Viền và divider nhẹ nhàng khi Steel cảm giác quá nặng |"
    info: "| Steel | `#7a7a7a` | `--color-steel` | Body text phụ, helper labels, badge muted |"
    info: "| Charcoal | `#312e2e` | `--color-charcoal` | Viền card, stroke input, phần tử cấu trúc độ sâu trung bình |"
    info: "| Ink | `#201d1d` | `--color-ink` | Primary text, viền dày, đường viền cấu trúc chủ đạo — màu gần-đen làm việc chính |"
    info: "| Obsidian | `#151313` | `--color-obsidian` | Bề mặt card tối, inverse text, nền tương phản tối đa |"
    info: "| Volt | `#a1ff62` | `--color-volt` | Primary brand accent — badge fills, brand borders, featured highlights, success indicators. Màu xanh vôi phóng xạ bật các element lên |"
    info: "| Ultraviolet | `#6840ff` | `--color-ultraviolet` | Nền featured card, link accents, khoảnh khắc brand đậm — dùng khi nội dung xứng đáng có một sân khấu màu sắc |"
    info: "| Vermillion | `#f84131` | `--color-vermillion` | Annotation accent — chú thích viết tay, emphasis text, icon highlights, không bao giờ dùng làm fill hoặc background |"

  tokens___typography:

    haffer_vf___body_và_ui_workhorse___variable_sans_dùng_cho_đoạn_văn__nút_bấm__label__và_mọi_thứ_trong_khoảng_12_27px__weight_500_cho_emphasis__700_cho_nav_items_và_button_labels____font_haffer_vf:
      - "**Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 12px, 13px, 14px, 16px, 18px, 19px, 20px, 22px, 24px, 27px"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** -0.02em ở 27px xuống -0.007em ở 12px"
      - "**Vai trò:** Body và UI workhorse — variable sans dùng cho đoạn văn, nút bấm, label, và mọi thứ trong khoảng 12–27px. Weight 500 cho emphasis, 700 cho nav items và button labels"

    haffer_xh___display_và_heading_typeface___một_extreme_cut_sans_với_apertures_hẹp_và_nén_dọc_mạnh_lh_0_85_ở_đầu_thang_đo__chịu_trách_nhiệm_cho_mọi_từ_trên_40px_và_định_hình_giọng_editorial____font_haffer_xh:
      - "**Thay thế:** Druk, Inter Display, hoặc compressed geometric sans như GT Sectra Display"
      - "**Weights:** 400"
      - "**Kích thước:** 20px, 40px, 44px, 48px, 62px, 64px, 80px, 112px, 150px"
      - "**Line height:** 0.85–1.08"
      - "**Letter spacing:** -0.06em ở 150px xuống -0.03em ở 62–64px"
      - "**Vai trò:** Display và heading typeface — một extreme-cut sans với apertures hẹp và nén dọc mạnh (lh 0.85 ở đầu thang đo). Chịu trách nhiệm cho mọi từ trên 40px và định hình giọng editorial"

    haffer_mono___metadata_kỹ_thuật___course_tags__version_labels__mono_badges__chỉ_kích_thước_nhỏ__đóng_dấu_thông_tin_như_máy_đánh_chữ____font_haffer_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Berkeley Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 9px, 11px, 12px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Metadata kỹ thuật — course tags, version labels, mono badges. Chỉ kích thước nhỏ, đóng dấu thông tin như máy đánh chữ"

    brisa_pro___chữ_ký_viết_tay___dùng_cho_annotation_callouts_màu_vermillion__cảm_giác_như_nguệch_ngoạc_bút_dạ_trên_bản_in_thử__dành_riêng_cho_nhịp_cảm_xúc_đó____font_brisa_pro:
      - "**Thay thế:** Caveat, Permanent Marker, hoặc Reenie Beanie"
      - "**Weights:** 400"
      - "**Kích thước:** 25px"
      - "**Line height:** 0.80"
      - "**Vai trò:** Chữ ký viết tay — dùng cho annotation callouts màu vermillion, cảm giác như nguệch ngoạc bút dạ trên bản in thử. Dành riêng cho nhịp cảm xúc đó"

    apple_system____apple_system___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_apple_system:
      - "**Weights:** 400"
      - "**Kích thước:** 16px"
      - "**Line height:** 1.5"
      - "**Letter spacing:** -0.01"
      - "**Vai trò:** -apple-system — đượ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: "| mono-label | 11px | 1 | — | `--text-mono-label` |"
      info: "| caption | 13px | 1.54 | -0.09px | `--text-caption` |"
      info: "| body-sm | 16px | 1.3 | -0.16px | `--text-body-sm` |"
      info: "| body | 19px | 1.25 | -0.38px | `--text-body` |"
      info: "| annotation | 25px | 0.8 | — | `--text-annotation` |"
      info: "| subheading | 48px | 1.05 | -1.44px | `--text-subheading` |"
      info: "| heading-sm | 64px | 1 | -1.92px | `--text-heading-sm` |"
      info: "| heading | 80px | 0.95 | -4px | `--text-heading` |"
      info: "| heading-lg | 112px | 0.9 | -5.6px | `--text-heading-lg` |"
      info: "| display | 150px | 0.85 | -9px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 5px |"
      info: "| icons | 160px |"
      info: "| badges | 1600px |"
      info: "| inputs | 5px |"
      info: "| buttons | 1600px |"
      info: "| links-pill | 48px |"
      info: "| sharp-tiles | 2px |"

    layout:

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

  components:

    floating_navigation_bar:
      vai_trò: "Điều hướng chính của site"

      info: "Thanh pill nổi ở đầu viewport. Nền Concrete (#f4f4f4) với viền Ink (#201d1d) 1px, radius 1600px, padding dọc 8px. Chứa trigger 'Menu' bên trái, wordmark ở giữa, và nút Login (ghost) + nút Join (fill Volt #a1ff62, chữ Ink) bên phải. Không có shadow — nó nằm phẳng."

    volt_cta_button:
      vai_trò: "Hành động chính"

      info: "Nút pill fill màu xanh vôi (#a1ff62) với radius 1600px, chữ Ink (#201d1d) ở 16px Haffer VF weight 700, padding 8px 20px. Call-to-action đặc trưng — luôn đọc như 'đã bật' trên nền concrete canvas."

    ink_pill_button:
      vai_trò: "Hành động phụ"

      info: "Nút pill fill gần-đen (#151313) với radius 1600px, chữ Concrete (#f4f4f4), cùng padding 8px 20px như Volt. Dùng khi hành động thứ hai cần trọng lượng nhưng không cạnh tranh với primary."

    ghost_text_link:
      vai_trò: "Điều hướng nội dòng"

      info: "Chữ Ink (#201d1d) ở 14–16px Haffer VF không gạch chân mặc định. Khi hover, viền dưới Ink 2px trượt vào. Thường được bọc trong pill radius 48px để tạo vùng click giống nút bấm."

    product_resource_card:
      vai_trò: "Trưng bày tài nguyên hoặc công cụ riêng lẻ"

      info: "Card tối (nền #151313) với radius 5px và viền Charcoal (#312e2e) 1px. Padding trong 16px. Chứa tiêu đề sản phẩm bằng chữ Concrete (Haffer VF 16px) và mono sub-label bằng Haffer Mono 11px màu #b8b8b8. Các card được hiển thị ở góc xoay nhẹ trong bố cục hình quạt."

    featured_testimonial_card:
      vai_trò: "Khối bằng chứng xã hội"

      info: "Nền Ultraviolet (#6840ff), radius 5px, padding 24–32px. Headline bằng Concrete (Haffer XH 40–48px, letter-spacing -1.44px). Vòng tròn avatar (80px) + tên bằng Haffer VF 16px + role badge trong pill Volt. Quote body bằng Concrete ở 16px Haffer VF."

    volt_badge:
      vai_trò: "Tags, chỉ báo trạng thái, course labels"

      info: "Fill Volt (#a1ff62) với radius 2px hoặc 1600px tùy ngữ cảnh, chữ Ink (#201d1d) bằng Haffer Mono 11px hoặc Haffer VF 12px weight 700, padding 3px 8px. Dùng cho tag 'NEW', course markers, và live status."

    video_reel_thumbnail:
      vai_trò: "Xem trước video nội dòng"

      info: "Card ảnh tối (#151313) với radius 2px, padding 16px ở dưới cho overlay tiêu đề. Icon play màu trắng ở giữa, timestamp thời lượng ở góc trên bên phải bằng Haffer Mono 11px Concrete."

    mono_tag_strip:
      vai_trò: "Marquee các course/resource labels"

      dải_cuộn_ngang_các_badge_nhỏ: "nền Concrete, viền Ink 2px, radius 1600px, padding 2px 8px, chữ Ink Haffer Mono 11px. Thường có tiền tố là marker '✱' màu xanh lục cho mục mới."

    globe_map_component:
      vai_trò: "Trực quan hóa cộng đồng"

      info: "Bề mặt tối hình bầu dục (border-radius tạo hình elip, khoảng 160px dọc) (#151313) với viền tròn chấm chấm 1px Smoke (#b8b8b8) dashed. Chứa silhouette bản đồ thế giới cách điệu bằng Ink với accent Volt trên một khu vực duy nhất. Label viết tay Volt bên dưới."

    annotation_callout:
      vai_trò: "Nhấn mạnh viết tay"

      info: "Chữ Vermillion (#f84131) bằng Brisa Pro 25px với lh 0.80, kết hợp với một mũi tên vẽ tay nhỏ. Xuất hiện tiết kiệm để chỉ vào các UI elements và thêm bình luận editorial. Không background, không border — thuần nét nguệch ngoạc bút dạ."

    input_field:
      vai_trò: "Nhập liệu văn bản form"

      info: "Nền Ash Gray (#eaeaea), viền Charcoal (#312e2e) 1px, radius 5px, padding 10px 12px. Placeholder text bằng Steel (#7a7a7a) Haffer VF 14px. Trạng thái focus thêm vòng ngoài Volt (#a1ff62) 2px."

    dotted_radial_divider:
      vai_trò: "Phân cách section trang trí"

      info: "Một hình tròn hoàn hảo được render dưới dạng stroke dashed/dotted 1px Smoke (#b8b8b8) ở đường kính lớn (400–600px). Không chứa nội dung nhưng đánh dấu điểm trung tâm của bố cục. Hoạt động như dấu câu thị giác giữa các section."

  do_s_and_don_ts:

    do:
      - "Dùng Haffer XH (hoặc compressed display sans) cho bất kỳ văn bản nào trên 40px — nén dọc cực đoan (lh 0.85–0.95) và tracking chặt là đặc trưng"
      - "Dành Volt (#a1ff62) cho các khoảnh khắc brand: badge, fill trên primary CTA, và feature callouts. Không bao giờ pha loãng nó làm background hoặc body color"
      - "Kết hợp góc sắc 2–5px trên content tiles với pill radii 1600px trên nút bấm và badge — sự tương phản giữa chính xác như máy và bo tròn chunky là bản sắc thị giác"
      - "Dùng Concrete (#f4f4f4) làm canvas mặc định và Ash Gray (#eaeaea) cho lần nâng bề mặt đầu tiên; chỉ dành Ultraviolet cho card quan trọng nhất mỗi section"
      - "Đặt body text ở 16–19px Haffer VF với tracking -0.007em đến -0.02em — letter-spacing âm ở mọi kích thước tạo nên snap typographic cho hệ thống"
      - "Đóng dấu metadata kỹ thuật bằng Haffer Mono ở 9–12px: tên course, version tags, timestamp. Mono dành cho sự kiện, không phải tường thuật"
      - "Đặt Vermillion (#f84131) chỉ làm annotation text theo phong cách viết tay Brisa Pro — không bao giờ dùng làm fill, border, hoặc background"

    don_t:
      - "Không áp dụng radius mềm 8–12px cho content cards — hệ thống chỉ dùng 2px (sắc) hoặc 5px (nhẹ) cho tiles. Bo tròn chỉ thuộc về pill"
      - "Không đưa gradient, drop shadow, hoặc glassmorphism — thẩm mỹ là phẳng, concrete, và đóng dấu"
      - "Không dùng Ultraviolet (#6840ff) làm fill nút bấm hoặc cho body text — nó chỉ là màu bề mặt featured-card"
      - "Không đặt display text trên 64px bằng Haffer VF hoặc bất kỳ workhorse sans nào — kích thước lớn chỉ thuộc về Haffer XH hoặc compressed display faces tương đương"
      - "Không dùng warm grays hoặc off-tone neutrals — bảng màu giữ nguyên trong tông concrete lạnh/achromatic (#f4f4f4 đến #151313)"
      - "Không thêm quá ba chromatic colors vào bất kỳ màn hình đơn lẻ nào — hệ thống vận hành dựa trên sự kiềm chế, và thêm hue phá vỡ kỷ luật editorial"
      - "Không dùng letter-spacing 0 hoặc giá trị dương trên kích thước display — negative tracking từ -0.03em đến -0.06em là bắt buộc ở 60px trở lên"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f4f4` | Nền trang — concrete gray mà mọi thứ bố cục trên đó |"
    info: "| 1 | Card Surface | `#eaeaea` | Nền card nâng cao, trường nhập liệu, panel phụ |"
    info: "| 2 | Brand Surface | `#a1ff62` | Volt lime dùng làm accent fill cho badge, tag, và feature callouts |"
    info: "| 3 | Feature Surface | `#6840ff` | Ultraviolet dùng cho featured content cards — testimonials, section được làm nổi bật |"
    info: "| 4 | Inverse Surface | `#151313` | Product cards tối, overlay ảnh, khối tương phản tối đa |"

  imagery:

    info: "Imagery thưa thớt và mang tính editorial: ảnh chụp màn hình sản phẩm tối và UI captures được trình bày dưới dạng card nghiêng xòe ra từ một trục trung tâm, giống như ảnh polaroid ghim lên bảng. Video reels xuất hiện dưới dạng hình chữ nhật tối với trạng thái play ở giữa. Quả địa cầu đường chấm chấm được render dưới dạng hình bầu dục tối với silhouette bản đồ và một vùng được làm nổi bật bằng Volt. Ngôn ngữ thị giác là screenshot-first — artifact sản phẩm thực tế thay vì minh họa hoặc lifestyle photography. Các mũi tên chú thích Vermillion viết tay thêm lớp magazine-editor, chỉ vào các element như markup bản in thử. Không có 3D renders, abstract gradients, stock photography. Nền concrete gray làm công việc tạo bầu không khí; imagery là nội dung, không phải trang trí."

  layout:

    info: "Trang là canvas concrete full-width với cột nội dung centered max-width 1200px. Hero text-dominant: display headline cỡ lớn centered, đoạn body nhỏ hơn bên dưới, sau đó là dải quạt ngang các product cards nghiêng trải dài ở một phần ba dưới cùng với xoay -5° đến +5°. Navigation là thanh pill nổi ở trên cùng, không phải header full-bleed. Các section chảy dọc với khoảng cách 64px, xen kẽ giữa khối text centered và bố cục hai cột (text trái, artifact phải). Một vòng tròn chấm chấm lớn xuất hiện như marker trục dọc giữa các section, tạo đường dây dọi vô hình xuống trung tâm trang. Feature grids là 3-column trên desktop. Testimonial và feature cards được đặt bên trong các bề mặt màu (Ultraviolet, Volt) phá vỡ bảng màu trung tính ở các khoảng cách được canh chỉnh cẩn thận. Nhịp điệu tổng thể là: concrete yên tĩnh → color card ồn ào → concrete yên tĩnh — giống như một trang tạp chí typeset."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #201d1d"
    - "background: #f4f4f4"
    - "surface: #eaeaea"
    - "border: #312e2e"
    - "accent: #a1ff62"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:
    - "Hero Headline: 150px Haffer XH weight 400, #201d1d, line-height 0.85, letter-spacing -9px. Centered trên canvas #f4f4f4. Subtext ở 19px Haffer VF weight 400, #4f4c4c, lh 1.25, ls -0.38px."

    info: "Không quan sát thấy màu primary action riêng biệt; dùng các neutral button treatments đã trích xuất thay vì phát minh ra màu CTA fill."

    - "Product Resource Card: nền #151313, radius 5px, padding 16px, viền 1px #312e2e. Title bằng #f4f4f4 ở 16px Haffer VF, sub-label bằng #b8b8b8 ở 11px Haffer Mono. Xoay -3°."

    - "Testimonial Card: nền #6840ff, radius 5px, padding 32px. Headline ở 48px Haffer XH weight 400, #f4f4f4, lh 1.05, ls -1.44px. Body quote ở 16px Haffer VF, #f4f4f4."

    - "Annotation Callout: Không background. Chữ Vermillion (#f84131) ở 25px Brisa Pro weight 400, lh 0.80, kèm mũi tên vẽ tay chỉ vào element mục tiêu."

  radius_philosophy:

    info: "Hệ thống cố tình chia thành hai họ radius: SHARP (2px và 5px) cho tất cả bề mặt chứa nội dung — card, input, ảnh, tile — và EXTREME (160px, 800px, 1600px) cho tất cả element tương tác hoặc trạng thái — nút bấm, badge, tag, khung icon. Trục 2px/1600px này là signature định nghĩa: các tile sắc nét đọc như nội dung chính xác của máy, trong khi các pill đọc như được đẩy bằng tay, chunky, xúc giác. Không bao giờ dùng mid-range radii như 8px hoặc 12px — chúng làm loãng sự tương phản giữa hai họ."

  typography_compression:

    info: "Tất cả kích thước display (40px+) dùng line-height dưới 1.0 (0.85–0.95). Điều này không phổ biến — hầu hết hệ thống dùng lh 1.1–1.3 cho heading. Leading nén làm cho headline cảm giác như được đóng dấu thay vì được đặt, và được kết hợp với negative tracking mạnh tỷ lệ thuận: -0.06em ở 150px, -0.04em ở 80px, -0.02em ở 27px. Khi tái tạo hệ thống này, không chuẩn hóa line-height lên 1.0+ cho kích thước lớn — sự nén là yếu tố chịu lực."

  similar_brands:

    - "**Linear** — Cùng kỷ luật monochrome-first với một accent color sống động duy nhất và layout compact, content-dense"
    - "**Vercel** — Cách tiếp cận giống hệt: concrete-gray canvas, near-black text, display typography chặt với một chromatic accent moment mỗi trang"
    - "**Resend** — Cùng thẩm mỹ brutalist-developer với compressed headline cỡ lớn và pill-rounded CTA trên bề mặt neutral phẳng"
    - "**Framer** — Editorial product-showcase layouts với card nghiêng, display type cực đoan, và dấu câu màu sắc kiềm chế"
    - "**Railway** — Product grids dark-card compact, mono technical labels, và cùng thái độ flat-stamp visual đối với UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-concrete: #f4f4f4;
          --color-ash-gray: #eaeaea;
          --color-bone: #e1e1e1;
          --color-smoke: #b8b8b8;
          --color-graphite: #4f4c4c;
          --color-steel: #7a7a7a;
          --color-charcoal: #312e2e;
          --color-ink: #201d1d;
          --color-obsidian: #151313;
          --color-volt: #a1ff62;
          --color-ultraviolet: #6840ff;
          --color-vermillion: #f84131;
        
          /* Typography — Font Families */
          --font-haffer-vf: 'Haffer VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haffer-xh: 'Haffer XH', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haffer-mono: 'Haffer Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-brisa-pro: 'Brisa Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-mono-label: 11px;
          --leading-mono-label: 1;
          --text-caption: 13px;
          --leading-caption: 1.54;
          --tracking-caption: -0.09px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: -0.16px;
          --text-body: 19px;
          --leading-body: 1.25;
          --tracking-body: -0.38px;
          --text-annotation: 25px;
          --leading-annotation: 0.8;
          --text-subheading: 48px;
          --leading-subheading: 1.05;
          --tracking-subheading: -1.44px;
          --text-heading-sm: 64px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -1.92px;
          --text-heading: 80px;
          --leading-heading: 0.95;
          --tracking-heading: -4px;
          --text-heading-lg: 112px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -5.6px;
          --text-display: 150px;
          --leading-display: 0.85;
          --tracking-display: -9px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 48px;
          --radius-full-2: 160px;
          --radius-full-3: 220px;
          --radius-full-4: 800px;
          --radius-full-5: 1300px;
          --radius-full-6: 1600px;
          --radius-full-7: 8000px;
        
          /* Named Radii */
          --radius-cards: 5px;
          --radius-icons: 160px;
          --radius-badges: 1600px;
          --radius-inputs: 5px;
          --radius-buttons: 1600px;
          --radius-links-pill: 48px;
          --radius-sharp-tiles: 2px;
        
          /* Surfaces */
          --surface-canvas: #f4f4f4;
          --surface-card-surface: #eaeaea;
          --surface-brand-surface: #a1ff62;
          --surface-feature-surface: #6840ff;
          --surface-inverse-surface: #151313;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-concrete: #f4f4f4;
          --color-ash-gray: #eaeaea;
          --color-bone: #e1e1e1;
          --color-smoke: #b8b8b8;
          --color-graphite: #4f4c4c;
          --color-steel: #7a7a7a;
          --color-charcoal: #312e2e;
          --color-ink: #201d1d;
          --color-obsidian: #151313;
          --color-volt: #a1ff62;
          --color-ultraviolet: #6840ff;
          --color-vermillion: #f84131;
        
          /* Typography */
          --font-haffer-vf: 'Haffer VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haffer-xh: 'Haffer XH', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haffer-mono: 'Haffer Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-brisa-pro: 'Brisa Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-mono-label: 11px;
          --leading-mono-label: 1;
          --text-caption: 13px;
          --leading-caption: 1.54;
          --tracking-caption: -0.09px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: -0.16px;
          --text-body: 19px;
          --leading-body: 1.25;
          --tracking-body: -0.38px;
          --text-annotation: 25px;
          --leading-annotation: 0.8;
          --text-subheading: 48px;
          --leading-subheading: 1.05;
          --tracking-subheading: -1.44px;
          --text-heading-sm: 64px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -1.92px;
          --text-heading: 80px;
          --leading-heading: 0.95;
          --tracking-heading: -4px;
          --text-heading-lg: 112px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -5.6px;
          --text-display: 150px;
          --leading-display: 0.85;
          --tracking-display: -9px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-full: 48px;
          --radius-full-2: 160px;
          --radius-full-3: 220px;
          --radius-full-4: 800px;
          --radius-full-5: 1300px;
          --radius-full-6: 1600px;
          --radius-full-7: 8000px;
        }