monzo___style_reference:
  info: "> Ấm áp của san hô trên nền giấy bạc hà mát — sự kiềm chế đầy tự tin với một điểm nhấn nóng duy nhất."

  theme: "light"

  info: "Monzo hoạt động như một ngân hàng thách thức (challenger bank) thuần kỹ thuật số với ngôn ngữ thị giác nhẹ, ấm áp và thân thiện không hề giả tạo. Canvas là một màu trắng pha xanh bạc hà siêu nhẹ (#f2f8f3) làm nền cho các bề mặt thẻ trắng sắc nét, tạo cảm giác nhiều lớp giấy chồng lên giấy mà không cần dựa vào shadow dày. Một màu Hot Coral (#ff4f40) duy nhất mang toàn bộ năng lượng màu sắc — nó nhuộm logo, link, heading, icon và chính sản phẩm thẻ vật lý, trong khi phần còn lại của giao diện giữ trung tính và yên tĩnh. Typography là sans-serif tùy chỉnh với hai giọng nói: một họ chữ text với letter-spacing âm đặc trưng -0.05em giúp siết chặt các đoạn văn, và một display face dày ở weight 600-800 cho heading. Các component được bo tròn rộng rãi (pill cho action, 64px cho container) và cố tình có độ cao thấp — thương hiệu tin tưởng vào màu sắc, trọng lượng chữ và khoảng trắng để tạo hierarchy, chứ không phải drop shadow."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Hot Coral | `#ff4f40` | `--color-hot-coral` | Chữ ký thương hiệu — logo, link, heading, icon, sản phẩm thẻ. Một điểm nhấn sống động duy nhất trên nền giao diện trung tính; mọi khoảnh khắc màu sắc trong hệ thống đều lấy từ một sắc thái này |"
    info: "| Midnight Ink | `#091723` | `--color-midnight-ink` | Màu trung tính tối hỗ trợ cho text, icon và độ tương phản mạnh. Không nâng lên thành màu CTA chính |"
    info: "| Deep Navy | `#112231` | `--color-deep-navy` | Màu nền phụ và điểm nhấn footer. Sáng hơn Midnight Ink một chút dành cho các phần tử tối nhiều lớp |"
    info: "| Page Mist | `#f2f8f3` | `--color-page-mist` | Canvas trang — nền chủ đạo phía sau mọi section nội dung. Màu trắng pha xanh nhẹ mang lại hơi ấm cho giao diện mà không cạnh tranh với bề mặt trắng |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ, panel nâng cao, text trên nút nền tối. Nằm một lớp trên canvas bạc hà |"
    info: "| Soft Mint | `#e3ebe4` | `--color-soft-mint` | Hiệu ứng hover, nút filled nhẹ, xử lý bề mặt inset. Nằm giữa canvas trang và thẻ trắng |"
    info: "| Fog | `#b5b9bd` | `--color-fog` | Text cấp ba, placeholder, border ít nhấn mạnh |"
    info: "| Steel | `#6b747b` | `--color-steel` | Body text phụ, metadata, mô tả. Màu trung tính chính cho thông tin hỗ trợ |"
    info: "| Ash | `#75817e` | `--color-ash` | Đường nét icon, đường kẻ trang trí, divider nhẹ |"
    info: "| Slate Button | `#3b4c54` | `--color-slate-button` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng lên thành màu CTA chính |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Text có độ tương phản tối đa, token tối nhất trong hệ thống. Dùng tiết kiệm cho text có mức nhấn mạnh cao nhất trên bề mặt sáng |"

  tokens___typography:

    monzosanstext___body_và_ui_text___label_navigation__copy_nút__đoạn_mô_tả__nội_dung_thẻ__text_footer__letter_spacing__0_05em_tùy_chỉnh_giúp_siết_chặt_running_text__tạo_cảm_giác_dày_đặc__hiện_đại__dải_weight_400_600_700_cho_phép_cùng_một_họ_chữ_xử_lý_mọi_thứ_từ_caption_đến_subheading__thay_thế_bằng_inter_hoặc_dm_sans_nếu_không_có_____font_monzosanstext:
      - "**Thay thế:** Inter"
      - "**Weight:** 400, 600, 700"
      - "**Kích thước:** 13px, 16px, 20px, 24px, 32px, 36px"
      - "**Line height:** 1.15, 1.38, 1.40, 1.50"
      - "**Letter spacing:** -0.05em"
      - "**Vai trò:** Body và UI text — label navigation, copy nút, đoạn mô tả, nội dung thẻ, text footer. letter-spacing -0.05em tùy chỉnh giúp siết chặt running text, tạo cảm giác dày đặc, hiện đại; dải weight 400/600/700 cho phép cùng một họ chữ xử lý mọi thứ từ caption đến subheading. Thay thế bằng Inter hoặc DM Sans nếu không có."

    monzosansdisplay___headline_và_display_text___hero_statement__section_heading__tiêu_đề_sản_phẩm_lớn__weight_đậm_hơn_lên_đến_800_ở_kích_thước_lớn_39_61px_tạo_headline_blocky_đầy_tự_tin__mang_cảm_giác_kiến_trúc__không_có_letter_spacing_tùy_chỉnh__để_weight_tự_làm_việc__thay_thế_bằng_inter_hoặc_manrope_ở_weight_nặng_____font_monzosansdisplay:
      - "**Thay thế:** Manrope"
      - "**Weight:** 600, 700, 800"
      - "**Kích thước:** 16px, 20px, 25px, 31px, 39px, 44px, 49px, 61px"
      - "**Line height:** 1.00, 1.20, 1.40"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Headline và display text — hero statement, section heading, tiêu đề sản phẩm lớn. Weight đậm hơn (lên đến 800) ở kích thước lớn (39-61px) tạo headline blocky đầy tự tin, mang cảm giác kiến trúc. Không có letter-spacing tùy chỉnh, để weight tự làm việc. Thay thế bằng Inter hoặc Manrope ở weight nặng."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.38 | -0.65px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.8px | `--text-body-sm` |"
      info: "| body | 20px | 1.4 | -1px | `--text-body` |"
      info: "| subheading | 24px | 1.38 | -1.2px | `--text-subheading` |"
      info: "| heading | 36px | 1.15 | -1.8px | `--text-heading` |"
      info: "| heading-lg | 44px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 61px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    density: "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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 64px |"
      info: "| badges | 4px |"
      info: "| inputs | 24px |"
      info: "| buttons | 500px |"
      info: "| nav-pills | 500px |"
      info: "| containers | 32px |"

    shadows:

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

    layout:

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

  components:

    pill_nav_toggle:
      vai_trò: "Bộ chọn cá nhân/doanh nghiệp dạng segment ở top bar"

      info: "Nền mint nhạt (#f2f8f3) trên segment đang active, trong suốt trên segment không active. border-radius 500px (dạng pill hoàn chỉnh). MonzoSansText 16px weight 600. Padding 8px dọc / 12-16px ngang. Icon nằm bên trái label với chevron-right nhỏ."

    sign_up_cta_dark_pill:
      vai_trò: "Action tối chính ở navigation góc trên bên phải"

      info: "border-radius 500px. Nền Midnight Ink (#091723) với text trắng. MonzoSansText 16px weight 600. Padding 12px dọc / 20-24px ngang. Không shadow, không border. Action có mức nhấn mạnh cao nhất trên mọi màn hình."

    white_pill_cta:
      vai_trò: "Call-to-action nền sáng trên ảnh trong hero carousel"

      info: "border-radius 500px. Nền trắng với text Midnight Ink. Padding 14-16px dọc / 28-32px ngang. Nằm trên ảnh mà không cạnh tranh — mắt đọc ảnh trước, sau đó mới đến nút."

    category_link_list:
      vai_trò: "Link chủ đề có thể mở rộng trong panel navigation trợ giúp/footer"

      info: "Link định dạng lớn hiển thị bằng Hot Coral (#ff4f40) ở kích thước 32-36px MonzoSansDisplay weight 700. Phân cách bằng border mảnh 1px màu Soft Mint (#e3ebe4). Mỗi hàng cao 60-72px. Text màu san hô trên nền bạc hà nhạt là khoảnh khắc text ồn ào nhất của hệ thống — có chủ đích, dẫn mắt xuống danh sách."

    carousel_card:
      vai_trò: "Slider ảnh hero toàn chiều rộng"

      info: "border-radius 64px trên container ngoài. Chứa ảnh full-bleed với text chồng lên (MonzoSansDisplay 44-61px weight 700 trắng) và một nút CTA. Navigation dots là hình tròn nhỏ màu trắng ở giữa dưới cùng. Điều khiển mũi tên trái/phải là hình tròn 40px với outline trắng mảnh."

    product_card:
      vai_trò: "Trưng bày sản phẩm ngân hàng (tài khoản vãng lai, tiết kiệm, v.v.)"

      info: "border-radius 64px, padding 30-32px. Nằm trên canvas bạc hà. Chứa hình ảnh sản phẩm màu san hô (hình thẻ) bên trái, mô tả MonzoSansText bên phải. Không shadow, không border — sự phân cách đạt được nhờ khoảng trắng trên nền ấm."

    which__badge:
      vai_trò: "Chứng thực bên thứ ba / tín hiệu tin cậy"

      info: "Badge hình tròn, đường kính khoảng 100-120px, nền trắng với viền Hot Coral mảnh. MonzoSansText 11-13px. Nổi ở góc trên bên phải của hero card."

    fscs_badge:
      vai_trò: "Dấu tin cậy quy định"

      info: "Hình chữ nhật bo tròn nhỏ màu trắng (bán kính 4px), logo FSCS Protected màu san hô và xanh navy đậm. Đặt ở góc dưới bên phải của ảnh hero."

    arrow_control_circular:
      vai_trò: "Nút phân trang carousel"

      info: "Hình tròn đường kính 40px, nền trong suốt, stroke 1.5px trắng hoặc Midnight Ink. Icon chevron đơn giản ở giữa. Không có trạng thái fill, không shadow."

    fixed_bottom_search_bar:
      vai_trò: "Input tìm kiếm/trợ giúp cố định ở cuối viewport"

      info: "border-radius 64px. Nền trắng với focus ring Hot Coral 2px ở cạnh trái. Toàn chiều rộng trừ margin. Placeholder MonzoSansText 16px màu Steel (#6b747b). Lơ lửng phía trên nội dung như một tiện ích nổi."

    sticky_top_bar:
      vai_trò: "Header navigation toàn cục"

      info: "Nền trong suốt hoặc trắng, cao 64-80px. Logo Monzo (wordmark Hot Coral) bên trái, segment toggle ở giữa-trái, nút Sign Up bên phải. Border dưới 1px màu Soft Mint khi cuộn."

    menu_label:
      vai_trò: "Heading danh mục đậm trong panel navigation có thể mở rộng"

      info: "MonzoSansText 24-32px weight 700 màu Midnight Ink. Nằm phía trên danh sách link màu san hô. Hoạt động như một header mục lục yên tĩnh."

    carousel_dot_indicator:
      vai_trò: "Chỉ báo vị trí cho hero slider"

      info: "Ba đến năm hình tròn nhỏ (8px). Dot active là màu trắng với độ mờ đục đầy đủ, dot không active là màu trắng với độ mờ đục 40%. Không label, không text."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng border-radius 500px cho mọi interactive pill — nút, nav toggle, tag chip và thanh tìm kiếm. Đây là hình dạng định nghĩa hệ thống."
      - "Giữ giao diện 95% trung tính. Chỉ để Hot Coral (#ff4f40) xuất hiện trên logo, link, heading, icon và sản phẩm thẻ — không bao giờ dùng làm nền fill cho UI control."
      - "Sử dụng MonzoSansDisplay 600-800 cho mọi heading từ 36px trở lên. Dải weight đậm hơn là bắt buộc cho display type."
      - "Áp dụng letter-spacing -0.05em cho mọi cách dùng MonzoSansText. Đây là chi tiết typographic định nghĩa thương hiệu, không phải tùy chọn."
      - "Xếp lớp bề mặt trên canvas bạc hà (#f2f8f3 → #ffffff → #e3ebe4) thay vì dùng shadow. Độ cao được thể hiện bằng bước màu, không phải drop shadow."
      - "Đặt body text ở 20px với line-height 1.4 cho đoạn mô tả. Kích thước text của Monzo lớn hơn SaaS điển hình — 16px là sàn, không phải mặc định."
      - "Sử dụng border-radius 64px cho mọi container lớn — hero card, product showcase, section panel. Độ bo tròn rộng rãi này cũng dễ nhận biết như màu san hô."

    không_nên_làm:
      - "Không sử dụng Hot Coral làm nền fill cho nút. Nó chỉ dành cho text, icon, logo và sản phẩm thẻ — không bao giờ dùng cho bề mặt CTA đặc."
      - "Không thêm drop shadow vào card hoặc nút. Hệ thống sử dụng một shadow rgba(0,0,0,0.1) 0px 0px 10px một cách tiết kiệm; hầu hết sự phân cách đến từ bước màu bề mặt trên canvas bạc hà."
      - "Không sử dụng system font hoặc sans-serif không phải thương hiệu. Luôn chỉ định MonzoSansText cho body và MonzoSansDisplay cho heading."
      - "Không sử dụng letter-spacing khác -0.05em trên MonzoSansText hoặc normal trên MonzoSansDisplay. Sai lệch sẽ phá vỡ dấu vân tay typographic của thương hiệu."
      - "Không trộn đỏ và xanh navy đậm dưới dạng gradient hoặc cặp màu trên cùng một element. San hô là điểm nhấn; navy là nền. Chúng xen kẽ, không hòa trộn."
      - "Không sử dụng bán kính vuông hoặc 8px trên nút chính hoặc container lớn. Pill 500px và container 64px là hai ngôn ngữ hình dạng — bất cứ thứ gì ở giữa trông chung chung."
      - "Không đặt body text dưới 16px hoặc headline dưới 32px. Type scale cố tình rộng rãi; text nhỏ phá vỡ cảm giác ấm áp, thoáng đãng."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#f2f8f3` | Nền cơ bản — màu bạc hà ấm lấp đầy viewport và định nghĩa light theme của hệ thống. |"
    info: "| 1 | Card Surface | `#ffffff` | Bề mặt nội dung nâng cao — hero card, product card, thanh tìm kiếm nổi. Sáng hơn canvas một bước. |"
    info: "| 2 | Soft Fill | `#e3ebe4` | Bề mặt inset, hiệu ứng hover, trạng thái filled nhẹ. Nằm giữa canvas và card để phân lớp trung gian. |"
    info: "| 3 | Active Highlight | `#b5b9bd` | Border ít nhấn mạnh, hiệu ứng trạng thái không active, tông màu bề mặt placeholder. |"

  elevation:

    - "**Floating Search Bar:** `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`"

  imagery:

    info: "Ngôn ngữ thị giác của Monzo được xây dựng trên ảnh chụp thật về con người trong những khoảnh khắc tài chính hàng ngày — tay trả tiền cà phê, ngón tay chạm vào đầu đọc thẻ, cảnh sinh hoạt đời thường với ánh sáng tự nhiên ấm áp. Ảnh luôn ở dạng full-bleed trong container bo tròn 64px, không bao giờ cắt thành hình chữ nhật sắc cạnh, và luôn có overlay tối hoặc xử lý tối để text trắng dễ đọc. Bản thân sản phẩm thẻ Hot Coral hoạt động như một yếu tố đồ họa lặp lại — một hình chữ nhật đỏ phẳng, sống động neo giữ các product showcase. Iconography tối giản: mũi tên và chevron có outline đơn giản với nét mảnh, không bao giờ filled. Không có illustration, không 3D, không đồ họa trừu tượng. Sự tự tin của thương hiệu đến từ niềm tin rằng một bức ảnh đẹp và một màu sắc đẹp có thể gánh vác cả một màn hình."

  layout:

    info: "Cấu trúc trang của Monzo được căn giữa và giới hạn max-width khoảng 1200px. Hero là carousel toàn viewport — mỗi slide là một thẻ ảnh bo tròn 64px trải dài toàn bộ chiều rộng nội dung, với headline chồng lên, subtext và nút CTA pill trắng đặt ở góc dưới bên trái. Bên dưới hero, các section nội dung xếp chồng theo chiều dọc với khoảng cách 64-80px, xen kẽ giữa product card trắng trên canvas bạc hà và feature block toàn chiều rộng theo chủ đề san hô. Fixed bottom search bar tạo một lớp tiện ích cố định trên tất cả các trang. Navigation là một sticky top bar đơn giản với pill segment toggle (Personal/Business), logo wordmark màu san hô bên trái và nút Sign Up tối bên phải. Panel navigation trợ giúp có thể mở rộng sử dụng danh sách một cột gồm các link san hô cỡ lớn — không grid, không card, chỉ typography ở tỷ lệ lớn làm công việc cấu trúc."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #091723 (Midnight Ink)"
    - "background: #f2f8f3 (Page Mist canvas bạc hà)"
    - "surface: #ffffff (thẻ trắng)"
    - "border: #e3ebe4 (Soft Mint hairline)"
    - "accent: #ff4f40 (Hot Coral — link, heading, icon, logo chỉ)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Sticky Top Bar**: Nền trong suốt, cao 72px. Logo wordmark Monzo màu #ff4f40 bên trái. Giữa-trái: pill segment toggle với radius 500px, padding 8px/16px, fill active #f2f8f3, MonzoSansText 16px weight 600 màu #091723. Phải: nút pill tối — fill #091723, text trắng, radius 500px, padding 12px/24px, MonzoSansText 16px weight 600."

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA filled."

    - "**Category Link List**: Panel toàn chiều rộng trên nền #f2f8f3. Mỗi hàng: MonzoSansDisplay 32px weight 700 màu #ff4f40, chiều cao hàng 60-72px, border dưới 1px màu #e3ebe4. Không icon, không nền — navigation thuần typographic."

    - "**Product Showcase Row**: Bố cục hai cột trên canvas #f2f8f3. Trái: ảnh thẻ Hot Coral (hình chữ nhật đỏ phẳng, rộng 200px, radius 64px). Phải: khoảng cách padding-left 500px. Heading MonzoSansDisplay 36px weight 700 màu #091723, body text MonzoSansText 20px weight 400 màu #6b747b. Điều khiển mũi tên hình tròn (40px, stroke 1.5px #091723) phía trên heading."

    - "**Floating Bottom Search Bar**: Cố định ở cuối viewport, cao 56px, toàn chiều rộng trừ margin 40px, radius 64px, fill #ffffff, shadow rgba(0,0,0,0.1) 0px 0px 10px 0px. Cạnh trái: dải accent 2px #ff4f40. Placeholder: MonzoSansText 16px weight 400 màu #6b747b."

  similar_brands:

    - "**Starling Bank** — Cùng thẩm mỹ ngân hàng thách thức Anh — canvas trắng nhạt, elevation tối thiểu, một màu nhấn đậm duy nhất (Starling dùng teal, Monzo dùng coral) và góc bo tròn rộng rãi trên mọi container."
    - "**Revolut** — Bề mặt sáng phẳng với một màu thương hiệu bão hòa duy nhất, nút pill cỡ lớn và dựa vào custom sans-serif typography ở display weight nặng."
    - "**Klarna** — Canvas sáng, hồng/coral là điểm nhấn màu sắc duy nhất, container bo tròn cỡ lớn (radius 64px+ tương tự) và giọng typographic ấm áp dễ tiếp cận nhắm đến tài chính tiêu dùng."
    - "**N26** — Layout fintech tối giản với khoảng trắng rộng rãi, display headline lớn và thương hiệu tin tưởng một màu nhấn và trọng lượng typographic để tạo hierarchy mà không cần shadow hay gradient."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-hot-coral: #ff4f40;
          --color-midnight-ink: #091723;
          --color-deep-navy: #112231;
          --color-page-mist: #f2f8f3;
          --color-pure-white: #ffffff;
          --color-soft-mint: #e3ebe4;
          --color-fog: #b5b9bd;
          --color-steel: #6b747b;
          --color-ash: #75817e;
          --color-slate-button: #3b4c54;
          --color-pure-black: #000000;
        
          /* Typography — Font Families */
          --font-monzosanstext: 'MonzoSansText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monzosansdisplay: 'MonzoSansDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.38;
          --tracking-caption: -0.65px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.8px;
          --text-body: 20px;
          --leading-body: 1.4;
          --tracking-body: -1px;
          --text-subheading: 24px;
          --leading-subheading: 1.38;
          --tracking-subheading: -1.2px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -1.8px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.2;
          --text-display: 61px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 30-32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 64px;
          --radius-full-2: 100px;
          --radius-full-3: 500px;
        
          /* Named Radii */
          --radius-cards: 64px;
          --radius-badges: 4px;
          --radius-inputs: 24px;
          --radius-buttons: 500px;
          --radius-nav-pills: 500px;
          --radius-containers: 32px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f2f8f3;
          --surface-card-surface: #ffffff;
          --surface-soft-fill: #e3ebe4;
          --surface-active-highlight: #b5b9bd;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-hot-coral: #ff4f40;
          --color-midnight-ink: #091723;
          --color-deep-navy: #112231;
          --color-page-mist: #f2f8f3;
          --color-pure-white: #ffffff;
          --color-soft-mint: #e3ebe4;
          --color-fog: #b5b9bd;
          --color-steel: #6b747b;
          --color-ash: #75817e;
          --color-slate-button: #3b4c54;
          --color-pure-black: #000000;
        
          /* Typography */
          --font-monzosanstext: 'MonzoSansText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-monzosansdisplay: 'MonzoSansDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.38;
          --tracking-caption: -0.65px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.8px;
          --text-body: 20px;
          --leading-body: 1.4;
          --tracking-body: -1px;
          --text-subheading: 24px;
          --leading-subheading: 1.38;
          --tracking-subheading: -1.2px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -1.8px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.2;
          --text-display: 61px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-full: 64px;
          --radius-full-2: 100px;
          --radius-full-3: 500px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        }