coda___style_reference:
  info: "> Chữ cái hoành tráng trên nền giấy da kem ấm — Coda mang phong cách poster chợ viết tay, không phải dashboard SaaS."

  theme: "light"

  info: "Ngôn ngữ thị giác của Coda là một bản sắc marketplace đầy tự tin, gần như mang tính kiến trúc, xây dựng trên nền canvas kem ấm (#f8f9eb) thay vì trắng tinh. Dấu ấn định hình là display type hoành tráng — một custom geometric grotesque (Monument Grotesk) được đặt cực kỳ khít (line-height 0.90) ở kích thước lên đến 134px, khiến headline trông như chữ khắc chứ không phải web copy. Mọi bề mặt đều được viền, không đổ bóng: đường viền thanh mảnh màu than trên nền kem tạo độ chính xác như bản thiết kế, kết hợp với pill-shaped tags, nút bo tròn nhỏ (~13px radius), và một section xanh rừng sâu phá vỡ nhịp điệu đơn sắc bằng các khối blob hữu cơ. Màu sắc được dùng như dấu câu có chủ đích, tiết chế — một thẻ mint ở đây, một thẻ lilac hoặc rose ở kia — trong khi bảng màu cấu trúc vẫn giữ chất đất và phi sắc. Hiệu ứng tổng thể là nửa brutalism biên tập, nửa cửa hàng boutique: ấm áp, xúc giác, và mang tính vật lý rõ rệt thay vì kính kỹ thuật số."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Cream Parchment | `#f8f9eb` | `--color-cream-parchment` | Canvas trang, nền chính, bề mặt nav và body |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card nâng cao, icon fill bên trong container có viền, text trên nút tối |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Viền mảnh, text chính, outline stroke, divider bề mặt tối |"
    info: "| Charcoal | `#202020` | `--color-charcoal` | Nền nút filled, bề mặt nâng cao tối, text phụ trên nền kem |"
    info: "| Sage Mist | `#c0c2a9` | `--color-sage-mist` | Viền muted, icon stroke, text phụ, divider mềm giữa các section |"
    info: "| Olive Slate | `#5a5a4f` | `--color-olive-slate` | Text phụ và meta, caption nhẹ, copy mức ưu tiên thấp |"
    info: "| Pebble | `#7c7d76` | `--color-pebble` | Text cấp ba, caption label, helper copy nhẹ trên nền kem |"
    info: "| Bone | `#edeee1` | `--color-bone` | Viền nút nhẹ, bề mặt hover mờ, divider gần canvas |"
    info: "| Forest Depths | `#003d21` | `--color-forest-depths` | Nền section hero feature, dải tối định hình thương hiệu, bề mặt UI đậm |"
    info: "| Mint Sprout | `#aafdc0` | `--color-mint-sprout` | Bề mặt card xanh nhạt, accent stroke heading, pastel fill sống động |"
    info: "| Cobalt Ink | `#041668` | `--color-cobalt-ink` | Decorative icon fill, deep accent stroke, brand hue phụ |"
    info: "| Plum Depth | `#2d0078` | `--color-plum-depth` | Decorative icon fill, deep accent stroke, brand hue cấp ba |"
    info: "| Wine Shadow | `#3f0929` | `--color-wine-shadow` | Decorative icon fill, deep accent stroke, accent hue ấm |"
    info: "| Lilac Wash | `#d3beff` | `--color-lilac-wash` | Bề mặt card tím nhạt, pastel feature tile |"
    info: "| Sky Wash | `#b0f4ff` | `--color-sky-wash` | Bề mặt card xanh ngọc nhạt, pastel feature tile |"
    info: "| Rose Wash | `#ffc0e6` | `--color-rose-wash` | Bề mặt card hồng nhạt, pastel feature tile |"

  tokens___typography:

    ui_sans_serif___ui_sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Vai trò:** ui-sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    monument_grotesk_custom___giọng_nói_duy_nhất_của_thương_hiệu___headlines__body__buttons__nav__và_tags_đều_dùng_custom_geometric_grotesque_này__weight_800_cho_monumental_display__500_cho_medium_emphasis__400_cho_body_và_ui__leading_0_90_khít_trên_kích_thước_lớn_là_dấu_ấn__chữ_nén_lại_thành_các_khối_kiến_trúc_thay_vì_cột_biên_tập_thoáng_____font_monument_grotesk_custom:
      - "**Thay thế:** Archivo, Space Grotesk, hoặc Inter Tight ở weight 700/800"
      - "**Weights:** 400, 500, 800"
      - "**Sizes:** 10, 12, 14, 16, 18, 21, 22, 25, 34, 45, 54, 63, 72, 134"
      - "**Line height:** 0.90–1.50 tùy kích thước"
      - "**Letter spacing:** Gần như zero: -0.01em ở mọi kích thước để siết chặt quang học trên bold weights"
      - "**Vai trò:** Giọng nói duy nhất của thương hiệu — headlines, body, buttons, nav, và tags đều dùng custom geometric grotesque này. Weight 800 cho monumental display, 500 cho medium emphasis, 400 cho body và UI. Leading 0.90 khít trên kích thước lớn là dấu ấn: chữ nén lại thành các khối kiến trúc thay vì cột biên tập thoáng."

    jetbrains_mono___monospace_giống_code_dùng_cho_pill_tags__status_badges_nhỏ__và_microcopy_kỹ_thuật__giọng_mono_này_cố_tình_tương_phản_với_geometric_grotesque_bo_tròn__báo_hiệu__hệ_thống__hoặc__nhãn__thay_vì__thông_điệp_____font_jetbrains_mono:
      - "**Thay thế:** IBM Plex Mono hoặc JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 10, 12, 14, 16"
      - "**Line height:** 1.20–1.37"
      - "**Vai trò:** Monospace giống code dùng cho pill tags, status badges nhỏ, và microcopy kỹ thuật. Giọng mono này cố tình tương phản với geometric grotesque bo tròn, báo hiệu 'hệ thống' hoặc 'nhãn' thay vì 'thông điệp'."

    system_ui_sans___fallback_và_accessibility_text_khi_monument_grotesk_không_có_sẵn__cũng_dùng_cho_secondary_text_phi_thương_hiệu_và_link_rendering_trên_bề_mặt_card____font_system_ui_sans:
      - "**Thay thế:** System default sans-serif stack"
      - "**Weights:** 400"
      - "**Sizes:** 16"
      - "**Line height:** 1.50"
      - "**Vai trò:** Fallback và accessibility text khi Monument Grotesk không có sẵn; cũng dùng cho secondary text phi thương hiệu và link rendering trên bề mặt card"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.37 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.01px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.01px | `--text-body` |"
      info: "| subheading | 21px | 1.3 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.3 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 34px | 1.13 | -0.01px | `--text-heading` |"
      info: "| heading-lg | 45px | 1.02 | -0.01px | `--text-heading-lg` |"
      info: "| display | 72px | 0.9 | -0.01px | `--text-display` |"
      info: "| display-xl | 134px | 0.9 | -0.01px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 63 | 63px | `--spacing-63` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 89 | 89px | `--spacing-89` |"
      info: "| 107 | 107px | `--spacing-107` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 22px |"
      info: "| badges | 9999px |"
      info: "| buttons | 13px |"
      info: "| heroCards | 45px |"
      info: "| largeCards | 27px |"
      info: "| smallButtons | 9px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 72px"
      - "**Card padding:** 27px"
      - "**Element gap:** 13px"

  components:

    announcement_bar:
      vai_trò: "Dải mỏng full-width phía trên navigation"

      info: "Nền Charcoal (#202020) trải rộng edge-to-edge, row gap bên trong 4–9px, monospace caption tracking rộng màu #f8f9eb ở 12px, tùy chọn nút đóng (×) căn phải màu kem. Chiều cao gọn — một dòng text với padding dọc thoải mái."

    top_navigation:
      vai_trò: "Header chính của site với logo, links, language switcher, và CTA"

      info: "Nền trong suốt hoặc Cream Parchment (#f8f9eb), không có border dưới. Wordmark CODA bằng Monument Grotesk weight 800 ở ~25px bên trái. Giữa: bốn nav links ở 16px weight 500, màu #202020. Phải: dropdown cờ ngôn ngữ, text link 'Contact us', và nút CTA filled dark Charcoal (13px radius, padding 13px 18px, text trắng). Nav links cách nhau bằng horizontal gap ~27px."

    filled_primary_button:
      vai_trò: "Call-to-action chính ('Get Started', 'Learn more')"

      info: "Fill Charcoal (#202020), text trắng, Monument Grotesk weight 500 ở 16px, border-radius 13px, padding 13px 18px, không border. Là biến thể nút filled duy nhất — không có chromatic CTA. Hover sáng nhẹ lên #2e2e2e."

    outlined_ghost_button:
      vai_trò: "Secondary action trên nền kem"

      info: "Fill trong suốt, border 1.5px #c0c2a9 (Sage Mist), text Charcoal, radius 9px, padding 13px 18px. Dùng cho các action ưu tiên thấp không nên cạnh tranh với primary CTA."

    pill_status_badge:
      vai_trò: "Label ngữ cảnh nhỏ phía trên section headlines ('READY TO GROW? WE'RE READY TO GO')"

      info: "Radius 9999px, border 1.5px #c0c2a9 Sage Mist, fill trong suốt, JetBrains Mono 12px uppercase màu #202020. Padding 9px 13px. Hình pill và text monospace là tín hiệu 'system tag' có chủ đích."

    monumental_display_headline:
      vai_trò: "Typography cho hero và section headline"

      info: "Monument Grotesk weight 800 ở 72–134px, line-height 0.90, letter-spacing -0.01em, màu #000000. Icon glyphs (logo tròn, mặt cười, chip mũi tên) được đặt inline dưới dạng black outlined marks, căn chỉnh theo baseline — type và pictogram nằm trên cùng một dòng. Xếp hai dòng: dòng trên dài, dòng dưới ngắn và căn giữa bên dưới."

    subheadline:
      vai_trò: "Đoạn hỗ trợ dưới hero hoặc section headlines"

      info: "Monument Grotesk weight 400 ở 18–21px, line-height 1.30, Charcoal (#202020), căn giữa dưới display headline. Đóng vai trò 'giọng nói nhẹ nhàng' sau tiếng hét hoành tráng."

    full_bleed_forest_section:
      vai_trò: "Dải showcase feature phá vỡ nhịp điệu kem"

      info: "Nền Forest Depths (#003d21), full-bleed, corner radius ~45px ở cạnh trên để hòa vào canvas kem như một gò đất mềm. Bên trong: cụm blob tròn hữu cơ màu Mint Sprout ở độ mờ 60–80%, xếp lớp như chồng coin 3D. Section padding 63–72px trên/dưới."

    feature_card_with_outlined_icon:
      vai_trò: "Card giải thích feature (ví dụ: 'Your web store, your way')"

      info: "Nền Forest Depths (#003d21) tiếp tục ở phía sau, card tự thân là bề mặt Forest. Bên trái: text headline Mint Sprout bằng Monument Grotesk 800 ở 45–54px, weight 800, line-height 1.02. Bên phải: card vuông bo tròn Mint Sprout (#aafdc0) (~22px radius, 27px padding) chứa icon đậm màu đen (mặt cười, v.v.) theo phong cách Monument Grotesk, mô tả ngắn bằng 14px Charcoal, và Filled Primary Button (tối trên nền mint)."

    pastel_surface_card:
      vai_trò: "Card tông màu làm nổi bật một feature hoặc content tile cụ thể"

      info: "Bề mặt pastel full-bleed đơn sắc ở một trong các màu Lilac Wash (#d3beff), Sky Wash (#b0f4ff), Rose Wash (#ffc0e6), hoặc Mint Sprout (#aafdc0). Radius 22–27px, padding 27px. Màu sắc là toàn bộ nền — không border, không shadow. Headline bằng Monument Grotesk 800 với dark accent phù hợp (Cobalt Ink, Plum Depth, Wine Shadow, hoặc Charcoal)."

    icon_in_rounded_square:
      vai_trò: "Container icon nhỏ dùng trong danh sách và feature callouts"

      info: "Radius 22px, ~45×45px, filled với chromatic accent (Mint Sprout, Cobalt Ink, v.v.), outline đen 2px. Icon là một pictogram đơn lẻ theo phong cách Monument Grotesk (mặt, mũi tên, đồng xu) màu đen, căn giữa."

    inline_graphic_glyph:
      vai_trò: "Decorative icon đặt inline với display headlines"

      info: "Hình học geometric có outline đen (hình tròn với mặt, chip với mũi tên, xoắn ốc, double chevron) có kích thước tương ứng với cap-height của display headline, đặt trên cùng baseline. Hoạt động như một ornament kiểu chữ, không phải separator."

  do_s_and_don_ts:

    nên_làm:
      - "Đặt display headlines bằng Monument Grotesk weight 800 với line-height 0.90 — nén chữ là bản sắc thương hiệu, không phải lỗi typography cần sửa."
      - "Mặc định dùng Cream Parchment (#f8f9eb) làm canvas cho mọi màn hình mới; dành Forest Depths (#003d21) cho một feature band trên mỗi trang để nó tạo hiệu ứng chuyển đổi có chủ đích, không phải nền cạnh tranh."
      - "Dùng Charcoal (#202020) làm màu nút filled duy nhất — không có chromatic CTA. Accent colors thuộc về icon, bề mặt card, và decorative strokes, không bao giờ thuộc về action backgrounds."
      - "Viền mọi thứ thay vì đổ bóng: outline 1.5px Obsidian (#000000) hoặc Sage Mist (#c0c2a9) trên bề mặt kem. Độ nâng đến từ outline và fill, không từ box-shadow."
      - "Dùng pastel palette (Mint Sprout, Lilac Wash, Sky Wash, Rose Wash) làm nền full-card — một màu mỗi card, không border, không gradient bên trong."
      - "Áp dụng radius 13px cho buttons và radius 22px cho cards một cách nhất quán. Dành radius 9999px chỉ cho pill badges và tags."
      - "Giữ monospace (JetBrains Mono) chỉ dùng cho status tags 10–14px, badges, và small caps labels — không bao giờ dùng cho câu body."

    không_nên_làm:
      - "Không đặt headline với line-height thoải mái hoặc thoáng (1.3+) ở kích thước display — hiệu ứng hoành tráng của thương hiệu sẽ sụp đổ nếu display type 'thở'."
      - "Không đưa vào chromatic filled button (xanh dương, xanh lá, tím) — CTA fill duy nhất là Charcoal. Thêm màu vào CTA làm loãng kỷ luật đơn sắc."
      - "Không dùng #ffffff làm nền trang — sự ấm áp của Coda phụ thuộc vào Cream Parchment. Pure White khiến thiết kế trông như trang SaaS chung chung."
      - "Không áp dụng drop shadows hoặc multi-layer box-shadows cho cards hoặc buttons — hệ thống border thay thế độ nâng. Một cái bóng ở đây phá vỡ phép ẩn dụ bản thiết kế."
      - "Không trộn các pastel colors bên trong một card hoặc dùng gradient để pha trộn chúng — mỗi pastel card là một wash đặc đơn sắc."
      - "Không dùng rounded fonts (Inter, Nunito) hoặc humanist serifs làm thay thế cho Monument Grotesk — sự nén geometric grotesque là dấu ấn."
      - "Không thêm chromatic borders vào dark cards. Dark sections dùng Mint Sprout hoặc pastel fills bên trong; outlines của chúng vẫn đơn sắc hoặc không có."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Cream Parchment | `#f8f9eb` | Canvas trang chính, nền nav, bề mặt hero |"
    info: "| 2 | Pure White | `#ffffff` | Bề mặt card nâng cao bên trong dark sections, icon fills |"
    info: "| 2 | Pastel Mint | `#aafdc0` | Bề mặt card feature nhẹ, text accent trên dark sections |"
    info: "| 2 | Pastel Lilac | `#d3beff` | Biến thể bề mặt card pastel |"
    info: "| 2 | Pastel Sky | `#b0f4ff` | Biến thể bề mặt card pastel |"
    info: "| 2 | Pastel Rose | `#ffc0e6` | Biến thể bề mặt card pastel |"
    info: "| 3 | Charcoal | `#202020` | Bề mặt nút filled, card nâng cao tối |"
    info: "| 3 | Forest Depths | `#003d21` | Dải feature full-bleed, bề mặt tối định hình thương hiệu |"
    info: "| 4 | Obsidian | `#000000` | Container có viền và border, text, inline graphic glyphs |"

  imagery:

    info: "Imagery tối giản và dẫn dắt bằng chữ. Site dùng các cụm blob hữu cơ kết xuất 3D trừu tượng (các dạng tròn mềm chồng lấn màu Mint Sprout và Forest Depths) làm bầu không khí trang trí bên trong dải feature tối — đây là những hình ảnh chính duy nhất và mang cảm giác điêu khắc, không phải nhiếp ảnh. Icon glyphs outline đen (mặt cười, mũi tên, xoắn ốc, họa tiết chip) hoạt động như pictographic ornaments, đặt inline với display type ở tỷ lệ headline. Không có nhiếp ảnh, không có lifestyle imagery, và không có product screenshots; thương hiệu được thể hiện hoàn toàn qua typography hoành tráng và sự tương phản màu kem-và-rừng. Icons là monoline geometric, khớp với độ rộng ký tự của Monument Grotesk."

  layout:

    info: "Bố cục căn giữa, max-width ~1200px, có full-bleed feature bands. Đầu trang: announcement bar → nav → hero căn giữa với pill status badge, sau đó là monumental display headline hai dòng với inline icon glyphs, rồi subheadline ngắn. Bên dưới hero, một dải Forest Depths full-bleed với trang trí blob hữu cơ và một feature card duy nhất (icon + headline + CTA) nằm bên trong. Các section được phân cách theo chiều dọc bằng gap 63–72px, với dải Forest kết nối với kem qua một gò đất radius ~45px thay vì cạnh cứng. Phần còn lại của trang xen kẽ canvas kem với các bề mặt card pastel riêng lẻ. Navigation là một top bar duy nhất với logo trái, bốn text links giữa, cờ ngôn ngữ và CTA phải. Không có sidebar, không có sticky patterns ngoài announcement bar."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "text: #000000 (Obsidian) cho primary copy, #202020 (Charcoal) cho secondary"
    - "background: #f8f9eb (Cream Parchment) cho canvas, #003d21 (Forest Depths) cho một full-bleed feature band"
    - "border: #c0c2a9 (Sage Mist) 1.5px trên kem, #000000 (Obsidian) 1.5px cho outlines mạnh hơn"
    - "accent: #aafdc0 (Mint Sprout) cho bề mặt accent chính và headline color trên dark sections"
    - "pastel cards: #d3beff, #b0f4ff, #ffc0e6 — mỗi màu dùng làm wash đặc đơn sắc trên một card"
    - "primary action: #202020 (filled action)"

    info: "Ví dụ Component Prompts:"

    - "**Hero Section** — Căn giữa trên Cream Parchment (#f8f9eb). Pill badge ở trên cùng: radius 9999px, border 1.5px #c0c2a9, fill trong suốt, JetBrains Mono 12px uppercase màu #202020 hiển thị section label, padding 9px 13px. Monumental headline bên dưới: Monument Grotesk weight 800, 72–96px, line-height 0.90, letter-spacing -0.01em, màu #000000, căn giữa. Hai inline icon glyphs màu đen (smiley vuông bo tròn, chip-arrow) có kích thước bằng cap-height và đặt trên baseline của headline. Subheadline: Monument Grotesk weight 400, 18–21px, line-height 1.30, #202020, căn giữa, max-width ~640px."

    - "**Filled Primary Button** — Fill Charcoal (#202020), text trắng, Monument Grotesk weight 500, 16px, padding 13px 18px, border-radius 13px, không border. Dùng cho CTA 'Get Started' và 'Learn more'."

    - "**Outlined Ghost Button** — Fill trong suốt, border 1.5px #c0c2a9 (Sage Mist), text #202020 bằng Monument Grotesk weight 500, 16px, padding 13px 18px, border-radius 9px. Dùng cho secondary actions trên kem."

    - "**Full-Bleed Forest Feature Section** — Nền Forest Depths (#003d21) trải rộng edge-to-edge với top-corner radius ~45px để gặp kem như một gò đất mềm. Bên trong: một cụm hình blob tròn Mint Sprout (#aafdc0) chồng lấn ở độ mờ 60–80% ở nửa phải. Feature card bên trái: headline Mint Sprout bằng Monument Grotesk weight 800, 45–54px, line-height 1.02. Bên phải card, một card tròn nhỏ Mint Sprout (22px radius, 27px padding) với icon mặt cười đen, mô tả 14px màu #202020, và CTA filled Charcoal bên trong."

    - "**Pastel Feature Card** — Một pastel wash đặc (dùng #aafdc0, #d3beff, #b0f4ff, hoặc #ffc0e6) làm toàn bộ nền card, border-radius 22–27px, padding 27px, không border, không shadow. Headline bằng Monument Grotesk weight 800 ở 34–45px với dark accent phù hợp (#003d21, #2d0078, #041668, hoặc #3f0929)."

  similar_brands:

    - "**Stripe** — Cùng display typography gradient hoành tráng và kỷ luật single-action-color; nền kem parchment và hệ thống viền của Coda vang vọng sự tiết chế biên tập của Stripe nhưng với canvas ấm áp, mang phong cách boutique hơn"
    - "**Linear** — Chia sẻ line-heights khít trên display type và neutral canvas tĩnh lặng, nhưng Coda thay thế dark mode của Linear bằng kem ấm và dùng elevation dựa trên outline thay vì dark cards"
    - "**Gumroad** — Cùng DNA creator/marketplace, nhưng Coda đổi màu hồng bão hòa của Gumroad lấy section xanh rừng, và dùng Monument Grotesk weight 800 ở kích thước hoành tráng trong khi Gumroad nghiêng về rounded display fonts"
    - "**Cash App** — Cả hai đều kết hợp một deep brand color duy nhất (xanh rừng vs xanh Cash App) với monumental display type, nhưng hệ thống kem đơn sắc của Coda tiết chế và mang tính biên tập hơn nhiều"
    - "**Vercel** — Cùng ngôn ngữ component hairline-bordered và sự tự tin trong negative space, nhưng Coda xây dựng trên kem ấm thay vì gần đen của Vercel, và để display type thống trị thay vì code"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-parchment: #f8f9eb;
          --color-pure-white: #ffffff;
          --color-obsidian: #000000;
          --color-charcoal: #202020;
          --color-sage-mist: #c0c2a9;
          --color-olive-slate: #5a5a4f;
          --color-pebble: #7c7d76;
          --color-bone: #edeee1;
          --color-forest-depths: #003d21;
          --color-mint-sprout: #aafdc0;
          --color-cobalt-ink: #041668;
          --color-plum-depth: #2d0078;
          --color-wine-shadow: #3f0929;
          --color-lilac-wash: #d3beff;
          --color-sky-wash: #b0f4ff;
          --color-rose-wash: #ffc0e6;
        
          /* Typography — Font Families */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk-custom: 'Monument Grotesk (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui-sans: 'System UI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.37;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.01px;
          --text-heading: 34px;
          --leading-heading: 1.13;
          --tracking-heading: -0.01px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.02;
          --tracking-heading-lg: -0.01px;
          --text-display: 72px;
          --leading-display: 0.9;
          --tracking-display: -0.01px;
          --text-display-xl: 134px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-27: 27px;
          --spacing-36: 36px;
          --spacing-45: 45px;
          --spacing-63: 63px;
          --spacing-72: 72px;
          --spacing-89: 89px;
          --spacing-107: 107px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 72px;
          --card-padding: 27px;
          --element-gap: 13px;
        
          /* Border Radius */
          --radius-lg: 8.94498px;
          --radius-xl: 13.4175px;
          --radius-2xl: 17.89px;
          --radius-2xl-2: 22.3625px;
          --radius-3xl: 26.835px;
          --radius-3xl-2: 44.725px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 22px;
          --radius-badges: 9999px;
          --radius-buttons: 13px;
          --radius-herocards: 45px;
          --radius-largecards: 27px;
          --radius-smallbuttons: 9px;
        
          /* Surfaces */
          --surface-cream-parchment: #f8f9eb;
          --surface-pure-white: #ffffff;
          --surface-pastel-mint: #aafdc0;
          --surface-pastel-lilac: #d3beff;
          --surface-pastel-sky: #b0f4ff;
          --surface-pastel-rose: #ffc0e6;
          --surface-charcoal: #202020;
          --surface-forest-depths: #003d21;
          --surface-obsidian: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-parchment: #f8f9eb;
          --color-pure-white: #ffffff;
          --color-obsidian: #000000;
          --color-charcoal: #202020;
          --color-sage-mist: #c0c2a9;
          --color-olive-slate: #5a5a4f;
          --color-pebble: #7c7d76;
          --color-bone: #edeee1;
          --color-forest-depths: #003d21;
          --color-mint-sprout: #aafdc0;
          --color-cobalt-ink: #041668;
          --color-plum-depth: #2d0078;
          --color-wine-shadow: #3f0929;
          --color-lilac-wash: #d3beff;
          --color-sky-wash: #b0f4ff;
          --color-rose-wash: #ffc0e6;
        
          /* Typography */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monument-grotesk-custom: 'Monument Grotesk (custom)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-system-ui-sans: 'System UI Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.37;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.01px;
          --text-heading: 34px;
          --leading-heading: 1.13;
          --tracking-heading: -0.01px;
          --text-heading-lg: 45px;
          --leading-heading-lg: 1.02;
          --tracking-heading-lg: -0.01px;
          --text-display: 72px;
          --leading-display: 0.9;
          --tracking-display: -0.01px;
          --text-display-xl: 134px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -0.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-27: 27px;
          --spacing-36: 36px;
          --spacing-45: 45px;
          --spacing-63: 63px;
          --spacing-72: 72px;
          --spacing-89: 89px;
          --spacing-107: 107px;
        
          /* Border Radius */
          --radius-lg: 8.94498px;
          --radius-xl: 13.4175px;
          --radius-2xl: 17.89px;
          --radius-2xl-2: 22.3625px;
          --radius-3xl: 26.835px;
          --radius-3xl-2: 44.725px;
          --radius-full: 9999px;
        }