front___style_reference:
  info: "> Phòng điều khiển màu plum đậm, một tia sáng xanh vôi. Tường aubergine sâu thẳm, viền sương lavender, và một ngọn hải đăng chartreuse duy nhất kéo mọi ánh nhìn."

  theme: "dark"

  info: "Front vận hành trong ngôn ngữ command-center màu plum đậm: một màu tím bão hòa duy nhất (#300c41) làm nền chính cho trang, các card lavender nhạt hơn nổi bên trên, và một điểm nhấn xanh vôi điện tử đâm xuyên qua bóng tối — màu ấm duy nhất. Typography là neo-grotesque với tracking chặt, display size ở weight 500 kéo vào trong -0.02em khiến headline mang cảm giác gia công máy móc thay vì vẽ tay. Các bề mặt phẳng — không drop shadow, chỉ có một viền inset 1px mảnh màu lilac nhạt (#d0c6f0) để xác định cạnh tương tác. Nhịp điệu tổng thể tự tin và dày đặc: pill controls bo tròn (bán kính 40-64px), spacing 8/16/24px gọn gàng, và xếp lớp dark-on-dark khiến CTA xanh vôi như được bật sáng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Aubergine | `#300c41` | `--color-aubergine` | Canvas trang, hero backgrounds, nav background — bề mặt màu chủ đạo duy nhất tạo nên bản sắc không thể nhầm lẫn của Front |"
    info: "| Royal Plum | `#5b1f76` | `--color-royal-plum` | Accent tím hồng hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |"
    info: "| Lime Spark | `#dee948` | `--color-lime-spark` | Accent xanh lá hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |"
    info: "| Bright Violet | `#8034bf` | `--color-bright-violet` | Accent tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |"
    info: "| Lavender Glow | `#b375f4` | `--color-lavender-glow` | Viền trang trí, accent stroke trên illustration, gradient terminus trong chat widget |"
    info: "| Ink | `#1c1e20` | `--color-ink` | Body text và heading chính trên bề mặt sáng — gần đen với một chút ấm nhẹ |"
    info: "| Frost | `#f0f4fe` | `--color-frost` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính |"
    info: "| Pale Lilac | `#e2dcf6` | `--color-pale-lilac` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính |"
    info: "| Stone | `#dedfe2` | `--color-stone` | Viền trên bề mặt sáng, đường kẻ bảng, outline không hoạt động |"
    info: "| Slate | `#5b5d63` | `--color-slate` | Secondary text, helper copy, metadata labels |"
    info: "| Pewter | `#7c8088` | `--color-pewter` | Tertiary text, placeholder copy, disabled labels |"
    info: "| Ash | `#8e929b` | `--color-ash` | Màu trung tính hỗ trợ cho secondary UI, đường kẻ, và muted labels. Không dùng làm màu CTA chính |"
    info: "| Midnight Navy | `#0d1d39` | `--color-midnight-navy` | Accent tím hỗ trợ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không dùng làm màu CTA chính |"
    info: "| Lavender Whisper | `#d0c6f0` | `--color-lavender-whisper` | Màu viền inset focus ring, hover wash nhẹ, shadow pha màu trên card nổi |"
    info: "| Deep Olive | `#1d1f04` | `--color-deep-olive` | Accent text tối hiếm gặp trên nút xanh vôi và bề mặt sáng với độ tương phản tối đa |"

  tokens___typography:

    suisse_intl___typeface_chính_trên_toàn_bộ_ui___body__heading__button__navigation__neo_grotesque_tùy_chỉnh_mang_lại_cho_front_cảm_giác_gia_công_máy_móc__swiss_instrument__weight_500_đảm_nhận_cả_body_và_display__nên_hệ_thống_dựa_vào_tracking_và_kích_thước_để_tạo_hierarchy_thay_vì_tương_phản_weight_____font_suisse_intl:
      - "**Thay thế:** Inter, Helvetica Neue, hoặc Aktiv Grotesk"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 10, 12, 14, 15, 16, 17, 20, 25, 30, 36, 43, 52, 62px"
      - "**Line height:** 1.20 body, 1.10 display"
      - "**Letter spacing:** Display size kéo vào trong mạnh: -0.02em ở 62px (-1.24px), -0.019em ở 52px (-0.99px), -0.017em ở 43px (-0.73px), -0.015em ở 36px (-0.54px), -0.01em ở 25px (-0.25px). Body và kích thước nhỏ tracking trung tính hoặc hơi mở."
      - "**Vai trò:** Typeface chính trên toàn bộ UI — body, heading, button, navigation. Neo-grotesque tùy chỉnh mang lại cho Front cảm giác gia công máy móc, Swiss-instrument; weight 500 đảm nhận cả body và display, nên hệ thống dựa vào tracking và kích thước để tạo hierarchy thay vì tương phản weight."

    suisse_works___accent_serif_hiếm___xuất_hiện_như_một_điểm_nhấn_ngữ_cảnh_đơn_lẻ__không_phải_typeface_cấu_trúc____font_suisse_works:
      - "**Thay thế:** Tiempos Text hoặc Source Serif Pro"
      - "**Weights:** 500"
      - "**Kích thước:** 25px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Accent serif hiếm — xuất hiện như một điểm nhấn ngữ cảnh đơn lẻ, không phải typeface cấu trúc"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.003px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 25px | 1.2 | -0.25px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.19 | -0.54px | `--text-heading` |"
      info: "| heading-lg | 43px | 1.17 | -0.73px | `--text-heading-lg` |"
      info: "| display | 62px | 1.1 | -1.24px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "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` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| pills | 64px |"
      info: "| inputs | 10px |"
      info: "| buttons | 40px |"
      info: "| chatWidget | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(208, 198, 240) 0px 0px 0px 1px inset` | `--shadow-subtle` |"

    layout:

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

  components:

    lime_primary_action:
      vai_trò: "CTA chính duy nhất trên tất cả các trang — phần tử luôn phải hiển thị rõ nhất"

      info: "Fill #dee948 xanh vôi, text #0d1d39 in Suisse Intl 500 ở 16px, bán kính pill ngầm 9999px (hiển thị 40px từ dữ liệu), padding ngang 24px, padding dọc 12px. Không viền, không shadow. Nằm trực tiếp trên canvas Aubergine để tương phản lime-to-plum làm toàn bộ công việc thị giác."

    outlined_ghost_action:
      vai_trò: "CTA thứ cấp đi kèm với nút xanh vôi trên bề mặt tối"

      info: "Fill trong suốt, viền 1px #e2dcf6 (Pale Lilac), text #ffffff in Suisse Intl 500 ở 16px, bán kính 40px, padding ngang 24px / dọc 12px. Viền lilac nhạt thay thế drop shadow thông thường — nó phát sáng nhẹ nhàng trên nền plum mà không cạnh tranh với xanh vôi."

    filled_plum_nav_button:
      vai_trò: "Hành động cấp header nằm trong thanh navigation tối"

      info: "Fill #300c41 (giống canvas, được xác định bằng viền inset Pale Lilac 1px), text #ffffff, bán kính 40px, padding 10px 20px. Trông như một khe lõm trong nav chứ không phải nút nổi."

    ghost_nav_button:
      vai_trò: "Hành động header thứ ba cạnh nút nav đã fill"

      info: "Fill trong suốt, viền Pale Lilac 1px (#e2dcf6), text trắng, bán kính 40px, padding giống nút nav đã fill. Phiên bản thu nhỏ của hero ghost action."

    chat_widget_card:
      vai_trò: "Trợ lý nổi cố định ở góc dưới bên phải"

      info: "Card gradient lavender (#b375f4 → #d0c6f0), bán kính 20px, rộng ~320px, với icon Front màu tím ở trên, heading trắng 'Welcome to Front!' ở 20px weight 500, một chồng các tùy chọn pill trắng (Get a Demo, Pricing, Product Tour, Chat with our AI Virtual Rep) bán kính 40px, và một nút icon send nhỏ màu tím ở góc. Padding trong 20px, gap giữa các tùy chọn 8px."

    announcement_bar:
      vai_trò: "Thông báo một dòng ở đầu trang"

      info: "Fill xanh vôi #dee948, text #0d1d39 in Suisse Intl 14px weight 500, căn giữa, full-bleed, padding dọc 8px. Inline link gạch chân cùng màu tối. Đây là nơi duy nhất xanh vôi xuất hiện dưới dạng bề mặt nền thay vì fill nút."

    top_navigation_bar:
      vai_trò: "Header cố định với logo, link sản phẩm, và hai CTA"

      info: "Nền #300c41 (Aubergine), cao 64-72px, padding ngang 16px. Logo bên trái dạng gradient lavender. Link nav trung tâm màu trắng ở 15px weight 500 với gap 32px. Cụm bên phải: 'Sign in' là text trắng thuần, sau đó là nút plum đã fill, rồi nút ghost. Không viền hoặc shadow nhìn thấy — nav nổi trên cùng canvas plum."

    hero_section:
      vai_trò: "Value proposition màn hình đầu tiên với CTA kép"

      info: "Nền Aubergine (#300c41) full-width, padding dọc 80-120px, chồng text căn giữa. Display headline ở 62px weight 500 màu trắng, tracking -1.24px, max-width ~900px. Sub-headline ở 17-20px weight 400 màu #d0c6f0 (Pale Lilac) — subtext lilac trên nền plum là signature, tránh xám thuần. Hàng hai nút với gap 16px: lime primary + ghost secondary. Bên dưới: ba link dạng tab ('Cross-team coordination', 'Multi-step workflows', 'AI command center') với tab đang active được gạch chân trắng."

    email_card_mockup:
      vai_trò: "Card trực quan hóa sản phẩm nhúng trong hero/feature section"

      info: "Fill Lilac Mist (#e2dcf6), bán kính 20px, padding 20px, với card thread email trắng bên trong. Avatar hình tròn (40px), tên người gửi in Ink 16px weight 500, chủ đề in Slate 14px, nội dung tin nhắn in Ink 15px. Nổi ở góc nhẹ trên nền Aubergine để gợi chiều sâu mà không cần drop shadow."

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

      info: "Nằm trên dải tím nhạt hơn (#5b1f76 Royal Plum). Nhãn 'Trusted by 9,000+ companies' căn trái màu trắng ở 14px. Logo màu trắng ở độ mờ ~60%, cao 32px, phân bố ngang với gap 48-80px. Không viền hoặc đường kẻ giữa các logo."

    pill_tab_indicator:
      vai_trò: "Gạch chân trạng thái active cho ba tab feature hero"

      info: "Gạch chân trắng 2px bên dưới tab đang active, rộng 24px, căn giữa dưới nhãn. Tab không active không có gạch chân. Nhãn tab màu trắng ở 16px weight 500, gap ngang 32px giữa các tab."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng Lime Spark (#dee948) cho action chính duy nhất trên mỗi trang — nó phải là màu ấm duy nhất hiển thị"
      - "Đặt tất cả display headline ở 43px trở lên với negative tracking từ -0.017em đến -0.02em; kéo vào trong là điều khiến Suisse Intl mang cảm giác gia công máy móc"
      - "Xếp lớp bề mặt chỉ bằng màu sắc: canvas Aubergine → dải Royal Plum → card Lilac Mist → panel Frost; không bao giờ dùng drop shadow để tạo chiều sâu"
      - "Dùng viền inset Pale Lilac 1px (#d0c6f0) trên bất kỳ control tương tác nào cần cạnh xác định trên bề mặt tối"
      - "Giữ bán kính nút ở 40px và pill controls ở 64px — bán kính lớn là một phần của silhouette Front"
      - "Dùng #d0c6f0 (Pale Lilac) cho secondary body text trên bề mặt tối thay vì xám thuần — nó giữ đúng thương hiệu"
      - "Neo tất cả spacing vào đơn vị cơ sở 8px: 8/16/24/32/48/80 cho gap, padding, và nhịp section"

    don_t:
      - "Không dùng Lime Spark cho bất kỳ thứ gì khác ngoài fill action chính — nó mất sức mạnh nếu xuất hiện trên nhiều hơn một element mỗi màn hình"
      - "Không thêm drop shadow vào card hoặc nút — chiều sâu đến từ chồng màu, không phải elevation"
      - "Không đặt body text màu trắng thuần trên canvas Aubergine cho đoạn văn dài — dùng Pale Lilac (#d0c6f0) cho subtext để giảm độ chói"
      - "Không trộn hai fill nút tím trên cùng một bề mặt — chọn Royal Plum (#5b1f76) hoặc Aubergine (#300c41) cho section, không cả hai"
      - "Không đặt display headline ở weight 700 hoặc 800 — Suisse Intl weight 500 với tracking chặt là giọng nói của Front; bold sẽ phá vỡ instrument-tone"
      - "Không dùng kích thước 10px hoặc 12px cho bất kỳ thứ gì khác ngoài metadata, badge, hoặc text pháp lý — bất kỳ thứ gì có thể đọc được nên bắt đầu từ 14px"
      - "Không giới thiệu màu accent mới — hệ thống là Aubergine + Lime; bất kỳ màu thứ ba nào cũng phá vỡ quy tắc một tia sáng"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 0 | Aubergine Canvas | `#300c41` | Nền trang và hero cơ bản — màu plum đậm chủ đạo tạo tâm trạng |"
    info: "| 1 | Royal Plum Band | `#5b1f76` | Section tím nhạt hơn, nav, nền card cần nâng lên khỏi canvas |"
    info: "| 2 | Lilac Mist | `#e2dcf6` | Bề mặt card sáng nổi trên các section tối — lớp giao diện nơi hầu hết product UI hoạt động |"
    info: "| 3 | Frost Panel | `#f0f4fe` | Card elevation cao nhất, bề mặt modal, và UI trắng sáng trên section sáng |"

  elevation:

    - "**Nút Lime CTA:** `không — fill phẳng, chiều sâu được tạo ra bởi tương phản màu với nền plum`"
    - "**Card Chat widget:** `không — chiều sâu được tạo bởi fill gradient lavender, không phải drop shadow`"
    - "**Control tương tác (nút outline, input):** `rgb(208, 198, 240) 0px 0px 0px 1px inset — viền lilac mảnh thay thế drop shadow thông thường`"

  imagery:

    info: "Trực quan hóa sản phẩm là ngôn ngữ thị giác chủ đạo của Front: mockup thread email, preview chat inbox, và card workflow nổi dưới dạng hình chữ nhật Lilac Mist trên canvas Aubergine, thường ở góc nghiêng nhẹ để gợi chiều sâu mà không cần shadow. Các illustration là snapshot UI phẳng, không phải 3D render hoặc ảnh lifestyle. Logo khách hàng xuất hiện dưới dạng wordmark trắng trên dải Royal Plum, không khung hoặc xử lý. Bản thân chat widget là element trang trí nhất — card gradient lavender với tùy chọn hình pill. Không hero photography, không stock imagery, không đồ họa trừu tượng: product UI là nội dung thị giác."

  layout:

    info: "Max-width 1200px căn giữa cho nội dung, nhưng bản thân trang là full-bleed trên canvas Aubergine. Hero là chồng text căn giữa với display headline, lilac subtext, và hàng hai nút, với email card mockup nổi ở góc dưới bên phải như preview sản phẩm. Bên dưới hero, dải Royal Plum mang customer logo strip như một khoảnh khắc bằng chứng xã hội full-width. Nhịp trang tổng thể: hero tối → dải tím nhạt hơn → section nội dung. Navigation là một sticky top bar duy nhất, không sidebar, không mega-menu — các link sản phẩm và tài nguyên có vẻ là dropdown đơn giản. Chat widget là element nổi cố định ở góc dưới bên phải, hiện diện trên mọi màn hình."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Text: #1c1e20 (Ink) trên sáng, #ffffff trên tối, #d0c6f0 (Pale Lilac) cho subtext trên tối"
    - "Nền: #300c41 (Aubergine) cho section tối, #ffffff cho section sáng"
    - "Viền: #d0c6f0 (Pale Lilac) trên tối, #dedfe2 (Stone) trên sáng"
    - "Accent: #b375f4 (Lavender Glow) cho trang trí"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Xây dựng hero section**: Nền Aubergine #300c41 full-bleed, padding dọc 100px. Headline căn giữa màu trắng Suisse Intl weight 500 ở 62px, letter-spacing -1.24px, max-width 900px. Subtext bên dưới màu #d0c6f0 Pale Lilac ở 17px weight 400, max-width 640px. Hàng hai nút, gap 16px: nút đầu tiên là fill Lime Spark (#dee948) với text #0d1d39, bán kính 40px, padding 12px 24px; nút thứ hai trong suốt với viền 1px #e2dcf6, text trắng, cùng kích thước."

    - "**Xây dựng email card mockup**: Card Lilac Mist (#e2dcf6), bán kính 20px, padding 20px, rộng 380px. Bên trong: avatar hình tròn 40px góc trên bên trái, tên người gửi 'Eva Rogers' in Ink #1c1e20 ở 16px weight 500, chủ đề 'Subject: Reroute shipment' in Slate #5b5d63 ở 14px. Nội dung tin nhắn in Ink ở 15px weight 400 với gap 8px giữa các dòng. Đặt card này ở góc xoay 3-4 độ trên hero Aubergine."

    - "**Xây dựng chat widget**: Card nổi rộng 320px, bán kính 20px, fill gradient lavender từ #b375f4 trên xuống #d0c6f0 dưới, padding 20px, fixed góc dưới bên phải. Trên cùng: icon Front 'F' nhỏ màu tím. Heading 'Welcome to Front!' màu trắng ở 20px weight 500. Bốn tùy chọn pill xếp chồng bên dưới, mỗi cái bán kính 40px, fill trắng, text Ink ở 15px weight 500, gap dọc 8px giữa các pill. Góc dưới bên phải: nút icon send hình tròn 40px màu tím (#8034bf)."

    - "**Xây dựng customer logo strip**: Dải Royal Plum (#5b1f76) full-width, padding dọc 60px. 'Trusted by 9,000+ companies' căn trái màu trắng ở 14px weight 500. Bên phải, 5-6 logo wordmark trắng ở độ mờ 60%, cao 32px, phân bố với gap 64px trên chiều rộng còn lại."

    - "**Xây dựng announcement bar**: Lime Spark (#dee948) full-bleed, padding dọc 8px, text căn giữa. 'New research: B2B teams spend 3 hours coordinating for every 1 hour solving.' in Ink #0d1d39 ở 14px weight 500, theo sau là inline link gạch chân 'Read the report' cùng màu."

  similar_brands:

    - "**Linear** — Cùng chồng bề mặt tím đậm sang lavender, cùng dựa vào một accent ấm duy nhất (Linear's purple-pink vs Front's lime), cùng card phẳng không drop shadow, cùng neo-grotesque typography chặt"
    - "**Notion** — Cả hai đều dùng bố cục hero tối giản với một product mockup duy nhất nổi lệch tâm, cả hai dựa vào xếp lớp màu thay vì elevation, cả hai dùng một accent duy nhất trên nền đơn sắc"
    - "**Intercom** — Cùng không gian customer-operations và cả hai dùng tím làm bề mặt thương hiệu chính; gradient xanh-tím của Intercom tương ứng với xử lý card lilac-to-violet của Front"
    - "**Attio** — Cùng ngôn ngữ UI sản phẩm dark-canvas, cùng ưu tiên viền 1px mảnh hơn shadow, cùng headline neo-grotesque tracking chặt"
    - "**Vercel** — Cả hai dựa vào một nền tối bão hòa duy nhất với một màu accent, cả hai dùng bán kính pill 40-64px rộng rãi trên controls, cả hai giữ product UI làm trung tâm thị giác thay vì hero photography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aubergine: #300c41;
          --color-royal-plum: #5b1f76;
          --color-lime-spark: #dee948;
          --color-bright-violet: #8034bf;
          --color-lavender-glow: #b375f4;
          --color-ink: #1c1e20;
          --color-frost: #f0f4fe;
          --color-pale-lilac: #e2dcf6;
          --color-stone: #dedfe2;
          --color-slate: #5b5d63;
          --color-pewter: #7c8088;
          --color-ash: #8e929b;
          --color-midnight-navy: #0d1d39;
          --color-lavender-whisper: #d0c6f0;
          --color-deep-olive: #1d1f04;
        
          /* Typography — Font Families */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-works: 'Suisse Works', 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.003px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.25px;
          --text-heading: 36px;
          --leading-heading: 1.19;
          --tracking-heading: -0.54px;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.73px;
          --text-display: 62px;
          --leading-display: 1.1;
          --tracking-display: -1.24px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* 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;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 48px;
          --radius-full-2: 64px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-pills: 64px;
          --radius-inputs: 10px;
          --radius-buttons: 40px;
          --radius-chatwidget: 20px;
        
          /* Shadows */
          --shadow-subtle: rgb(208, 198, 240) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-aubergine-canvas: #300c41;
          --surface-royal-plum-band: #5b1f76;
          --surface-lilac-mist: #e2dcf6;
          --surface-frost-panel: #f0f4fe;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aubergine: #300c41;
          --color-royal-plum: #5b1f76;
          --color-lime-spark: #dee948;
          --color-bright-violet: #8034bf;
          --color-lavender-glow: #b375f4;
          --color-ink: #1c1e20;
          --color-frost: #f0f4fe;
          --color-pale-lilac: #e2dcf6;
          --color-stone: #dedfe2;
          --color-slate: #5b5d63;
          --color-pewter: #7c8088;
          --color-ash: #8e929b;
          --color-midnight-navy: #0d1d39;
          --color-lavender-whisper: #d0c6f0;
          --color-deep-olive: #1d1f04;
        
          /* Typography */
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-works: 'Suisse Works', 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.003px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 25px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.25px;
          --text-heading: 36px;
          --leading-heading: 1.19;
          --tracking-heading: -0.54px;
          --text-heading-lg: 43px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.73px;
          --text-display: 62px;
          --leading-display: 1.1;
          --tracking-display: -1.24px;
        
          /* 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;
          --spacing-120: 120px;
          --spacing-160: 160px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 40px;
          --radius-full: 48px;
          --radius-full-2: 64px;
        
          /* Shadows */
          --shadow-subtle: rgb(208, 198, 240) 0px 0px 0px 1px inset;
        }