stability_ai___style_reference:
  info: "> Xung tím trong phòng tối. Ảnh editorial full-bleed nổi trên bề mặt gần như đen, với một điểm nhấn violet rực rỡ duy nhất thắp sáng mọi thành phần tương tác mà không hề la hét."

  theme: "dark"

  info: "Stability AI là nền tảng sáng tạo trên canvas tối với một điểm nhấn điện tím duy nhất xuyên suốt các bề mặt gần đen. Ảnh editorial full-bleed chiếm ưu thế ở hero, với UI sản phẩm dạng nổi được ghép (composite) lên trên người mẫu và cây cỏ — hợp nhất công cụ và đầu ra thành một hình ảnh duy nhất. Typography là Archivo với các font-weight tự tin, display sizes được siết chặt ở line-height thấp (≈0.98–1.07) để headline xếp chồng thành các khối editorial gọn gàng thay vì copy marketing thoáng đãng. Tương tác gần như hoàn toàn được báo hiệu bằng xung tím — pill CTAs, link gạch chân, arrow affordances, và cả icon footer mạng xã hội đều đọc như cùng một tần số lavender. Các bề mặt phân lớp tinh tế (#1e1e1 → #383838 → #000000) không có decorative shadow, vì vậy chiều sâu đến từ sự chuyển tông màu và khoảng trống âm bản rộng rãi thay vì độ cao. Các component nhẹ nhàng và tự tin: pill buttons, divider mảnh, và body text màu violet nhạt (#725d91) lùi về phía sau nhưng vẫn giữ cho trang hài hòa về tông màu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Iris Spark | `#a381ff` | `--color-iris-spark` | Accent violet hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính |"
    info: "| Indigo Edge | `#776cff` | `--color-indigo-edge` | Accent violet hỗ trợ cho chi tiết trang trí và nhấn mạnh tần số thấp. Không nâng lên thành màu CTA chính |"
    info: "| Mauve Veil | `#725d91` | `--color-mauve-veil` | Heading, body text trên nền tối, và muted link text — một màu violet bão hòa thấp giữ cho trang hài hòa về tông với accent trong khi để nội dung lùi lại |"
    info: "| Lilac Ash | `#b6a9c6` | `--color-lilac-ash` | Secondary body copy, helper text, subtle link variants trên nền tối — neutral pha tím nhạt nhất, làm cầu nối giữa mauve headings và white labels |"
    info: "| Deep Amethyst | `#330066` | `--color-deep-amethyst` | Dark-mode link variant, decorative deep-violet wash — dùng với độ nổi bật thấp cho link trên bề mặt sáng hơn trong footer band |"
    info: "| Obsidian Canvas | `#1e1e1e` | `--color-obsidian-canvas` | Nền trang, section canvas, input fields, dark surface base — màu gần đen chủ đạo mà mọi thứ khác nổi trên đó |"
    info: "| Carbon Layer | `#383838` | `--color-carbon-layer` | Elevated card surface, image borders, list-item dividers — sáng hơn canvas một bậc để phân lớp tinh tế mà không cần shadow |"
    info: "| Void | `#000000` | `--color-void` | Hero overlay, bề mặt tương phản sâu nhất, text-shadow reservoir — đen tuyền cho hiệu ứng hero điện ảnh và độ tương phản chữ tối đa |"
    info: "| Bone | `#e5e7e6` | `--color-bone` | Primary light text trên nền tối — màu body và label chủ đạo, gần trắng nhưng ấm hơn pure white để nằm thoải mái trên gần đen |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Headline, logo, pure-contrast text, button labels trên nền violet — dành riêng cho copy có độ nhấn mạnh cao nhất nơi trắng tuyệt đối đọc đúng |"
    info: "| Pewter | `#bbbbbb` | `--color-pewter` | Secondary body text, muted labels, low-emphasis copy — nằm giữa Bone headings và darker supporting text để có hệ thống phân cấp rõ ràng |"
    info: "| Graphite | `#888888` | `--color-graphite` | Tertiary text, disabled states, footer micro-copy — xám đậm nhất có thể đọc được, dùng khi nội dung cần xuất hiện nhưng vô hình |"

  tokens___typography:

    archivo___primary_typeface_cho_toàn_bộ_interface_text___geometric_sans_serif_với_cảm_giác_hơi_condensed__mang_phong_cách_editorial__weight_400_cho_body__600_cho_subheads_và_nav__700_cho_display_headlines__display_sizes_40_72px_dùng_line_height_chặt_0_98_1_07_để_multi_line_headlines_xếp_chồng_thành_các_khối_editorial_gọn_gàng_thay_vì_copy_marketing_thoáng_đãng_____font_archivo:
      - "**Thay thế:** Inter, DM Sans, hoặc Manrope"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 12, 13, 14, 15, 16, 18, 20, 25, 30, 32, 40, 42, 50, 72"
      - "**Line height:** 0.98, 1.00, 1.05, 1.06, 1.07, 1.20, 1.23, 1.25, 1.27, 1.29, 1.30, 1.34, 1.39, 1.40, 1.50, 1.56, 1.80, 1.86, 2.22"
      - "**Vai trò:** Primary typeface cho toàn bộ interface text — geometric sans-serif với cảm giác hơi condensed, mang phong cách editorial. Weight 400 cho body, 600 cho subheads và nav, 700 cho display headlines. Display sizes (40–72px) dùng line-height chặt (0.98–1.07) để multi-line headlines xếp chồng thành các khối editorial gọn gàng thay vì copy marketing thoáng đãng."

    figtree___button_labels_và_small_caps_ctas___một_sans_serif_mềm_hơn__tròn_hơn_giúp_làm_ấm_button_type__chỉ_dùng_cho_interactive_labels_ở_14_16px_nơi_archivo_hình_học_đọc_quá_lâm_sàng_____font_figtree:
      - "**Thay thế:** DM Sans 600 hoặc Plus Jakarta Sans 600"
      - "**Weights:** 600"
      - "**Sizes:** 14, 16"
      - "**Line height:** 1.20"
      - "**Vai trò:** Button labels và small-caps CTAs — một sans-serif mềm hơn, tròn hơn giúp làm ấm button type. Chỉ dùng cho interactive labels ở 14–16px nơi Archivo hình học đọc quá lâm sàng."

    clarkson___serif_display_accent_dùng_tiết_kiệm_cho_editorial_pull_quotes_hoặc_section_eyebrows___mang_lại_sự_tương_phản_giọng_tạp_chí_với_interface_vốn_toàn_sans_serif_____font_clarkson:
      - "**Thay thế:** Fraunces 400 hoặc Recoleta 400"
      - "**Weights:** 400"
      - "**Sizes:** 18"
      - "**Line height:** 1.50, 1.70"
      - "**Vai trò:** Serif/display accent dùng tiết kiệm cho editorial pull-quotes hoặc section eyebrows — mang lại sự tương phản giọng tạp chí với interface vốn toàn sans-serif."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.56 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.29 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 42px | 1.07 | — | `--text-heading-lg` |"
      info: "| display-lg | 50px | 1.05 | — | `--text-display-lg` |"
      info: "| display | 72px | 0.98 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 300px |"
      info: "| cards | 8px |"
      info: "| links | 11px |"
      info: "| inputs | 99px |"
      info: "| buttons | 300px |"
      info: "| decorative | 700px |"

    layout:

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

  components:

    announcement_bar:
      vai_trò: "Banner mảnh đầu trang cho ra mắt sản phẩm và khuyến mãi"

      info: "Dải tối full-bleed (#1e1e1e) ở trên cùng trang, text căn giữa màu Bone (#e5e7e6) ở 13px Archivo 400 với link gạch chân violet và icon × nhỏ để đóng ở bên phải. Chiều cao ≈ 40px, không border, nằm sát với nav."

    primary_navigation:
      vai_trò: "Navigation đầu trang toàn site với logo, link và CTA"

      info: "Nền trong suốt trên hero, chuyển sang #1e1e1 khi cuộn. Bên trái: wordmark \"stability.ai\" màu trắng ở Archivo 600. Giữa: các nav link ngang (Models, Solutions, Brand Studio, Deployment, Insights, Press, Company) màu Bone ở 15px Archivo 400. Phải: nút pill \"Contact us\" nền #a381ff với label trắng, radius 300px, padding 8px 24px."

    pill_primary_button:
      vai_trò: "CTA violet đặc cho các hành động ưu tiên cao nhất"

      info: "Nền #a381ff, label trắng ở 16px Figtree 600, border-radius 300px, padding dọc 10px × ngang 24px. Không border, không shadow. Dùng cho \"Get started here\", \"Sign up\", \"Contact us\". Letter-spacing bình thường, text-center."

    outlined_violet_button:
      vai_trò: "Ghost/outlined secondary action với chromatic border"

      info: "Nền trong suốt, border 1.5px màu Indigo Edge #776cff, label màu #776cff ở 16px Figtree 600, radius 300px, padding 10px 24px. Dùng khi secondary action vẫn cần mang màu thương hiệu nhưng không cạnh tranh với filled primary."

    text_link_with_arrow:
      vai_trò: "Inline link với directional affordance"

      info: "Label màu Bone (#e5e7e6) hoặc Iris Spark (#a381ff) ở 16px Archivo 400 với mũi tên \"→\" cùng màu ở cuối. Gạch chân xuất hiện khi hover. Dùng cho inline CTA kiểu \"Work with us →\" trong body copy."

    pill_input_field:
      vai_trò: "Text input cho email capture và form fields"

      info: "Nền #1e1e1, border 1px màu #383838, placeholder text màu Bone ở 14px Archivo 400, border-radius 99px, padding 12px 20px. Khi focus: border chuyển sang #a381ff. Label nằm phía trên màu Pewter (#bbbbbb) ở 12px Archivo 400."

    hero_section:
      vai_trò: "Hero ảnh full-bleed với UI overlay ghép (composited)"

      info: "Chiều cao full-viewport, nền là ảnh editorial điện ảnh (không gradient overlay trong vùng ảnh). Một phần ba bên trái: gradient overlay tối (Void #000000 → trong suốt ở góc 30deg) chứa kicker căn trái (\"_ brand studio\" với underscore prefix màu Mauve Veil), sau đó là display headline 5 dòng màu Paper White ở 72px Archivo 700, line-height 0.98, tiếp theo là Pill Primary Button. Hai phần ba bên phải của hero hiển thị ảnh gốc với các thẻ UI mockup dạng nổi ghép lên trên — các panel bán trong suốt tối với chữ sáng và hình ảnh, gợi ý sản phẩm đang được sử dụng."

    centered_editorial_section:
      vai_trò: "Section tuyên bố nền tối giữa các feature blocks"

      info: "Nền #1e1e1 full-width, nội dung max-width 800px căn giữa ngang, padding dọc rộng rãi (120px trên/dưới). Headline màu Paper White ở 50–72px Archivo 700, line-height chặt 1.05. Body màu Pewter (#bbbbbb) ở 18px Archivo 400, tối đa 2 dòng. Kết thúc bằng Text Link with Arrow màu Iris Spark."

    footer:
      vai_trò: "Footer toàn site với sitemap, newsletter và mạng xã hội"

      info: "Nền tối #1e1e1 với dải gradient mảnh màu Iris Spark (#a381ff) ở cạnh trên làm brand divider. Bố cục bốn cột (Brand + Newsletter | Models | Deployment | Legal) ở max-width 1200px, column headers màu Bone in hoa ở 12px Archivo 600 với letter-spacing 1px. Column links màu Pewter ở 14px Archivo 400, row-gap 10px. Newsletter block có Pill Input + Pill Primary Button xếp chồng. Social icons (LinkedIn, X, YouTube, Discord) dạng nút tròn 36px với nền #a381ff và icon trắng. Copyright màu Graphite (#888888) ở 12px."

    footer_column_header:
      vai_trò: "Section label trong footer sitemap"

      info: "Text in hoa màu Bone (#e5e7e6) ở 12px Archivo 700, letter-spacing 1px, với underline accent 2px Iris Spark (#a381ff) (rộng 8px) ngay bên dưới chữ để đánh dấu đầu section."

    social_icon_button:
      vai_trò: "Nút social tròn trong footer"

      info: "Hình tròn 36px × 36px, nền #a381ff, icon trắng căn giữa, không border, không shadow. Xếp thành hàng ngang với gap 8px."

    dropdown_select:
      vai_trò: "Select dạng native-styled cho form choices"

      info: "Hình pill (radius 99px) với nền #1e1e1, border 1px #383838, label màu Bone ở 14px Archivo 400, và icon chevron nhỏ màu Pewter. Giống hệt Pill Input Field ngoại trừ có dropdown caret."

  do_s_and_don_ts:

    do:
      - "Dùng #a381ff làm accent màu duy nhất cho tất cả filled CTAs, active states và directional arrows"
      - "Đặt tất cả buttons và tags ở border-radius 300px và tất cả inputs ở border-radius 99px — pill shapes là bắt buộc"
      - "Dùng Archivo weight 700 cho display headlines với line-height từ 0.98 đến 1.07 để giữ multi-line headlines xếp chồng chặt chẽ"
      - "Phân lớp chiều sâu qua chuyển tông màu (#1e1e1 → #383838 → #000000) và divider dạng hairline 1px — không bao giờ dùng box-shadows"
      - "Dành #e5e7e6 Bone cho body text và #ffffff Paper White cho headlines và button labels có độ nhấn mạnh cao nhất"
      - "Dùng #725d91 Mauve Veil cho headings và body text trên nền tối khi muốn trang cảm thấy hài hòa về tông với violet accent"
      - "Đặt section vertical padding từ 80px đến 120px và giới hạn editorial text blocks ở max-width 800px"

    don_t:
      - "Không đưa bất kỳ màu nào ngoài họ violet vào — hệ thống một accent duy nhất là bản sắc"
      - "Không thêm box-shadows vào cards hoặc panels; canvas tối khiến chúng vô hình hoặc tạo artifact"
      - "Không dùng góc nhọn (0–4px radius) trên buttons, inputs hoặc tags — hệ thống ưu tiên pill"
      - "Không dùng #ffffff làm body color trên nền tối; dành nó cho headlines và button labels nơi trắng tuyệt đối đọc đúng, dùng #e5e7e6 cho running text"
      - "Không dùng #330066 làm primary action color — nó là deep link/decoration tone, không phải CTA"
      - "Không trộn serif và sans trong cùng một content block; Clarkson chỉ xuất hiện như một editorial accent hiếm hoi, không đi cùng body copy Archivo"
      - "Không để ảnh nằm trong container bo tròn hoặc mask — hero images phải bleed ra rìa viewport"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 0 | Obsidian Canvas | `#1e1e1` | Nền cấp trang cho tất cả non-hero sections |"
    info: "| 1 | Carbon Layer | `#383838` | Elevated card và panel surfaces trên dark canvas |"
    info: "| 2 | Void | `#000000` | Hero gradient overlay và vùng tương phản sâu nhất |"
    info: "| 3 | Iris Spark | `#a381ff` | Chromatic accent surface cho filled buttons và active states |"

  elevation:

    info: "Thiết kế này cố tình tránh drop shadows. Trên canvas #1e1e1, shadows vô hình — chiều sâu được truyền đạt qua phân lớp tông màu (Obsidian Canvas #1e1e1 → Carbon Layer #383838 → Void #000000), khoảng trống âm bản rộng rãi và divider dạng hairline 1px màu #383838. Không thêm box-shadows vào cards hoặc panels; chúng sẽ đọc như artifact, không phải elevation."

  imagery:

    info: "Nhiếp ảnh là phương tiện hình ảnh chính và chiếm ưu thế ở hero. Xử lý là full-bleed, editorial, sản xuất cao — người mẫu đeo tai nghe thương hiệu đặt giữa cánh đồng hoa anh túc, được chiếu sáng bằng tông màu giờ vàng ấm áp tương phản với dark UI lạnh lẽo. Ảnh không bao giờ bị mask hoặc bo tròn; nó bleed ra toàn bộ viewport. Các UI mockup dạng nổi (panel bán trong suốt tối hiển thị ảnh chụp màn hình sản phẩm, model selectors và image galleries) được ghép lên trên ảnh, hợp nhất sản phẩm và đầu ra của nó thành một khung hình duy nhất. Không có illustrations, không 3D renders, không đồ họa trừu tượng. Icon style: nhỏ, đơn sắc, line-weight icons bên trong composited UI panels và footer social links. Vai trò nhiếp ảnh: bằng chứng khả năng đầy khát vọng — hình ảnh là đầu ra sáng tạo mà nền tảng hứa hẹn. Density: hero chiếm ưu thế hình ảnh (≈70% viewport), trong khi các section còn lại chiếm ưu thế chữ, không có ảnh."

  layout:

    info: "Hero điện ảnh full-bleed với khối chữ căn trái ghép trên gradient tối ở một phần ba bên trái và ảnh full-bleed ở hai phần ba bên phải. Trang sau đó chuyển sang các centered editorial sections trên canvas #1e1e1 — single-column max-width ≈ 800px blocks với vertical padding rộng rãi 80–120px giữa chúng. Footer là bố cục bốn cột contained ở max-width 1200px với dải gradient mảnh Iris Spark làm brand separator. Navigation là top bar trong suốt trên hero, trở nên đục khi cuộn. Không có card grids, không masonry, không pricing tables trên các màn hình hiển thị — layout là editorial và tuyến tính. Spacing density là comfortable: các section thở, body text được căn giữa và ngắn, và density chặt duy nhất nằm bên trong composited UI mockup overlays."

  agent_prompt_guide:

  quick_color_reference:
    - "text (primary): #e5e7e6 Bone"
    - "text (highest emphasis): #ffffff Paper White"
    - "text (muted/secondary): #bbbbbb Pewter"
    - "background (page canvas): #1e1e1e Obsidian Canvas"
    - "background (elevated surface): #383838 Carbon Layer"
    - "accent (all interactive signaling): #a381ff Iris Spark"
    - "primary action: không có màu CTA riêng biệt"
    - "outlined action: #776cff Indigo Edge (border 1.5px, fill trong suốt)"
    - "link: #a381ff Iris Spark với mũi tên ở cuối"
    - "border (hairline): #383838 Carbon Layer"

  3_5_example_component_prompts:

    - "**Hero với headline căn trái trên nền ảnh**: Section full-viewport, background image bleeding ra mọi cạnh. Một phần ba bên trái: linear gradient từ #000000 ở 0% đến trong suốt ở 60% (góc 90deg). Kicker text \"_ brand studio\" màu #725d91 ở 16px Archivo 400 với underscore prefix, sau đó headline màu #ffffff ở 72px Archivo 700, line-height 0.98, letter-spacing bình thường, tối đa 5 dòng. Bên dưới headline: filled pill button, nền #a381ff, label trắng \"Get started here\" ở 16px Figtree 600, radius 300px, padding 10px 24px."

    - "**Centered editorial statement section**: Nền #1e1e1e, vertical padding 120px trên và dưới, nội dung max-width 800px căn giữa. Headline màu #ffffff ở 50px Archivo 700, line-height 1.05. Subhead màu #bbbbbb ở 18px Archivo 400, line-height 1.50, tối đa 2 dòng. Kết thúc bằng inline text link \"Work with us →\" màu #a381ff ở 16px Archivo 400."

    - "**Pill email capture input với submit button**: Input field: nền #1e1e1e, border 1px màu #383838, border-radius 99px, padding 12px 20px, placeholder text \"Email*\" màu #e5e7e6 ở 14px Archivo 400, focus border chuyển thành #a381ff. Bên dưới, filled pill button: nền #a381ff, label \"Sign up\" màu #ffffff ở 16px Figtree 600, radius 300px, padding 10px 24px."

    - "**Footer sitemap column**: Nền #1e1e1e. Column header màu #e5e7e6 ở 12px Archivo 700, in hoa, letter-spacing 1px, với underline accent 2px × 8px #a381ff ngay bên dưới. Links xếp dọc màu #bbbbbb ở 14px Archivo 400, row-gap 10px, hover state chuyển màu sang #a381ff."

    - "**Social icon row trong footer**: Bốn nút tròn 36px × 36px trong một hàng ngang với gap 8px. Mỗi nút: nền #a381ff, white line-icon căn giữa (LinkedIn, X, YouTube, Discord), không border, không shadow. Hàng nằm căn phải trong footer ở max-width 1200px."

  similar_brands:

    - "**Runway** — Cùng layout editorial canvas tối với ảnh điện ảnh full-bleed và một accent rực rỡ duy nhất cho CTAs"
    - "**Midjourney** — Dark-mode interface với chrome tối giản, hệ thống accent nghiêng về violet, và hero ưu tiên hình ảnh nơi đầu ra được tạo ra CHÍNH LÀ trang"
    - "**Pika** — Canvas gần đen với một màu button duy nhất, pill CTAs, và editorial display headlines xếp chồng chặt chẽ"
    - "**Linear** — Dark UI với một accent color, nhịp điệu spacing rộng rãi, và pill inputs và buttons — dù Linear nghiêng về xanh lam, DNA cấu trúc là giống hệt"
    - "**Anthropic** — Dark editorial layout với centered statement sections, hero full-bleed, và một accent ấm duy nhất trên nền gần đen"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-iris-spark: #a381ff;
          --color-indigo-edge: #776cff;
          --color-mauve-veil: #725d91;
          --color-lilac-ash: #b6a9c6;
          --color-deep-amethyst: #330066;
          --color-obsidian-canvas: #1e1e1e;
          --color-carbon-layer: #383838;
          --color-void: #000000;
          --color-bone: #e5e7e6;
          --color-paper-white: #ffffff;
          --color-pewter: #bbbbbb;
          --color-graphite: #888888;
        
          /* Typography — Font Families */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clarkson: 'Clarkson', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.56;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.29;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.07;
          --text-display-lg: 50px;
          --leading-display-lg: 1.05;
          --text-display: 72px;
          --leading-display: 0.98;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-58: 58px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 15px;
          --radius-full: 99px;
          --radius-full-2: 300px;
          --radius-full-3: 700px;
        
          /* Named Radii */
          --radius-tags: 300px;
          --radius-cards: 8px;
          --radius-links: 11px;
          --radius-inputs: 99px;
          --radius-buttons: 300px;
          --radius-decorative: 700px;
        
          /* Surfaces */
          --surface-obsidian-canvas: #1e1e1;
          --surface-carbon-layer: #383838;
          --surface-void: #000000;
          --surface-iris-spark: #a381ff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-iris-spark: #a381ff;
          --color-indigo-edge: #776cff;
          --color-mauve-veil: #725d91;
          --color-lilac-ash: #b6a9c6;
          --color-deep-amethyst: #330066;
          --color-obsidian-canvas: #1e1e1e;
          --color-carbon-layer: #383838;
          --color-void: #000000;
          --color-bone: #e5e7e6;
          --color-paper-white: #ffffff;
          --color-pewter: #bbbbbb;
          --color-graphite: #888888;
        
          /* Typography */
          --font-archivo: 'Archivo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clarkson: 'Clarkson', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.56;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.29;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.07;
          --text-display-lg: 50px;
          --leading-display-lg: 1.05;
          --text-display: 72px;
          --leading-display: 0.98;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-58: 58px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-xl: 15px;
          --radius-full: 99px;
          --radius-full-2: 300px;
          --radius-full-3: 700px;
        }