descript___style_reference:
  info: "> Phòng thu phát thanh gặp tòa soạn báo — nền tối đỏ burgundy sân khấu, headline serif kiểu tòa soạn, tín hiệu on-air màu san hô."

  theme: "mixed"

  info: "Ngôn ngữ thị giác của Descript là mảng tối đỏ burgundy bị cắt bởi hành động đỏ san hô — giống như bên trong buồng thu âm, nơi tường hấp thụ mọi thứ và chỉ còn tín hiệu phát sáng. Màu đen-đỏ burgundy gần như đen `#390a1a` chiếm 70% hero, tạo ra độ tối sân khấu khiến CTA đỏ san hô (`#f73b3b`) trông như đèn báo on-air. Headline dùng Gamuth Display, một serif editorial custom ở 88px — một lựa chọn bất thường cho một sản phẩm SaaS, báo hiệu sự thủ công và sáng tạo nội dung hơn là tiện ích doanh nghiệp. Các phần sáng (`#faf8f7`, một màu trắng ấm) tạo độ tương phản giữa các dải tối mà không bao giờ dùng trắng tinh, giữ bảng màu thống nhất về độ ấm. Tag label như 'AI VIDEO EDITOR' dùng Brett, một typeface custom với tracking rộng 0.04em mô phỏng phong cách chyron phát thanh."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Broadcast Burgundy | `#390a1a` | `--color-broadcast-burgundy` | Nền hero, bề mặt tối chính — tạo độ tối sân khấu khiến CTA san hô đọc như tín hiệu on-air |"
    info: "| On-Air Coral | `#f73b3b` | `--color-on-air-coral` | Nút CTA chính, label phần đang hoạt động — tín hiệu sống động duy nhất trên nền tối đỏ burgundy |"
    info: "| Hot Take Red | `#ff5340` | `--color-hot-take-red` | Highlight văn bản inline, nhấn phụ trong body copy |"
    info: "| Plum Mid | `#651a39` | `--color-plum-mid` | Trạng thái hover nav, nền nút phụ — sáng hơn Broadcast Burgundy một bậc để tạo chiều sâu tương tác |"
    info: "| Deep Violet | `#0c0b5f` | `--color-deep-violet` | Link inline và callout text trong phần sáng — tương phản mát mẻ với bảng màu ấm còn lại |"
    info: "| Soft Violet | `#8787e0` | `--color-soft-violet` | Điểm nhấn tính năng Underlord AI — dùng trên nút gửi chat AI |"
    info: "| Pale Peach | `#ffe8db` | `--color-pale-peach` | Nền card cho feature card trong phần ấm |"
    info: "| Blush Mist | `#f1eaed` | `--color-blush-mist` | Nền card cho testimonial và feature content card trong phần sáng |"
    info: "| Studio Black | `#190308` | `--color-studio-black` | Lớp nền sâu nhất, nền overlay nav |"
    info: "| Ink Dark | `#1a1a1a` | `--color-ink-dark` | Body text, nav text — dùng trên mọi bề mặt |"
    info: "| Warm Parchment | `#faf8f7` | `--color-warm-parchment` | Nền trang phần sáng, button text trên nền tối — cố tình trắng ngà để duy trì độ ấm với burgundy |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Button text trên CTA san hô, bề mặt card trong chat UI |"
    info: "| Dusty Rose | `#a28993` | `--color-dusty-rose` | Body text phụ, label giảm nhấn trên bề mặt tối |"
    info: "| Border Mauve | `#907580` | `--color-border-mauve` | Viền card, divider, viền input trên bề mặt tối |"
    info: "| Fog Gray | `#e5e7eb` | `--color-fog-gray` | Viền và divider trên bề mặt sáng, viền nút |"
    info: "| Muted Plum | `#583f4a` | `--color-muted-plum` | Nền card tối vừa trong phần tối |"
    info: "| Steel Mauve | `#d1c7cb` | `--color-steel-mauve` | Shadow, secondary text trên bề mặt sáng |"

  tokens___typography:

    booton___workhorse_chính_trên_toàn_ui___nav__body_copy__nút__caption__và_feature_label__weight_600_cho_subheading_và_card_title__weight_400_cho_body_và_nav__thiết_kế_custom_mang_lại_độ_ấm__phân_biệt_nó_với_các_grotesque_thông_thường_như_inter_____font_booton:
      - "**Thay thế:** Source Sans Pro, IBM Plex Sans"
      - "**Weights:** 400, 600"
      - "**Kích thước:** 16px, 18px, 20px, 24px, 56px"
      - "**Line height:** 1.10–1.56"
      - "**Letter spacing:** -0.32px ở 16px (−0.02em áp dụng trên mọi kích thước)"
      - "**OpenType features:** `\"calt\", \"liga\"`"
      - "**Vai trò:** Workhorse chính trên toàn UI — nav, body copy, nút, caption, và feature label. Weight 600 cho subheading và card title; weight 400 cho body và nav. Thiết kế custom mang lại độ ấm, phân biệt nó với các grotesque thông thường như Inter."

    gamuth_display___chỉ_dùng_cho_hero_và_section_heading__một_editorial_serif_custom___lựa_chọn_đặc_trưng_đánh_dấu_descript_là_công_cụ_sáng_tạo_nội_dung__không_phải_enterprise_saas__weight_400_ở_88px_thể_hiện_sự_kiềm_chế_tự_tin__hầu_hết_hero_font_saas_đều_thiên_về_đậm_____font_gamuth_display:
      - "**Thay thế:** Playfair Display, Fraunces"
      - "**Weights:** 400"
      - "**Kích thước:** 40px, 56px, 88px"
      - "**Line height:** 1.10–1.20"
      - "**OpenType features:** `\"calt\", \"liga\"`"
      - "**Vai trò:** Chỉ dùng cho hero và section heading. Một editorial serif custom — lựa chọn đặc trưng đánh dấu Descript là công cụ sáng tạo nội dung, không phải enterprise SaaS. Weight 400 ở 88px thể hiện sự kiềm chế tự tin; hầu hết hero font SaaS đều thiên về đậm."

    brett___chỉ_dùng_cho_section_eyebrow_label_ví_dụ__ai_video_editor___ai_video_agent__tracking_rộng_0_04em_mô_phỏng_chyron_phát_thanh_hoặc_section_slug_in_ấn___vị_trí_duy_nhất_trong_hệ_thống_có_letter_spacing_dương_____font_brett:
      - "**Thay thế:** Courier Prime, Space Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 18px"
      - "**Line height:** 1.00–1.56"
      - "**Letter spacing:** 0.72px ở 18px (0.04em)"
      - "**OpenType features:** `\"calt\", \"liga\"`"
      - "**Vai trò:** Chỉ dùng cho section eyebrow label (ví dụ 'AI VIDEO EDITOR', 'AI VIDEO AGENT'). Tracking rộng 0.04em mô phỏng chyron phát thanh hoặc section slug in ấn — vị trí duy nhất trong hệ thống có letter-spacing dương."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.5 | -0.32px | `--text-caption` |"
      info: "| body-sm | 18px | 1.56 | -0.36px | `--text-body-sm` |"
      info: "| body | 20px | 1.5 | -0.4px | `--text-body` |"
      info: "| subheading | 24px | 1.33 | -0.48px | `--text-subheading` |"
      info: "| heading-sm | 40px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 56px | 1.1 | — | `--text-heading` |"
      info: "| display | 88px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "4px"

    mật_độ: "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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 152 | 152px | `--spacing-152` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 4px |"
      info: "| badges | 100px |"
      info: "| inputs | 8px |"
      info: "| buttons | 12px |"
      info: "| buttonsPill | 9999px |"

    shadows:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính — 'Get started for free'"

      info: "Nền #f73b3b, chữ #fff7fd (trắng ấm), border-radius 12px, padding 16px 32px. Booton weight 600 ở 18px. Không viền. Màu san hô trên nền tối là phần tử nổi bật nhất trong hệ thống phân cấp."

    dark_pill_icon_button:
      vai_trò: "Media controls và compact icon actions trong phần tối"

      info: "Nền #390a1a, border-radius 9999px, padding 12px tất cả các cạnh. Dạng pill vuông chỉ có icon. Biến thể #651a39 dùng cho trạng thái hover/active."

    sign_up_nav_button:
      vai_trò: "CTA chuyển đổi chính trên nav"

      info: "Nền #651a39 (Plum Mid), chữ trắng, border-radius 12px, padding 12px 20px. Nằm trong nav trắng sticky — tạo độ tương phản burgundy-to-plum ấm với nền nav #faf8f7."

    eyebrow_label:
      vai_trò: "Tag danh mục phần phía trên hero heading"

      info: "Brett typeface, 18px, 0.04em letter-spacing, #f73b3b (On-Air Coral) trên bề mặt tối, in hoa. Không nền, không viền. Chỉ dùng để giới thiệu section heading."

    feature_card___blush:
      vai_trò: "Card mô tả tính năng trong phần sáng"

      info: "Nền #f1eaed (Blush Mist), border-radius 4px, padding 24px 24px 32px, không shadow. Booton 600 cho card title ở 20px, Booton 400 cho body ở 16px, chữ #1a1a1a."

    feature_card___peach:
      vai_trò: "Card tính năng thay thế với tông ấm hơn"

      info: "Nền #ffe8db (Pale Peach), border-radius 4px, padding 24px 24px 32px, không shadow. Xử lý typography tương tự Blush card."

    testimonial_card:
      vai_trò: "Quote bằng chứng xã hội trong grid layout trên nền tối"

      info: "Nền #583f4a (Muted Plum), border-radius 4px, padding 24px. Booton 400 ở 16px, chữ #faf8f7. Viền nhẹ #907580. Không shadow."

    ai_chat_interface_card:
      vai_trò: "Xem trước UI sản phẩm hiển thị trợ lý Underlord AI"

      info: "Nền #ffffff, border-radius 12px, box-shadow rgba(0,0,0,0.16) 0px 2px 4px. Bubble tin nhắn nội bộ dùng #cdcdfe (muted violet) cho tin nhắn AI, #8787e0 cho nút gửi. Booton 400 ở 16px."

    nav_bar:
      vai_trò: "Thanh điều hướng sticky phía trên"

      info: "Nền #faf8f7, border-bottom #e5e7eb 1px. Chữ #1a1a1a ở 16px Booton 400. Chevron dropdown dạng icon inline. Max-height 50px. Chứa wordmark (Descript logo với icon stacked-lines màu #f73b3b), text nav links, và nút Sign Up dạng pill màu #651a39."

    social_proof_logo_strip:
      vai_trò: "Logo tin cậy (Canva, Figma, Spotify, v.v.)"

      info: "Dải full-width trên nền #390a1a. Logo hiển thị bằng #faf8f7 hoặc trắng giảm bão hòa ở độ mờ thấp. Label text Booton 400 16px phía trên màu #a28993."

    category_tag_badge:
      vai_trò: "Filter tags và feature category pills"

      info: "Viền 1px solid #907580, nền trong suốt, border-radius 100px, padding 6px 12px. Booton 400 ở 14-16px, chữ #faf8f7 trên nền tối / #1a1a1a trên nền sáng. Dùng trong Awards card để hiển thị label danh mục sản phẩm."

    awards_recognition_card:
      vai_trò: "Hiển thị giải thưởng G2 trong phần testimonials"

      info: "Nền #faf8f7, border-radius 4px, padding 24px. Chứa ảnh badge G2, label năm màu #f73b3b (Brett 18px), category tag badges với nền trong suốt và viền #907580."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Gamuth Display weight 400 cho tất cả H1/H2 hero headline — không bao giờ dùng bold hoặc weight 700"
      - "Đặt trước mỗi section heading chính bằng một eyebrow label Brett 18px, tracking 0.04em màu #f73b3b"
      - "Áp dụng nền #f73b3b với border-radius 12px và padding 16px/32px cho tất cả primary CTA"
      - "Ghép cặp phần tối #390a1a ngay với phần sáng #faf8f7 — duy trì nhịp điệu dải xen kẽ"
      - "Dùng border-radius 4px cho tất cả card; dành 12px cho floating UI components và modal"
      - "Đặt Booton letter-spacing thành −0.02em (âm) trên mọi kích thước body — không bao giờ tracking trung tính hoặc dương ngoại trừ Brett eyebrows"
      - "Dùng #583f4a làm bề mặt card nâng cao trên nền tối #390a1a — không bao giờ dùng card đen hoặc trắng tinh trên phần tối"

    không_nên_làm:
      - "Không bao giờ dùng nền trang trắng tinh (#ffffff) — tất cả bề mặt sáng đều dùng #faf8f7 (Warm Parchment)"
      - "Không bao giờ áp dụng Gamuth Display cho body copy, caption, hoặc UI label — nó chỉ dùng cho heading ở kích thước tối thiểu 40px"
      - "Không bao giờ dùng CTA san hô (#f73b3b) cho nhiều hơn một nút trên mỗi màn hình — nó hoạt động như một tín hiệu tiêu điểm duy nhất"
      - "Không bao giờ thêm drop shadow vào section card — độ tương phản màu nền tự xác định độ nâng trên bề mặt card"
      - "Không bao giờ dùng generic sans-serif thay thế cho Booton mà không áp dụng −0.02em letter-spacing — tracking dương hoặc bằng không phá vỡ độ ấm"
      - "Không bao giờ đặt màu ngữ nghĩa xanh lá, xanh dương hoặc xanh teal trong UI — hệ thống không có trạng thái ngữ nghĩa tông lạnh; chỉ dùng bảng màu san hô/burgundy/violet ấm"
      - "Không bao giờ dùng border-radius trên 12px cho card hoặc section — 9999px chỉ dành riêng cho compact icon pill buttons"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Studio Dark | `#190308` | Nền sâu nhất — dùng phía sau logo strip và page footer |"
    info: "| 1 | Broadcast Burgundy | `#390a1a` | Hero và phần tối chính — bề mặt tối chiếm ưu thế |"
    info: "| 2 | Muted Plum | `#583f4a` | Card và container nâng cao trên nền tối |"
    info: "| 3 | Warm Parchment | `#faf8f7` | Nền phần sáng, nav bar — cực đối lập với bề mặt tối |"
    info: "| 4 | Blush Mist | `#f1eaed` | Card và container trên nền phần sáng |"
    info: "| 5 | Pure White | `#ffffff` | UI components như chat card cần độ tương phản tối đa trên mọi bề mặt |"

  elevation:

    - "**AI Chat Card:** `rgba(0, 0, 0, 0.16) 0px 2px 4px 0px`"
    - "**Nav Dropdown:** `rgba(0, 0, 0, 0.16) 0px 2px 4px 0px`"

  imagery:

    info: "Ảnh chụp màn hình UI sản phẩm là tài sản thị giác chính — hiển thị dưới dạng card nổi, cắt xén một phần, chồng lên nhau, ở góc phối cảnh để mô phỏng chiều sâu. Không có ảnh chụp lối sống trong ảnh chụp màn hình; giao diện sản phẩm CHÍNH LÀ hình ảnh. Xem trước UI hiển thị trình chỉnh sửa Descript với văn bản transcript thực, xây dựng độ tin cậy qua việc phơi bày sản phẩm. Ảnh badge G2 (phẳng, icon giải thưởng minh họa) xuất hiện trong phần bằng chứng xã hội. Icon sử dụng phong cách hybrid filled-with-outline ở khoảng 20-24px, đơn sắc phù hợp với màu chữ bề mặt. Thành phần chat Underlord AI được trưng bày dưới dạng card độc lập với nền trắng sạch nổi trên hero tối — khung product-as-hero. Tất cả hình ảnh nằm trong card bo góc (12px) thay vì full-bleed, duy trì cảm giác 'trưng bày sau kính'."

  layout:

    info: "Max-width khoảng 1200px, căn giữa với padding ngang rộng rãi. Hero là full-bleed #390a1a burgundy tối trải dài 100vh với headline stack căn giữa và một CTA duy nhất. Bên dưới hero, các dải ngang tối (#390a1a) và sáng (#faf8f7) xen kẽ tạo nhịp điệu rõ ràng — tối cho sự đắm chìm thương hiệu, sáng cho giải thích tính năng. Feature section sử dụng grid card 2-3 cột với khoảng cách 24px. Testimonials sử dụng grid card 2 cột trên nền tối với awards card chiếm cột trái. Social proof logo strip là một hàng full-bleed giữa hero và feature section. Navigation là thanh trắng sticky ở trên cùng với wordmark căn trái và utility links + CTA button căn phải. Section heading luôn căn giữa với eyebrow label phía trên và subtext phía dưới, max-width ~640px để dễ đọc."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "Nền trang (sáng): #faf8f7"
    - "Nền trang (tối): #390a1a"
    - "Body text chính: #1a1a1a"
    - "Primary CTA: #f73b3b"
    - "Viền / divider: #e5e7eb (bề mặt sáng), #907580 (bề mặt tối)"
    - "Điểm nhấn / tính năng AI: #8787e0"

    ví_dụ_component_prompts:

    - "Hero Section (tối): Nền full-width #390a1a. Eyebrow label bằng Brett 18px #f73b3b, 0.04em letter-spacing, in hoa. Headline bằng Gamuth Display weight 400 ở 88px, #faf8f7, line-height 1.1, căn giữa. Subtext bằng Booton 400 18px #a28993, max-width 560px căn giữa. Một nút CTA duy nhất: nền #f73b3b, chữ #ffffff, Booton 600 18px, radius 12px, padding 16px trên/dưới 32px trái/phải."

    - "Feature Card (phần sáng): Nền #f1eaed, border-radius 4px, padding 24px 24px 32px. Title bằng Booton 600 20px #1a1a1a. Body bằng Booton 400 16px #1a1a1a, line-height 1.5. Không shadow, không viền."

    - "Testimonial Card (phần tối): Nền #583f4a, border-radius 4px, padding 24px, viền 1px #907580. Quote text bằng Booton 400 16px #faf8f7, line-height 1.56. Tên tác giả bằng Booton 600 16px #faf8f7 với vòng tròn avatar nhỏ."

    - "Nav Bar: Nền #faf8f7, viền dưới 1px #e5e7eb. Bên trái: Descript wordmark với icon #f73b3b. Giữa: Booton 400 16px #1a1a1a nav links với mũi tên dropdown. Bên phải: 'Sign in' bằng Booton 400 16px #1a1a1a, nút 'Sign up' với nền #651a39, chữ #ffffff, radius 12px, padding 12px 20px."

    - "Section Eyebrow + Heading (phần sáng): Eyebrow bằng Brett 400 18px #f73b3b, tracking 0.04em, căn giữa. Heading bằng Gamuth Display 400 56px #1a1a1a, line-height 1.1, căn giữa, margin-top 8px. Subtext bằng Booton 400 18px #1a1a1a ở độ mờ 70%, max-width 560px căn giữa, margin-top 16px."

  three_font_discipline:

    info: "Hệ thống này sử dụng chính xác ba typeface với vai trò không chồng chéo — một hệ thống phân cấp nghiêm ngặt:"

    - "**Gamuth Display** — chỉ dùng cho heading (40px+). Không bao giờ trong UI, không trong body, không trong caption."
    - "**Brett** — chỉ dùng cho eyebrow label (18px, tracking rộng). Không bao giờ cho body, không cho heading."
    - "**Booton** — mọi thứ khác: nav, body, nút, card, caption, UI text."

    info: "Vi phạm các ranh giới này — ví dụ: dùng Gamuth Display cho card title ở 24px, hoặc Brett cho một đoạn body — sẽ phá vỡ thẩm quyền editorial của hệ thống. Substitute fonts nên duy trì cấu trúc ba tầng tương tự."

  similar_brands:

    - "**Rive** — Cùng layout dải tối/sáng xen kẽ với một màu nhấn sống động trên hero section tối trung tính"
    - "**Framer** — Editorial serif custom cho SaaS hero headline kết hợp với chiến lược thị giác product-UI-as-hero"
    - "**Loom** — SaaS công cụ sáng tạo với phần tối thương hiệu, CTA san hô/ấm, và xem trước ảnh chụp màn hình sản phẩm video"
    - "**Pitch** — Màu thương hiệu tối đậm làm bề mặt chính với phần sáng trắng ấm và type scale editorial"
    - "**Runway ML** — Công cụ sáng tạo AI sử dụng hero tối sân khấu + CTA sáng duy nhất + trưng bày giao diện sản phẩm làm hình ảnh chính"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-broadcast-burgundy: #390a1a;
          --color-on-air-coral: #f73b3b;
          --color-hot-take-red: #ff5340;
          --color-plum-mid: #651a39;
          --color-deep-violet: #0c0b5f;
          --color-soft-violet: #8787e0;
          --color-pale-peach: #ffe8db;
          --color-blush-mist: #f1eaed;
          --color-studio-black: #190308;
          --color-ink-dark: #1a1a1a;
          --color-warm-parchment: #faf8f7;
          --color-pure-white: #ffffff;
          --color-dusty-rose: #a28993;
          --color-border-mauve: #907580;
          --color-fog-gray: #e5e7eb;
          --color-muted-plum: #583f4a;
          --color-steel-mauve: #d1c7cb;
        
          /* Typography — Font Families */
          --font-booton: 'Booton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gamuth-display: 'Gamuth Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-brett: 'Brett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: -0.32px;
          --text-body-sm: 18px;
          --leading-body-sm: 1.56;
          --tracking-body-sm: -0.36px;
          --text-body: 20px;
          --leading-body: 1.5;
          --tracking-body: -0.4px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.2;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --text-display: 88px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-152: 152px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 4px;
          --radius-badges: 100px;
          --radius-inputs: 8px;
          --radius-buttons: 12px;
          --radius-buttonspill: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;
        
          /* Surfaces */
          --surface-studio-dark: #190308;
          --surface-broadcast-burgundy: #390a1a;
          --surface-muted-plum: #583f4a;
          --surface-warm-parchment: #faf8f7;
          --surface-blush-mist: #f1eaed;
          --surface-pure-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-broadcast-burgundy: #390a1a;
          --color-on-air-coral: #f73b3b;
          --color-hot-take-red: #ff5340;
          --color-plum-mid: #651a39;
          --color-deep-violet: #0c0b5f;
          --color-soft-violet: #8787e0;
          --color-pale-peach: #ffe8db;
          --color-blush-mist: #f1eaed;
          --color-studio-black: #190308;
          --color-ink-dark: #1a1a1a;
          --color-warm-parchment: #faf8f7;
          --color-pure-white: #ffffff;
          --color-dusty-rose: #a28993;
          --color-border-mauve: #907580;
          --color-fog-gray: #e5e7eb;
          --color-muted-plum: #583f4a;
          --color-steel-mauve: #d1c7cb;
        
          /* Typography */
          --font-booton: 'Booton', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gamuth-display: 'Gamuth Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-brett: 'Brett', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --tracking-caption: -0.32px;
          --text-body-sm: 18px;
          --leading-body-sm: 1.56;
          --tracking-body-sm: -0.36px;
          --text-body: 20px;
          --leading-body: 1.5;
          --tracking-body: -0.4px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 40px;
          --leading-heading-sm: 1.2;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --text-display: 88px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-96: 96px;
          --spacing-104: 104px;
          --spacing-152: 152px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 100px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px;
        }