wrike___style_reference:
  info: "> Công tắc màu vôi trên bảng điều khiển kỹ sư sạch sẽ — điểm nhấn xanh tươi sáng nổi bật trên nền xanh nước biển đậm uy quyền, trôi nổi trên nền trắng."

  theme: "light"

  info: "Ngôn ngữ thiết kế của Wrike được xây dựng trên nền canvas trắng tinh khôi, điểm xuyết bằng một màu xanh vôi tươi sáng duy nhất, hoạt động như một công tắc nguồn xuyên suốt giao diện. Hệ thống sử dụng màu xanh nước biển nửa đêm đậm cho văn bản chính và các phần tối, với các màu trung tính xanh lam-xám lạnh tạo sự phân cách bề mặt mềm mại thay vì xám ấm hoặc bóng đổ nặng. Typography được đảm nhận bởi TT Norms Pro trên lưới 4px thoải mái, với headline weight 700 thu hút sự chú ý so với body text weight 400 mỏng nhẹ. Các component có dạng pill (radius 40px) và card mềm (radius 20px), sử dụng một công thức shadow đặc trưng duy nhất giúp product mockup nổi khỏi trang. Tổng thể mang cảm giác enterprise tự tin nhưng tràn đầy năng lượng — một công cụ quản lý công việc trông giống như một productivity OS, chứ không phải một biểu mẫu."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Signal Green | `linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128))` | `--color-signal-green` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính; Hình khối trang trí, radial glow accent trong phần tối, gradient endpoints |"
    info: "| Midnight Navy | `#162136` | `--color-midnight-navy` | Headlines, body text chính, navigation, footer section tối — mỏ neo cấu trúc của toàn bộ hệ thống phân cấp |"
    info: "| Slate Navy | `#2b3a57` | `--color-slate-navy` | Secondary headings, card titles, văn bản tối đã làm dịu — navy nhẹ hơn cho sub-hierarchy |"
    info: "| Steel Blue-Gray | `#657694` | `--color-steel-blue-gray` | Helper text, secondary copy, label đã làm mờ, dropdown menu — tương đương tông lạnh của mid-gray |"
    info: "| Mist Blue | `#bfc7d9` | `--color-mist-blue` | Hairline borders, divider, input borders, separator tinh tế |"
    info: "| Carbon | `#000000` | `--color-carbon` | Icon strokes, văn bản tương phản cao, SVG fills, accent hình khối trang trí |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, inverse text trên nền tối, input fills |"
    info: "| Frost Surface | `#f2f5fa` | `--color-frost-surface` | Feature card backgrounds, section wash nhẹ, ghost button hovers — tông lạnh nhẹ nhàng nhất |"
    info: "| Halo Blue-Gray | `#c1c9d8` | `--color-halo-blue-gray` | Shadow tones, cạnh bề mặt nâng cao, hình nền trang trí |"
    info: "| Link Blue | `#0073d3` | `--color-link-blue` | Accent xanh hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Smoke Gray | `#737a86` | `--color-smoke-gray` | Disabled button states, control không hoạt động, metadata đã giảm nhấn mạnh |"

  tokens___typography:

    tt_norms_pro___hệ_thống_một_font_cho_toàn_bộ_ui__weight_700_cho_headlines_và_cta_thu_hút_sự_chú_ý_trên_nền_trắng__weight_600_cho_subheadings_và_button_labels__weight_400_cho_body_và_mô_tả__tabular_numerals_tnum_được_bật_cho_product_mockup_nhiều_dữ_liệu__stylistic_alternates_ss01_ss04__ss06_hoạt_động_cho_các_chữ_cái_tinh_tế_ở_kích_thước_display__khoảng_cách_chữ_0_125em_trên_chữ_in_hoa_12_13px_tạo_ra_mẫu_eyebrow_in_hoa__3__hours___trusted_by_20_000__happy_customers_worldwide__cấu_trúc_mọi_section_____font_tt_norms_pro:
      - "**Thay thế:** Inter hoặc DM Sans"
      - "**Weights:** 400, 600, 700"
      - "**Kích thước:** 12, 13, 14, 16, 18, 20, 24, 32, 48, 64"
      - "**Line height:** 1.10–2.00 (tight 1.10–1.20 cho display, 1.38–1.50 cho body, 2.00 cho eyebrow rộng rãi)"
      - "**Letter spacing:** 0.125em cho eyebrow in hoa ở 12-13px, 0.013-0.014em cho body và heading nhỏ"
      - "**OpenType features:** `\"ss01\", \"ss02\", \"ss03\", \"ss04\", \"ss06\", \"tnum\"`"
      - "**Vai trò:** Hệ thống một font cho toàn bộ UI. Weight 700 cho headlines và CTA (thu hút sự chú ý trên nền trắng), weight 600 cho subheadings và button labels, weight 400 cho body và mô tả. Tabular numerals (tnum) được bật cho product mockup nhiều dữ liệu; stylistic alternates ss01–ss04, ss06 hoạt động cho các chữ cái tinh tế ở kích thước display. Khoảng cách chữ 0.125em trên chữ in hoa 12–13px tạo ra mẫu eyebrow in hoa ('3+ HOURS', 'TRUSTED BY 20,000+ HAPPY CUSTOMERS WORLDWIDE') cấu trúc mọi section."

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

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.6 | 0.125px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | 0.014px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.013px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | 0.013px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.38 | 0.014px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.3 | 0.013px | `--text-heading` |"
      info: "| heading-lg | 32px | 1.25 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.2 | — | `--text-display` |"
      info: "| hero | 64px | 1.1 | — | `--text-hero` |"

  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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 20px |"
      info: "| pills | 9999px |"
      info: "| small | 4px |"
      info: "| inputs | 8px |"
      info: "| buttons | 40px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| xl | `rgba(24, 31, 56, 0.25) 0px 25px 45px -45px` | `--shadow-xl` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính trên hero, section CTAs và footer"

      info: "Nền Signal Green (#00e05c) đầy, chữ trắng, TT Norms Pro weight 600 ở 16px, pill radius 40px, padding 14px 28px. Màu xanh tươi sáng trên nền trắng tinh khiến nó không thể bỏ lỡ. Được sử dụng cho 'Try Wrike for free' ở mọi nơi."

    ghost_text_button:
      vai_trò: "Hành động phụ bên dưới primary CTA (ví dụ: 'Discover Wrike in 3 minutes')"

      info: "Không nền, không border. Chữ Link Blue (#0073d3) ở 14-16px weight 400, kết hợp với icon nhỏ (play triangle, arrow). Padding 8px. Nằm ngay dưới primary CTA như một lựa chọn thay thế áp lực thấp."

    top_announcement_bar:
      vai_trò: "Thanh khuyến mãi nhạy cảm thời gian phía trên navigation"

      info: "Nền Signal Green (#00e05c) full-bleed, chữ đen hoặc navy đậm ở 13px weight 600, căn giữa. Padding dọc 8-10px. Tiền tố icon lightning-bolt. Chỉ xuất hiện khi có chiến dịch đang hoạt động."

    navigation_bar:
      vai_trò: "Navigation chính của trang với logo và các liên kết tiện ích"

      info: "Nền trắng, không có border dưới nhìn thấy được, nằm trên canvas trắng. Wrike green checkmark wordmark bên trái, nav links (Solutions, Product, Why Wrike?, Resources, Enterprise, Pricing) trong Midnight Navy ở 16px weight 400 với dropdown chevrons. Cụm bên phải: 'Contact Sales' text link, language selector ('EN'), 'Log in' text, sau đó là Primary CTA đầy. Signature shadow rgba(24, 31, 56, 0.25) 0px 25px 45px -45px có thể áp dụng khi cuộn."

    feature_card:
      vai_trò: "Khối feature ba cột trong phần AI và các grid tương tự"

      info: "Nền trắng, radius 20px, không border nhìn thấy được. Card padding 32-40px bên trong. Eyebrow ('3+ HOURS') ở dạng in hoa 13px letter-spacing 0.125em weight 600 xanh lam nhạt. Heading trong Midnight Navy weight 700 ở 20-24px. Body trong Steel Blue-Gray #657694 ở 14-16px weight 400. Green link text với right-arrow affordance. Nửa dưới chứa ảnh hoặc hình minh họa với floating green icon badges chồng lên."

    hero_section:
      vai_trò: "Landing above-the-fold"

      info: "Nền trắng full-bleed, max-width 1200px nội dung. Layout hai cột: nửa trái có hero headline 64px trong Midnight Navy weight 700 (line-height 1.10) với một từ khóa được highlight bằng Signal Green, body hỗ trợ trong Steel Blue-Gray, sau đó là Primary CTA + Ghost button stack. Nửa phải hiển thị product mockup (dashboard UI) nổi với signature shadow rgba(24, 31, 56, 0.25) 0px 25px 45px -45px."

    product_mockup:
      vai_trò: "Ảnh chụp màn hình Dashboard/UI được render như một phần tử nổi"

      info: "Card trắng với radius 12-20px, nổi qua signature shadow rgba(24, 31, 56, 0.25) 0px 25px 45px -45px. Nội dung bên trong hiển thị Kanban boards, charts, avatars và dữ liệu dự án đầy đủ màu sắc. Đôi khi được xoay nhẹ hoặc dịch chuyển để tạo cảm giác sống động."

    dark_cta_footer_section:
      vai_trò: "Dải chuyển đổi cuối cùng trước khi kết thúc trang"

      info: "Nền Midnight Navy #162136 full-bleed. Các hình khối trang trí màu xanh (tam giác, pill blobs, glow circles) nổi trên các cạnh như năng lượng thương hiệu. Headline trắng căn giữa weight 700 ở 32-48px. Sub-copy trong navy nhạt hơn đã làm mờ. Email input (nền trắng, radius 8px, placeholder 14px) kết hợp inline với Primary CTA. Hàng xếp hạng sao bên dưới."

    email_input___button_combo:
      vai_trò: "Thu hút khách hàng tiềm năng trong dark footer section"

      hàng_flex_ngang__input: "nền trắng, radius 8px, border Mist Blue 1px, placeholder 14px trong Steel Blue-Gray, padding dọc 12-16px. Button: Primary CTA tương tự, biến thể radius 8px (không phải pill) để lồng vào cạnh input."

    client_logo_strip:
      vai_trò: "Dải bằng chứng xã hội bên dưới hero"

      info: "Nền trắng, eyebrow in hoa căn giữa 'TRUSTED BY 20,000+ HAPPY CUSTOMERS WORLDWIDE' ở 13px letter-spacing 0.125em trong xám nhạt. Hàng 7-8 client logo grayscale ở chiều cao đồng nhất, cách đều nhau. Logo được render bằng #000000 hoặc navy nhạt không có điểm nhấn màu."

    award_badge:
      vai_trò: "Sự công nhận của bên thứ ba (G2, TrustRadius, Capterra)"

      info: "Huy hiệu hình khiên/ribbon đầy màu sắc với gradient fills nhiều màu, cao 80-100px, căn giữa phía trên caption label trong Midnight Navy. Xuất hiện trong grid 3 cột."

    floating_icon_badge:
      vai_trò: "Icon trang trí nhỏ chồng lên ảnh feature card"

      info: "Hình vuông hoặc tròn radius 8-12px, nền Signal Green hoặc trắng với icon xanh, nền bán trong suốt. Chồng lên góc dưới của ảnh feature card để thêm năng lượng màu thương hiệu vào hình ảnh trung tính."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng Signal Green #00e05c là accent màu DUY NHẤT trong giao diện — không có màu thương hiệu phụ, không có trạng thái lỗi đỏ được render bằng màu đỏ (sử dụng navy hoặc xám nhạt cho lỗi)"
      - "Áp dụng pill radius 40px cho tất cả các button độc lập; chỉ sử dụng radius 8px cho button thu thập email lồng vào cạnh input"
      - "Sử dụng công thức shadow duy nhất rgba(24,31,56,0.25) 0px 25px 45px -45px cho product mockup và sticky nav — không bao giờ xếp chồng nhiều shadow"
      - "Highlight chính xác MỘT từ bằng Signal Green trong bất kỳ hero hoặc section headline nào (ví dụ: 'One platform', 'Wrike AI') — từ khóa xanh là mỏ neo thị giác"
      - "Đặt tất cả eyebrow ở dạng in hoa 12-13px với letter-spacing 0.125em trong Steel Blue-Gray #657694 để tạo mẫu nhịp điệu section"
      - "Sử dụng Frost Surface #f2f5fa cho feature card backgrounds và section wash tinh tế — không bao giờ sử dụng nó làm nền trang"
      - "Giữ section CTA cuối cùng là navy đậm #162136 với đồ trang trí hình học Signal Green như sự giải phóng năng lượng của trang"

    không_nên_làm:
      - "Không giới thiệu màu accent thứ hai (không tím, không cam, không xanh mòng két) — hệ thống là đơn sắc cộng với một màu xanh"
      - "Không sử dụng button vuông hoặc góc nhọn — pill radius là đặc trưng"
      - "Không xếp chồng nhiều công thức shadow hoặc thêm inner shadows — chỉ một công thức shadow duy nhất"
      - "Không render dark CTA section bằng bất kỳ màu nào khác ngoài #162136 — xám nhạt hoặc xám trung bình làm hỏng độ tương phản của section cuối"
      - "Không sử dụng xám ấm hoặc trung tính be — toàn bộ bảng màu trung tính là xanh lam-xám lạnh"
      - "Không sử dụng ảnh full-bleed làm hero — product UI mockup luôn là hero hình ảnh"
      - "Không render Signal Green CTA ở bất kỳ biến thể nào khác ngoài pill được tô đầy — không có outlined green, không có ghost green, không có green text-only"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang mặc định |"
    info: "| 1 | Frost Card | `#f2f5fa` | Feature cards, section wash tinh tế |"
    info: "| 2 | Dark Stage | `#162136` | Section CTA cuối cùng, dải tương phản chế độ tối |"
    info: "| 3 | Signal Layer | `#00e05c` | CTA fills, announcement bar, active state fills |"

  elevation:

    - "**Product mockup cards:** `rgba(24, 31, 56, 0.25) 0px 25px 45px -45px`"
    - "**Sticky navigation:** `rgba(24, 31, 56, 0.25) 0px 25px 45px -45px`"

  imagery:

    info: "Ảnh chỉ xuất hiện bên trong feature cards: ảnh người thật tại laptop, trong cuộc họp, trong bối cảnh văn phòng. Ảnh được xử lý như các hình chữ nhật chứa bên trong card trắng, không bao giờ full-bleed, và luôn được chồng lên bởi các floating green icon badges nhỏ ở góc để thêm màu thương hiệu. Không có lifestyle hero photography — product UI mockup CHÍNH LÀ hero hình ảnh. Các hình khối trang trí (tam giác, pill blobs, glows) xuất hiện trong dark footer section bằng Signal Green như năng lượng thương hiệu. Icons tối giản: outlined hoặc đơn sắc phẳng, không 3D, không gradient, kết hợp với màu xanh khi có tính tương tác."

  layout:

    info: "Container căn giữa max-width 1200px. Hero là chia hai cột (văn bản trái, product mockup phải) trên nền trắng. Các section là các dải trắng full-bleed xếp chồng dọc với khoảng cách dọc 80-120px, không có nhịp điệu sáng/tối xen kẽ cho đến section CTA cuối cùng là dải navy đậm full-bleed. Feature sections sử dụng grid card 3 cột với chiều rộng bằng nhau. Content blocks là các stack căn giữa với văn bản+hình ảnh xen kẽ 2 cột. Navigation là một thanh ngang trên cùng duy nhất, sticky khi cuộn, không có sidebar. Density là comfortable — padding rộng rãi bên trong card, khoảng cách dọc rộng giữa các section, không bao giờ chật chội."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text (primary): #162136 Midnight Navy"
    - "text (muted): #657694 Steel Blue-Gray"
    - "background (page): #ffffff Paper White"
    - "background (card): #f2f5fa Frost Surface"
    - "border: #bfc7d9 Mist Blue"
    - "accent: #00e05c Signal Green"
    - "primary action: không có màu CTA riêng biệt"

    3_5_ví_dụ_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các neutral button treatments đã trích xuất thay vì phát minh ra màu CTA đầy."

    - "**Xây dựng một feature card**: Nền trắng #ffffff, border-radius 20px, padding trong 32px. Trên cùng: eyebrow in hoa '3+ HOURS' ở 13px weight 600 letter-spacing 0.125em trong #657694. Giữa: heading ở 24px weight 700 trong #162136, sau đó body ở 16px weight 400 trong #657694. Bên dưới body: một text link Link Blue #0073d3 với right-arrow ở 16px. Nửa dưới: ảnh 16:9 với floating green (#00e05c) icon badge radius 10px chồng lên góc dưới bên trái."

    - "**Xây dựng một client logo strip**: Nền trắng #ffffff, căn giữa. Eyebrow text 'TRUSTED BY 20,000+ HAPPY CUSTOMERS WORLDWIDE' ở 13px weight 600 letter-spacing 0.125em trong #657694, in hoa. Bên dưới: một hàng duy nhất gồm 8 client logo grayscale (render bằng #000000 hoặc #2b3a57 nhạt), mỗi logo cao ~80px, cách đều nhau với khoảng cách 40-60px giữa chúng."

  signature_choices:

    info: "Ba lựa chọn xác định bản sắc hình ảnh của Wrike và sẽ không xuất hiện trong một hệ thống SaaS chung chung:"

    - "**Màu xanh vôi một tông là accent màu duy nhất.** Mọi màu khác trong hệ thống đều là achromatic, gần xám hoặc navy. Điều này làm cho màu xanh trên CTA và brand wordmark có cảm giác như một công tắc nguồn — nó chỉ xuất hiện ở nơi thương hiệu cần bạn hành động. Sử dụng hai accent (ví dụ: xanh lam và xanh lục) sẽ làm loãng điều này."

    - "**Nút hình pill với radius 40px.** Hầu hết enterprise SaaS sử dụng radius 4-8px trên button. Wrike đẩy lên 40px — gần như full-pill. Kết hợp với nền xanh tươi sáng, CTA đọc là thân thiện và dứt khoát, không phải công ty. Biến thể radius 8px chỉ xuất hiện trên button thu thập email lồng vào cạnh input."

    - "**Một công thức shadow cho tất cả elevation.** rgba(24,31,56,0.25) 0px 25px 45px -45px là shadow duy nhất trong hệ thống. Được sử dụng trên product mockup và sticky nav. Spread âm (-45px) có nghĩa là shadow chỉ xuất hiện ở cạnh dưới, tạo cảm giác 'tờ giấy nổi' mà không có halo xung quanh tất cả các mặt. Các hệ thống khác sử dụng 3-5 bậc shadow; Wrike sử dụng một."

  similar_brands:

    - "**Notion** — Cùng bảng màu gần như đơn sắc với một accent tươi sáng duy nhất và CTA hình pill; product mockup làm hero hình ảnh"
    - "**Asana** — Cùng canvas trắng enterprise-SaaS với trung tính xanh lam-xám lạnh, card padding rộng rãi và grid feature 3 cột có cấu trúc"
    - "**Linear** — Cùng sự kiềm chế với một màu accent đặc trưng duy nhất được sử dụng tiết kiệm cho active states và CTA, cộng với một section inverse navy đậm cho CTA cuối cùng"
    - "**ClickUp** — Cùng định vị work-management cạnh tranh với màu thương hiệu xanh tươi, product mockup hero và dải bằng chứng xã hội award-badge"
    - "**Monday.com** — Cùng mẫu SaaS accent tươi sáng trên nền trắng với card component tròn, section grid feature và dải CTA cuối cùng chế độ tối"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-green: #00e05c;
          --gradient-signal-green: linear-gradient(to left, rgb(0, 153, 128), rgb(0, 178, 89), rgb(0, 224, 92), rgb(0, 178, 89), rgb(0, 153, 128));
          --color-midnight-navy: #162136;
          --color-slate-navy: #2b3a57;
          --color-steel-blue-gray: #657694;
          --color-mist-blue: #bfc7d9;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-frost-surface: #f2f5fa;
          --color-halo-blue-gray: #c1c9d8;
          --color-link-blue: #0073d3;
          --color-smoke-gray: #737a86;
        
          /* Typography — Font Families */
          --font-tt-norms-pro: 'TT Norms Pro', 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;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.6;
          --tracking-caption: 0.125px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: 0.014px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.013px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.013px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.014px;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: 0.013px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --text-display: 48px;
          --leading-display: 1.2;
          --text-hero: 64px;
          --leading-hero: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 32-40px;
          --element-gap: 12-24px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-pills: 9999px;
          --radius-small: 4px;
          --radius-inputs: 8px;
          --radius-buttons: 40px;
        
          /* Shadows */
          --shadow-xl: rgba(24, 31, 56, 0.25) 0px 25px 45px -45px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-frost-card: #f2f5fa;
          --surface-dark-stage: #162136;
          --surface-signal-layer: #00e05c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-green: #00e05c;
          --color-midnight-navy: #162136;
          --color-slate-navy: #2b3a57;
          --color-steel-blue-gray: #657694;
          --color-mist-blue: #bfc7d9;
          --color-carbon: #000000;
          --color-paper-white: #ffffff;
          --color-frost-surface: #f2f5fa;
          --color-halo-blue-gray: #c1c9d8;
          --color-link-blue: #0073d3;
          --color-smoke-gray: #737a86;
        
          /* Typography */
          --font-tt-norms-pro: 'TT Norms Pro', 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;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.6;
          --tracking-caption: 0.125px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: 0.014px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.013px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.013px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: 0.014px;
          --text-heading: 24px;
          --leading-heading: 1.3;
          --tracking-heading: 0.013px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --text-display: 48px;
          --leading-display: 1.2;
          --text-hero: 64px;
          --leading-hero: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
          --radius-3xl-3: 40px;
        
          /* Shadows */
          --shadow-xl: rgba(24, 31, 56, 0.25) 0px 25px 45px -45px;
        }