peppermint___style_reference:
  info: "> Midnight canvas với streamers vui tươi — một khoảng không xanh đậm nơi các dải ribbon vẽ tay và chữ hình học nhảy múa trên bề mặt giấy kem ấm áp."

  theme: "dark"

  info: "Peppermint vận hành trên nguyên lý midnight-canvas: một màu indigo gần như đen (#0a1d4b) thấm đẫm trang web vừa làm nền vừa là DNA thương hiệu, tạo cảm giác như màn hình đại dương sâu thẳm nơi các minh họa đậm nét và chữ hình học trôi nổi tự do. Display cuts của Excon — hình học, editorial, tracking dày — là chữ ký thị giác, kết hợp với hơi ấm nhân văn của Generalsans cho mọi nội dung đối thoại. Hệ thống cố tình đan xen giữa các dải dark immersion và bề mặt giấy kem ấm (#fcf6ea, #faedd2), để các vùng nội dung nặng (FAQ, form) có cảm giác chạm vào sự ấm áp hữu hình thay vì trôi nổi trong khoảng không. Minh họa vẽ tay với các nét ribbon uốn lượn màu hồng, xanh ngọc và xanh băng đảm nhận phần nặng về không khí — không có photography, không gradient, không bóng đổ trang trí. Các component đều bo tròn tự tin (card 24px, pill button 48–100px) và nằm trên canvas chỉ nhờ tương phản màu sắc, không dùng elevation."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Midnight Sapphire | `#0a1d4b` | `--color-midnight-sapphire` | Canvas chính cho hero và feature bands, body text trên bề mặt kem, đường viền action — khoảng không mà mọi thứ trôi nổi trên đó |"
    info: "| Bright Violet | `#9c8bf9` | `--color-bright-violet` | Màu nhấn hiếm cho highlight buttons và khoảnh khắc nhấn mạnh — một dấu câu sống động trên nền navy mờ |"
    info: "| Deep Indigo | `#162d67` | `--color-deep-indigo` | Bề mặt card nâng cao so với canvas chính — sáng hơn Midnight Sapphire một bậc, dùng cho nested feature cards |"
    info: "| Slate Violet | `#3a486b` | `--color-slate-violet` | Text mờ trên các section tối, border và divider phụ — một companion đã khử bão hòa cho màu navy chính |"
    info: "| Warm Cream | `#fcf6ea` | `--color-warm-cream` | Hairline borders, divider, input outlines, và card edges trên bề mặt sáng. Không dùng làm màu CTA chính |"
    info: "| Sand | `#faedd2` | `--color-sand` | Nền FAQ section, lớp phủ bề mặt ấm, decorative fills — bão hòa hơn Warm Cream một chút để báo hiệu vùng nội dung |"
    info: "| Graphite | `#474b60` | `--color-graphite` | Body text borders, form field borders, divider nhẹ — xám lạnh đọc là trung tính trên cả nền sáng và tối |"
    info: "| Khaki | `#b4ad98` | `--color-khaki` | Helper text mờ, border nhẹ, label ít nhấn mạnh — xám ấm đã khử bão hòa cho thông tin cấp ba |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Text chính và icon trên section tối, border tương phản cao — dùng tiết kiệm để đọc tối đa |"
    info: "| Coral Pink | `#ffb8d9` | `--color-coral-pink` | Nét ribbon minh họa, đường nhấn trang trí, highlight vẽ tay trong feature illustrations |"
    info: "| Mint Wave | `#68dacb` | `--color-mint-wave` | Nét ribbon minh họa, điểm nhấn xanh ngọc trong nền feature card — màu minh họa thứ cấp |"
    info: "| Ice Blue | `#bcdff0` | `--color-ice-blue` | Nét ribbon minh họa, đường cong xanh nhạt trang trí trong hero và feature illustrations |"
    info: "| Pale Mint | `#a1e8df` | `--color-pale-mint` | Xanh ngọc minh họa thứ cấp — nét ribbon nhẹ hơn và yếu tố trang trí mềm mại |"
    info: "| Blush | `#ffe9f4` | `--color-blush` | Bề mặt card phớt hồng — nền hồng ấm cho các biến thể feature card riêng lẻ |"

  tokens___typography:

    excon___display_và_heading_typeface___các_nét_cắt_hình_học_tracking_dày_định_hình_giọng_editorial__dùng_ở_kích_thước_lớn_90_151px_cho_hero_và_section_headings_với_letter_spacing_âm_mạnh__0_04em_đến__0_1em_khiến_các_chữ_cái_khóa_lại_thành_hình_dạng_kiến_trúc__line_height_dưới_1_0_ở_kích_thước_display_tạo_mật_độ_nén__gần_như_chồng_lên_nhau__thay_thế__space_grotesk_hoặc_archivo_cho_đặc_tính_hình_học_gần_giống_với_tracking_tương_tự_____font_excon:
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 24px, 25px, 45px, 48px, 50px, 60px, 90px, 128px, 130px, 151px, 274px"
      - "**Line height:** 0.87, 0.92, 1.00, 1.09"
      - "**Letter spacing:** -0.04em đến -0.1em, tỷ lệ với kích thước — càng chặt ở kích thước lớn (lên đến -15px ở 151px, -5px ở 128px, -2.2px ở 48px, -1.3px ở 25px)"
      - "**Vai trò:** Display và heading typeface — các nét cắt hình học tracking dày định hình giọng editorial. Dùng ở kích thước lớn (90–151px) cho hero và section headings với letter-spacing âm mạnh (-0.04em đến -0.1em) khiến các chữ cái khóa lại thành hình dạng kiến trúc. Line-height dưới 1.0 ở kích thước display tạo mật độ nén, gần như chồng lên nhau. Thay thế: Space Grotesk hoặc Archivo cho đặc tính hình học gần giống với tracking tương tự."

    generalsans___body_và_ui_typeface___sans_nhân_văn_cho_mọi_text_đối_thoại__button__label__nội_dung_faq__và_mô_tả_card__letter_spacing_bình_thường__sự_tương_phản_với_display_cuts_nén_của_excon_là_chữ_ký_typographic__headline_editorial_thì_thầm_với_độ_chính_xác_hình_học_trong_khi_body_text_nói_chuyện_bằng_hơi_ấm_dễ_gần__thay_thế__inter_hoặc_dm_sans_cho_cảm_giác_nhân_văn_tương_tự_ở_kích_thước_ui_____font_generalsans:
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14px, 16px, 18px"
      - "**Line height:** 1.14, 1.22, 1.25, 1.43, 1.50"
      - "**Vai trò:** Body và UI typeface — sans nhân văn cho mọi text đối thoại, button, label, nội dung FAQ, và mô tả card. Letter-spacing bình thường. Sự tương phản với display cuts nén của Excon là chữ ký typographic: headline editorial thì thầm với độ chính xác hình học trong khi body text nói chuyện bằng hơi ấm dễ gần. Thay thế: Inter hoặc DM Sans cho cảm giác nhân văn tương tự ở kích thước UI."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 18px | 1.43 | — | `--text-body` |"
      info: "| subheading | 24px | 1.22 | -1.32px | `--text-subheading` |"
      info: "| heading | 48px | 1.09 | -2.21px | `--text-heading` |"
      info: "| heading-lg | 90px | 0.92 | -3.96px | `--text-heading-lg` |"
      info: "| display | 128px | 0.87 | -5.12px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| faq | 16px |"
      info: "| cards | 24px |"
      info: "| pills | 100px |"
      info: "| small | 16px |"
      info: "| buttons | 48px |"

    layout:

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

  components:

    hero_section:
      vai_trò: "Dải tối full-bleed với headline căn giữa, subtext và CTA"

      info: "Nền #0a1d4b full-viewport-width. Excon display heading căn giữa ở 90–128px, weight 700, màu trắng (#ffffff), letter-spacing -3.96px đến -5.12px. Subtext bằng Generalsans 18px, weight 400, màu trắng. CTA button căn giữa bên dưới. Minh họa vẽ tay lớn tràn ra từ các cạnh với nét ribbon."

    pill_cta_button_sáng_trên_tối:
      vai_trò: "Button hành động chính trên các section canvas tối"

      info: "48px border-radius, fill Warm Cream (#fcf6ea), text Midnight Sapphire (#0a1d4b), Generalsans 16px weight 500, padding 16px 28px. Nằm căn giữa hoặc căn trái trên nền canvas tối. Không bóng đổ — chỉ tương phản màu tạo nên sự hiện diện của button."

    pill_cta_button_tối_trên_sáng:
      vai_trò: "Button hành động chính trên các section kem"

      info: "48px border-radius, fill Midnight Sapphire (#0a1d4b), text trắng (#ffffff), Generalsans 16px weight 500, padding 16px 28px. Phiên bản đảo ngược cho ngữ cảnh light-band."

    feature_card:
      vai_trò: "Card minh họa riêng lẻ trong lưới feature 4 cột"

      info: "24px border-radius, nền màu đồng nhất (thay đổi: Warm Cream, Deep Indigo, Mint Wave, Blush), padding 24px. Chứa một minh họa phẳng căn giữa, text label nhỏ tùy chọn bằng Generalsans 14px. Không bóng đổ — fill màu CHÍNH LÀ ranh giới card. Các card cách nhau 16–20px."

    faq_accordion_item_đóng:
      vai_trò: "Câu hỏi có thể mở rộng trong FAQ section"

      info: "16px border-radius, nền Warm Cream (#fcf6ea), padding 20px 28px. Text câu hỏi bằng Generalsans 16px weight 500, màu Midnight Sapphire. Icon cộng (+) bên phải màu Midnight Sapphire. Border hairline 1px màu #fcf6ea hoặc không có border nhìn thấy."

    faq_accordion_item_mở:
      vai_trò: "Trạng thái câu trả lời FAQ đã mở rộng"

      info: "Cùng kích thước với item đóng nhưng nền chuyển sang Sand (#faedd2) — một màu kem ấm hơn, bão hòa hơn báo hiệu trạng thái active. Body câu trả lời bằng Generalsans 16px weight 400, màu Midnight Sapphire. Icon trừ (−) thay thế icon cộng. Không cần animation — sự chuyển màu là chỉ báo trạng thái."

    section_heading:
      vai_trò: "Heading editorial lớn cho phần giới thiệu section"

      info: "Excon, weight 700, 90px, màu trắng (#ffffff) trên section tối hoặc Midnight Sapphire (#0a1d4b) trên section kem. Letter-spacing -3.96px, line-height 0.92. Căn trái hoặc căn giữa tùy section. Có thể bao gồm gạch chân trang trí màu Coral Pink hoặc Mint Wave."

    body_text_block:
      vai_trò: "Nội dung đoạn văn dưới heading và trong câu trả lời FAQ"

      info: "Generalsans 18px, weight 400, line-height 1.43. Màu trắng (#ffffff) trên section tối, Midnight Sapphire (#0a1d4b) trên section kem. Max-width giới hạn ~600px để dễ đọc. Không styling đặc biệt — bản thân chữ là thiết kế."

    brand_logo:
      vai_trò: "Wordmark + icon ở đầu trang"

      info: "Icon monogram nhỏ (dấu tròn) + wordmark 'peppermint' bằng Generalsans weight 500, màu trắng trên canvas tối. Căn giữa theo chiều ngang. Không có nav links nhìn thấy — logo là toàn bộ header."

    hero_illustration:
      vai_trò: "Minh họa nhân vật/đối tượng vẽ tay lớn"

      info: "Minh họa phẳng đầy màu sắc với nhân vật vẽ tay (tay đa dạng cầm điện thoại/thẻ), 2–4 nét ribbon uốn lượn màu Coral Pink, Mint Wave, Ice Blue và Pale Mint. Nằm ở cạnh dưới hoặc cạnh phải của hero, tràn ra khỏi canvas. Không gradient, không bóng đổ — fill màu phẳng với đường viền sạch."

    feature_card_illustration:
      vai_trò: "Minh họa đối tượng căn giữa bên trong feature card"

      info: "Minh họa màu phẳng của một đối tượng hoặc nhân vật (điện thoại, thẻ, khóa, cặp) có kích thước lấp đầy ~60% card. Fill màu đồng nhất trong bảng màu nhấn của card. Không text overlay — minh họa tự nói hoặc với label Generalsans nhỏ bên dưới."

    decorative_ribbon_stroke:
      vai_trò: "Yếu tố đường vẽ tay uốn lượn"

      info: "Độ dày nét 2–3px, đường cong vẽ tay màu Coral Pink (#ffb8d9), Mint Wave (#68dacb), Ice Blue (#bcdff0), hoặc Pale Mint (#a1e8df). Dùng làm không khí nền trong hero và feature sections. Không fill, chỉ stroke. Chiều dài thay đổi từ flourishes ngắn đến đường cong dài uyển chuyển."

    subtle_star_sparkle_motif:
      vai_trò: "Dấu câu trang trí nhỏ"

      info: "Hình sao 4 cánh màu trắng hoặc Mint Wave, kích thước 8–12px. Rải rác một cách tinh tế xung quanh minh họa và heading như chấm nhấn vui tươi. Không yêu cầu animation."

  do_s_and_don_ts:

    nên:
      - "Dùng Excon cho mọi display headings ở 48px+ với letter-spacing từ -2px đến -5px — tracking chặt là chữ ký editorial của thương hiệu"
      - "Dùng Midnight Sapphire (#0a1d4b) làm màu canvas chính cho section tối — nó vừa là nền vừa là DNA thương hiệu"
      - "Dùng 48px border-radius cho mọi interactive buttons và 100px cho full pill shapes — không có button góc nhọn"
      - "Đan xen giữa các dải navy tối và dải kem ấm (#fcf6ea/#faedd2) để tạo nhịp điệu section mà không cần divider"
      - "Dùng Generalsans ở 16–18px cho mọi body và UI text — không bao giờ dùng Excon cho bất cứ thứ gì dưới 24px"
      - "Phân biệt bề mặt qua bước màu (#0a1d4b → #162d67 → #9c8bf9) thay vì bóng đổ hoặc border"
      - "Dùng minh họa vẽ tay phẳng với nét ribbon uốn lượn màu Coral Pink, Mint Wave và Ice Blue làm yếu tố thị giác chính — không photography, không gradient"

    không_nên:
      - "Không dùng drop shadows cho elevation — hệ thống thiết kế dựa vào tương phản màu và bước màu bề mặt"
      - "Không dùng Excon dưới 24px — tracking chặt và đặc tính hình học của nó trở nên khó đọc ở kích thước body"
      - "Không dùng photography hoặc 3D renders — ngôn ngữ thị giác chỉ là minh họa vẽ tay phẳng"
      - "Không trộn góc bo tròn và góc nhọn — mọi interactive elements dùng radius 48px+, mọi card dùng 24px"
      - "Không dùng bright violet (#9c8bf9) làm bề mặt lớn — nó là accent hiếm, không phải fill color"
      - "Không thêm gradient — thiết kế cố tình phẳng, với tương phản màu làm công việc thị giác"
      - "Không dùng thanh navigation hoặc menu nhìn thấy — thương hiệu được thể hiện qua logo căn giữa một mình"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Midnight Canvas | `#0a1d4b` | Nền trang chính cho hero và feature bands |"
    info: "| 1 | Deep Indigo | `#162d67` | Bề mặt card nâng cao so với canvas chính |"
    info: "| 2 | Warm Cream | `#fcf6ea` | Vùng nội dung sáng, bề mặt card trên light bands, inverted button fills |"
    info: "| 3 | Sand | `#faedd2` | Nền FAQ section, lớp phủ nội dung ấm |"

  elevation:

    info: "Thiết kế cố tình tránh drop shadows như một chiến lược elevation. Thay vào đó, bề mặt được phân biệt qua tương phản màu sắc — Deep Indigo (#162d67) sáng hơn Midnight Sapphire (#0a1d4b) một bậc để tạo elevation, và các dải kem ấm ngắt quãng section tối để báo hiệu vùng nội dung. Border là hairline mỏng (1px) với tông màu nhẹ. Cách tiếp cận phẳng, dựa trên màu sắc này giữ trọng tâm vào minh họa và chữ thay vì chrome."

  imagery:

    info: "Ngôn ngữ thị giác chỉ là minh họa vẽ tay — không photography, không 3D renders, không product screenshots. Minh họa có nhân vật đa dạng (tay, toàn thân) với fill màu phẳng, không gradient, và đường viền sạch. Yếu tố trang trí đặc trưng là các nét ribbon/streamer uốn lượn màu hồng (#ffb8d9), xanh ngọc (#68dacb), và xanh băng (#bcdff0) đan xuyên qua hero và feature sections với năng lượng vẽ tay tự do. Họa tiết sao lấp lánh nhỏ thêm dấu câu vui tươi. Feature cards chứa minh họa đối tượng căn giữa (điện thoại, thẻ, khóa có cánh) trên nền màu đồng nhất. Minh họa lớn và tự tin — chiếm 30–40% không gian thị giác trong hero và là yếu tố không khí chính. Phong cách icon trong UI tối giản và hình học, dùng cùng tinh thần minh họa ở tỷ lệ nhỏ hơn."

  layout:

    info: "Các section full-bleed không có gutter giữa các dải — mỗi section là một khối màu đồng nhất lấp đầy chiều rộng viewport. Nội dung trong section có max-width 1200px và căn giữa. Nhịp điệu trang đan xen giữa dải navy tối (hero, features) và dải kem ấm (FAQ), tạo sự luân phiên sáng/tối rõ ràng. Hero là một chồng text căn giữa trên canvas tối với minh họa tràn ra các cạnh. Feature sections dùng lưới card 4 cột với minh họa làm nội dung chính. FAQ section là danh sách một cột các accordion items trên nền kem. Navigation tối giản — chỉ một logo căn giữa ở đầu, không có nav bar hay menu nhìn thấy. Section gaps chặt (40px) với bản thân sự thay đổi màu làm công việc phân cách."

  agent_prompt_guide:

    quick_color_reference:
    - "text (section tối): #ffffff"
    - "text (section sáng): #0a1d4b"
    - "Tạo Primary Action Button: nền #9c8bf9, text #474b60, radius 9999px, padding pill gọn. Dùng filled treatment này cho CTA chính."
    - "background (light bands): #fcf6ea hoặc #faedd2"
    - "border (nhẹ): #474b60"
    - "accent: #9c8bf9"
    - "primary action: #9c8bf9 (filled action)"

    ví_dụ_component_prompts:

    - "Tạo hero section: nền #0a1d4b full-bleed. Excon display heading căn giữa, 90px, weight 700, #ffffff, letter-spacing -3.96px. Subtext Generalsans 18px, weight 400, #ffffff. CTA button: pill, nền #fcf6ea, text #0a1d4b, Generalsans 16px weight 500, padding 16px 28px, border-radius 48px. Minh họa vẽ tay lớn tràn ra cạnh dưới với nét ribbon màu #ffb8d9 và #68dacb."

    - "Tạo feature card: border-radius 24px, nền #fcf6ea, padding 24px. Minh họa phẳng căn giữa của một đối tượng (điện thoại, thẻ hoặc nhân vật) lấp đầy 60% diện tích card. Label nhỏ bằng Generalsans 14px weight 400, #0a1d4b, căn giữa bên dưới minh họa. Không bóng đổ, không border."

    - "Tạo FAQ accordion item (trạng thái mở): border-radius 16px, nền #faedd2, padding 20px 28px. Câu hỏi bằng Generalsans 16px weight 500, #0a1d4b. Body câu trả lời bằng Generalsans 16px weight 400, #0a1d4b, line-height 1.5. Icon trừ (−) bên phải màu #0a1d4b."

    - "Tạo section heading: Excon weight 700, 90px, #ffffff (trên nền tối) hoặc #0a1d4b (trên nền sáng), letter-spacing -3.96px, line-height 0.92. Thêm nét gạch chân trang trí màu #ffb8d9 bên dưới text, chiều cao 3px, rộng 60% chiều rộng text."

    - "Tạo decorative ribbon stroke: SVG path, stroke 2–3px, không fill, đường cong vẽ tay màu #68dacb. Đặt làm yếu tố không khí nền, dài 200–400px, hình dạng S-curve uốn lượn."

  color_role_summary:

    info: "Bảng màu được xây dựng trên hệ thống canvas hai chế độ: Midnight Sapphire (#0a1d4b) là khoảng không tối, và Warm Cream (#fcf6ea) là điểm đối trọng giấy ấm. Hai bề mặt này đan xen để tạo nhịp điệu section. Trong canvas tối, Deep Indigo (#162d67) cung cấp elevation một bậc cho nested cards. Bảng màu nhấn phục vụ hai mục đích: Bright Violet (#9c8bf9) là dấu câu màu sắc hiếm để nhấn mạnh, trong khi Coral Pink, Mint Wave và Ice Blue chỉ dùng cho minh họa — chúng sống trong các nét ribbon vẽ tay và không bao giờ xuất hiện trên bề mặt UI. Graphite và Khaki xử lý text mờ và border, đọc là trung tính trên cả nền sáng và tối."

  typography_philosophy:

    info: "Excon là giọng editorial — nó nói bằng các nét cắt hình học nén, tracking chặt khiến headline có cảm giác kiến trúc và tự tin. Nó được dùng ở 48px+ với letter-spacing âm mạnh tăng dần theo kích thước. Generalsans là giọng đối thoại — nhân văn, spacing bình thường và dễ gần ở 14–18px. Hệ thống không bao giờ dùng Excon dưới 24px hoặc Generalsans trên 24px. Sự nhị phân này tạo ra một hợp đồng typographic rõ ràng: text lớn tạo tuyên bố kiến trúc, text nhỏ nói chuyện với người đọc như một con người."

  similar_brands:

    - "**Stripe** — Cùng xử lý hero dark-canvas với display headlines căn giữa và CTA đơn — tỷ lệ typography-đến-không gian âm gần như giống hệt"
    - "**Ramp** — Cùng sự tự tin trong display type khổng lồ, dù Ramp dùng nền sáng hơn — thẩm quyền typographic và ngôn ngữ component bo tròn chồng lấn"
    - "**Mercury** — Cùng cách tiếp cận dùng navy tối vừa làm canvas vừa làm DNA thương hiệu, với kem/trắng ấm làm điểm đối trọng bề mặt sáng và CTA hình pill"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-sapphire: #0a1d4b;
          --color-bright-violet: #9c8bf9;
          --color-deep-indigo: #162d67;
          --color-slate-violet: #3a486b;
          --color-warm-cream: #fcf6ea;
          --color-sand: #faedd2;
          --color-graphite: #474b60;
          --color-khaki: #b4ad98;
          --color-pure-white: #ffffff;
          --color-coral-pink: #ffb8d9;
          --color-mint-wave: #68dacb;
          --color-ice-blue: #bcdff0;
          --color-pale-mint: #a1e8df;
          --color-blush: #ffe9f4;
        
          /* Typography — Font Families */
          --font-excon: 'Excon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-generalsans: 'Generalsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.43;
          --text-subheading: 24px;
          --leading-subheading: 1.22;
          --tracking-subheading: -1.32px;
          --text-heading: 48px;
          --leading-heading: 1.09;
          --tracking-heading: -2.21px;
          --text-heading-lg: 90px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: -3.96px;
          --text-display: 128px;
          --leading-display: 0.87;
          --tracking-display: -5.12px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-27: 27px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-50: 50px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-faq: 16px;
          --radius-cards: 24px;
          --radius-pills: 100px;
          --radius-small: 16px;
          --radius-buttons: 48px;
        
          /* Surfaces */
          --surface-midnight-canvas: #0a1d4b;
          --surface-deep-indigo: #162d67;
          --surface-warm-cream: #fcf6ea;
          --surface-sand: #faedd2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-sapphire: #0a1d4b;
          --color-bright-violet: #9c8bf9;
          --color-deep-indigo: #162d67;
          --color-slate-violet: #3a486b;
          --color-warm-cream: #fcf6ea;
          --color-sand: #faedd2;
          --color-graphite: #474b60;
          --color-khaki: #b4ad98;
          --color-pure-white: #ffffff;
          --color-coral-pink: #ffb8d9;
          --color-mint-wave: #68dacb;
          --color-ice-blue: #bcdff0;
          --color-pale-mint: #a1e8df;
          --color-blush: #ffe9f4;
        
          /* Typography */
          --font-excon: 'Excon', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-generalsans: 'Generalsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body: 18px;
          --leading-body: 1.43;
          --text-subheading: 24px;
          --leading-subheading: 1.22;
          --tracking-subheading: -1.32px;
          --text-heading: 48px;
          --leading-heading: 1.09;
          --tracking-heading: -2.21px;
          --text-heading-lg: 90px;
          --leading-heading-lg: 0.92;
          --tracking-heading-lg: -3.96px;
          --text-display: 128px;
          --leading-display: 0.87;
          --tracking-display: -5.12px;
        
          /* Spacing */
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-27: 27px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-38: 38px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-50: 50px;
          --spacing-64: 64px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        }