varo_bank___style_reference:
  info: "> sao kê ngân hàng neon trên tờ ghi chú dán — display type đậm nén chặt in trên giấy bìa màu sáng, được giữ với nhau bằng đường viền đen mảnh"

  theme: "light"

  info: "Varo Bank mang phong cách một series poster tài chính tiêu dùng tự tin in trên giấy bìa màu: canvas trắng tinh bị cắt ngang bởi các dải màu full-bleed tím, xanh chanh, san hô và kem, mỗi dải mang display type siêu nén dày. Hệ thống thị giác cố tình ồn ào — National 2 Compressed ở 96–147px dẫn dắt mọi headline với leading gần như bằng 0, khiến chữ hoạt động như một khối đồ họa thay vì văn xuôi. Một màu tím bão hòa duy nhất (#8c58d0) là màu tương tác thực sự duy nhất; mọi thứ chromatic khác đều là bầu không khí trang trí, và các neutral duy nhất có giá trị là đen thật và trắng thật. Border là hairline và tối, radius đồng nhất 4px, và shadow không tồn tại — chiều sâu đến từ sự va chạm màu phẳng, không phải độ cao. Toàn bộ sản phẩm mang cảm giác Gen-Z: vui tươi, hướng đến kiến thức tài chính, và đồ họa quyết đoán mà không mang vẻ doanh nghiệp."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Varo Violet | `#8c58d0` | `--color-varo-violet` | Primary action buttons, active nav, brand logo — màu tím vừa bão hòa duy nhất cung cấp năng lượng cho mọi trạng thái tương tác |"
    info: "| Deep Plum | `#42185f` | `--color-deep-plum` | Dark accent surfaces, chữ đậm trên thẻ sáng, nền dải tối full-bleed — gần như đen với undertone tím |"
    info: "| Lilac Mist | `#cdb0fa` | `--color-lilac-mist` | Fill tím nhạt cho trạng thái surface đã chọn/phụ, tag backgrounds |"
    info: "| Coral Ember | `#ed6c52` | `--color-coral-ember` | Decorative section fills, icon highlights, dotted ticker text — dấu câu chromatic ấm phá vỡ sự thống trị của tím |"
    info: "| Salmon Wash | `#f2a295` | `--color-salmon-wash` | Nền section ấm mềm, muted coral — dải màu diện rộng mang cảm giác ấm mà không chói |"
    info: "| Butter Cream | `#faefdc` | `--color-butter-cream` | Dải surface kem nhạt — neutral ấm nhẹ nhàng nhất, dùng làm nền section thay thế cho trắng |"
    info: "| Lemon Zest | `#fdf0af` | `--color-lemon-zest` | Accent vàng bão hòa cao cho card borders, feature callouts, ticker text — không bao giờ là fill, luôn là outline hoặc text |"
    info: "| Lime Pulse | `#d4e84b` | `--color-lime-pulse` | Xanh chanh rực rỡ dùng trong feature card backgrounds và outlined graphic elements — màu trang trí thu hút chú ý nhất |"
    info: "| Forest Ink | `#183428` | `--color-forest-ink` | Xanh lá đậm cho dark feature card backgrounds và chữ tương phản cao — hiếm nhưng neo các thẻ chủ đề xanh lá |"
    info: "| Mustard Shadow | `#4a4216` | `--color-mustard-shadow` | Chữ và border accent ô liu nhạt trên bề mặt vàng/kem — không bao giờ dùng làm fill |"
    info: "| Carbon | `#000000` | `--color-carbon` | Primary text, hairline borders, icon strokes — màu cấu trúc chủ đạo |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên colored fills, inverted text trên dải tối |"
    info: "| Soft Ash | `#1c1c1c` | `--color-soft-ash` | Secondary text và border gần đen — khó phân biệt với Carbon nhưng dùng cho độ tương phản mềm hơn một chút |"
    info: "| Concrete | `#939393` | `--color-concrete` | Muted helper text, disabled states, secondary metadata |"
    info: "| Fog | `#eff2f5` | `--color-fog` | Bề mặt xám nhạt mát, pressed-button background, input field fill trên section tối |"

  tokens___typography:

    neue_haas_grotesk_display___body__subheads__small_labels__button_text__nav__form_copy___neo_grot_đa_năng_ở_12_72px__weight_450_là_mid_weight_đặc_trưng_cho_body_copy__500_cho_nav_và_labels__400_cho_body_giảm_nhấn__letter_spacing_thắt_chặt_từ_0_0200em_ở_12px_xuống__0_0200em_ở_72px__thay_thế__inter__s_hne__hoặc_neue_haas_grotesk_text_pro_____font_neue_haas_grotesk_display:
      - "**Weights:** 400, 450, 500"
      - "**Sizes:** 12, 14, 16, 18, 20, 22, 28, 36, 44, 52, 72"
      - "**Line height:** 1.11–1.56"
      - "**Letter spacing:** -0.0200em, -0.0190em, -0.0130em, -0.0100em, 0.0200em, 0.0360em"
      - "**Vai trò:** Body, subheads, small labels, button text, nav, form copy — neo-grot đa năng ở 12–72px. Weight 450 là mid-weight đặc trưng cho body copy; 500 cho nav và labels; 400 cho body giảm nhấn. Letter-spacing thắt chặt từ 0.0200em ở 12px xuống -0.0200em ở 72px. Thay thế: Inter, Söhne, hoặc Neue Haas Grotesk Text Pro."

    national_2_compressed___display_headlines___dùng_ở_56_147px_với_line_height_0_80_0_95__tỷ_lệ_ultra_condensed_khiến_chữ_hoạt_động_như_khối_đồ_họa__weight_450_cho_mặc_định__700_cho_stat_callouts_tác_động_tối_đa__thay_thế__oswald_700_600_hoặc_antonio_bold__letter_spacing___0_0100em_trên_toàn_thang_đo_____font_national_2_compressed:
      - "**Weights:** 450, 700"
      - "**Sizes:** 32, 56, 76, 96, 115, 147"
      - "**Line height:** 0.80–1.10"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Display headlines — dùng ở 56–147px với line-height 0.80–0.95, tỷ lệ ultra-condensed khiến chữ hoạt động như khối đồ họa; weight 450 cho mặc định, 700 cho stat callouts tác động tối đa. Letter-spacing: -0.0100em trên toàn thang đo."

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    times___times___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_times:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Times — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    metropolis___metropolis___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_ai_không_mô_tả____font_metropolis:
      - "**Weights:** 500"
      - "**Sizes:** 14px"
      - "**Line height:** 1.14"
      - "**Letter spacing:** -0.004"
      - "**Vai trò:** Metropolis — được phát hiện trong dữ liệu trích xuất nhưng AI không mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|----------------|-------|-------|"
      info: "| caption | 12px | 1.33 | 0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | -0.004px | `--text-body-sm` |"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 20px | 1.28 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.17 | — | `--text-heading` |"
      info: "| heading-lg | 52px | 1.11 | -0.676px | `--text-heading-lg` |"
      info: "| display | 96px | 0.95 | -0.96px | `--text-display` |"
      info: "| display-xl | 147px | 0.8 | -1.47px | `--text-display-xl` |"

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 4px |"
      info: "| images | 4px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    layout:

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

  components:

    primary_cta_button_filled_violet:
      vai_trò: "Biến thể filled button duy nhất — mọi hành động có ý nghĩa trong sản phẩm"

      info: "Background #8c58d0, chữ trắng ở 16px Neue Haas Grotesk Display weight 500, radius 4px, padding dọc 13px × padding ngang 32px, border 1px #8c58d0. Khi hover border giữ nguyên; chỉ chấp nhận opacity hoặc tối nhẹ. Không shadow."

    text_only_action_button_ghost:
      vai_trò: "Secondary actions được hiển thị dưới dạng text có thể click, thường kèm mũi tên"

      info: "Không background, không border. Text ở 14–16px Neue Haas Grotesk Display weight 500 trong #000000 hoặc màu khớp với section. Thường đi kèm glyph mũi tên chỉ phải. Padding dọc 4px."

    email_input_field:
      vai_trò: "Hero và form lead-capture"

      info: "Background trắng, border 1px #000000, radius 4px, padding ngang 16px × padding dọc 12px, placeholder ở 16px weight 400 trong #939393. Border dày lên hoặc chuyển sang #8c58d0 khi focus. Luôn ghép inline với Primary CTA Button."

    top_navigation_bar:
      vai_trò: "Global header cố định"

      info: "Background trắng, wordmark Varo trong #8c58d0 ở ngoài cùng bên trái, 5–6 nav links trong Neue Haas Grotesk Display 16px weight 500 #000000, cách nhau 24–40px. Log in text-link ở bên phải, Primary CTA Button ở ngoài cùng bên phải. Không border-bottom, không shadow — dựa vào độ tương phản canvas."

    hero_split_section:
      vai_trò: "Màn hình đầu tiên above the fold"

      info: "Hai cột ở ~1200px max-width, cột trái chứa kicker label (14px), display headline (National 2 Compressed 72–96px weight 450), và inline email capture. Cột phải là ảnh chụp hoặc device mock lớn radius 4px trên canvas trắng. Section padding 64–80px dọc."

    ticker_marquee_band:
      vai_trò: "Trust statement / feature highlight cuộn ngang"

      info: "Dải ngang full-bleed, không chiều cao cố định — type lấp đầy viewport. Background xoay vòng giữa #8c58d0 và các section tối. Text trong National 2 Compressed 56–76px weight 700 trong màu tương phản (vàng trên tím, tím trên kem), cách nhau bằng bullet dots. Lặp vô hạn, tốc độ cuộn chậm."

    feature_card_colored_fill:
      vai_trò: "Product feature highlight trong lưới 'Start banking better today'"

      info: "Flat colored fill (#fdf0af, #d4e84b, #42185f, #8c58d0, #f2a295), border 1px trong #000000, radius 4px, padding 24px. Headline dùng National 2 Compressed 44–56px weight 450 trong màu chữ tương phản. Một line-art icon nhỏ ở một góc. Cards trong hàng 4 cột trên desktop, chiều cao bằng nhau."

    split_feature_section:
      vai_trò: "Product capability pages (Cash Advance, Line of Credit)"

      info: "Hai cột với padding dọc rộng 80–120px. Background xen kẽ trắng / kem / salmon. Một bên giữ display headline National 2 Compressed 76–115px trong #000000; bên kia giữ ảnh chụp lifestyle radius 4px ở chiều rộng 500–600px. Kicker label phía trên headline ở 16px weight 500."

    dark_cta_banner:
      vai_trò: "Conversion closer, ví dụ: 'Quails apply' sections"

      info: "Dải full-width với background #42185f hoặc #183428, chữ trắng hoặc vàng, Primary CTA Button inline radius 4px (tím trên nền tối, không inverted). Padding 48–64px dọc, text căn trái, max-width 1200px."

    footer:
      vai_trò: "Legal, links, app store badges"

      info: "Background trắng hoặc #1c1c1c tùy theo section kề cận. Link text ở 14px weight 400 trong #000000 hoặc #ffffff, row gap 8–16px. Không logo lockup lớn — chỉ wordmark Varo nhỏ. Legal copy cuối trang ở 12px #939393."

    stat_callout_oversized_number:
      vai_trò: "Nhấn mạnh trong trang về số tiền hoặc sự kiện chính"

      info: "National 2 Compressed 115–147px weight 700, line-height 0.80, letter-spacing -0.0100em. Luôn trong #000000 trên section sáng, hoặc #fdf0af trên section tối. Một footnote numeral chỉ số trên (¹ ² ³) được render inline ở 1/4 kích thước headline trong cùng weight."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng National 2 Compressed ở 76–147px với line-height 0.80–0.95 cho mọi display headline; không bao giờ đặt line-height trên 1.0 ở kích thước display."
      - "Áp dụng màu tím duy nhất #8c58d0 cho mọi primary action dạng filled — Log in link, Get started button, và Learn more đều dùng fill chính xác này."
      - "Kết hợp chỉ hai type families: National 2 Compressed cho display, Neue Haas Grotesk Display cho mọi thứ từ 72px trở xuống. Không bao giờ trộn thêm face thứ ba."
      - "Đặt tất cả radii thành 4px — buttons, inputs, cards, images, và tags đều dùng chung corner radius để có chất lượng đồng nhất, giống như sticker."
      - "Dùng border 1px solid #000000 trên mọi card, input, và graphic element. Màu sống trong fills, không phải strokes."
      - "Neo mọi section bằng kicker label (14–16px weight 500) phía trên display headline; kicker đặt tên cho sản phẩm hoặc khái niệm."
      - "Thắt chặt letter-spacing trên kích thước lớn: -0.0100em trên National 2 Compressed, -0.0200em trên Neue Haas Grotesk Display ở 52px trở lên."

    không_nên_làm:
      - "Không bao giờ dùng #8c58d0 làm decorative fill hoặc section background — nó được dành riêng cho interactive elements. Colored section bands dùng kem, salmon, plum, hoặc lime thay thế."
      - "Không bao giờ đưa drop shadows, blur effects, hoặc multi-layer elevation. Hệ thống cố tình phẳng — nếu surface cần tách biệt, thêm border đen 1px hoặc đổi màu."
      - "Không bao giờ trộn line-heights trên 1.0 với National 2 Compressed — letterforms nén cần leading chặt để đọc như khối đồ họa; open leading phá hủy hiệu ứng khối."
      - "Không bao giờ đặt chromatic button trên chromatic section background cùng họ màu — violet buttons chỉ nằm trên trắng, kem, hoặc dark plum."
      - "Không bao giờ dùng serif, monospace, hoặc handwriting face — hệ thống hai-family (compressed display + neutral grotesk) là toàn bộ bản sắc typographic."
      - "Không bao giờ bo góc trên 4px hoặc dùng pill-shaped buttons; 4px là quy tắc cứng trên toàn hệ thống."
      - "Không bao giờ dùng #0000ee hoặc bất kỳ browser-default link color nào; tất cả link text và underlines đều là #000000 hoặc khớp với section."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Default page canvas, hero backgrounds |"
    info: "| 1 | Cool Fog | `#eff2f5` | Pressed-state button, input trên section tối |"
    info: "| 2 | Butter Cream | `#faefdc` | Nền section thay thế ấm |"
    info: "| 3 | Salmon Wash | `#f2a295` | Dải section màu full-bleed |"
    info: "| 4 | Deep Plum | `#42185f` | Dải section inverted tối |"

  elevation:

    - "**Feature Card:** `none — flat color fill với border 1px solid #000000, không shadow`"
    - "**Primary Button:** `none — flat fill, không shadow`"

  imagery:

    info: "Hình ảnh của Varo là lifestyle-first và được crop chặt: thanh niên trong môi trường thường ngày (nội thất căn hộ, tiệm giặt ủi, quán cà phê) được chụp trong ánh sáng tự nhiên với xử lý ấm, hơi giảm bão hòa. Thiết bị — iPhone hiển thị ứng dụng Varo — xuất hiện thường xuyên dưới dạng hero objects cầm tay thay vì product shots nổi. Tất cả ảnh được đặt trong khung radius 4px không shadow, cảm giác như dán lên trang như ảnh cắt từ tạp chí. Không illustrations, không abstract graphics, không 3D renders. Icons là line-art với stroke weight 1.5–2px, mono-color, khớp với xử lý border. Hình ảnh chiếm khoảng 40% bất kỳ section nào, cân bằng với display typography cỡ lớn."

  layout:

    info: "Max-width 1200px nội dung căn giữa trên canvas trắng full-bleed. Hero là split 50/50: text-and-email-capture bên trái, ảnh cầm thiết bị bên phải, cả hai ở tỷ lệ rộng rãi. Các section xen kẽ nhịp điệu bằng dải màu thay vì loại nội dung — một dải tím hoặc salmon full-bleed, sau đó một section trắng giới hạn, rồi một dải màu khác, tạo nhịp điệu poster-zine. Product feature pages dùng split 50/50 nhất quán với display headline một bên và ảnh lifestyle crop chặt bên kia, đảo bên nào mang nội dung nào khi cuộn. Feature cards xuất hiện trong hàng 4 cột trong lưới 'Start banking today'. Nhịp dọc táo bạo: section padding 64–80px, với display headlines lớn đến mức thường quyết định chiều cao section. Navigation là top bar sạch sẽ không có sticky behavior ngụ ý — không mega-menu, không sidebar. Nhịp tổng thể là: display ồn ào → ảnh hoặc lưới card → ticker dải màu → section tiếp theo."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000 (1px, luôn luôn)"
    - "accent: #8c58d0 (tím, interactive only)"
    - "section band options: #faefdc (kem), #f2a295 (salmon), #42185f (plum), #d4e84b (xanh chanh)"
    - "primary action: #8c58d0 (filled action)"

  3_5_example_component_prompts:
    - "**Hero split section**: Background trắng, max-width 1200px, hai cột. Cột trái: kicker 14px 'Free online banking' trong #000000 weight 500, sau đó headline 96px trong National 2 Compressed weight 450 line-height 0.95 letter-spacing -0.96px color #000000 ('Say hello to a 100% free bank account.'), sau đó inline email input + violet Get started button. Cột phải: ảnh chụp radius 4px của bàn tay cầm iPhone, rộng 500px."

    - "**Feature card in a 4-column grid**: Fill #fdf0af (lemon) phẳng, border 1px solid #000000, radius 4px, padding 24px. Headline trong National 2 Compressed 52px weight 450 color #000000. Line-art icon ở góc trên bên phải, stroke #000000."

    - "**Ticker marquee band**: Background #8c58d0 full-bleed, padding dọc 80px. Text trong National 2 Compressed 56px weight 700 color #fdf0af, lặp lại: 'NO OVERDRAFT FEES · NO IN-NETWORK ATM FEES · NO MINIMUM BALANCE' cách nhau bằng middle dots, cuộn ngang ở tốc độ chậm."

    - "**Outlined ghost action button**: Không background, border 1px solid #000000, radius 4px, padding dọc 13px × ngang 32px. Text trong Neue Haas Grotesk Display 16px weight 500 color #000000 ('Learn more')."

    - "**Stat callout**: National 2 Compressed 147px weight 700 line-height 0.80 letter-spacing -1.47px color #000000, với superscript '³' ở 36px cùng weight, ghép với body copy trong Neue Haas Grotesk Display 16px weight 400 color #000000 ở line-height 1.40."

  similar_brands:

    - "**Chime** — Cùng định vị digital-bank-only với một brand accent color duy nhất, bold sans-serif headlines, và lifestyle photography của thanh niên trong khoảnh khắc tài chính hàng ngày"
    - "**Current** — Cùng cách dùng oversized compressed display type cho product headlines, flat colored section bands, và một màu tím vừa duy nhất làm primary interactive accent"
    - "**Cash App** — Cùng năng lượng sản phẩm tài chính Gen-Z: flat color blocks, minimal borders, chunky condensed display type, và bright decorative accent palette ngoài brand color"
    - "**Step** — Cùng consumer-banking poster aesthetic — alternating colored bands, oversized headlines, và device-in-hand hero photography với một màu tím rực rỡ duy nhất làm primary action"
    - "**SoFi** — Cùng hairline-border card system và flat-color section bands, dù SoFi thiên về navy hơn; Varo đẩy bảng màu xa hơn vào coral và lime"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-varo-violet: #8c58d0;
          --color-deep-plum: #42185f;
          --color-lilac-mist: #cdb0fa;
          --color-coral-ember: #ed6c52;
          --color-salmon-wash: #f2a295;
          --color-butter-cream: #faefdc;
          --color-lemon-zest: #fdf0af;
          --color-lime-pulse: #d4e84b;
          --color-forest-ink: #183428;
          --color-mustard-shadow: #4a4216;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-soft-ash: #1c1c1c;
          --color-concrete: #939393;
          --color-fog: #eff2f5;
        
          /* Typography — Font Families */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-national-2-compressed: 'National 2 Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-metropolis: 'Metropolis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.004px;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.28;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.17;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -0.676px;
          --text-display: 96px;
          --leading-display: 0.95;
          --tracking-display: -0.96px;
          --text-display-xl: 147px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -1.47px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --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-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-64px;
          --card-padding: 24px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 4px;
          --radius-images: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-cool-fog: #eff2f5;
          --surface-butter-cream: #faefdc;
          --surface-salmon-wash: #f2a295;
          --surface-deep-plum: #42185f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-varo-violet: #8c58d0;
          --color-deep-plum: #42185f;
          --color-lilac-mist: #cdb0fa;
          --color-coral-ember: #ed6c52;
          --color-salmon-wash: #f2a295;
          --color-butter-cream: #faefdc;
          --color-lemon-zest: #fdf0af;
          --color-lime-pulse: #d4e84b;
          --color-forest-ink: #183428;
          --color-mustard-shadow: #4a4216;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-soft-ash: #1c1c1c;
          --color-concrete: #939393;
          --color-fog: #eff2f5;
        
          /* Typography */
          --font-neue-haas-grotesk-display: 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-national-2-compressed: 'National 2 Compressed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-metropolis: 'Metropolis', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: -0.004px;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1.28;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --text-heading: 36px;
          --leading-heading: 1.17;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.11;
          --tracking-heading-lg: -0.676px;
          --text-display: 96px;
          --leading-display: 0.95;
          --tracking-display: -0.96px;
          --text-display-xl: 147px;
          --leading-display-xl: 0.8;
          --tracking-display-xl: -1.47px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-md: 4px;
        }