campsite___style_reference:
  info: "> không gian làm việc biên tập ngập nắng — nền giấy kem ấm với một con tem cam thể hiện chủ đích"

  theme: "light"

  info: "Campsite là một không gian làm việc biên tập ngập nắng — nền canvas kem ấm, typography Inter gần đen, và một điểm cam rực rỡ duy nhất đánh dấu những khoảnh khắc thương hiệu. Giao diện mang phong cách một bảng thông báo được sắp xếp chu đáo: các hàng nhỏ gọn, pill controls, đổ bóng đen 5% mềm mại, và khoảng thở rộng rãi giữa các section. Màu sắc được phân bổ có chừng mực — các điểm nhấn màu chỉ xuất hiện ở logo, họa tiết trang trí dạng vệt sơn, một vài tag, và trạng thái ngữ nghĩa. Mật độ nhỏ gọn nhưng bố cục vẫn thoáng nhờ gutter rộng và padding section thoải mái; mọi thứ quan trọng đều nằm trên các card trắng tinh lơ lửng phía trên nền giấy kem bên dưới."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Campfire Orange | `#ff6b1a` | `--color-campfire-orange` | Logo badge, notification pills, và những khoảnh khắc thương hiệu mang tính \"dấu câu\" — một tông cam ấm duy nhất neo toàn bộ bảng màu trên nền canvas kem |"
    info: "| Ember Brown | `#451a03` | `--color-ember-brown` | Màu nâu đậm dùng cho bóng của họa tiết vệt sơn và văn bản highlight nội tuyến trong testimonial |"
    info: "| Sunlit Cream | `#fef3c7` | `--color-sunlit-cream` | Lớp phủ ấm nhẹ phía sau tag, badge và highlight nội tuyến |"
    info: "| Forest Pulse | `#22c55e` | `--color-forest-pulse` | Màu xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |"
    info: "| Ember Alert | `#ef4444` | `--color-ember-alert` | Màu đỏ hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Dùng làm accent hỗ trợ, không phải màu trạng thái |"
    info: "| Midnight Ink | `#171717` | `--color-midnight-ink` | Văn bản chính, heading, nét icon và nút filled tối |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt card, panel nâng cao, và đỉnh của surface stack |"
    info: "| Parchment | `#fffdf9` | `--color-parchment` | Canvas trang — một tông trắng ngà gần như ấm, mang lại cảm giác ngập nắng cho toàn bộ site |"
    info: "| Fog Gray | `#f5f5f5` | `--color-fog-gray` | Nền muted, surface fill thứ cấp, và chrome của input field |"
    info: "| Linen | `#f0f0f0` | `--color-linen` | Divider nhẹ, hover wash trên hàng, và nền tag |"
    info: "| Ash Gray | `#a3a3a3` | `--color-ash-gray` | Helper text muted, placeholder copy, và label bị vô hiệu hóa |"
    info: "| Slate | `#737373` | `--color-slate` | Văn bản thứ cấp, timestamp, và metadata trong danh sách |"
    info: "| Graphite | `#525252` | `--color-graphite` | Văn bản cấp ba và nét icon muted |"
    info: "| Stone | `#8f7668` | `--color-stone` | Accent ấm muted cho body copy cần cảm giác nhẹ nhàng hơn Midnight Ink |"

  tokens___typography:

    inter___kiểu_chữ_duy_nhất_cho_toàn_bộ_ui__heading_và_body___không_có_display_hay_serif_counterpart__cam_kết_single_family_này_có_chủ_đích__tính_trung_lập_hình_học_của_inter_giữ_sự_tập_trung_vào_nội_dung__và_dải_ba_weight_400_body__500_metadata__600_display_đảm_nhận_toàn_bộ_hệ_thống_phân_cấp_____font_inter:
      - "**Thay thế:** Inter Tight hoặc IBM Plex Sans"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 29, 58"
      - "**Line height:** 1.00–1.80"
      - "**Letter spacing:** -1.8px ở 58px display, -0.52px ở 29px heading, -0.37px ở 22px subheading, +0.25px ở caption 10–12px"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Kiểu chữ duy nhất cho toàn bộ UI, heading và body — không có display hay serif counterpart. Cam kết single-family này có chủ đích: tính trung lập hình học của Inter giữ sự tập trung vào nội dung, và dải ba weight (400 body, 500 metadata, 600 display) đảm nhận toàn bộ hệ thống phân cấp."

    ui_monospace___đoạn_code_nội_tuyến_và_phím_tắt_bên_trong_feed____font_ui_monospace:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 12"
      - "**Line height:** 1.00"
      - "**Vai trò:** Đoạn code nội tuyến và phím tắt bên trong feed"

    emoji___emoji___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_emoji:
      - "**Weights:** 500, 600"
      - "**Kích thước:** 12px, 14px"
      - "**Line height:** 1"
      - "**Vai trò:** emoji — đượ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: "| caption | 12px | 1.2 | 0.3px | `--text-caption` |"
      info: "| body | 15px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.56 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.4 | -0.37px | `--text-heading-sm` |"
      info: "| heading | 29px | 1.2 | -0.52px | `--text-heading` |"
      info: "| display | 58px | 1 | -1.8px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 9999px |"
      info: "| cards | 8-12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 8px |"
      info: "| avatars | 9999px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05)...` | `--shadow-sm` |"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08)...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle-2` |"

    layout:

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

  components:

    brand_logo_badge:
      vai_trò: "Dấu hiệu thương hiệu cố định ở góc trên bên trái mọi trang"

      info: "Hình vuông bo tròn 28px (radius 8px) tô màu Campfire Orange (#ff6b1a), glyph 'C' trắng 16px Inter weight 600 căn giữa bên trong. Hoạt động như nút home."

    notification_pill_banner:
      vai_trò: "Dải thông báo ở khu vực headline"

      info: "Inline pill, radius 9999px, padding 8px 16px, fill Campfire Orange, chữ trắng 13px Inter weight 500. Tùy chọn tag 'NEW' dẫn đầu dạng 2-tone orange kèm dot indicator. Nằm phía trên hero headline."

    hero_headline:
      vai_trò: "Tiêu đề trang ở màn hình đầu tiên"

      info: "58px Inter weight 600 màu Midnight Ink, căn giữa, line-height 1.00, letter-spacing -1.8px. Tối đa hai dòng ngắn. Theo sau là subtitle 17–18px Inter weight 400 màu Slate (#737373), căn giữa."

    section_heading:
      vai_trò: "Tiêu đề giữa các section trong trang marketing"

      info: "29px Inter weight 600 Midnight Ink, căn giữa, line-height 1.20, letter-spacing -0.52px. Một đến hai dòng."

    filled_pill_button:
      vai_trò: "Hành động tương tác chính"

      info: "Radius 9999px, padding 8px 16px, nền Midnight Ink, chữ trắng 14px Inter weight 500. Không viền. Highlight inset mềm từ elevation stack để gợi cảm giác bề mặt có xúc giác."

    ghost_pill_button:
      vai_trò: "Hành động phụ / nút dạng link"

      info: "Radius 9999px, padding 8px 16px, nền trong suốt, viền 1px Linen (#f0f0f0), chữ Slate. Khi hover: Fog Gray wash."

    app_preview_frame:
      vai_trò: "Khung bao quanh ảnh chụp màn hình sản phẩm trong marketing"

      info: "Bề mặt trắng, radius 12px, shadow stack đen 5% nhẹ từ bộ elevation, tùy chọn header browser-chrome (traffic-light dots, title text) ở phía trên. Đóng vai trò là artifact bằng chứng trực quan cho mỗi tính năng."

    sidebar_nav_item:
      vai_trò: "Hàng điều hướng bên trong ứng dụng sản phẩm"

      info: "Hàng nhỏ gọn, padding 8px 12px, icon nhỏ 16px màu Slate, label 14px Inter weight 500 màu Midnight Ink. Trạng thái active: fill Fog Gray, icon Midnight Ink. Radius 9999px để đồng bộ với ngôn ngữ pill."

    post_list_item:
      vai_trò: "Một hàng đơn trong feed chính"

      info: "Bề mặt card trắng, padding 16px, radius 12px. Bên trái: avatar 24px (9999px, fill màu hoặc ảnh). Giữa: tên tác giả 14px Inter weight 600, body 14px weight 400 màu Midnight Ink. Phải: tag pill (9999px, fill Sunlit Cream, chữ Ember Brown) và timestamp màu Ash Gray."

    channel_card:
      vai_trò: "Tile không gian nhóm có thể khám phá trong section channels"

      info: "Card trắng, radius 12px, padding 16px, viền 1px Linen. Tiêu đề 18px Inter weight 600, avatar thành viên xếp chồng (16px, 9999px), và ghost pill CTA ở góc kèm icon nhỏ."

    tag___status_pill:
      vai_trò: "Badge metadata nội tuyến"

      info: "Radius 9999px, padding 4px 10px, 12px Inter weight 500. Biến thể: fill Sunlit Cream với chữ Ember Brown, fill Forest Pulse với chữ trắng cho trạng thái thành công, fill Ember Alert với chữ trắng cho trạng thái lỗi."

    search_input:
      vai_trò: "Trường tìm kiếm người và nội dung"

      info: "Input full-width, radius 8px, padding 8px 12px, fill Fog Gray, placeholder Ash Gray 14px Inter weight 400. Không viền nhìn thấy — fill chính là chrome. Icon tìm kiếm 16px dẫn đầu màu Ash Gray."

    people_list_item:
      vai_trò: "Mục trong rail bên phải hiển thị một người trong ứng dụng"

      info: "Avatar 32px (9999px), tên 14px Inter weight 500 màu Midnight Ink, trạng thái 12px Inter weight 400 màu Ash Gray. Padding 8px 12px, không có card chrome — nằm trực tiếp trên panel Fog Gray."

    testimonial_block:
      vai_trò: "Pull-quote giữa các section tính năng"

      info: "Body copy căn trái 17px Inter weight 400 màu Midnight Ink, với câu định nghĩa thương hiệu được đặt ở Inter weight 600 màu Ember Brown. Hàng attribution bên dưới: avatar 24px + tên 13px Inter weight 500 màu Slate, vai trò 12px màu Ash Gray."

    decorative_paint_splash:
      vai_trò: "Họa tiết trang trí ở mép trang"

      info: "Hình minh họa vệt sơn màu cam + Ember Brown hữu cơ, cắt sát mép trái/phải viewport ở hero và các section giữa trang. Thuần túy trang trí — không bao giờ chứa nội dung, không bao giờ chồng lên văn bản. Neo tâm trạng 'không gian làm việc sáng tạo'."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng radius 9999px cho mọi element tương tác — button, tag, avatar, và pill đều chia sẻ cùng ngôn ngữ full-curve"
      - "Đặt hero headline ở 58px Inter weight 600 với letter-spacing -1.8px để chữ tạo thành một silhouette nén, tự tin"
      - "Xếp lớp surface theo thứ tự: canvas Parchment (#fffdf9) → card Paper White (#ffffff) → inset Fog Gray (#f5f5f5) — không bao giờ dùng viền xám thuần để phân cách các lớp"
      - "Dành Campfire Orange (#ff6b1a) cho logo, notification pills, và một hoặc hai khoảnh khắc thương hiệu mỗi trang — không bao giờ dùng cho CTA thông thường"
      - "Giữ đơn vị cơ bản 4px: dùng 8px cho element gap, 12–16px cho card padding, 64–80px cho section gap"
      - "Áp dụng shadow stack đen 5% mềm cho bất kỳ card nào nổi phía trên surface khác — inset highlight shadow chỉ thuộc về filled button"
      - "Dùng Inter weight 600 cho mọi kích thước display và weight 500 cho metadata, không bao giờ để body copy vượt quá weight 400"

    không_nên_làm:
      - "Đừng đưa thêm kiểu chữ thứ hai — hệ thống single-family Inter chính là thiết kế, không phải giới hạn cần vượt qua"
      - "Đừng thêm xanh dương, tím, hay bất kỳ accent màu lạnh nào — bảng màu cố tình chỉ có tông ấm, và một nốt lạnh sẽ phá vỡ tâm trạng giấy kem"
      - "Đừng dùng viền xám 1px cứng để phân cách card khỏi canvas — nền trắng ngà ấm đã làm công việc đó rồi"
      - "Đừng dùng Campfire Orange cho button, link, hay trạng thái icon hàng ngày — màu sắc được phân bổ có chừng mực, chỉ dùng cho \"dấu câu\" thương hiệu"
      - "Đừng đặt headline trên 60px hoặc dưới 22px nếu không có lý do cấu trúc — thang 22/29/58 mang nhịp điệu"
      - "Đừng dùng radius sắc 0px hoặc 2px trên bề mặt — dải 8–12px là thứ làm card trông như giấy, không phải kính"
      - "Đừng đặt ảnh chụp hoặc imagery đời sống vào luồng marketing — vệt sơn và ảnh chụp màn hình sản phẩm là hai register hình ảnh duy nhất"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Parchment Canvas | `#fffdf9` | Nền trang — trắng ngà ấm, hấp thụ site vào giấy editorial |"
    info: "| 2 | Paper White | `#ffffff` | Bề mặt card và container feed chính — trắng tinh nâng nội dung lên trên canvas |"
    info: "| 3 | Fog Gray | `#f5f5f5` | Trạng thái hover, panel thứ cấp, và bên trong sidebar people |"
    info: "| 4 | Sunlit Cream | `#fef3c7` | Lớp phủ ấm thỉnh thoảng cho tag được highlight và callout nội tuyến |"

  elevation:

    - "**Card / surface elevation:** `0 3px 6px -3px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05), 0 1px 1px -1px rgba(0,0,0,0.05), 0 1px 0 -1px rgba(0,0,0,0.05)`"
    - "**Filled button / interactive inset:** `0 1px 1px -1px rgba(0,0,0,0.08), 0 2px 2px -1px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06), inset 0 1px 0 #fff, inset 0 1px 2px 1px #fff, inset 0 1px 2px 0 rgba(0,0,0,0.06)`"
    - "**Subtle row / chip:** `0 1px 2px 0 rgba(0,0,0,0.05)`"

  imagery:

    info: "Imagery được chia thành ba register nghiêm ngặt và không gì khác. (1) Hình minh họa vệt sơn trang trí màu Campfire Orange và Ember Brown, cắt sát mép trái và phải viewport ở hero và các section giữa trang — hữu cơ, bất đối xứng, không bao giờ chồng lên văn bản, không bao giờ mang ý nghĩa. (2) Ảnh chụp màn hình sản phẩm được bọc trong App Preview Frame trắng với header browser-chrome tùy chọn và shadow đen 5% mềm — đây là artifact bằng chứng cho mỗi tính năng và luôn nằm căn giữa bên dưới section heading của nó. (3) Chỉ có avatar hình tròn — 24–32px, radius 9999px, có thể là ảnh hoặc khối màu đặc với chữ cái đầu, không có imagery trang trí đính kèm. Không có ảnh chụp đời sống, không có stock illustration, không có 3D render. Icon trong toàn bộ UI đơn giản, một nét, đơn sắc màu Slate hoặc Midnight Ink; brand mark là nơi duy nhất màu sắc tồn tại."

  layout:

    info: "Trang marketing theo cột căn giữa, max-width 1200px với nhịp dọc thoải mái. Hero là một stack căn giữa duy nhất: notification pill → headline 58px → subtitle 17px → ảnh chụp màn hình App Preview Frame, với họa tiết vệt sơn Campfire Orange tràn ra mép trái và phải viewport. Bên dưới hero, các section xen kẽ giữa hai pattern: một section heading căn giữa theo sau là App Preview Frame, và một heading căn giữa theo sau là Testimonial Block. Tất cả section dùng padding dọc 64–80px. Bản thân ứng dụng sản phẩm dùng shell ba cột: sidebar trái nhỏ gọn (icon + label, hover Fog Gray), feed chính trắng, và panel people/online bên phải trên nền Fog Gray. Navigation là top bar tối giản với text link căn phải — không dropdown, không mega-menu, không sticky behavior trên trang marketing."

  agent_prompt_guide:

    info: "THAM KHẢO MÀU NHANH"
    - "text: #171717 (Midnight Ink)"
    - "background (trang): #fffdf9 (Parchment)"
    - "background (card): #ffffff (Paper White)"
    - "background (panel muted): #f5f5f5 (Fog Gray)"
    - "border / divider: #f0f0f0 (Linen)"
    - "accent: #ff6b1a (Campfire Orange) — dùng tiết kiệm cho logo, pill, khoảnh khắc thương hiệu"
    - "primary action: không có màu CTA riêng biệt"

    info: "VÍ DỤ PROMPT COMPONENT"
    - "Hero headline block. Căn giữa trên nền trang Parchment (#fffdf9). Eyebrow pill: fill Campfire Orange (#ff6b1a), chữ trắng 'NEW', radius 9999px, padding 8px 16px. Headline: 58px Inter weight 600 màu Midnight Ink (#171717), letter-spacing -1.8px, line-height 1.00, tối đa hai dòng. Subtitle: 18px Inter weight 400 màu Slate (#737373), căn giữa, max-width 640px."
    - "Feature section với App Preview Frame. Heading 29px Inter weight 600 căn giữa màu Midnight Ink với letter-spacing -0.52px. Bên dưới: card trắng max-width 1200px, radius 12px, padding 16px, bao quanh ảnh chụp màn hình sản phẩm. Shadow stack đen 5% mềm được áp dụng: 0 3px 6px -3px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05)."
    info: "Không có màu primary action riêng biệt nào được quan sát; dùng các xử lý button trung tính đã trích xuất thay vì phát minh ra màu CTA filled."
    - "Pill notification banner. Inline element, radius 9999px, padding 8px 16px, fill Campfire Orange (#ff6b1a), chữ trắng 13px Inter weight 500. Label 'NEW' dẫn đầu dạng dot hoặc chip 2-tone orange nhỏ hơn bên trong pill. Tùy chọn icon close ở cuối 12px."
    - "Feed post row. Bề mặt card trắng, radius 12px, padding 16px, viền 1px Linen. Bên trái: avatar 24px (9999px, màu đặc hoặc ảnh). Cột giữa: tên tác giả 14px Inter weight 600 Midnight Ink, body text 14px Inter weight 400 Midnight Ink. Bên phải: tag pill Sunlit Cream (#fef3c7) — radius 9999px, padding 4px 10px, chữ 12px Inter weight 500 Ember Brown (#451a03) — kèm timestamp màu Ash Gray (#a3a3a3)."

  similar_brands:

    - "**Notion** — Cùng nền canvas kem ấm với typography Inter gần đen và cách dùng màu có chừng mực; cả hai đều xem card trắng như giấy nổi trên trang hơi ấm"
    - "**Basecamp** — Sản phẩm giao tiếp nhóm với tông editorial ấm tương tự; bề mặt phẳng, hàng danh sách nhỏ gọn, và pill-shaped controls trên nền muted"
    - "**Linear** — Hệ thống typography chỉ dùng Inter với letter-spacing chặt ở kích thước display và nhịp UI dạng danh sách nhỏ gọn"
    - "**Coda** — Không gian làm việc cộng tác kết hợp bề mặt trắng ngà ấm với khoảnh khắc thương hiệu single-accent và chip dạng pill"
    - "**Read.cv** — Giọng văn sản phẩm editorial với nền kem, typography Inter, và màu cam là màu thương hiệu duy nhất dành cho khoảnh khắc \"dấu câu\""

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-campfire-orange: #ff6b1a;
          --color-ember-brown: #451a03;
          --color-sunlit-cream: #fef3c7;
          --color-forest-pulse: #22c55e;
          --color-ember-alert: #ef4444;
          --color-midnight-ink: #171717;
          --color-paper-white: #ffffff;
          --color-parchment: #fffdf9;
          --color-fog-gray: #f5f5f5;
          --color-linen: #f0f0f0;
          --color-ash-gray: #a3a3a3;
          --color-slate: #737373;
          --color-graphite: #525252;
          --color-stone: #8f7668;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.3px;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.37px;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 16-24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8-12px;
          --radius-pills: 9999px;
          --radius-inputs: 8px;
          --radius-avatars: 9999px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #fffdf9;
          --surface-paper-white: #ffffff;
          --surface-fog-gray: #f5f5f5;
          --surface-sunlit-cream: #fef3c7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-campfire-orange: #ff6b1a;
          --color-ember-brown: #451a03;
          --color-sunlit-cream: #fef3c7;
          --color-forest-pulse: #22c55e;
          --color-ember-alert: #ef4444;
          --color-midnight-ink: #171717;
          --color-paper-white: #ffffff;
          --color-parchment: #fffdf9;
          --color-fog-gray: #f5f5f5;
          --color-linen: #f0f0f0;
          --color-ash-gray: #a3a3a3;
          --color-slate: #737373;
          --color-graphite: #525252;
          --color-stone: #8f7668;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-emoji: 'emoji', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.3px;
          --text-body: 15px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.56;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.37px;
          --text-heading: 29px;
          --leading-heading: 1.2;
          --tracking-heading: -0.52px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }