fruitful___style_reference:
  info: "> Vườn thảo mộc bếp ngập nắng — bề mặt kem ấm, một điểm nhấn xanh đậm duy nhất, sự mềm mại của cây cỏ xuyên suốt."

  theme: "light"

  info: "Fruitful hoạt động như một dịch vụ tài chính bên bàn bếp ngập nắng: bề mặt kem ấm thay thế tông xám lạnh của fintech điển hình, và một màu xanh rừng đậm duy nhất đóng vai trò là giọng màu sắc duy nhất. Typography gánh trọng lượng — display size lớn, tracking dày (lên đến 91px) có cảm giác như được sắp chữ thủ công hơn là được tạo ra bằng máy, tạo nền tảng cho một giao diện vốn dĩ nhẹ nhàng. Các component bo tròn và mềm mại (12px trên hầu hết container, 80px trên pill), với ảnh chân dung thật của các Guide trong khung bo tròn lớn thay thế ảnh sản phẩm trừu tượng thường thấy trong ngành. Elevation gần như vô hình — một shadow đa lớp duy nhất dành cho card sâu nhất — và border mảnh và nhẹ nhàng. Nhịp điệu tổng thể là: whitespace rộng rãi, headline band căn giữa, card grid 2–3 cột, và bảng màu ấm-nhưng-sáng giúp trải nghiệm có cảm giác như lời khuyên từ bạn bè, không phải dashboard."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Forest Floor | `#0b7443` | `--color-forest-floor` | Primary action buttons, active nav state, brand links — xanh đậm trên nền kem ấm tạo cảm giác tự tin nhưng không mang tính công ty |"
    info: "| Deep Moss | `#054f31` | `--color-deep-moss` | Green outline accent cho tag, divider, và cạnh UI được focus. Không dùng làm màu CTA chính |"
    info: "| Vivid Leaf | `#61bc76` | `--color-vivid-leaf` | Green decorative accent cho icon, mark, và chi tiết đồ họa nhỏ. Không dùng làm màu CTA chính |"
    info: "| Bright Sprout | `#039855` | `--color-bright-sprout` | Green outline accent cho tag, divider, và cạnh UI được focus |"
    info: "| Mint Wash | `#d1fadf` | `--color-mint-wash` | Soft highlight panel, nav divider, secondary surface wash — tông thực vật nhạt thêm ấm áp mà không bão hòa |"
    info: "| Warm Putty | `#715039` | `--color-warm-putty` | Decorative heading, card border trong bố cục ấm — nâu nướng kết nối bề mặt kem và CTA xanh đậm |"
    info: "| Sandstone | `#d1a883` | `--color-sandstone` | Decorative icon và card stroke accent trong bố cục ấm — phiên bản mềm hơn của màu nâu heading |"
    info: "| Apricot Cream | `#fee9d1` | `--color-apricot-cream` | Nền card và section chủ đạo, hero video backdrop — canvas ấm đặc trưng thay thế xám tiêu chuẩn |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, nav surface, inverse text trên CTA xanh — lớp nền bên dưới mọi wash ấm |"
    info: "| Soft Mist | `#eceff4` | `--color-soft-mist` | Card surface trên trang trắng, nav background, secondary panel fill — trung tính mát duy nhất, dùng tiết kiệm |"
    info: "| Pale Stone | `#f4f4f4` | `--color-pale-stone` | Card surface thay thế, image container — gần trắng trung tính để xếp lớp trên kem |"
    info: "| Graphite Text | `#5b616b` | `--color-graphite-text` | Body copy, helper text, muted description — xám pha ấm đọc mềm hơn đen thuần |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary heading, body text, hairline border, icon stroke — baseline cấu trúc trên mọi bề mặt |"

  tokens___typography:

    pp_neue_montreal___hệ_thống_sans_serif_một_font__display_size_45_91px_mang_giọng_thương_hiệu___tracking_siêu_chặt__0_019em_ở_91px_khiến_headline_có_cảm_giác_sắp_chữ_thủ_công_thay_vì_template__weight_500_chiếm_ưu_thế_trong_body_và_ui_text__600_cho_subheading__700_dành_cho_emphasis_và_button_label__sự_ấm_áp_hình_học_của_font_tùy_chỉnh_đầu_bo_tròn__khẩu_độ_mở_là_thứ_làm_cho_bảng_màu_kem_và_xanh_có_cảm_giác_thân_thiện_thay_vì_chung_chung_____font_pp_neue_montreal:
      - "**Thay thế:** Inter hoặc Söhne — cả hai đều có sự ấm áp hình học và hành vi tracking chặt ở display size"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 11px, 12px, 13px, 14px, 15px, 16px, 18px, 19px, 20px, 21px, 23px, 24px, 26px, 38px, 45px, 48px, 49px, 60px, 91px"
      - "**Line height:** 0.90, 1.00, 1.10, 1.20, 1.25, 1.32, 1.33, 1.38, 1.40, 1.50"
      - "**Letter spacing:** -0.019em ở display 91px, -0.010em ở heading 38–48px, -0.004em ở body 14–16px"
      - "**OpenType features:** `\"ss01\" on (nếu có), tabular numerals cho số liệu tài chính`"
      - "**Vai trò:** Hệ thống sans-serif một font. Display size (45–91px) mang giọng thương hiệu — tracking siêu chặt (-0.019em) ở 91px khiến headline có cảm giác sắp chữ thủ công thay vì template. Weight 500 chiếm ưu thế trong body và UI text, 600 cho subheading, 700 dành cho emphasis và button label. Sự ấm áp hình học của font tùy chỉnh (đầu bo tròn, khẩu độ mở) là thứ làm cho bảng màu kem-và-xanh có cảm giác thân thiện thay vì chung chung."

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | -0.004px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.004px | `--text-body` |"
      info: "| subheading | 20px | 1.33 | -0.004px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.32 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.25 | -0.01px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -0.01px | `--text-heading-lg` |"
      info: "| display | 60px | 1.1 | -0.019px | `--text-display` |"
      info: "| display-lg | 91px | 0.9 | -0.019px | `--text-display-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 76 | 76px | `--spacing-76` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 12px |"
      info: "| cards | 12px |"
      info: "| pills | 80px |"
      info: "| video | 12px |"
      info: "| badges | 80px |"
      info: "| images | 20px |"
      info: "| buttons | 12px |"
      info: "| display-underline | 100px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.05) 0px 25px 16px 0px, rgba(0, 0, 0, 0.1)...` | `--shadow-md` |"

    layout:

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

  components:

    primary_action_button:
      vai_trò: "Main conversion CTA — pill màu forest green đặc"

      info: "Nền #0b7443, text trắng, radius 12px, padding 12px 24px, weight 500 ở 16px. Hover chuyển sang #054f31. Dùng cho hành động có ý định cao nhất trên mỗi trang."

    ghost_button:
      vai_trò: "Secondary CTA — outline trung tính"

      info: "Nền trong suốt, border 1px #000000, text #000000, radius 12px, padding 12px 24px, weight 500 ở 16px. Đi cùng primary action với trọng lượng thị giác ngang nhau."

    pill_navigation_link:
      vai_trò: "Link nav bar với nền pill mềm"

      info: "Radius 12px đến 20px, padding 8px 16px, text 14–16px màu #000000. Active state dùng text #0b7443 trên nền #d1fadf hoặc indicator border trái #0b7443."

    guide_portrait_card:
      vai_trò: "Card ảnh lớn giới thiệu Guide tài chính"

      info: "Ảnh phủ kín card, radius 20px, nằm trong container #fee9d1 hoặc #ffffff lớn hơn với padding rộng (24–32px). Tên Guide chồng lên phía dưới màu trắng trên gradient nhẹ, kèm role tag trong pill badge. Ảnh chân dung là hero — không có border trang trí quanh ảnh."

    trust_badge:
      vai_trò: "Badge giải thưởng vòng nguyệt quế trong hàng 3 cột"

      info: "Bố cục icon-và-text căn giữa, không có nền card. Vòng nguyệt quế màu #61bc76 (vivid leaf green), display text đậm (\"Best\", \"Excellent\") ở 24–38px, text mô tả bên dưới ở 13–14px màu #5b616b. Đặt trên canvas trắng."

    hero_video_container:
      vai_trò: "Video nhúng full-width với nền ấm"

      info: "Radius 12px, lấp đầy content max-width, màu nền #fee9d1 (cream) tràn ra ngoài khung video. Caption text xuất hiện dưới dạng label viền xanh (nền #d1fadf, text #054f31) chồng lên gần cuối."

    section_header_block:
      vai_trò: "Phần giới thiệu section có đánh số với title, description và CTA"

      info: "Căn trái trong content area, title hai dòng lớn ở 38–48px màu #000000, body description ở 16px màu #5b616b. Nhãn số nhỏ (\"01\") màu xám nhạt phía trên title. Hàng CTA tùy chọn bên dưới."

    green_wash_highlight_label:
      vai_trò: "Inline emphasis label với nền xanh nhạt"

      info: "Nền #d1fadf, text #054f31, padding 4–6px, radius 4–6px, 14px weight 500. Dùng cho in-content highlight như cụm từ khóa hoặc feature label."

    numbered_step_indicator:
      vai_trò: "Số outline lớn cho các bước quy trình có thứ tự"

      info: "Weight nhẹ, display size 38–48px, màu #5b616b hoặc #000000. Đặt phía trên step title với gap 12–16px. Không có nền hoặc border — hoàn toàn là typographic."

    footer:
      vai_trò: "Footer tối hoặc trắng với các cột link"

      info: "Nền #ffffff hoặc #000000, grid link nhiều cột, body text nhỏ (13–14px). Hàng logo + social icon ở trên cùng. Padding trong rộng 48–64px."

    video_play_overlay:
      vai_trò: "Overlay tối bán trong suốt với play icon và controls"

      info: "Gradient tối nhẹ ở cuối khung video, tam giác play trắng, timecode trong text trắng nhỏ. Volume và progress controls xuất hiện khi hover."

    tag_pill:
      vai_trò: "Tag vai trò hoặc danh mục nhỏ trên Guide card"

      info: "Nền #d1fadf hoặc #ffffff, radius 80px (full pill), text #0b7443 hoặc #000000, padding dọc 5–6px, padding ngang 10–12px, font size 11–12px. Thường kèm icon checkmark hoặc dot nhỏ."

  do_s_and_don_ts:

    do:
      - "Dùng #0b7443 độc quyền cho một primary action duy nhất trên mỗi màn hình — không bao giờ thêm màu button thứ hai."
      - "Áp dụng #fee9d1 (Apricot Cream) làm bề mặt chủ đạo cho bất kỳ section không phải trắng để duy trì bản sắc ấm, không mang tính công ty."
      - "Đặt display type ở 48–91px với tracking -0.019em — letter-spacing chặt ở size lớn là giọng nói đặc trưng."
      - "Dùng radius 12px cho tất cả button, card, nav element và video container để đảm bảo nhất quán thị giác."
      - "Ghép mỗi primary filled button với một ghost button cùng trọng lượng (border đen 1px, nền trong suốt) làm secondary action."
      - "Đặt ảnh chân dung lớn (người thật, không phải stock) trong container radius 20px trên nền kem ấm để củng cố cảm giác con người, tư vấn."
      - "Dành #039855 và #61bc76 cho icon fill, botanical illustration và decorative stroke — không bao giờ dùng cho text hoặc button."

    don_t:
      - "Không dùng xanh tươi (#039855, #61bc76) cho body text hoặc heading — chúng thiếu độ tương phản của xanh rừng đậm."
      - "Không áp dụng #eceff4 (Soft Mist) cạnh #fee9d1 trong cùng một section — sự xung đột mát/ấm phá vỡ bầu không khí ấm áp."
      - "Không đặt body text dưới 16px hoặc trên 20px — hệ thống type được hiệu chỉnh cho khoảng lý tưởng 16–20px."
      - "Không dùng góc nhọn (0px radius) trên bất kỳ container nào — ngay cả element nhỏ cũng có ít nhất 4–12px radius."
      - "Không thêm drop shadow vào button, nav hoặc text — shadow duy nhất thuộc về card được nâng cao nhất."
      - "Không dùng brown accent (#715039) cho body copy hoặc button — nó chỉ mang tính trang trí, dành cho heading section ấm và card border."
      - "Không giới thiệu typeface thứ hai — PP Neue Montreal bao phủ toàn bộ phạm vi từ caption 11px đến display 91px."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang cơ bản — mặc định dưới mọi section |"
    info: "| 1 | Warm Card | `#fee9d1` | Bề mặt card và section chủ đạo — kem ấm đặc trưng định nghĩa thương hiệu |"
    info: "| 2 | Soft Green Wash | `#d1fadf` | Highlight panel, nav divider, botanical accent surface |"
    info: "| 3 | Cool Card | `#eceff4` | Card surface phụ trên trang trắng, để tương phản với kem ấm chủ đạo |"
    info: "| 4 | Pale Stone | `#f4f4f4` | Bề mặt cấp ba cho image container và card xếp lớp trên kem |"
    info: "| 5 | Inverse Dark | `#000000` | Section tối hiếm hoặc bề mặt overlay — dùng rất tiết kiệm |"

  elevation:

    - "**Elevated Card:** `rgba(0, 0, 0, 0.05) 0px 25px 16px 0px, rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, rgba(0, 0, 0, 0.1) 0px 3px 6px 0px`"

  imagery:

    ưu_tiên_nhiếp_ảnh: "ảnh chân dung lớn, tông ấm của người thật (Guide) lấp đầy container radius 20px trên nền kem. Không có product mockup trừu tượng, không stock photography, không illustration ngoại trừ trust badge vòng nguyệt quế đơn giản và icon checkmark xanh nhỏ. Nội dung video được tích hợp vào hero dưới dạng embed full-width với nền beige ấm, có một người nói trực tiếp vào camera — định dạng mang tính tâm sự và con người, không phải corporate bóng bẩy. Nhiệt độ màu ấm của nhiếp ảnh (ánh sáng giờ vàng, tông màu đất trong trang phục) hòa hợp với bề mặt kem, tạo nên bảng màu ngập nắng thống nhất. Decorative element giới hạn ở: vòng nguyệt quế outline màu xanh tươi, checkmark đặc nhỏ và icon lá wordmark. Không có product screenshot, không data visualization, không đồ họa hình học trừu tượng."

  layout:

    info: "Cột nội dung căn giữa, max-width 1200px với margin ngoài rộng. Trang mở đầu bằng section trắng full-bleed chứa headline band căn giữa (max ~800px cho text, display type lớn 60–91px) trên container video rộng 1200px. Section xen kẽ giữa canvas trắng và band full-bleed kem ấm (#fee9d1), mỗi band cách nhau 80px dọc. Hàng trust badge là grid 3 cột căn giữa trên nền trắng. Guide card xuất hiện trong hàng cuộn 2–3 cột với section header đánh số căn trái (\"01 / Get paired with a Guide\") bên cạnh nhóm card — sự kết hợp bất đối xứng này là layout signature. Navigation là thanh ngang đơn giản với wordmark nhỏ bên trái, link căn giữa, và cặp ghost 'Log in' + filled 'Get started' bên phải. Không sidebar, không mega-menu. Footer là band trắng hoặc tối full-bleed với 3–4 cột link."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #000000 (primary), #5b616b (muted/body)"
    - "Background: #ffffff (canvas), #fee9d1 (warm surface)"
    - "Border: #000000 (hairline), #0b7443 (accent), #5b616b (muted)"
    - "Accent: #0b7443 (forest green), #61bc76 (leaf green), #039855 (sprout)"
    - "Surface wash: #d1fadf (mint), #eceff4 (cool card)"
    - "primary action: #0b7443 (filled action)"

  example_component_prompts:
    - "**Hero headline band**: Canvas trắng, căn giữa. Display text 'Your money, finally figured out.' ở 91px weight 500, #000000, letter-spacing -0.019em, line-height 0.9. Subhead ở 20px weight 400, #5b616b. Hai CTA cạnh nhau: filled primary (nền #0b7443, text trắng, radius 12px, padding 12px 24px) + ghost secondary (trong suốt, border 1px #000000, radius 12px)."

    - "**Guide portrait card**: Container radius 20px, rộng 300px, cao 400px, chứa ảnh chân dung tông ấm. Bên dưới ảnh: tên Guide ở 18px weight 600 #000000, role tag dưới dạng pill radius 80px (nền #d1fadf, text #0b7443, font 11px). Card nằm trên nền #fee9d1 với padding trong 24px."

    - "**Trust badge row**: Canvas trắng, grid 3 cột căn giữa với gap 48px. Mỗi badge: icon vòng nguyệt quế màu #61bc76 (outline 40px), title text 'Best' / 'Excellent' ở 38px weight 700 #000000, descriptor ở 14px weight 400 #5b616b. Không có nền card hoặc border."

    - "Tạo Primary Action Button: nền #0b7443, text #ffffff, radius 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính."

    - "**Warm cream video section**: Nền #fee9d1 full-bleed, padding dọc 80px. Video container căn giữa, radius 12px, max-width 1100px. Caption label viền xanh chồng lên: nền #d1fadf, text #054f31, padding 6px, radius 4px, 14px weight 500."

  typography_voice:

    info: "Toàn bộ hệ thống type là một font family ở nhiều weight — không có typeface phụ hoặc accent. Đặc trưng là dải size cực rộng: display headline 91px với tracking -0.019em khiến thương hiệu có cảm giác tự tin và editorial thay vì template. Body text nằm vững trong khoảng 14–16px với line-height 1.4–1.5 rộng rãi. Weight 500 là ngựa thồ (button, nav, body emphasis); 700 dành cho display và badge title. Không bao giờ italic, không bao giờ condensed — sự ấm áp đến từ size và tracking, không phải biến thể kiểu chữ."

  similar_brands:

    - "**Marcus by Goldman Sachs** — Cùng tông fintech ấm áp, dễ tiếp cận với typography bo tròn và bề mặt card mềm — dù Marcus dùng nhiều ảnh hơn và ít kem hơn"
    - "**Wealthfront** — Tương tự accent một màu (xanh) trên nền trắng với display headline lớn, dù Wealthfront mát hơn và thiên về dữ liệu hơn"
    - "**Betterment** — Thương hiệu tư vấn tài chính thân thiện với UI bo tròn, ảnh người ấm áp và một accent color — chia sẻ định vị human-advisory"
    - "**Rocket Money** — Cùng thẩm mỹ tài chính-cá-nhân-gặp-bạn-bè với bảng màu kem thân thiện và headline thân thiện lớn, dù Rocket nghiêng về vui tươi hơn"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-floor: #0b7443;
          --color-deep-moss: #054f31;
          --color-vivid-leaf: #61bc76;
          --color-bright-sprout: #039855;
          --color-mint-wash: #d1fadf;
          --color-warm-putty: #715039;
          --color-sandstone: #d1a883;
          --color-apricot-cream: #fee9d1;
          --color-paper-white: #ffffff;
          --color-soft-mist: #eceff4;
          --color-pale-stone: #f4f4f4;
          --color-graphite-text: #5b616b;
          --color-ink-black: #000000;
        
          /* Typography — Font Families */
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: -0.004px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.004px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.004px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.32;
          --tracking-heading-sm: -0.01px;
          --text-heading: 38px;
          --leading-heading: 1.25;
          --tracking-heading: -0.01px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.01px;
          --text-display: 60px;
          --leading-display: 1.1;
          --tracking-display: -0.019px;
          --text-display-lg: 91px;
          --leading-display-lg: 0.9;
          --tracking-display-lg: -0.019px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-76: 76px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 32px;
          --radius-3xl-2: 40px;
          --radius-full: 64px;
          --radius-full-2: 80px;
          --radius-full-3: 100px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-cards: 12px;
          --radius-pills: 80px;
          --radius-video: 12px;
          --radius-badges: 80px;
          --radius-images: 20px;
          --radius-buttons: 12px;
          --radius-display-underline: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 25px 16px 0px, rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, rgba(0, 0, 0, 0.1) 0px 3px 6px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-warm-card: #fee9d1;
          --surface-soft-green-wash: #d1fadf;
          --surface-cool-card: #eceff4;
          --surface-pale-stone: #f4f4f4;
          --surface-inverse-dark: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-floor: #0b7443;
          --color-deep-moss: #054f31;
          --color-vivid-leaf: #61bc76;
          --color-bright-sprout: #039855;
          --color-mint-wash: #d1fadf;
          --color-warm-putty: #715039;
          --color-sandstone: #d1a883;
          --color-apricot-cream: #fee9d1;
          --color-paper-white: #ffffff;
          --color-soft-mist: #eceff4;
          --color-pale-stone: #f4f4f4;
          --color-graphite-text: #5b616b;
          --color-ink-black: #000000;
        
          /* Typography */
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: -0.004px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.004px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.004px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.32;
          --tracking-heading-sm: -0.01px;
          --text-heading: 38px;
          --leading-heading: 1.25;
          --tracking-heading: -0.01px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.01px;
          --text-display: 60px;
          --leading-display: 1.1;
          --tracking-display: -0.019px;
          --text-display-lg: 91px;
          --leading-display-lg: 0.9;
          --tracking-display-lg: -0.019px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-76: 76px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 32px;
          --radius-3xl-2: 40px;
          --radius-full: 64px;
          --radius-full-2: 80px;
          --radius-full-3: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.05) 0px 25px 16px 0px, rgba(0, 0, 0, 0.1) 0px 10px 10px 0px, rgba(0, 0, 0, 0.1) 0px 3px 6px 0px;
        }