subframe___style_reference:
  info: "> bản thiết kế graphite trên giấy vellum ấm. Tờ giấy phác thảo của designer, nơi mỗi nét vẽ đều là graphite hoặc tẩy xóa, không bao giờ là sơn — chiều sâu đến từ độ dày nét và thỉnh thoảng là một chút serif trang trí."

  theme: "light"

  info: "Subframe là một workbench monochrome của designer: nền off-white ấm áp, mực graphite đen, và không có điểm nhấn màu sắc nào. Toàn bộ giao diện đọc như một chất liệu duy nhất — giấy, bút chì và bóng đổ — với một cử chỉ typography táo bạo: một serif display tinh tế (Instrument Serif) kết hợp với một sans có hệ thống (Inter) để tạo trọng lượng editorial cho các headline. Các bề mặt phẳng và có viền, không nổi lên; chiều sâu đến từ các đường divider mảnh (hairline) màu #e5e7eb và các điểm nhấn inset trên các control tối thay vì drop shadow. Mật độ thoải mái: nhịp dọc rộng (khoảng cách section 48–64px), layout max-width căn giữa, và khoảng trống lớn xung quanh chữ. Màu sắc duy nhất là độ tương phản giữa gần-trắng và gần-đen — khiến cho nút filled tối là phần tử duy nhất nổi bật nhất trên mỗi trang, và dải logo grayscale của các đối tác là nhịp điệu thị giác trang trí duy nhất."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Page Canvas | `#fafafa` | `--color-page-canvas` | Nền trang, card-on-canvas, chữ sáng trên nền tối — màu trắng ấm mang toàn bộ hệ thống monochrome |"
    info: "| Hairline Border | `#e5e7eb` | `--color-hairline-border` | Divider, viền card, khung ảnh, đường viền icon — nét vẽ được dùng nhiều nhất trong hệ thống, định nghĩa cấu trúc không gian |"
    info: "| Card Surface | `#ededed` | `--color-card-surface` | Nền card nâng lên, bề mặt phụ — nằm trên canvas một bước để tạo nhóm mà không cần shadow |"
    info: "| Divider Mid | `#dadada` | `--color-divider-mid` | Divider tông trung và chuyển tiếp section |"
    info: "| Graphite | `#242424` | `--color-graphite` | Fill action trung tính tương phản cao cho primary button trên nền sáng |"
    info: "| Ink Black | `#171717` | `--color-ink-black` | Body text chính, heading, đường viền icon — hơi lạnh hơn Graphite, dành riêng cho typography, không phải bề mặt |"
    info: "| Pencil | `#5c5c5c` | `--color-pencil` | Body text phụ, mô tả, subhead copy |"
    info: "| Faint Graphite | `#a3a3a3` | `--color-faint-graphite` | Helper text mờ, metadata cấp ba, nav item không hoạt động |"

  tokens___typography:

    inter___system_ui_sans___nav__body__button__subhead__section_headings__weight_500_cho_body_và_controls__600_cho_subheading_và_nav_emphasis__700_cho_section_headlines__negative_tracking_nặng_làm_siết_chặt_các_dạng_hình_học_ở_mọi_kích_thước__tạo_cảm_giác_ui_nén_chặt__kỹ_thuật_____font_inter:
      - "**Thay thế:** Inter (Google Fonts)"
      - "**Weights:** 500, 600, 700"
      - "**Kích thước:** 12px, 14px, 18px, 24px, 28px, 48px, 96px"
      - "**Line height:** 1.00–1.43"
      - "**Letter spacing:** -0.0500em, -0.0250em, -0.0050em"
      - "**Vai trò:** System UI sans — nav, body, button, subhead, section headings. Weight 500 cho body và controls, 600 cho subheading và nav emphasis, 700 cho section headlines. Negative tracking nặng làm siết chặt các dạng hình học ở mọi kích thước, tạo cảm giác UI nén chặt, kỹ thuật."

    instrument_serif___display_only_serif_cho_hero_và_các_khoảnh_khắc_editorial__weight_400_với__0_025em_tracking_tạo_ra_vẻ_thanh_lịch_nghiêng_italic_leaning_tương_phản_với_hình_học_công_nghiệp_của_inter___signature_move__một_từ_hoặc_cụm_từ_serif_duy_nhất_bên_trong_một_trang_sans_serif__hoạt_động_như_dấu_câu_thị_giác_chứ_không_phải_style_heading_____font_instrument_serif:
      - "**Thay thế:** Playfair Display, DM Serif Display"
      - "**Weights:** 400"
      - "**Kích thước:** 80px, 128px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0250em"
      - "**Vai trò:** Display-only serif cho hero và các khoảnh khắc editorial. Weight 400 với -0.025em tracking tạo ra vẻ thanh lịch nghiêng (italic-leaning) tương phản với hình học công nghiệp của Inter — signature move: một từ hoặc cụm từ serif duy nhất bên trong một trang sans-serif, hoạt động như dấu câu thị giác chứ không phải style heading."

    fragment_mono___accent_mono_cho_các_phần_tử_inline_dạng_code__tag_label_và_technical_callout__được_dùng_có_chừng_mực___xuất_hiện_trong_danh_sách_tính_năng_và_chú_thích_inline__nơi_công_cụ_thiết_kế_muốn_báo_hiệu__đây_là_output_máy_____font_fragment_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 18px"
      - "**Line height:** 1.33"
      - "**Letter spacing:** -0.0250em"
      - "**Vai trò:** Accent mono cho các phần tử inline dạng code, tag label và technical callout. Được dùng có chừng mực — xuất hiện trong danh sách tính năng và chú thích inline, nơi công cụ thiết kế muốn báo hiệu 'đây là output máy'."

    ui_monospace___micro_label__phím_tắt_và_chú_thích_kỹ_thuật_nhỏ__system_monospace_fallback_giữ_cho_nó_trung_tính_____font_ui_monospace:
      - "**Thay thế:** SF Mono, Menlo"
      - "**Weights:** 500"
      - "**Kích thước:** 10px"
      - "**Line height:** 1.70"
      - "**Letter spacing:** -0.0060em"
      - "**Vai trò:** Micro-label, phím tắt và chú thích kỹ thuật nhỏ. System monospace fallback giữ cho nó trung tính."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1 | -0.06px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.07px | `--text-body-sm` |"
      info: "| body | 18px | 1.33 | -0.45px | `--text-body` |"
      info: "| subheading | 24px | 1.17 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.14 | -0.7px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.13 | -1.2px | `--text-heading` |"
      info: "| display | 128px | 1 | -6.4px | `--text-display` |"

  tokens___spacing___shapes:

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

    density: "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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 24px |"
      info: "| cards | 24px |"
      info: "| pills | 9999px |"
      info: "| images | 24px |"
      info: "| buttons | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0,...` | `--shadow-sm` |"

    layout:

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

  components:

    dark_filled_button:
      vai_trò: "Primary action trigger"

      info: "Nền #242424, chữ #fafafa, border-radius 16px, padding 8px 20px. Inter weight 500, 14px. Phần tử bề mặt tương phản cao duy nhất trên trang. Có một điểm nhấn inset tinh tế (rgba(255,255,255,0.25) 0px 4px 4px -2px inset ở trên, rgba(0,0,0,0.25) 0px -4px 4px -2px inset ở dưới) tạo hiệu ứng vát thủy tinh mờ — signature của hệ thống là ngay cả phần tử 'nổi bật' cũng có cảm giác vẽ tay, bị ép vào chứ không phải fill phẳng."

    ghost_outlined_button:
      vai_trò: "Secondary action trigger"

      info: "Nền trong suốt, viền 1px màu #e5e7eb, chữ #171717, border-radius 16px, padding 8px 20px. Inter weight 500, 14px. Nằm cạnh filled button như một đối tác yên tĩnh — viền giống hairline của page divider, nên button đọc như 'một divider tình cờ có thể click được'."

    pill_nav_group:
      vai_trò: "Segmented selector (ví dụ: Ask AI / Design / Code)"

      info: "Container capsule tối #242424 với radius 9999px, chứa 2–3 segment item với chữ #fafafa. Segment active có inner pill hoặc trạng thái được highlight nhẹ hơn. Padding 8px 16px mỗi segment. Đây là control tương tác tạo ra độ tương phản màu trên trang — pill tối trên nền trắng ấm là phần tử UI dễ nhận biết nhất về mặt thị giác."

    top_navigation_bar:
      vai_trò: "Site-wide navigation"

      info: "Nhóm căn giữa gồm 3 text link (Pricing, Docs, Blog) với row gap 32px, cộng với text link 'Log in' căn phải và filled button 'Start for free'. Logo mark ở góc trên bên trái, rất nhỏ. Không có background container — nav nổi trên canvas. Inter weight 500, 14px cho link. Link active/hover dùng #171717; inactive dùng #a3a3a3."

    hero_display_headline:
      vai_trò: "Above-the-fold statement"

      info: "Inter weight 700, 96px, line-height 1.0, letter-spacing -4.8px, màu #171717, căn giữa. Sự nén tracking cực độ là một signature: các dạng chữ siết chặt đến mức gần như chạm nhau, tạo thành một khối đồ họa dày đặc. Không có serif ở đây — display được dành cho các khoảnh khắc phụ; hero là Inter thuần túy."

    serif_accent_phrase:
      vai_trò: "Dấu câu editorial trong một câu"

      info: "Instrument Serif weight 400, 80–128px, line-height 1.0, letter-spacing -3.2px, màu #171717, được dùng như một từ inline đơn lẻ hoặc cụm từ ngắn bên trong hoặc sau một Inter headline. Sự chênh lệch kích thước (serif được render lớn hơn sans) khiến nó đọc như một cử chỉ viết tay. Đây là khoảnh khắc ấm áp duy nhất của hệ thống."

    section_heading:
      vai_trò: "Tiêu đề section tính năng trong trang"

      info: "Inter weight 700, 48px, line-height 1.13, letter-spacing -1.2px, màu #171717, căn trái. Theo sau bởi một body subhead hai dòng với Inter weight 500, 18px, #5c5c5c, với khoảng cách dọc 32px giữa heading và subhead."

    product_showcase_frame:
      vai_trò: "Container ảnh chụp màn hình sản phẩm hoặc UI"

      info: "Hình chữ nhật bo tròn với radius 24px, viền 1px màu #e5e7eb, không shadow, không padding. Chứa ảnh chụp màn hình sản phẩm thật (với UI nội bộ riêng) hoặc một hình minh họa tông ấm. Viền là khung duy nhất — không drop shadow, không gradient backdrop. Ảnh bên trong có góc bo tròn tự nhiên khớp với radius khung."

    grayscale_logo_strip:
      vai_trò: "Social proof / partner brands"

      info: "Hàng ngang gồm 4–6 logo thương hiệu (Apollo, The New Parts, Shopify, Octave, Gem) được render bằng màu #a3a3a3 hoặc #5c5c5c, không màu, khoảng cách đều với column gap 48–64px. Logo nằm trên cùng một canvas trắng ấm, không có container — mắt đọc chúng như một dải trang trí duy nhất."

    card_surface:
      vai_trò: "Khối nội dung được nhóm"

      info: "Nền #ededed, border-radius 24px, padding 24px, không viền, không shadow. Được dùng cho feature tile và nhóm nội dung. Bước nhảy độ sáng một bậc từ canvas #fafafa lên card #ededed tạo ra sự phân nhóm mà không có bất kỳ hiệu ứng nâng lên nào — hệ thống cố tình phẳng."

    icon_mark:
      vai_trò: "Icon thương hiệu và tính năng"

      info: "Icon chỉ có stroke (stroke-only) màu #171717 với kích thước 20–24px, stroke weight 1.5px. Dạng hình học đơn giản — logo mark là hình vuông bị chia đôi. Icon dùng chung family border-radius (16–24px) với container, tạo nhịp điệu thị giác giữa icon và UI xung quanh."

    watch_demo_button:
      vai_trò: "Tertiary action với media affordance"

      info: "Ghost button style với một icon play-triangle nhỏ đứng trước chữ 'Watch demo'. Nền trong suốt, viền #e5e7eb, radius 16px, padding 8px 20px. Icon và chữ đều màu #171717, Inter weight 500, 14px. Icon phân biệt nó với primary action 'Start building'."

  do_s_and_don_ts:

    do:
      - "Dùng #242424 làm nền filled button với chữ #fafafa — độ tương phản là tín hiệu mạnh duy nhất của hệ thống"
      - "Áp dụng letter-spacing -0.025em cho tất cả heading từ 18px trở lên; siết chặt xuống -0.05em ở kích thước display (96px+) để nén đồ họa cực độ"
      - "Dùng border-radius 24px cho tất cả card, ảnh và nav container; dành 16px cho button và 9999px chỉ cho pill-shaped segmented control"
      - "Phân tách các bề mặt bằng một bước độ sáng (#fafafa canvas → #ededed card) thay vì shadow elevation"
      - "Đặt một cụm từ Instrument Serif duy nhất bên trong hoặc sau một Inter headline như dấu câu editorial — không bao giờ dùng serif cho câu hoàn chỉnh hoặc body text"
      - "Giữ section gap ở 48–64px để duy trì mật độ thoải mái, rộng rãi; khoảng trống là thứ làm cho bảng màu monochrome có cảm giác cao cấp chứ không khắc khổ"
      - "Render tất cả logo đối tác và icon trang trí ở chế độ grayscale (#5c5c5c hoặc #a3a3a3) để giữ nguyên quy tắc zero-color của hệ thống"

    don_t:
      - "Không bao giờ đưa màu sắc (chromatic color) vào giao diện — 1% màu sắc là có cấu trúc, không phải ngẫu nhiên; bất kỳ accent color nào cũng sẽ phá vỡ hệ thống editorial"
      - "Không bao giờ dùng drop shadow để tạo elevation; thay vào đó dùng nền card #ededed hoặc viền #e5e7eb"
      - "Không bao giờ dùng Inter cho display-size headline trên 96px khi Instrument Serif có sẵn — sự tương phản serif/sans là signature"
      - "Không bao giờ dùng #000000 (đen thuần) — dùng #171717 hoặc #242424, cả hai đều hơi ấm để khớp với canvas vellum"
      - "Không bao giờ đặt border-radius dưới 16px trên các phần tử tương tác; hệ thống cố tình mềm mại và các radius là một phần bản sắc của nó"
      - "Không bao giờ dùng weight 400 Inter cho body text — weight tối thiểu là 500 để duy trì mật độ thị giác khi kết hợp với tracking nén"
      - "Không bao giờ đặt background trên dải logo trang trí hoặc partner band — chúng nổi trực tiếp trên canvas với whitespace làm container"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 1 | Canvas | `#fafafa` | Nền trang cơ bản — màu trắng off-white ấm mang toàn bộ hệ thống monochrome |"
    info: "| 2 | Card | `#ededed` | Bước elevation đầu tiên — nội dung được nhóm, feature tile, container tinh tế |"
    info: "| 3 | Dark Surface | `#242424` | Bề mặt đảo ngược cho primary action, active nav pill, segmented control — phần tử tương phản cao duy nhất |"

  elevation:

    - "**Dark Filled Button:** `inset 0 4px 4px -2px rgba(255,255,255,0.25), inset 0 -4px 4px -2px rgba(0,0,0,0.25), inset -2px 0 2px -2px rgba(255,255,255,0.1)`"

  imagery:

    info: "Imagery tối giản và chức năng. Hệ thống dựa trên hai chế độ thị giác: (1) ảnh chụp màn hình sản phẩm có viền và UI mockup được chứa trong khung radius 24px — những ảnh này hiển thị các component giao diện thật (bảng, nút, form) được render trong cùng bảng màu monochrome, khiến ảnh chụp màn hình có cảm giác thuộc về trang; (2) một dải logo grayscale duy nhất của các thương hiệu đối tác như social proof, được render phẳng, không màu và không container. Không có ảnh chụp đời sống, không có gradient trừu tượng, không có 3D render. Phần tử minh họa duy nhất là một 'tile' sản phẩm tối được đặt ở giữa trên nền xám ấm với một brand icon — nó đọc như một product showcase, không phải trang trí. Tất cả imagery chiếm một layout text-dominant, nơi chữ mang trọng lượng thị giác."

  layout:

    info: "Layout căn giữa, max-width (1200px) với nhịp dọc rộng rãi. Hero là một stack căn giữa duy nhất: một dark segmented pill control ở trên cùng, một Inter headline lớn, một subhead một dòng, và hai button cạnh nhau (filled + ghost) — không có side-image, không có split layout. Bên dưới hero, một dải logo grayscale căn giữa. Mỗi section tiếp theo theo cùng một mẫu: khối heading + subhead căn trái, sau đó là một product showcase frame full-width bên dưới với khoảng cách 48–64px giữa các section. Navigation tối giản: một top bar với link căn giữa và action căn phải, không sidebar, không mega-menu. Trang đọc từ trên xuống dưới như một chuỗi các tuyên bố căn giữa, mỗi tuyên bố được cho không gian để thở — layout giống một portfolio editorial hơn là một trang sản phẩm dày đặc."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #fafafa"
    - "text: #171717"
    - "secondary text: #5c5c5c"
    - "border: #e5e7eb"
    - "card surface: #ededed"
    - "primary action: #242424 (filled action)"

    example_component_prompts:

    - "**Hero Section**: Page background #fafafa. Centered Inter 700 at 96px, line-height 1.0, letter-spacing -4.8px, color #171717. Subtitle in Inter 500 at 18px, #5c5c5c, line-height 1.33. Below, a dark segmented pill (#242424 background, 9999px radius) with 3 segments in #fafafa text. Two buttons side by side: filled (#242424 bg, #fafafa text, 16px radius, 8px 20px padding) and ghost (transparent, 1px #e5e7eb border, 16px radius). 64px vertical gap between headline and subhead."

    - "**Section with Product Showcase**: Left-aligned Inter 700 at 48px, line-height 1.13, letter-spacing -1.2px, color #171717. Subhead in Inter 500 at 18px, #5c5c5c, two lines max. 32px gap to subhead. Below at 48px gap: a full-width product frame with 24px border-radius, 1px #e5e7eb border, no shadow, containing a grayscale UI mockup."

    - "**Serif Accent Headline**: Inter 700 at 48px stating a sentence, with one word in Instrument Serif weight 400 at 80px, line-height 1.0, letter-spacing -3.2px, color #171717. The serif word sits inline and is taller than the surrounding sans, creating an editorial emphasis moment."

    - "**Grayscale Logo Strip**: Horizontal row of 5 logos, each rendered in #a3a3a3, 64px column gap, vertically centered, no container background. Logos are visually equal-weight and sit directly on the #fafafa canvas."

    - "**Feature Card Grid**: Three cards in a row, each with #ededed background, 24px border-radius, 24px padding, no border, no shadow. Inter 600 at 18px heading in #171717, Inter 500 at 14px body in #5c5c5c, 16px gap between heading and body within each card."

  typography_philosophy:

    info: "Hệ thống dùng chính xác hai giọng display: Inter (sans hình học) cho mọi thứ chức năng, và Instrument Serif (serif chuyển tiếp) cho chính xác một khoảnh khắc mỗi section — một từ hoặc cụm từ ngắn được render lớn hơn và nhẹ hơn chữ xung quanh. Đây không phải là style heading; nó là dấu câu. Sự tương phản giữa các dạng công nghiệp nén của Inter weight 700 (-0.05em tracking ở kích thước display) và các đường cong thanh lịch nghiêng (italic-leaning) của Instrument Serif weight 400 tạo ra chất vẽ tay bên trong một khung hệ thống. Body text luôn là Inter 500 tối thiểu — weight 400 không bao giờ được dùng vì tracking chặt đòi hỏi thêm trọng lượng để duy trì độ dễ đọc."

  radius_system:

    ba_radius_định_nghĩa_hệ_thống: "16px cho interactive control (button, input), 24px cho container (card, ảnh, nav group, product frame), và 9999px cho pill shape (segmented control, active nav state). Thang ba bậc này tạo ra một hệ thống phân cấp thị giác, nơi container luôn mềm mại hơn control, và pill luôn được bo tròn hoàn toàn. Không có phần tử nào dùng radius dưới 12px — hệ thống cố tình mềm mại, và các góc sắc nhọn sẽ phá vỡ cảm giác editorial monochrome."

  similar_brands:

    - "**Linear** — Cùng giao diện monochrome tối-trên-sáng với màu sắc tối thiểu, spacing rộng rãi, và cùng sự tự tin vào một nút high-contrast duy nhất làm tín hiệu primary action"
    - "**Vercel** — Cùng sự kiềm chế trong bảng màu (gần monochrome với xám và đen), dùng hairline border thay vì shadow để tạo cấu trúc, và tracking typography chặt ở kích thước display"
    - "**Frame.io** — Cùng nền off-white ấm, container không viền hoặc viền hairline, và sự tương phản typography serif/sans trên bề mặt marketing"
    - "**Pitch** — Cùng phong cách trình bày editorial với section max-width căn giữa, nhịp dọc rộng rãi, và một dark filled button duy nhất làm phần tử tương phản cao duy nhất trên mỗi màn hình"
    - "**Figma Config** — Cùng các khoảnh khắc serif display tỷ lệ lớn kết hợp với sans-serif UI type, và dải logo đối tác grayscale như xử lý social proof"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-page-canvas: #fafafa;
          --color-hairline-border: #e5e7eb;
          --color-card-surface: #ededed;
          --color-divider-mid: #dadada;
          --color-graphite: #242424;
          --color-ink-black: #171717;
          --color-pencil: #5c5c5c;
          --color-faint-graphite: #a3a3a3;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-fragment-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --tracking-caption: -0.06px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.07px;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.45px;
          --text-subheading: 24px;
          --leading-subheading: 1.17;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.14;
          --tracking-heading-sm: -0.7px;
          --text-heading: 48px;
          --leading-heading: 1.13;
          --tracking-heading: -1.2px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -6.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 24px;
          --radius-cards: 24px;
          --radius-pills: 9999px;
          --radius-images: 24px;
          --radius-buttons: 16px;
        
          /* Shadows */
          --shadow-sm: rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0, 0, 0, 0.25) 0px -4px 4px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset;
        
          /* Surfaces */
          --surface-canvas: #fafafa;
          --surface-card: #ededed;
          --surface-dark-surface: #242424;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-page-canvas: #fafafa;
          --color-hairline-border: #e5e7eb;
          --color-card-surface: #ededed;
          --color-divider-mid: #dadada;
          --color-graphite: #242424;
          --color-ink-black: #171717;
          --color-pencil: #5c5c5c;
          --color-faint-graphite: #a3a3a3;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-instrument-serif: 'Instrument Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-fragment-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --tracking-caption: -0.06px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.07px;
          --text-body: 18px;
          --leading-body: 1.33;
          --tracking-body: -0.45px;
          --text-subheading: 24px;
          --leading-subheading: 1.17;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.14;
          --tracking-heading-sm: -0.7px;
          --text-heading: 48px;
          --leading-heading: 1.13;
          --tracking-heading: -1.2px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -6.4px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(255, 255, 255, 0.25) 0px 4px 4px -2px inset, rgba(0, 0, 0, 0.25) 0px -4px 4px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset, rgba(255, 255, 255, 0.1) -2px 0px 2px -2px inset;
        }