hnst_studio___style_reference:
  info: "> atelier đất với gỉ sắt trên vải lanh — một gallery thời trang chậm nơi một điểm nhấn màu cam cháy duy nhất sưởi ấm nội thất kem và than củi vốn mang phong cách tu viện"

  theme: "light"

  info: "HNST Studio nói bằng ngôn ngữ editorial ấm áp, mộc mạc: canvas trắng xương pha kem lụa thô, một điểm nhấn gỉ sắt neo mọi khoảnh khắc tương tác, và typography uppercase kiểu gallery giúp nhiếp ảnh có không gian thở. Trang web xử lý ảnh thời trang full-bleed như bề mặt chính — text và chrome siêu mảnh, được đặt như bảng chú thích trong bảo tàng xung quanh tác phẩm thị giác. Hai họ chữ phân chia công việc rõ ràng: Raleway đảm nhận UI, navigation, và body copy với tỷ lệ humanist, trong khi Poppins xử lý display heading với letter-spacing cực rộng, biến các nhãn section như 'TRENDING' thành bảng chỉ dẫn in ấn trong gallery. Các component được tinh giản đến mức tối thiểu — border mảnh, badge tông cát mềm, mực than cho hành động, không shadow, không gradient — để điểm nhấn gỉ sắt có trọng lượng editorial trên nền palette trung tính."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Rust Hearth | `#892500` | `--color-rust-hearth` | Logo thương hiệu, trạng thái navigation active, gạch chân section, dấu câu màu sắc duy nhất trong giao diện — mang toàn bộ trọng lượng nhận diện ở bất cứ đâu nó xuất hiện |"
    info: "| Blush Whisper | `#ea9195` | `--color-blush-whisper` | Điểm nhấn màu phụ cho hover state, tag mềm, và các yếu tố trang trí đi kèm — không bao giờ đứng một mình, luôn hỗ trợ Rust Hearth |"
    info: "| Linen | `#ffffff` | `--color-linen` | Trạng thái form trung tính, badge text, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ kín đáo. Không nâng cấp nó thành màu CTA chính |"
    info: "| Raw Silk | `#f9f6f2` | `--color-raw-silk` | Nền trang ấm áp, thay thế cho trắng tinh khiết vô trùng — mang lại cảm giác xúc giác, sợi tự nhiên cho trang web |"
    info: "| Sand Plaster | `#eee5d9` | `--color-sand-plaster` | Nền card, badge fill, bề mặt nâng nhẹ — tầng ấm thứ cấp giúp phân biệt container với canvas trang |"
    info: "| Charcoal Ink | `#0e0e0e` | `--color-charcoal-ink` | Text chính, navigation text, action button đặc, dark hero overlay — gần đen đọc mềm hơn đen thuần trên nền trung tính ấm |"
    info: "| Stone | `#868686` | `--color-stone` | Xám trung cho hairline border, divider, metadata phụ, khung UI không hoạt động — structural neutral chủ đạo |"
    info: "| Ash | `#b7b7b7` | `--color-ash` | Border nhạt hơn, helper text mờ, disabled state, list separator nhẹ |"
    info: "| Frost | `#d7d7d7` | `--color-frost` | Divider line mờ nhất trên link, separator gần như vô hình |"

  tokens___typography:

    raleway___primary_ui_and_body_typeface___humanist_sans_với_terminal_thanh_lịch__dùng_cho_navigation__body_copy__link__button__và_footer__weight_600_xử_lý_button_label_và_nav_item__400_mang_running_text_với_line_height_1_67_1_79_rộng_rãi_cho_khả_năng_đọc_editorial____font_raleway:
      - "**Thay thế:** Montserrat, Lato, Nunito Sans"
      - "**Weights:** 400, 600, 700"
      - "**Kích thước:** 12px, 13px, 14px, 15px, 16px"
      - "**Line height:** 1.67 (body), 1.70, 1.20 (tight UI)"
      - "**Letter spacing:** 0.1920em, 0.2310em"
      - "**Vai trò:** Primary UI and body typeface — humanist sans với terminal thanh lịch. Dùng cho navigation, body copy, link, button, và footer. Weight 600 xử lý button label và nav item; 400 mang running text với line-height 1.67–1.79 rộng rãi cho khả năng đọc editorial"

    poppins___display_and_section_heading_typeface___geometric_sans_dùng_cho_section_label_cỡ_hero_như__trending__ở_62px__letter_spacing_cực_rộng_0_154em_ở_display__0_091em_ở_20px_biến_headline_thành_bảng_chỉ_dẫn_in_ấn_trong_gallery___khoảnh_khắc_typographic_đặc_trưng_của_thương_hiệu____font_poppins:
      - "**Thay thế:** Montserrat, Outfit, Space Grotesk"
      - "**Weights:** 500, 600, 700"
      - "**Kích thước:** 11px, 13px, 16px, 20px, 62px"
      - "**Line height:** 1.15 (display), 1.20, 1.25, 2.27 (small caps labels)"
      - "**Letter spacing:** 0.154em ở 62px, 0.091em ở 20px, 0.065em ở 16px, 0.050em ở 11–13px"
      - "**Vai trò:** Display and section-heading typeface — geometric sans dùng cho section label cỡ hero như 'TRENDING' ở 62px. Letter-spacing cực rộng (0.154em ở display, 0.091em ở 20px) biến headline thành bảng chỉ dẫn in ấn trong gallery — khoảnh khắc typographic đặc trưng của thương hiệu"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.25 | 1.69px | `--text-caption` |"
      info: "| heading-sm | 20px | 1.2 | 1.82px | `--text-heading-sm` |"
      info: "| display | 62px | 1.15 | 9.55px | `--text-display` |"

  tokens___spacing___shapes:

    density: "thoải mái"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 23 | 23px | `--spacing-23` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 75 | 75px | `--spacing-75` |"
      info: "| 114 | 114px | `--spacing-114` |"
      info: "| 170 | 170px | `--spacing-170` |"
      info: "| 185 | 185px | `--spacing-185` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| pills | 10px |"
      info: "| badges | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 75-170px"
      - "**Card padding:** 42px"
      - "**Element gap:** 15px"

  components:

    top_navigation_bar:
      vai_trò: "Header chính của trang với brand mark và section link"

      info: "Thanh full-bleed, padding dọc 10–15px, không shadow. Wordmark 'hnst' chữ thường màu Rust Hearth (#892500) ở ~32px Raleway 700 căn trái. Bên phải: nav link uppercase (HOME, SUSTAINABILITY, PRESS, SHOP) bằng Raleway 600 ở 12–13px với letter-spacing 0.192–0.231em và màu Stone (#868686), gap ngang 15px. Trạng thái active chuyển text sang Rust Hearth. Border-bottom hairline Stone mảnh ngăn cách với nội dung."

    hero_carousel:
      vai_trò: "Ảnh lifestyle full-viewport mở đầu homepage"

      info: "Ảnh full-bleed rộng 100vw, cao ~80vh, không radius. Nút mũi tên trái/phải là chevron mảnh màu trắng bán trong suốt, vùng chạm 48px, căn giữa theo chiều dọc. Pagination bốn chấm căn giữa dưới cùng màu trắng, chấm active full opacity. Không có headline overlay — bức ảnh tự truyền tải thông điệp."

    section_display_heading:
      vai_trò: "Tiêu đề kiểu nhãn gallery cho các section nội dung"

      info: "Poppins 700 ở 62px, letter-spacing 9.55px (0.154em), line-height 1.15, màu Charcoal Ink (#0e0e0e). Căn giữa hoặc căn trái tùy ngữ cảnh. Đây là khoảnh khắc type đặc trưng — tracking cực rộng khiến 'TRENDING' đọc như một nhãn tường in ấn, không phải heading web."

    filled_action_button:
      vai_trò: "CTA chính màu Charcoal Ink"

      info: "Nền Charcoal Ink (#0e0e0e), text Linen (#ffffff), Raleway 600 ở 13–14px, uppercase với letter-spacing 0.192em. Padding ngang 15px, dọc 42px đến 45px trên các biến thể rộng hơn. Zero radius — góc sắc củng cố thẩm mỹ editorial gallery."

    ghost_navigation_button:
      vai_trò: "Link phụ hoặc không hoạt động được style dưới dạng text uppercase không viền"

      info: "Không nền hoặc border. Raleway 600 ở 12–13px, uppercase, letter-spacing 0.192em, màu Stone (#868686). Hover chuyển sang Charcoal Ink (#0e0e0e). Dùng trong nav bar và cụm link footer."

    editorial_image_block:
      vai_trò: "Ảnh sản phẩm hoặc câu chuyện lớn trong section nội dung"

      info: "Ảnh full-width hoặc cột phải với zero radius, không border, không shadow. Nổi ở cạnh container hoặc căn giữa. Nằm trên canvas Raw Silk (#f9f6f2) hoặc Linen (#ffffff). Bản thân ảnh là component — không có frame hoặc caption chrome xung quanh."

    sand_badge:
      vai_trò: "Tag tông ấm mềm cho metadata hoặc trạng thái"

      info: "Nền Sand Plaster (#eee5d9), không border, zero radius. Raleway 600 ở 12–13px, text Charcoal Ink, padding ngang 8–10px, dọc 4–6px. Dùng cho label ngữ cảnh nhỏ, timestamp, và category marker."

    info_icon_button:
      vai_trò: "Nút tròn nổi nhỏ cho hành động phụ"

      info: "Fill Charcoal Ink (#0e0e0e), glyph 'i' chữ thường màu trắng ở 16px, hình vuông 40×40px với zero radius. Nút utility cố định (toggle info panel, xem trước giỏ hàng). Độ tương phản cao trên canvas ấm."

    carousel_arrow:
      vai_trò: "Điều khiển slide cho hero và product carousel"

      info: "Icon chevron tối giản, 24px, trắng ở độ mờ 70% trên ảnh, Charcoal Ink trên nền sáng. Không có hình nền — mũi tên nổi trực tiếp trên ảnh. Vùng chạm ẩn 48px cho touch."

    section_divider_band:
      vai_trò: "Dải ảnh full-bleed ngăn cách các section nội dung"

      info: "Rộng 100vw, cao ~20–30vh, zero radius, ảnh edge-to-edge. Hoạt động như một \"miếng rửa vòm miệng\" thị giác giữa các khối text. Ví dụ: ảnh nhà máy dệt công nghiệp và ảnh cận cảnh da/chất liệu xuất hiện dưới dạng các dải ngang giữa các section editorial."

    list_item_with_marker:
      vai_trò: "Danh sách có bullet hoặc số trong copy editorial"

      info: "Raleway 400 ở 14–15px, line-height 1.70, màu Charcoal Ink. Gap ngang 9px giữa marker và text. Left-border mảnh Stone (#868686) trên container list ở 1px. Không có glyph bullet tùy chỉnh — dùng marker mặc định hoặc chấm nhỏ màu gỉ sắt khi được brand-style."

    pill_filter_tag:
      vai_trò: "Tag tương tác bo tròn để lọc danh sách sản phẩm"

      info: "Component bo tròn duy nhất trong hệ thống với radius 10px. Nền Sand Plaster (#eee5d9) hoặc Linen (#ffffff) với border 1px Stone (#868686). Raleway 600 ở 12–13px, padding ngang 10–15px, dọc 4–6px. Trạng thái active: border và text Rust Hearth."

    footer_link_cluster:
      vai_trò: "Cụm link có tổ chức trong footer trang"

      info: "Bố cục nhiều cột, Raleway 400 ở 14px cho link, màu Stone, gap dọc 15px. Column header bằng Raleway 600 uppercase ở 12px với letter-spacing 0.192em. Top-border Stone mảnh ngăn cách footer với nội dung. Không đổi màu nền — footer nằm trên canvas Raw Silk."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Rust Hearth (#892500) cho brand wordmark, nav state active, và section underline — để nó mang toàn bộ trọng lượng nhận diện như điểm nhấn màu sắc duy nhất"
      - "Áp dụng Poppins 700 ở 62px với letter-spacing 0.154em cho tất cả display section heading để duy trì signature gallery-label"
      - "Giữ tất cả góc component sắc (0px radius) ngoại trừ pill filter tag dùng 10px — ngoại lệ duy nhất này có chủ đích"
      - "Đặt body text ở Raleway 400, 15px, line-height 1.70 để đọc editorial thoải mái trên canvas Raw Silk ấm"
      - "Dùng Sand Plaster (#eee5d9) cho badge và tag fill để tạo container tông ấm mềm, cảm giác như giấy thủ công"
      - "Ngăn cách section bằng dải ảnh full-bleed thay vì divider trang trí — ảnh là yếu tố cấu trúc"
      - "Duy trì border hairline 1px Stone (#868686) cho mọi phân cách cấu trúc; không bao giờ dùng shadow để gợi ý độ cao"

    không_nên_làm:
      - "Không thêm accent color nào ngoài Rust Hearth và Blush Whisper — 1% màu sắc chính là thương hiệu"
      - "Không dùng góc bo tròn trên card, button, hoặc ảnh — góc sắc là yếu tố cốt lõi của nhận diện editorial-print"
      - "Không thêm drop shadow hoặc hiệu ứng elevation cho bất kỳ component nào — design system cố tình flat"
      - "Không dùng trắng tinh khiết (#ffffff) làm nền trang — luôn dùng Raw Silk (#f9f6f2) để giữ bầu không khí ấm, sợi tự nhiên"
      - "Không đặt body text dưới 14px hoặc trên 17px — type scale hẹp và có chủ đích cho sự thoải mái khi đọc editorial"
      - "Không áp dụng letter-spacing chặt cho display heading — tracking cực rộng (0.154em) ở 62px là signature, không phải lỗi"
      - "Không đặt text, button, hoặc UI chrome chồng lên hero photography — để ảnh thở mà không bị can thiệp"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Raw Silk | `#f9f6f2` | Canvas trang — nền off-white ấm cho toàn bộ site |"
    info: "| 1 | Linen | `#ffffff` | Bề mặt card, panel sản phẩm, và khối nội dung nâng cao |"
    info: "| 2 | Sand Plaster | `#eee5d9` | Badge fill, nền tag mềm, container tông ấm |"
    info: "| 3 | Charcoal Ink | `#0e0e0` | Section tối đảo ngược, navigation bar, filled action button |"

  elevation:

    - "**Navigation Bar:** `none — chỉ được ngăn cách với nội dung bằng border-bottom 1px Stone (#868686)`"
    - "**Product Cards:** `none — bề mặt phẳng với hairline border Stone mảnh hoặc không border`"
    - "**Buttons:** `none — solid fill cung cấp toàn bộ trọng lượng thị giác`"
    - "**Info Icon Button:** `none — solid fill Charcoal Ink là neo thị giác`"

  imagery:

    info: "Nhiếp ảnh thời trang editorial chiếm ưu thế trong ngôn ngữ thị giác. Hero có chân dung studio ấm áp, ánh sáng dịu của người mẫu trong tư thế thư giãn trên nền trung tính — high-key với tông vàng, không shadow gắt. Các section editorial bên trong dùng ảnh công nghiệp và quy trình thủ công: máy dệt, denim thô, cận cảnh da với ánh sáng định hướng ấm. Tất cả ảnh đều full-bleed, góc sắc, không mask — không cạnh bo tròn, không overlay, không frame trang trí. Cách xử lý luôn điện ảnh và xúc giác, ưu tiên chất liệu vật lý (dệt denim, vân da, nếp gấp vải) hơn ảnh sản phẩm đóng gói. Không có illustration, không icon ngoài UI glyph đơn giản, không 3D render."

  layout:

    info: "Trang tuân theo nhịp editorial full-bleed: ảnh hero full-viewport mở đầu trải nghiệm, tiếp theo là section nội dung bất đối xứng nơi ảnh lớn chiếm nửa phải và canvas Raw Silk trống giữ nửa trái. Các section được ngăn cách bằng dải ảnh full-bleed hoạt động như hơi thở thị giác. Headline căn giữa hoặc căn trái với letter-spacing cực rộng, đọc như text tường gallery. Grid là single-column hoặc hai cột bất đối xứng, không bao giờ là multi-column card grid. Navigation là top bar tối giản — không sidebar, không mega-menu, không sticky header. Mật độ nội dung rộng rãi: 75–170px giữa các section, khoảng trắng dồi dào xung quanh mọi khối text. Cảm giác tổng thể là một zine được tuyển chọn hoặc catalog bảo tàng, không phải catalog bán lẻ."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Text: #0e0e0e (Charcoal Ink)"
    - "Background: #f9f6f2 (Raw Silk)"
    - "Border: #868686 (Stone)"
    - "Accent: #892500 (Rust Hearth)"
    - "Card/badge fill: #eee5d9 (Sand Plaster)"
    - "Inverted text: #ffffff (Linen)"
    - "primary action: #0e0e0e (filled action)"

    3_5_ví_dụ_component_prompt:

    - "**Top Navigation Bar**: Thanh full-bleed, nền Raw Silk (#f9f6f2), border-bottom 1px Stone (#868686). Trái: wordmark 'hnst' bằng Raleway 700, 32px, Rust Hearth (#892500). Phải: nav item (HOME, SUSTAINABILITY, PRESS, SHOP) bằng Raleway 600, 12px, uppercase, letter-spacing 0.192em, màu Stone (#868686), gap ngang 15px. Item active màu Rust Hearth."

    - "**Section Display Heading**: 'TRENDING' đặt bằng Poppins 700, 62px, letter-spacing 9.55px (0.154em), line-height 1.15, màu Charcoal Ink (#0e0e0e). Căn giữa. Không gạch chân, không trang trí — chỉ riêng letter-spacing đã tạo sự hiện diện của gallery-label."

    - "**Sand Badge**: Nền Sand Plaster (#eee5d9), zero radius, không border. Raleway 600, 12px, text Charcoal Ink (#0e0e0e), padding ngang 10px và dọc 5px. Dùng cho label ngữ cảnh nhỏ như 'New Arrival' hoặc 'Limited Edition'."

    - "**Editorial Image Block**: Ảnh full-width, zero radius, không border, không shadow, không overlay. Nằm trên canvas Raw Silk (#f9f6f2). Ảnh lấp đầy container edge-to-edge. Caption tùy chọn bằng Raleway 400, 13px, Stone (#868686) bên dưới."

    - "**Ghost Navigation Link**: Không nền, không border. Raleway 600, 13px, uppercase, letter-spacing 0.192em, màu Stone (#868686). Khi hover, chuyển sang Charcoal Ink (#0e0e0e). Spacing ngang 15px giữa các link liền kề."

  typography_personality:

    info: "Hệ thống hai font là lựa chọn cấu trúc đặc biệt nhất. Raleway làm công việc lặng thầm — navigation, body, button, form — với tỷ lệ humanist cảm giác được chế tác thủ công hơn là kỹ thuật. Poppins làm công việc nổi bật mỗi section một lần, ở 62px với tracking 0.154em, biến một từ duy nhất như 'TRENDING' thành một tấm biển vật lý trên tường gallery. Không bao giờ để Poppins xuất hiện ở kích thước body; không bao giờ để Raleway xuất hiện ở kích thước display. Sự tương phản giữa line-height body 1.67 của Raleway và line-height display 1.15 của Poppins là sự căng thẳng tạo nên giọng nói cho typography."

  spacing_rhythm:

    info: "Nhịp dọc hoạt động trên ba tầng: 15px cho gap intra-component (giữa nav item, list item, badge internal), 42–45px cho padding cấp component (button interior, không gian thở của card content), và 75–170px cho khoảng cách section-to-section. Không bao giờ nén dưới 15px giữa các sibling — mật độ thoải mái là bất khả thương lượng. Chuyển tiếp section luôn bao gồm một dải ảnh full-bleed như \"miếng rửa vòm miệng\" thị giác, không chỉ là khoảng trắng."

  similar_brands:

    - "**Patagonia** — Cùng palette trung tính ấm áp mộc mạc với một điểm nhấn thương hiệu gỉ sắt/cam cháy duy nhất, layout editorial ưu tiên nhiếp ảnh, và tông thời trang bền vững chống doanh nghiệp"
    - "**Eileen Fisher** — Chung cam kết với ảnh lifestyle full-bleed, khoảng trắng rộng rãi, canvas kem/off-white, và hệ thống typography sans-serif tối giản"
    - "**Toast (toa.st)** — Ngôn ngữ editorial thời trang chậm giống hệt — nền trắng xương ấm, component góc sắc, không shadow, và một điểm nhấn màu sắc duy nhất dùng tiết kiệm"
    - "**Studio Nicholson** — Cùng cách tiếp cận catalog gallery với section heading uppercase tracking rộng, layout ảnh+text bất đối xứng, và palette gần như đơn sắc kiềm chế"
    - "**Asket** — Chung navigation tối giản, triết lý một accent color, hệ thống type ưu tiên body text, và nhiếp ảnh lấp đầy viewport không có chrome trang trí"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-rust-hearth: #892500;
          --color-blush-whisper: #ea9195;
          --color-linen: #ffffff;
          --color-raw-silk: #f9f6f2;
          --color-sand-plaster: #eee5d9;
          --color-charcoal-ink: #0e0e0e;
          --color-stone: #868686;
          --color-ash: #b7b7b7;
          --color-frost: #d7d7d7;
        
          /* Typography — Font Families */
          --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --tracking-caption: 1.69px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.82px;
          --text-display: 62px;
          --leading-display: 1.15;
          --tracking-display: 9.55px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-23: 23px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-45: 45px;
          --spacing-75: 75px;
          --spacing-114: 114px;
          --spacing-170: 170px;
          --spacing-185: 185px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 75-170px;
          --card-padding: 42px;
          --element-gap: 15px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-pills: 10px;
          --radius-badges: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-raw-silk: #f9f6f2;
          --surface-linen: #ffffff;
          --surface-sand-plaster: #eee5d9;
          --surface-charcoal-ink: #0e0e0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-rust-hearth: #892500;
          --color-blush-whisper: #ea9195;
          --color-linen: #ffffff;
          --color-raw-silk: #f9f6f2;
          --color-sand-plaster: #eee5d9;
          --color-charcoal-ink: #0e0e0e;
          --color-stone: #868686;
          --color-ash: #b7b7b7;
          --color-frost: #d7d7d7;
        
          /* Typography */
          --font-raleway: 'Raleway', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.25;
          --tracking-caption: 1.69px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 1.82px;
          --text-display: 62px;
          --leading-display: 1.15;
          --tracking-display: 9.55px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-23: 23px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-45: 45px;
          --spacing-75: 75px;
          --spacing-114: 114px;
          --spacing-170: 170px;
          --spacing-185: 185px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }