podia___style_reference:
  info: "> Buổi chiều ấm áp với giấy thủ công. Những khối blob hữu cơ trôi nổi trên nền canvas trắng mờ với tông màu terracotta, lavender và xanh bụi, bao quanh các headline hình học nén chặt và các thẻ sản phẩm màu rộng rãi."

  theme: "light"

  info: "Podia là một buổi chiều ấm áp với giấy thủ công: một canvas sáng rải rác các khối blob hữu cơ màu terracotta, lavender và xanh bụi, tạo khung cho giao diện marketplace thân thiện với người sáng tạo. Font StabilGrotesk tùy chỉnh được kéo chặt với tracking âm ở kích thước display, tạo cho headline cảm giác nén, gần như cắt bằng tay — củng cố phép ẩn dụ studio-xưởng thủ công. Màu sắc được triển khai như một vùng chức năng: ba vùng sản phẩm màu sắc (xanh da trời, terracotta, lavender) báo hiệu các khả năng nền tảng riêng biệt, trong khi màu gần đen pha tím đảm nhận mọi hành động chính. Bề mặt mờ và phẳng — không gradient, không glow, không kính — để bảng màu pastel trầm làm công việc tạo cảm xúc. Các component rộng rãi và bo tròn: bán kính 24–56px, pill buttons, thẻ màu, và khoảng thở section rộng 36–80px. Hệ thống mang cảm giác như bàn làm việc của một người thợ thủ công lặng lẽ, không phải dashboard doanh nghiệp."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#06040e` | `--color-ink` | Văn bản chính, nền CTA chính, nền nav, heading copy — gần đen pha tím, kết nối các thành phần tối với bảng màu thương hiệu |"
    info: "| Deep Teal | `#10242f` | `--color-deep-teal` | Heading phụ, nhấn mạnh body, biến thể bề mặt tối — đồng dẫn với Ink cho hệ thống phân cấp typography tương phản cao |"
    info: "| Graphite | `#452623` | `--color-graphite` | Văn bản cấp ba và biến thể bề mặt tối — nâu đen ấm làm mềm thang typography bên dưới hai màu chính |"
    info: "| Fog | `#f5f5f5` | `--color-fog` | Canvas trang, nền section — trắng ấm mang lại cho toàn bộ giao diện chất lượng giấy ngập nắng |"
    info: "| Paper | `#ffffff` | `--color-paper` | Bề mặt thẻ, panel nâng cao, văn bản button trên nền tối — trắng tinh dành riêng cho bề mặt nội dung nằm trên canvas Fog |"
    info: "| Mist | `#e1edf2` | `--color-mist` | Divider mềm, viền input, viền ghost button, tô màu bề mặt phụ — xám xanh nhạt mát tạo sự phân cách nhẹ nhàng |"
    info: "| Terracotta | `#e39a4d` | `--color-terracotta` | Điểm nhấn thương hiệu, nền thẻ tính năng, hình blob trang trí, highlight ấm — màu bão hòa nhất trong hệ thống, dùng tiết kiệm như dấu câu năng động |"
    info: "| Lavender | `#cbb0eb` | `--color-lavender` | Điểm nhấn thương hiệu, nền thẻ tính năng, hình blob trang trí, tô highlight mềm — tím pastel bụi làm mềm bảng màu |"
    info: "| Plum | `#1f1738` | `--color-plum` | Bề mặt nhấn tối, biến thể thẻ tính năng đậm, viền hành động outline — tím đậm bão hòa neo lavender vào thứ gì đó dễ đọc |"
    info: "| Sky | `#a5c8d8` | `--color-sky` | Màu hành động xám cho filled buttons, trạng thái navigation được chọn, và các khoảnh khắc chuyển đổi tập trung |"
    info: "| Cream | `#f6ddc4` | `--color-cream` | Tông màu ấm nhẹ, viền hành động outline, tô trang trí — trắng kem pha đào làm ấm bảng màu mà không thêm độ bão hòa |"

  tokens___typography:

    stabilgrotesk___hệ_thống_type_đơn_font_chở_mọi_thứ_từ_micro_labels_đến_display_headlines__font_geometric_grotesque_tùy_chỉnh_với_apertures_hẹp_và_letterform_nén_ở_weight_700_tạo_cho_kích_thước_display_chất_lượng_cắt_tay__body_weight_400_dễ_đọc_bất_thường_đối_với_một_font_gốc_display__tracking_âm__0_03em_ở_display___0_02em_ở_heading_là_đặc_trưng___các_headline_có_cảm_giác_được_cắt_từ_một_dải_duy_nhất__uppercase_labels_với_tracking_0_1em_tạo_nhịp_điệu_eyebrow_nhẹ_nhàng_____font_stabilgrotesk:
      - "**Thay thế:** Manrope hoặc Plus Jakarta Sans"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 11px, 12px, 16px, 18px, 20px, 22px, 24px, 36px, 40px, 60px"
      - "**Line height:** 1.0, 1.09, 1.1, 1.4, 1.5"
      - "**Letter spacing:** -0.03em ở 60px, -0.02em ở 24px+, +0.1em ở uppercase labels (11–12px)"
      - "**Vai trò:** Hệ thống type đơn font chở mọi thứ từ micro-labels đến display headlines. Font geometric grotesque tùy chỉnh với apertures hẹp và letterform nén ở weight 700 tạo cho kích thước display chất lượng cắt tay; body weight 400 dễ đọc bất thường đối với một font gốc display. Tracking âm (-0.03em ở display, -0.02em ở heading) là đặc trưng — các headline có cảm giác được cắt từ một dải duy nhất. Uppercase labels với tracking 0.1em tạo nhịp điệu eyebrow nhẹ nhàng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading-sm | 20px | 1.4 | — | `--text-subheading-sm` |"
      info: "| subheading | 22px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.1 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.09 | — | `--text-heading-lg` |"
      info: "| display | 60px | 1 | -1.8px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| badges | 16px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| general | 24px |"
      info: "| featureCards | 56px |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi hero và section"

      info: "Nền Ink (#06040e), văn bản Paper (#ffffff) ở 16px weight 500, radius 8px, padding dọc 16px / ngang 24px. Không viền, không shadow. Không dùng uppercase — nó nằm như một pill tối tĩnh lặng trên nền canvas Fog. Sự tương phản giữa nền gần đen pha tím và nền trắng ấm mang lại cho các button này cảm giác mực-in-trên-giấy."

    outlined_accent_button:
      vai_trò: "Hành động phụ gắn với màu sản phẩm"

      info: "Nền trong suốt với viền 2px màu accent sản phẩm (Terracotta, Lavender hoặc Sky), văn bản màu biến thể tối tương ứng (Plum, Deep Teal) ở 16px weight 500, radius 8px, padding 16px/24px. Dùng khi một hành động thuộc về một vùng sản phẩm cụ thể."

    ghost_text_button:
      vai_trò: "Liên kết navigation, hành động nội dòng, pattern 'Tìm hiểu thêm'"

      info: "Không nền, không viền. Văn bản màu Ink (#06040e) hoặc Deep Teal (#10242f) ở 16px weight 500, thường có mũi tên theo sau. Padding dọc 8px, padding ngang 0. Duy trì target chạm tối thiểu thông qua line-height rộng rãi."

    product_feature_card:
      vai_trò: "Grid ba cột giới thiệu khả năng nền tảng (Cửa hàng trực tuyến, Website, Email Marketing)"

      info: "Thẻ bo tròn lớn với radius 56px, padding trong 36px, tô màu sản phẩm (Sky, Terracotta hoặc Lavender). Headline ở 24px weight 700 màu Ink, body ở 16px weight 400 màu Graphite. Không viền, không shadow — màu nền CHÍNH LÀ độ cao. Thẻ có chiều cao rộng rãi và hơi chồng/nghiêng trong bố cục hero, phá vỡ grid để tạo năng lượng thị giác."

    creator_story_card:
      vai_trò: "Bằng chứng xã hội — lời chứng thực từ người sáng tạo cá nhân"

      info: "Nền Paper (#ffffff), radius 24px, không shadow. Phần trên là ảnh chân dung vuông với radius trên 24px. Eyebrow label 'CREATOR STORIES' ở 11px weight 500 uppercase với tracking 0.1em, màu Ink. Liên kết tên ở 18px weight 700 màu Ink với mũi tên theo sau. Body ở 14–16px weight 400 màu Deep Teal. Padding trong 24px bên dưới ảnh."

    feature_split_section:
      vai_trờ: "Khối chi tiết sản phẩm — minh họa lớn một bên, copy bên kia"

      bố_cục_hai_cột: "panel minh họa bên trái (hoặc phải) với nền màu sắc lớn (Terracotta, Sky, Lavender) và hình dạng hình học nổi, cột copy bên phải. Eyebrow section ở 11px uppercase + 0.1em tracking màu Ink, heading ở 36px weight 700 màu Ink, body ở 18px weight 400 màu Deep Teal, CTA button bên dưới. Padding section dọc 80px, container max-width 1200px."

    decorative_organic_shape:
      vai_trò: "Blob nổi tạo bầu không khí trong nền hero và feature sections"

      info: "Hình dạng bo tròn bất quy tắc màu Terracotta (#e39a4d), Sky (#a5c8d8), Lavender (#cbb0eb) và Cream (#f6ddc4). Không viền, không shadow. Kích thước từ ~60px đến ~200px. Định vị tuyệt đối phía sau nội dung ở độ mờ 0.6–0.9. Đây là yếu tố thị giác đặc trưng — nó biến một bố cục SaaS sạch sẽ thành thứ gì đó có cảm giác cắt tay và ấm áp."

    top_navigation_bar:
      vai_trò: "Navigation chính của trang"

      info: "Nền Fog (#f5f5f5) hoặc trong suốt, không viền. Logo 'podia' wordmark bên trái ở 22px weight 700 màu Ink. Liên kết nav trung tâm ở 16px weight 500 màu Ink, gap ngang 40px, padding dọc 10px. Bên phải: liên kết văn bản 'Login' + Primary CTA Button ('Sign up free'). Tổng logo-link-button kéo dài ~1200px max-width."

    eyebrow_label:
      vai_trò: "Đánh dấu danh mục section phía trên heading"

      info: "Văn bản 11–12px weight 500 uppercase, letter-spacing 0.1em, màu Ink (#06040e). Không nền, không viền, không dấu câu. Hoạt động như biển chỉ dẫn lặng lẽ cho heading bên dưới. Ví dụ: 'CREATOR STORIES', 'WEBSITE', 'ONLINE STORE'."

    hero_headline_block:
      vai_trò: "Thông điệp chính above-the-fold"

      info: "Bố cục căn giữa. H1 ở 60px weight 700, line-height 1.0, letter-spacing -0.03em, màu Ink. Subhead ở 18px weight 400, line-height 1.5, màu Deep Teal (#10242f), max-width ~600px căn giữa. Primary CTA button căn giữa bên dưới. Các hình blob hữu cơ nổi được định vị ở bốn góc của section để tạo khung hình."

    pill_badge___tag:
      vai_trò: "Thẻ danh mục sản phẩm, chip tương tác nhỏ"

      info: "Radius 16px (gần như pill), padding dọc 8px / ngang 16px. Nền Mist (#e1edf2) hoặc accent pha màu. Văn bản ở 12px weight 500 màu Ink hoặc Deep Teal. Không viền."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #06040 (Ink) làm nền tối duy nhất cho mọi CTA chính — tính nhất quán là điểm mấu chốt; màu gần đen pha tím tự nó đã là tín hiệu thương hiệu"
      - "Áp dụng ba màu sản phẩm (Sky, Terracotta, Lavender) làm nền thẻ đầy đủ khi đại diện cho Cửa hàng trực tuyến, Website và Email Marketing — chúng tạo thành bộ ba liên kết cố định"
      - "Đặt display headlines ở 60px/700 với letter-spacing -0.03em — tracking chặt trên geometric grotesque là đặc trưng"
      - "Dùng uppercase eyebrow labels ở 11px với tracking 0.1em trước mọi heading section — chúng tạo nhịp điệu section nhất quán"
      - "Áp dụng radius 56px cho ba thẻ tính năng sản phẩm và 24px cho thẻ nội dung tiêu chuẩn — khoảng cách radius lớn là có chủ đích và tạo phân cấp thị giác"
      - "Thả các hình blob hữu cơ màu Terracotta, Sky, Lavender và Cream phía sau hero và feature sections ở độ mờ 0.6–0.9 — các hình khối là yếu tố đặc biệt nhất của hệ thống"
      - "Dùng padding dọc 80px cho mọi section chính và padding trong 36px cho thẻ — khoảng thở rộng rãi là cốt lõi của cảm giác ấm áp, không vội vã"

    không_nên_làm:
      - "Không thêm gradient, hiệu ứng glow hoặc glassmorphism — hệ thống cố tình mờ và phẳng; bảng màu pastel làm công việc tạo cảm xúc mà gradient thường làm"
      - "Không dùng xanh (#a5c8d8) làm màu thông tin/ngữ nghĩa — nó là accent thương hiệu, không phải chỉ báo trạng thái. Dành màu ngữ nghĩa cho trạng thái thực tế"
      - "Không dùng #000000 thuần cho văn bản hoặc button — tông tím trong #06040 là thứ kết nối các thành phần tối với bảng màu thương hiệu"
      - "Không đặt body text lớn hơn 18px hoặc nhỏ hơn 16px — thang type nhảy trực tiếp từ 18 lên 24 cho subheadings; khoảng body 16–18 là có chủ đích"
      - "Không áp shadow cho thẻ — độ cao đến từ màu nền và radius, không phải từ drop shadows. Thêm shadow sẽ phá vỡ phép ẩn dụ giấy thủ công"
      - "Không dùng các hình blob hữu cơ ở độ mờ đầy đủ hoặc làm yếu tố tiền cảnh — chúng là bầu không khí nền ở độ mờ 0.6–0.9, không bao giờ tương tác"
      - "Không trộn ba màu sản phẩm trên một thẻ hoặc button — mỗi vùng sản phẩm sở hữu một màu độc quyền"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f5f5f5` | Nền trang, trường section bên ngoài |"
    info: "| 1 | Card | `#ffffff` | Thẻ nội dung, panel nâng cao, bề mặt form |"
    info: "| 2 | Accent Surface | `#e1edf2` | Panel tô màu nhẹ, nền dải xen kẽ, nền ghost button |"
    info: "| 3 | Product Card Sky | `#a5c8d8` | Thẻ tính năng màu đại diện cho sản phẩm Cửa hàng trực tuyến |"
    info: "| 4 | Product Card Terracotta | `#e39a4d` | Thẻ tính năng màu đại diện cho sản phẩm Website |"
    info: "| 5 | Product Card Lavender | `#cbb0eb` | Thẻ tính năng màu đại diện cho sản phẩm Email Marketing |"

  elevation:

    info: "Podia không dùng shadows. Độ cao được thể hiện thông qua tô màu bề mặt (thẻ sản phẩm Sky/Terracotta/Lavender nằm cao hơn thẻ trắng về mặt thị giác, thẻ trắng nằm cao hơn canvas Fog) và thông qua border-radius rộng rãi. Một viền mảnh duy nhất màu Mist (#e1edf2) ở 1px là bộ phân cách cấu trúc duy nhất được sử dụng."

  imagery:

    info: "Ảnh chụp được dùng tiết kiệm và chỉ trong bối cảnh bằng chứng xã hội — ảnh chân dung người sáng tạo trong Creator Story cards, cắt vuông chặt chẽ không có bối cảnh lối sống hoặc dàn dựng môi trường. Bầu không khí thị giác được mang bởi minh họa hình học phẳng: hình chữ nhật bo tròn lớn đại diện cho bề mặt sản phẩm, hình blob hữu cơ nhỏ rải rác làm trang trí nổi, và dấu tam giác gần mũi tên CTA. Không có 3D renders, không có ảnh chụp màn hình sản phẩm trong hero, và không có stock photography. Giao diện về cơ bản được dẫn dắt bởi icon và minh họa, với thẩm mỹ cắt giấy/bàn thủ công nơi các hình dạng có cảm giác được cắt từ giấy màu."

  layout:

    info: "Mô hình page full-width trên canvas Fog (#f5f5f5), với nội dung giới hạn trong container ~1200px max-width. Hero là một cột đơn căn giữa: headline, subhead, CTA, sau đó là bố cục thẻ sản phẩm ba cột chồng lên nhau. Các section chảy như các dải Fog và trắng xen kẽ với padding dọc 80px giữa chúng. Chi tiết tính năng dùng split 2 cột (minh họa-trái, copy-phải) xen kẽ bên xuống trang. Creator stories dùng grid 3 cột bằng nhau. Navigation là một thanh ngang đơn — không sticky behavior, không sidebar, không mega-menu. Nhịp điệu tổng thể rộng rãi và không vội vã: mỗi section là thế giới riêng với khoảng thở rộng rãi, không bao giờ dày đặc thông tin."

  color_system__product_triad:

    info: "Ba màu sản phẩm (Sky #a5c8d8, Terracotta #e39a4d, Lavender #cbb0eb) không phải là bảng màu accent chung — chúng là bộ ba liên kết cố định gắn với ba sản phẩm cốt lõi của Podia: Cửa hàng trực tuyến, Website và Email Marketing. Khi minh họa hoặc đại diện cho các sản phẩm này ở bất kỳ đâu trong sản phẩm, chỉ dùng màu được chỉ định. Mỗi màu cũng có biến thể tối: Plum (#1f1738) cho Lavender, Graphite (#452623) cho Terracotta, và Deep Teal (#10242f) cho Sky. Các biến thể tối mang văn bản và outlined buttons khi thẻ sản phẩm ở tông màu sáng."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "Văn bản: #06040e (chính), #10242f (phụ)"
    - "Nền: #f5f5f5 (canvas), #ffffff (card)"
    - "Viền: #e1edf2 (mảnh), #1f1738 (hành động outline)"
    - "Accent: #e39a4d (terracotta), #cbb0eb (lavender), #a5c8d8 (sky)"
    - "Hành động chính: #10242f (filled action)"

    ví_dụ_component_prompts:

    - "Tạo một Primary Action Button: nền #10242f, văn bản #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính."

    - "Tạo một product feature card: tô đầy #e39a4d (Terracotta), border-radius 56px, padding trong 36px. Headline ở 24px weight 700 màu #06040e, body ở 16px weight 400 màu #452623. Không viền, không shadow. Bao gồm một minh họa hình học nhỏ (hình chữ nhật bo tròn + dấu tam giác) ở phần dưới."

    - "Tạo một creator story card: nền #ffffff, radius 24px, không shadow. Nửa trên là vùng ảnh chân dung vuông (placeholder, chỉ radius trên 24px). Bên dưới: eyebrow 11px uppercase 'CREATOR STORIES' màu #06040e với tracking 0.1em, liên kết tên 18px màu #06040e weight 700 với mũi tên theo sau, body 16px màu #10242f. Padding 24px bên dưới ảnh."

  similar_brands:

    - "**Gumroad** — Cùng đối tượng creator-economy và thẩm mỹ tối giản ấm áp, dù Podia dùng nhiều vùng màu sản phẩm hơn trong khi Gumroad chủ yếu là hồng đơn sắc"
    - "**Teachable** — Cùng thị trường course-platform và bố cục light-mode với hero căn giữa, nhưng trang trí blob giấy thủ công và tracking type chặt hơn của Podia mang tính thủ công rõ rệt hơn"
    - "**Kajabi** — Cùng định vị nền tảng creator all-in-one và canvas sáng, nhưng Kajabi nghiêng về xanh doanh nghiệp trong khi bộ ba terracotta-lavender-sky của Podia ấm áp và thủ công hơn rõ rệt"
    - "**Carrd** — Cùng thẩm mỹ light, single-page-builder với radius rộng rãi và pill buttons, dù Carrd hoàn toàn đơn sắc trong khi Podia triển khai bộ ba màu sản phẩm"
    - "**ConvertKit** — Cùng mục tiêu solo-creator với giao diện light-mode, nhưng hình blob hữu cơ và bảng màu ấm hơn của Podia có cảm giác như studio thủ công hơn là cảm giác editorial sạch sẽ của ConvertKit"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #06040e;
          --color-deep-teal: #10242f;
          --color-graphite: #452623;
          --color-fog: #f5f5f5;
          --color-paper: #ffffff;
          --color-mist: #e1edf2;
          --color-terracotta: #e39a4d;
          --color-lavender: #cbb0eb;
          --color-plum: #1f1738;
          --color-sky: #a5c8d8;
          --color-cream: #f6ddc4;
        
          /* Typography — Font Families */
          --font-stabilgrotesk: 'StabilGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading-sm: 20px;
          --leading-subheading-sm: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.1;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.09;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-128: 128px;
          --spacing-144: 144px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 36px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 56px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-badges: 16px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-general: 24px;
          --radius-featurecards: 56px;
        
          /* Surfaces */
          --surface-canvas: #f5f5f5;
          --surface-card: #ffffff;
          --surface-accent-surface: #e1edf2;
          --surface-product-card-sky: #a5c8d8;
          --surface-product-card-terracotta: #e39a4d;
          --surface-product-card-lavender: #cbb0eb;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #06040e;
          --color-deep-teal: #10242f;
          --color-graphite: #452623;
          --color-fog: #f5f5f5;
          --color-paper: #ffffff;
          --color-mist: #e1edf2;
          --color-terracotta: #e39a4d;
          --color-lavender: #cbb0eb;
          --color-plum: #1f1738;
          --color-sky: #a5c8d8;
          --color-cream: #f6ddc4;
        
          /* Typography */
          --font-stabilgrotesk: 'StabilGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading-sm: 20px;
          --leading-subheading-sm: 1.4;
          --text-subheading: 22px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: -0.48px;
          --text-heading: 36px;
          --leading-heading: 1.1;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.09;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -1.8px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-128: 128px;
          --spacing-144: 144px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 56px;
        }