contractbook___style_reference:
  info: "> \"Warm cream atelier với dấu chấm câu màu tím điện và một tia sáng vàng\" — một không gian làm việc hợp đồng thân thiện với designer, mang cảm giác như studio Scandinavia hơn là văn phòng luật."

  theme: "light"

  info: "Contractbook hoạt động như một editorial SaaS canvas: nền linen-cream ấm áp (#f0f0ec) tràn ngập các card bề mặt trắng off-white, được neo bởi một màu tím điện duy nhất (#1009f6) làm chủ đạo cho các action chính và bầu không khí hero hình học. Màu vàng mặt trời (#ffba09) đóng vai trò accent thứ cấp ấm áp cho điểm entry 'Request a demo' hấp dẫn nhất, tạo ra hệ thống phân cấp hai nút, nơi màu vàng đại diện cho sự gần gũi và màu tím đại diện cho doanh nghiệp. Hệ thống kết hợp display type weight 700 tự tin ở 40-48px với body text weight 400 thoáng đãng, sử dụng geometric sans tùy chỉnh (Abcwhyte) mang lại cho giao diện cảm giác như một ấn phẩm thiết kế thay vì một dashboard điển hình. Các hình minh họa vẽ tay vui nhộn (mắt, bảng phi tiêu, nguệch ngoạc) trong bảng màu thương hiệu truyền tải sự nhân văn giữa các khối chức năng. Các component ưa chuộng bán kính rộng 24-40px, pill controls (999px) và độ nâng tối thiểu — bản thân bề mặt cream làm công việc mà shadow thường làm ở nơi khác."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Electric Violet | `#1009f6` | `--color-electric-violet` | Màu thương hiệu chính — nền hero, panel hình học, nút action chính, navigation đang hoạt động — xanh tím đậm vừa đáng tin cậy vừa độc đáo trên nền cream ấm |"
    info: "| Solar Yellow | `#ffba09` | `--color-solar-yellow` | Màu action vàng cho nút filled, trạng thái navigation được chọn và các thời điểm chuyển đổi tập trung. |"
    info: "| Ink Black | `#1a1a1a` | `--color-ink-black` | Văn bản chính, đường viền icon, nút tối, border mặc định — gần như đen với một chút ấm áp để hài hòa với bề mặt cream |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, input fills, văn bản trên nền tối — lớp nâng cao nổi trên nền cream |"
    info: "| Linen Cream | `#f0f0ec` | `--color-linen-cream` | Canvas trang, nền section, card rests, bề mặt muted — màu trắng off-white ấm áp xác định toàn bộ bầu không khí của hệ thống |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Border và separator tối cho bề mặt nâng cao và UI đảo ngược. Không nâng lên làm màu CTA chính |"
    info: "| Stone Gray | `#d4d4d0` | `--color-stone-gray` | Divider mảnh, border tinh tế, control không hoạt động — đường cấu trúc yên tĩnh |"
    info: "| Silver Gray | `#b3b3b3` | `--color-silver-gray` | Border input ở trạng thái nghỉ, màu trung tính gần placeholder |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Văn bản có độ tương phản tối đa trên bề mặt sáng, accent divider sắc nét |"
    info: "| Sky Mist | `#add3e5` | `--color-sky-mist` | Lớp phủ card trang trí, illustration fills, tông màu section nhẹ — pastel mát mẻ cân bằng với accent vàng |"
    info: "| Blossom Pink | `#e3c7de` | `--color-blossom-pink` | Illustration fills trang trí, tông màu section nhẹ, điểm nhấn vui tươi — pastel ấm kết hợp với màu vàng tạo thành bộ đôi thân thiện |"
    info: "| Forest Dark | `#304801` | `--color-forest-dark` | Accent đậm trang trí hiếm hoi chỉ dùng trong illustration — sử dụng tiết kiệm, không bao giờ làm văn bản hoặc nền |"

  tokens___typography:

    abcwhyte___hệ_thống_một_typeface___geometric_sans_tùy_chỉnh_với_hơi_ấm_nhân_văn__weight_700_cho_headline_40_48px_mang_sự_tự_tin_của_editorial__weight_400_cho_body_16px_và_ui_14px_giữ_cho_các_khối_dễ_đọc_mà_không_quá_nổi_bật__font_thay_thế__inter__s_hne__hoặc_general_sans___tránh_sf_pro_và_font_mặc_định_của_hệ_thống_vì_thiếu_cá_tính_hình_học_____font_abcwhyte:
      - "**Font thay thế:** Inter hoặc General Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 11px, 12px, 14px, 16px, 25px, 28px, 32px, 40px, 48px"
      - "**Line height:** 1.00-1.87"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Hệ thống một typeface — geometric sans tùy chỉnh với hơi ấm nhân văn. Weight 700 cho headline (40-48px) mang sự tự tin của editorial; weight 400 cho body (16px) và UI (14px) giữ cho các khối dễ đọc mà không quá nổi bật. Font thay thế: Inter, Söhne, hoặc General Sans — tránh SF Pro và font mặc định của hệ thống vì thiếu cá tính hình học."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.6 | — | `--text-body-lg` |"
      info: "| subheading | 25px | 1.25 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.24 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.2 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 999px |"
      info: "| small | 10-16px |"
      info: "| images | 40px |"
      info: "| inputs | 4px |"
      info: "| buttons | 24px |"

    layout:

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

  components:

    solar_yellow_cta_button:
      vai_trò: "Call-to-action ấm áp chính — điểm entry 'Request a demo'"

      info: "Filled với #ffba09, văn bản Ink Black (#1a1a1a) ở 14px weight 700, padding 11px 24px, radius 24px hoặc full pill 999px, không shadow. Nằm trên cream canvas, nơi độ tương phản vàng-trên-cream tạo ra một action mời gọi, ít áp lực. Màu vàng ấm phân biệt action này với các action doanh nghiệp chính."

    violet_primary_action_button:
      vai_trò: "Action chính cấp doanh nghiệp — gửi biểu mẫu, action tài khoản"

      info: "Filled với #1009f6, văn bản trắng ở 14px weight 700, padding 11px 24px, radius 24px. Xuất hiện bên trong biểu mẫu và các thời điểm chuyển đổi quan trọng. Chiều rộng full-bleed khi ở bên trong biểu mẫu nhiều trường."

    outlined_dark_button:
      vai_trò: "Action thứ cấp — 'Start free trial', lựa chọn thay thế ít cam kết"

      info: "Nền trong suốt, border 1px Ink Black (#1a1a1a), văn bản Ink Black ở 14px weight 700, padding 11px 24px, radius 24px. Đặt cạnh CTA màu vàng để tạo thang cam kết hai bước."

    ghost_pill_button:
      vai_trò: "Action navigation thứ ba — 'Book demo', 'Login'"

      info: "Nền trong suốt, border 1px Ink Black ở radius 999px, văn bản Ink Black ở 14px weight 400, padding 7px 18px. Radius full pill báo hiệu navigation nhẹ nhàng, không phải cam kết."

    navigation_bar:
      vai_trò: "Navigation cấp cao nhất của trang"

      info: "Nền cream (#f0f0ec), logo + 5-6 nav link bằng Ink Black 14px weight 400, với nút pill 'Book demo' ở bên phải. Border dưới tinh tế bằng Stone Gray (#d4d4d0) hoặc không — nổi sạch sẽ trên canvas ấm."

    text_input_field:
      vai_trò: "Input biểu mẫu tiêu chuẩn — tên, email, công ty"

      info: "Nền trắng (#ffffff), border 1px Silver Gray (#b3b3b3), radius 4px, padding 9-11px dọc, văn bản 14px Ink Black weight 400. Placeholder text màu xám muted. Trạng thái focus làm tối border thành Ink Black — không có glow rings."

    select_input_with_flag:
      vai_trò: "Select quốc gia/điện thoại với tiền tố cờ quốc gia"

      info: "Nền trắng với emoji cờ nhúng + mã quốc gia (ví dụ: 🇪🇸 +34) trong vùng căn trái, border Silver Gray, radius 4px, văn bản 14px. Tên quốc gia làm placeholder."

    textarea:
      vai_trò: "Input tin nhắn nhiều dòng"

      info: "Cùng kiểu input với Text Input Field — nền trắng, border 1px Silver Gray, radius 4px, văn bản 14px. Min-height rộng rãi (100-120px) để khuyến khích câu đầy đủ."

    feature_highlight_card:
      vai_trò: "Card nội dung với illustration và copy"

      info: "Bề mặt trắng trên cream canvas, radius 24px, padding trong 24-40px, illustration tùy chọn ở trên. Headline ở 25-32px weight 700 Ink Black, body ở 16px weight 400. Không drop shadow — độ tương phản trắng-trên-cream xác định card."

    decorative_accent_card:
      vai_trò: "Ngắt section editorial với nền màu và illustration"

      info: "Solid fill bằng Sky Mist (#add3e5), Blossom Pink (#e3c7de), hoặc Solar Yellow (#ffba09), radius 40px, chứa illustration vẽ tay + copy ngắn. Dùng để ngắt các section nhiều văn bản và thêm nhịp điệu thị giác."

    video_preview_card:
      vai_trò: "Hero video hoặc container demo sản phẩm"

      info: "Container bo tròn lớn ở radius 40px, chứa thumbnail video với lớp phủ nút play hình tròn tối (play triangle màu trắng). Thường chia làm hai màu — ví dụ: một nửa ảnh chụp, một nửa panel màu thương hiệu với văn bản."

    rating_trust_badge:
      vai_trò: "Bằng chứng xã hội từ bên thứ ba — G2, Capterra"

      info: "Pill hoặc hình chữ nhật nhỏ gọn với dấu chấm/icon màu thương hiệu của nền tảng đánh giá, văn bản 'X.X rating' ở 12-14px Ink Black và một hàng sao nhỏ. Không nền, nằm cùng dòng với các hero element khác."

    checkmark_list_item:
      vai_trò: "Đánh dấu tính năng trong trang biểu mẫu/bán hàng"

      info: "Icon checkmark màu tím (#1009f6) (hoặc tick stroke đơn giản) ở 16px, theo sau là văn bản body 14-16px Ink Black ở line height 1.5-1.6. Không có dấu chấm đầu dòng — tick tím là toàn bộ điểm đánh dấu."

    hero_geometric_panel:
      vai_trò: "Nền thương hiệu full-bleed cho hero section"

      info: "Electric Violet (#1009f6) fill trải dài toàn bộ viewport, phủ lên các hình dạng hình học góc cạnh với tông màu tím/xanh lam sáng và tối hơn, tạo bầu không khí khía cạnh, kiến trúc. Card trắng với radius 24px nằm ở giữa hoặc căn trái, chứa headline và CTA."

    section_header_block:
      vai_trò: "Tiêu đề section editorial căn giữa"

      info: "Căn giữa trên cream canvas, illustration nhỏ căn giữa (40-60px) ở trên, headline ở 32-40px weight 700 Ink Black với line height 1.24-1.3, body copy ở 16px weight 400 bằng Charcoal (#222222) bên dưới, max-width ~600px."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng Linen Cream (#f0f0ec) làm nền trang mặc định — không bao giờ dùng trắng tinh khiết ở cấp trang, chỉ dùng trên card và input nâng cao"
      - "Kết hợp Solar Yellow (#ffba09) cho CTA ấm áp/gần gũi và Electric Violet (#1009f6) cho doanh nghiệp/gửi biểu mẫu — chúng không thể thay thế cho nhau"
      - "Đặt headline type ở 40-48px weight 700 bằng Abcwhyte — dạng hình học đậm là giọng nói editorial của thương hiệu"
      - "Sử dụng radius 24px cho card và nút tiêu chuẩn, 999px cho pill-shaped nav/login actions, 4px cho input biểu mẫu — radius mang ý nghĩa"
      - "Duy trì cặp CTA hai nút: filled vàng 'Request a demo' + outlined 'Start free trial' trên hero section, filled tím trên gửi biểu mẫu"
      - "Đặt illustration vẽ tay màu thương hiệu (Sky Mist, Blossom Pink, Solar Yellow) giữa các section văn bản để tạo nhịp điệu thị giác và nhân hóa trang"
      - "Giữ section gap ở 64-80px dọc — cream canvas cần không gian thở để mang cảm giác editorial, không dày đặc như dashboard"

    không_nên_làm:
      - "Không sử dụng Electric Violet (#1009f6) làm màu văn bản trên cream canvas — chỉ dành cho nền, nút và icon checkmark"
      - "Không sử dụng Solar Yellow (#ffba09) cho văn bản body hoặc fill lớn — nó chỉ là accent, không bao giờ là nền trang"
      - "Không thêm drop shadow vào card — độ tương phản trắng-trên-cream là toàn bộ hệ thống nâng, shadow sẽ phá vỡ cảm giác editorial"
      - "Không sử dụng radius 4px cho card hoặc nút — trộn bán kính nhỏ trên các component lớn trông giống biểu mẫu, không phải trang sản phẩm"
      - "Không sử dụng Forest Dark (#304801) bên ngoài illustration trang trí — nó là màu artwork, không phải token UI"
      - "Không sử dụng radius pill 999px cho CTA chính — pill dành cho navigation (Login, Book demo), 24px dành cho cam kết"
      - "Không sử dụng Blossom Pink hoặc Sky Mist làm nền nút — đây là lớp phủ trang trí cho vùng illustration, không phải bề mặt tương tác"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Linen Canvas | `#f0f0ec` | Nền trang — màu trắng off-white ấm áp tạo nên toàn bộ tông màu |"
    info: "| 2 | Pure Card | `#ffffff` | Card, input fields, khối nội dung nâng cao nằm trên cream canvas |"
    info: "| 3 | Stone Surface | `#d4d4d0` | Section muted, trạng thái không hoạt động, bề mặt thứ cấp |"

  imagery:

    info: "Hình minh họa vẽ tay editorial chiếm ưu thế trong ngôn ngữ thị giác: icon line-art phóng khoáng (mắt, bảng phi tiêu/mục tiêu, nguệch ngoạc trừu tượng) được thể hiện bằng Sky Mist (#add3e5), Blossom Pink (#e3c7de) và Solar Yellow (#ffba09) trên bề mặt trắng hoặc cream. Một ảnh chụp sản phẩm về một người (kiểu founder/CEO) xuất hiện một lần trong video card, được cắt sát và xử lý như một neo thế giới thực so với thế giới minh họa khác. Không có ảnh stock lifestyle, không có 3D render — thương hiệu ở trong thế giới flat-illustration + editorial-photography. Illustration nằm nhỏ và căn giữa làm điểm đánh dấu section (40-80px) hoặc lớn làm fill trang trí phía sau khối văn bản. Hero sử dụng panel tím hình học đậm với các hình dạng góc cạnh thay vì hình ảnh — kiến trúc hơn nhiếp ảnh."

  layout:

    info: "Container căn giữa max-width 1200px với outer padding rộng rãi. Hero là full-bleed Electric Violet với một card trắng nổi (max-width ~900px, radius 24px) chứa headline stack căn trái và một illustration nhỏ ở bên phải. Bên dưới hero, nội dung chảy theo nhịp điệu một cột căn giữa: khối văn bản căn giữa (max-width ~600px) xen kẽ với vùng illustration rộng, sau đó là section biểu mẫu 2 cột, nơi copy/checklist nằm bên trái ở 40% chiều rộng và card biểu mẫu trắng nằm bên phải ở 55% chiều rộng. Section vertical gap là 64-80px. Navigation là một top bar đơn giản với logo + 5 link căn trái và nút pill 'Book demo' căn phải, nổi trên nền cream mà không có border nặng."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #1a1a1a (chính), #222222 (phụ)"
    - "background: #f0f0ec (trang), #ffffff (card/input)"
    - "border: #d4d4d0 (divider), #b3b3b3 (border input)"
    - "accent: #ffba09 (solar yellow)"
    - "primary action: #ffba09 (filled action)"

    ví_dụ_component_prompts:

    - "**Hero Section**: Nền full-bleed #1009f6 với các hình dạng hình học góc cạnh bằng tông tím sáng/tối hơn. Card trắng nổi (max-width 900px, radius 24px, padding 48px) căn giữa, chứa headline 48px Abcwhyte weight 700 bằng #1a1a1a, body 16px bằng #222222, và hai nút cạnh nhau: nút pill filled #ffba09 (14px weight 700, padding 11px 24px, radius 24px) ghi 'Request a demo' bằng #1a1a1a, và nút outlined (border 1px #1a1a1a, radius 24px, padding tương tự) ghi 'Start free trial'."

    - "**Editorial Section Break**: Căn giữa trên canvas #f0f0ec. Một illustration vẽ tay mục tiêu 60px bằng #add3e5 và #e3c7de nằm ở trên. Bên dưới, headline 32px Abcwhyte weight 700 bằng #1a1a1a ở line height 1.24, max-width 600px. Sau đó, đoạn body 16px Abcwhyte weight 400 bằng #222222 ở line height 1.6, max-width 580px căn giữa. Không card, không shadow — type nổi trên cream."

    - "**Demo Request Form**: Bố cục 2 cột, cột trái chứa headline 32px weight 700 bằng #1a1a1a, đoạn body ở 16px weight 400 bằng #222222, và danh sách checkmark sử dụng icon tick #1009f6 với văn bản 14px. Cột phải là card trắng (radius 24px, padding 32px) chứa các trường biểu mẫu: hai input cạnh nhau cho Họ/Tên, Email full-width, input điện thoại với tiền tố 🇪🇸 +34, Tên công ty + Số lượng nhân viên select cạnh nhau, Quốc gia select, Textarea tin nhắn full-width. Nút gửi là nút filled #1009f6 full-width (văn bản trắng, 14px weight 700, radius 24px, padding 11px 24px)."

    - "**Feature Highlight Card**: Bề mặt trắng (#ffffff) trên nền cream (#f0f0ec), radius 24px, padding 32px. Một illustration Sky Mist (#add3e5) 48px nằm ở trên. Bên dưới: headline 25px Abcwhyte weight 700 bằng #1a1a1a, sau đó đoạn body 16px bằng #222222 ở line height 1.5. Không shadow."

    - "**Navigation Bar**: Nền #f0f0ec, logo + wordmark 'Contractbook' bên trái bằng #1a1a1a, 5 nav link (Product, Templates, Packages, Customers, Learn) bằng 14px Abcwhyte weight 400 #1a1a1a với khoảng cách 7px. Ở bên phải: 'Login' dạng văn bản thường và 'Book demo' là nút pill (border 1px #1a1a1a, radius 999px, padding 7px 18px, 14px weight 400). Không có border dưới nặng."

  elevation_philosophy:

    info: "Hệ thống cố tình tránh drop shadow như một cơ chế nâng. Lớp nền cream Linen (#f0f0ec) và lớp card trắng (#ffffff) tạo chiều sâu thông qua độ tương phản màu sắc — card dường như nâng lên khỏi canvas bằng cách sáng hơn, không phải bằng cách đổ bóng. Hiệu ứng giống shadow duy nhất được sử dụng là border mảnh bằng Stone Gray (#d4d4d0) hoặc Silver Gray (#b3b3b3) cho trường biểu mẫu và divider. Cách tiếp cận editorial này giữ cho giao diện có cảm giác như một layout tạp chí hơn là một dashboard SaaS điển hình và ngăn chặn nhiễu thị giác mà giao diện stack-of-cards tích tụ."

  similar_brands:

    - "**Linear** — Cùng triết lý một accent sống động trên nền trung tính ấm — màu tím của Linear trên nền gần trắng hoạt động với cùng sự kiềm chế tự tin, một màu sắc đậm làm tất cả công việc sắc thái"
    - "**Framer** — Marketing site theo hướng editorial với geometric sans tùy chỉnh, pill-shaped CTA và canvas trắng off-white ấm — thái độ typographic và sự kiềm chế component khớp chặt chẽ"
    - "**Notion** — Canvas tông màu cream thoải mái với màu trung tính yên tĩnh và một accent thương hiệu duy nhất xuất hiện như dấu câu chức năng hơn là trang trí"
    - "**Maze** — Illustration vẽ tay vui nhộn kết hợp với UI sản phẩm nghiêm túc — illustration kiểu mắt/bảng phi tiêu kết nối hơi ấm nhân văn và sự rõ ràng chức năng theo cùng một cách"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-violet: #1009f6;
          --color-solar-yellow: #ffba09;
          --color-ink-black: #1a1a1a;
          --color-pure-white: #ffffff;
          --color-linen-cream: #f0f0ec;
          --color-charcoal: #222222;
          --color-stone-gray: #d4d4d0;
          --color-silver-gray: #b3b3b3;
          --color-pure-black: #000000;
          --color-sky-mist: #add3e5;
          --color-blossom-pink: #e3c7de;
          --color-forest-dark: #304801;
        
          /* Typography — Font Families */
          --font-abcwhyte: 'Abcwhyte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 25px;
          --leading-subheading: 1.25;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.24;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24px;
          --element-gap: 14px;
        
          /* Border Radius */
          --radius-md: 4.375px;
          --radius-lg: 10.5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 96px;
          --radius-full-2: 99px;
          --radius-full-3: 999px;
          --radius-full-4: 9999px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 999px;
          --radius-small: 10-16px;
          --radius-images: 40px;
          --radius-inputs: 4px;
          --radius-buttons: 24px;
        
          /* Surfaces */
          --surface-linen-canvas: #f0f0ec;
          --surface-pure-card: #ffffff;
          --surface-stone-surface: #d4d4d0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-violet: #1009f6;
          --color-solar-yellow: #ffba09;
          --color-ink-black: #1a1a1a;
          --color-pure-white: #ffffff;
          --color-linen-cream: #f0f0ec;
          --color-charcoal: #222222;
          --color-stone-gray: #d4d4d0;
          --color-silver-gray: #b3b3b3;
          --color-pure-black: #000000;
          --color-sky-mist: #add3e5;
          --color-blossom-pink: #e3c7de;
          --color-forest-dark: #304801;
        
          /* Typography */
          --font-abcwhyte: 'Abcwhyte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 25px;
          --leading-subheading: 1.25;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.24;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4.375px;
          --radius-lg: 10.5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 96px;
          --radius-full-2: 99px;
          --radius-full-3: 999px;
          --radius-full-4: 9999px;
        }