dialog___style_reference:
  info: "> Neutral showroom với một price tag ấm áp duy nhất. Mọi bề mặt đều là một tông off-white khác nhau; CTA màu cam là màu duy nhất trong căn phòng."

  theme: "light"

  info: "Dialog mang cảm giác như một sơ đồ mặt bằng bán lẻ cao cấp được thể hiện dưới dạng kỹ thuật số — trung tính, thoáng đãng và thư thái, với một điểm nhấn ấm áp đóng vai trò như một miếng dán price tag trên vải lanh trắng. Nền gần trắng #f7f7f7 và các card trắng tinh tạo ra một hệ thống phân cấp bề mặt tinh tế đến mức nó đọc như một không gian liên tục thay vì độ sâu phân lớp. PP Radio Grotesk Light ở 50-70px là điểm nhấn xác định: một geometric grotesque được thể hiện ở weight nhẹ nhất khiến các headline lớn có cảm giác như viết tay trên giấy thay vì đóng dấu — zero aggression, maximum presence. Màu cam duy nhất #f69251 chỉ xuất hiện trên các CTA, thu hút sự chú ý giống như một tag giảm giá nổi bật trong một showroom trung tính. Các nút hình pill (28px radius) nổi trên các container góc vuông, là hình dạng mềm duy nhất trong một hệ thống hình chữ nhật khác."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Tangerine Tag | `#f69251` | `--color-tangerine-tag` | Nút CTA chính, pill 'Book a demo' — màu cam ấm trên nền gần trắng báo hiệu hành động mà không tạo cảm giác cấp bách, gợi nhớ bảng màu của nhãn hàng bán lẻ cao cấp |"
    info: "| Midnight Ink | `#181825` | `--color-midnight-ink` | Body text, đường viền — gần đen với một chút xanh lam khó nhận thấy, mềm hơn đen thuần để đọc văn bản dài |"
    info: "| Graphite | `#484758` | `--color-graphite` | Body text phụ, mô tả copy, thông tin meta |"
    info: "| Deep Slate | `#242433` | `--color-deep-slate` | Nền bề mặt tối, card overlay trong các section tối |"
    info: "| Carbon | `#000000` | `--color-carbon` | Heading, icon fill, primary text — được sử dụng ở full weight để đảm bảo độ rõ ràng tối đa |"
    info: "| Stone | `#636363` | `--color-stone` | Body text hỗ trợ, nav label, secondary label |"
    info: "| Pebble | `#949494` | `--color-pebble` | Placeholder text, muted link, disabled state |"
    info: "| Ash | `#8b8b8b` | `--color-ash` | Tertiary text, icon stroke, đường viền mờ |"
    info: "| Fog | `#f7f7f7` | `--color-fog` | Nền trang, section fill — bề mặt chủ đạo của toàn bộ site |"
    info: "| Snow | `#ffffff` | `--color-snow` | Bề mặt card, nền nav, button fill cho ghost variant |"
    info: "| Peach Whisper | `linear-gradient(rgba(255, 219, 184, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%)` | `--color-peach-whisper` | Decorative SVG fill, illustration accent highlight |"
    info: "| Dusty Rose | `#c97b84` | `--color-dusty-rose` | Semantic accent — xuất hiện ở trạng thái hover hoặc highlight trên một số interactive element nhất định |"

  tokens___typography:

    pp_radio_grotesk_light___tất_cả_hero_và_section_heading__weight_400_trong_geometric_grotesque_này_hiển_thị_trực_quan_dưới_dạng__light____ở_70px__chữ_có_cảm_giác_như_vẽ_bằng_bút_chì_hơn_là_sắp_chữ__mang_lại_cho_headline_khổ_lớn_một_chất_lượng_editorial_mà_không_system_font_nào_có_thể_tái_tạo__đây_là_signature_typographic_move_của_site_này_____font_pp_radio_grotesk_light:
      - "**Thay thế:** Satoshi Light, DM Sans Light"
      - "**Weights:** 400"
      - "**Sizes:** 32px, 39px, 50px, 70px"
      - "**Line height:** 1.15–1.30"
      - "**Letter spacing:** -0.01em (xấp xỉ -0.5px ở 50px, -0.7px ở 70px)"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Tất cả hero và section heading. Weight 400 trong geometric grotesque này hiển thị trực quan dưới dạng 'light' — ở 70px, chữ có cảm giác như vẽ bằng bút chì hơn là sắp chữ, mang lại cho headline khổ lớn một chất lượng editorial mà không system font nào có thể tái tạo. Đây là signature typographic move của site này."

    inter___navigation_label__body_copy__input_field__ui_label__subheading__weight_400_cho_body__500_cho_nav_link_và_emphasis__negative_letter_spacing_chặt_hơn_mặc_định_của_inter__nén_nhẹ_khối_văn_bản_mà_không_gây_cảm_giác_chật_chội_____font_inter:
      - "**Thay thế:** Inter (đã có sẵn trên Google)"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 24px"
      - "**Line height:** 1.20–1.70"
      - "**Letter spacing:** -0.02em ở kích thước nhỏ, -0.01em ở kích thước trung bình"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\"`"
      - "**Vai trò:** Navigation label, body copy, input field, UI label, subheading. Weight 400 cho body, 500 cho nav link và emphasis. Negative letter-spacing chặt hơn mặc định của Inter, nén nhẹ khối văn bản mà không gây cảm giác chật chội."

    inter_variable___đoạn_body_inline_được_đặt_chặt__single_line_descriptor__line_height_1_00_nghĩa_là_không_có_leading___chỉ_dùng_cho_compact_label_style_text_____font_inter_variable:
      - "**Thay thế:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 15px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.01em"
      - "**OpenType features:** `\"cv01\", \"cv05\", \"cv09\", \"cv11\"`"
      - "**Vai trò:** Đoạn body inline được đặt chặt, single-line descriptor. Line-height 1.00 nghĩa là không có leading — chỉ dùng cho compact label-style text."

    inter_display___ngữ_cảnh_heading_không_thường_xuyên_ở_kích_thước_display_nhỏ__card_title_trong_feature_section_____font_inter_display:
      - "**Thay thế:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.43"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Ngữ cảnh heading không thường xuyên ở kích thước display nhỏ, card title trong feature section."

    sans_serif_system_fallback___icon_label__tooltip_text__browser_level_ui_element___không_phải_lựa_chọn_thiết_kế_có_chủ_đích_____font_sans_serif_system_fallback:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Icon label, tooltip text, browser-level UI element — không phải lựa chọn thiết kế có chủ đích."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.3 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 50px | 1.2 | -0.5px | `--text-heading-lg` |"
      info: "| display | 70px | 1.15 | -0.7px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 40 | 40px | `--spacing-40` |"
      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: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 192 | 192px | `--spacing-192` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| small | 8px |"
      info: "| badges | 100px |"
      info: "| inputs | 0px |"
      info: "| buttons | 28px |"
      info: "| overlays | 32px |"
      info: "| cardInner | 12px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(24, 24, 37, 0.12) 0px 2px 3px -2px` | `--shadow-subtle` |"
      info: "| xl | `rgba(247, 247, 247, 0.5) 0px -40px 40px 0px` | `--shadow-xl` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) ...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    primary_cta_button_orange_pill:
      vai_trò: "Hero và nav primary action — 'Book a demo'"

      info: "Background #f69251, text #000000, border-radius 28px, padding 12px 24px. Hình dạng pill hoàn chỉnh ở 28px radius là class bo tròn duy nhất trong một layout góc cạnh khác. Subtle layered shadow: rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.02) 0px 2px 4px, rgba(0,0,0,0.02) 0px 4px 8px. Font: Inter 14-16px weight 500."

    ghost_cta_button_white_pill:
      vai_trò: "Secondary action trên nền tối hoặc nền có ảnh"

      info: "Background #ffffff, text #000000, border-radius 28px, padding 12px 24px. Cùng hình dạng pill với primary, nhưng đảo ngược thành fill trắng — đọc như outline-adjacent mà không cần border rõ ràng. Được sử dụng khi màu cam sẽ xung đột với background."

    email_input___cta_inline_form:
      vai_trò: "Hero email capture row"

      input_field: "transparent background, border-radius 0px, không padding — xuất hiện như một đường gạch chân hoặc hình chữ nhật có viền. Ghép inline với nút pill màu cam bên cạnh. Input text #000000, placeholder color #949494 (Pebble). Input zero-radius tương phản mạnh với nút pill 28px bên cạnh, tạo ra sự căng thẳng có chủ đích giữa hình thức và chức năng."

    testimonial_card:
      vai_trò: "Social proof trong section testimonial dạng cuộn"

      info: "Bề mặt card trắng (#ffffff), border-radius 24px, padding 24px. Quote text trong Inter 14-16px #181825. Tên tác giả trong Inter 500 ~14px, role/handle trong #636363 Inter 400 12-13px. Avatar hiển thị ở kích thước nhỏ (32-40px) với crop hình tròn. Không border — card nâng lên nhờ box-shadow rgba(24,24,37,0.12) 0px 2px 3px -2px. Được đặt trong carousel cuộn ngang."

    product_screenshot_browser_frame:
      vai_trò: "Product tour / hero UI illustration"

      info: "Card trắng (#ffffff) ở border-radius 24px với decorative browser chrome: ba chấm màu (đỏ #c97b84, vàng, xanh lá) ở góc trên bên trái dưới dạng hình tròn 12px. Bên trong chứa các khối skeleton placeholder ở #f7f7f7 và #b2b2b2. Card sử dụng shadow rgba(247,247,247,0.5) 0px -40px 40px 0px ở cạnh dưới — một fade-up vignette hòa trộn mockup vào nền trang."

    navigation_bar:
      vai_trò: "Global top navigation"

      info: "Nền trắng (#ffffff), chiều cao ~64px, max-width được giới hạn. Logo (Dialog wordmark với icon mũi tên) căn trái. Link trong Inter 400 14px #636363, khoảng cách 6-8px gap. Nút 'Book a demo' dạng pill màu cam căn phải. Border-radius 32px trên nav container khi cuộn (floating pill nav pattern). Không có border dưới cùng nhìn thấy được — tách khỏi trang nhờ độ tương phản background."

    feature_badge___pill_label:
      vai_trò: "Category tag, section label như 'AI product recommender'"

      info: "Border-radius 100px, background trắng hoặc #f7f7f7, padding 4-8px 12px. Text Inter 500 12-13px #484758. Không có background màu — pill trung tính sắp xếp nội dung mà không thêm chroma."

    section_heading_block:
      vai_trò: "Main headline + subtext hỗ trợ cho mỗi content section"

      headline: "PP Radio Grotesk Light 50px, letter-spacing -0.01em, color #000000, line-height 1.20. Subtext: Inter 400 16-18px #636363, line-height 1.50. Xếp chồng theo chiều dọc, căn giữa trong hero, căn trái trong feature section. Gap giữa headline và subtext: 12-16px."

    star_rating_row:
      vai_trò: "Social proof trust indicator bên dưới hero CTA"

      info: "Inline row gồm icon + 5-star glyphs trong màu cam #f69251. Icon badge (Shopify/G2 logo) ở 20px theo sau là năm ký tự ★. Text Inter 400 12px #636363. Hai rating row hiển thị cạnh nhau với gap 16-24px. Đóng vai trò là micro-credibility anchor bên dưới email capture form."

  do_s_and_don_ts:

    do:
      - "Sử dụng PP Radio Grotesk Light (weight 400) riêng cho heading ở 32px+; không bao giờ thay thế bằng Inter cho headline ở kích thước lớn"
      - "Áp dụng #f69251 chỉ cho nút CTA chính — không bao giờ dùng cho text, icon, decorative shape, hoặc background"
      - "Đặt tất cả nút ở border-radius 28px (hình dạng pill) bất kể chiều rộng nút; đây là UI element bo tròn duy nhất trong hệ thống"
      - "Duy trì #f7f7f7 làm nền trang và #ffffff cho tất cả bề mặt card — hệ thống bề mặt 2-tông gần trắng xác định mặt phẳng thị giác"
      - "Sử dụng Inter ở letter-spacing -0.01em đến -0.02em cho body và nav text — không bao giờ ở mặc định hoặc tracking dương"
      - "Đặt card shadow ở rgba(24,24,37,0.12) 0px 2px 3px -2px — single low-offset shadow, không bao giờ dùng stacked high-elevation shadow"
      - "Cho testimonial và feature card border-radius 24px với internal padding 24px — không sử dụng bán kính nhỏ hơn cho container lớn"

    don_t:
      - "Không sử dụng #f69251 cho nhiều hơn một category element (chỉ CTA) — đưa màu cam vào icon, text, hoặc decoration sẽ phá vỡ kỷ luật single-accent"
      - "Không áp dụng border-radius nhỏ hơn 24px cho card container — 8px hoặc 12px radius thuộc về inner UI chip, không phải layout-level card"
      - "Không sử dụng weight đậm hoặc nặng (600+) với PP Radio Grotesk — light grotesque mất đi bản sắc ở weight cao"
      - "Không đưa background section màu (dải xanh dương, xanh lá, tím) — sự biến đổi section chỉ đến từ việc đổi giữa #f7f7f7 và #ffffff"
      - "Không sử dụng drop shadow lớn hơn 8px blur hoặc opacity trên 0.12 — hệ thống elevation cố tình bằng phẳng với mặt phẳng trang"
      - "Không crop hoặc bleed ảnh ra mép trang trên các trang nội bộ — ảnh chỉ tồn tại bên trong card container 24px-radius"
      - "Không đặt input field ở border-radius bo tròn — input sử dụng 0px hoặc radius tối thiểu để tương phản với hệ thống nút pill"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f7f7f7` | Full-bleed page background — nền của toàn bộ bố cục |"
    info: "| 1 | Card Surface | `#ffffff` | Testimonial card, feature card, browser mockup frame |"
    info: "| 2 | Dark Card | `#242433` | Feature section dark-mode panel, contrast section |"

  elevation:

    info: "Shadow được sử dụng ở cường độ gần như vô hình — rgba(24,24,37,0.12) ở 2px blur và rgba(0,0,0,0.04) layered micro-shadow trên nút. Hiệu ứng không phải là nâng bề mặt lên mà là xác định các cạnh của chúng so với nền #f7f7f7. Card không cạnh tranh về sự chú ý theo chiều dọc; chúng nằm trên mặt phẳng. Hiệu ứng fade rgba(247,247,247,0.5) 0px -40px 40px trên browser mockup là shadow ấn tượng nhất trên trang, và nó mờ dần VÀO màu nền — xóa bỏ chiều sâu thay vì tạo ra nó."

  imagery:

    info: "Hai chế độ ảnh cùng tồn tại. Product screenshot được thể hiện dưới dạng browser-chrome wireframe mockup trên bề mặt card trắng — chức năng và sơ đồ, hiển thị giao diện AI chat thay vì lối sống. Customer testimonial trong section thứ hai sử dụng editorial photography: close-cropped product still life (chai nước hoa, bề mặt có kết cấu) và brand identity shot (hành lý Delsey, chi tiết bảng điều khiển xe hơi). Chúng được chứa trong card 24px-radius trong carousel ngang, không có full-bleed photography trên trang chính. Ảnh có tông màu ấm và u ám — được chụp trong ambient/low light, giảm bão hòa với ánh nâu hoặc đồng. Sự tương phản giữa wireframe mockup lâm sàng và ảnh editorial ấm áp là có chủ đích: product là hệ thống, proof là bầu không khí."

  layout:

    info: "Max-width ~1200px căn giữa trên nền full-bleed #f7f7f7. Hero là layout center-stack: headline trong PP Radio Grotesk ở 70px, subtext, sau đó là inline email+CTA form, sau đó là trust-badge row — tất cả đều căn giữa theo chiều dọc với whitespace rộng rãi (~120px top padding). Browser mockup nổi bên dưới, được crop ở cạnh dưới viewport để gợi ý nội dung có thể cuộn. Bên dưới: các content section xen kẽ sử dụng headline căn trái + body text ghép với UI mockup bên phải (2-column). Testimonial section phá vỡ grid thành carousel cuộn ngang với 3-column partial card hiển thị. Navigation là một floating white pill (border-radius 32px) xuất hiện được chứa trong một header band — tối giản, không mega-menu, không sidebar."

  agent_prompt_guide:

    quick_color_reference:
    - "Page background: #f7f7f7"
    - "Card surface: #ffffff"
    - "Primary text / headings: #000000"
    - "Body / secondary text: #636363"
    - "CTA button fill: #f69251"
    - "CTA button text: #000000"
    - "Border / subtle divider: #b2b2b2"
    - "Muted / placeholder text: #949494"

    example_component_prompts:

    - "**Hero Section**: Nền #f7f7f7, layout full-width căn giữa. Headline 'The AI shopping agent that boosts your sales' trong PP Radio Grotesk Light 70px, color #000000, letter-spacing -0.70px, line-height 1.15. Subtext 'Guide shoppers in real time, like you would in store.' trong Inter 400 18px, color #636363, line-height 1.50. Bên dưới: inline row với một bare text input (transparent bg, 0px radius, border-bottom 1px #000) và một nút pill màu cam (#f69251 fill, #000 text, 28px radius, 12px 24px padding, Inter 500 14px). Bên dưới đó: hai star-rating badge row với sao #f69251, Inter 400 12px #636363."

    - "**Testimonial Card**: Card trắng (#ffffff), border-radius 24px, padding 24px, shadow rgba(24,24,37,0.12) 0px 2px 3px -2px. Quote trong Inter 400 14px #181825, line-height 1.50. Author row: avatar hình tròn 36px, name trong Inter 500 14px #000, handle trong Inter 400 12px #636363, gap 8px."

    - "**Navigation Bar**: Container pill trắng #ffffff, border-radius 32px. Logo bên trái. Nav link trong Inter 400 14px #636363 với column gap 6px. Nút 'Book a demo' dạng pill màu cam bên phải (#f69251, #000 text, 28px radius, 12px 24px padding)."

    - "**Feature Section**: Nền #f7f7f7, layout 2-column: trái = section label pill (100px radius, nền #f7f7f7, Inter 500 12px #484758) + heading trong PP Radio Grotesk Light 50px #000 + body Inter 400 16px #636363; phải = card trắng (24px radius) chứa UI screenshot hoặc product mockup."

    - "**Browser Mockup Frame**: Card trắng, border-radius 24px, shadow rgba(247,247,247,0.5) 0px -40px 40px 0px ở cạnh dưới. Góc trên bên trái: ba chấm hình tròn 10px (màu: #c97b84, #f69251, #8b8b8b). Bên trong: skeleton block ở #f7f7f7 và #b2b2b2 với độ rộng khác nhau, row-gap 8px."

  similar_brands:

    - "**Intercom** — Neutral off-white background, single warm-brand CTA color, testimonial carousel pattern, body type dựa trên Inter"
    - "**Typeform** — Geometric grotesque display type ở light weight cho hero headline, accent color họ cam trên nút pill"
    - "**Gorgias** — AI/e-commerce SaaS với editorial product photography kết hợp với UI mockup screenshot, layout testimonial card gần như giống hệt"
    - "**Klaviyo** — Cùng pill-nav-bar pattern nổi trên nền #f7f7f7, Inter body text với tight letter-spacing"
    - "**Rebuy Commerce** — Shopify-native AI commerce tool với warm accent button, light muted surface, và wireframe-style product preview mockup"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-tangerine-tag: #f69251;
          --color-midnight-ink: #181825;
          --color-graphite: #484758;
          --color-deep-slate: #242433;
          --color-carbon: #000000;
          --color-stone: #636363;
          --color-pebble: #949494;
          --color-ash: #8b8b8b;
          --color-fog: #f7f7f7;
          --color-snow: #ffffff;
          --color-peach-whisper: #fad7c1;
          --gradient-peach-whisper: linear-gradient(rgba(255, 219, 184, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
          --color-dusty-rose: #c97b84;
        
          /* Typography — Font Families */
          --font-pp-radio-grotesk-light: 'PP Radio Grotesk Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif-system-fallback: 'sans-serif (system fallback)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.5px;
          --text-display: 70px;
          --leading-display: 1.15;
          --tracking-display: -0.7px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-small: 8px;
          --radius-badges: 100px;
          --radius-inputs: 0px;
          --radius-buttons: 28px;
          --radius-overlays: 32px;
          --radius-cardinner: 12px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 24, 37, 0.12) 0px 2px 3px -2px;
          --shadow-xl: rgba(247, 247, 247, 0.5) 0px -40px 40px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f7f7f7;
          --surface-card-surface: #ffffff;
          --surface-dark-card: #242433;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-tangerine-tag: #f69251;
          --color-midnight-ink: #181825;
          --color-graphite: #484758;
          --color-deep-slate: #242433;
          --color-carbon: #000000;
          --color-stone: #636363;
          --color-pebble: #949494;
          --color-ash: #8b8b8b;
          --color-fog: #f7f7f7;
          --color-snow: #ffffff;
          --color-peach-whisper: #fad7c1;
          --color-dusty-rose: #c97b84;
        
          /* Typography */
          --font-pp-radio-grotesk-light: 'PP Radio Grotesk Light', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sans-serif-system-fallback: 'sans-serif (system fallback)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.5px;
          --text-display: 70px;
          --leading-display: 1.15;
          --tracking-display: -0.7px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-192: 192px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 32px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-subtle: rgba(24, 24, 37, 0.12) 0px 2px 3px -2px;
          --shadow-xl: rgba(247, 247, 247, 0.5) 0px -40px 40px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px;
        }