lattice___style_reference:
  info: "> Botanical field journal trên nền giấy ấm — một canvas kem nhẹ nhàng, nơi mực rừng tối làm nhiệm vụ kể chuyện và các thẻ mẫu vật pastel mang đến màu sắc."

  theme: "light"

  info: "Lattice mang phong cách một cuốn nhật ký thực địa thực vật học được thể hiện dưới dạng sản phẩm: canvas giấy ấm (#f7f6f2) làm nền cho toàn bộ site, với một màu mực rừng gần như đen (#001f1f) đảm nhận vai trò chính — vừa là text chính vừa là bề mặt action chính. Điểm đặc trưng là hệ thống các thẻ tính năng pastel — mint, lime, lavender, buttercream — mỗi thẻ mã hóa màu cho một module sản phẩm như một khay mẫu vật, kết hợp với các nút filled và outlined tối cùng màu xanh rừng. Typography là một geometric sans duy nhất (Matter) ở kích thước gọn nhẹ, với tracking dày trên display copy cỡ lớn và tracking rộng trên các label uppercase nhỏ. Mọi thứ đều nằm trên các góc bo tròn rộng rãi (14–29px), shadow mềm 1px pha màu, và không có chi tiết trang trí thừa — màu sắc xuất hiện như dấu câu chức năng, không phải vật trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Parchment | `#f7f6f2` | `--color-parchment` | Nền trang — canvas trắng ngà ấm áp mang lại cảm giác như giấy, không lâm sàng. Không bao giờ dùng màu trắng tinh khiết cho nền body |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Bề mặt thẻ, product UI mockups, và container media nhúng — màu trắng tinh khiết nổi lên trên nền parchment để tạo độ cao tinh tế mà không cần shadow |"
    info: "| Forest Ink | `#001f1f` | `--color-forest-ink` | Trạng thái form trung tính, text badge, và phản hồi UI nhẹ nhàng nơi màu sắc cần giữ sự tinh tế. Không nâng cấp nó thành màu CTA chính |"
    info: "| Lichen Gray | `#5c7070` | `--color-lichen-gray` | Text phụ và border có độ nhấn trung bình. Nằm giữa Forest Ink và các màu xám nhạt hơn — dùng cho mô tả body, supporting copy, và divider tinh tế |"
    info: "| Stone | `#6a7878` | `--color-stone` | Body text nhẹ nhàng, nav borders, và các UI element cấp ba. Màu xám dễ đọc nhưng nhẹ nhàng cho mô tả và helper text |"
    info: "| Slate | `#455252` | `--color-slate` | Border và separator tối cho bề mặt nâng cao và UI đảo ngược. Không nâng cấp nó thành màu CTA chính |"
    info: "| Mist | `#889494` | `--color-mist` | Cấp text nhạt nhất — caption, metadata, label cấp ba. Dùng cho timestamp, footnote, và chú thích không thiết yếu |"
    info: "| Meadow | `#cdface` | `--color-meadow` | Pill badge fill, success highlights, và bề mặt accent nhẹ. Màu xanh lá nhẹ đặc trưng cho category tags, status indicators, và soft highlight washes |"
    info: "| Deep Forest | `#2a4e1c` | `--color-deep-forest` | Accent xanh lá đậm cho data visualization, illustration strokes, và các element xanh lá phụ. Khác biệt với Forest Ink ở chỗ nó rõ ràng là màu xanh lá, không phải gần đen |"
    info: "| Deep Teal | `#003d3d` | `--color-deep-teal` | Accent thương hiệu phụ — border màu teal, illustration fills, và data visualization. Dùng cùng Deep Forest cho biểu đồ nhiều màu và element trang trí |"
    info: "| Olive | `#515c0b` | `--color-olive` | Accent biểu đồ và illustration — màu vàng-xanh trong hệ màu đa sắc. Dùng trong data bars, category indicators, và decorative strokes |"
    info: "| Plum | `#7a2251` | `--color-plum` | Accent hồng-magenta cho data visualization và illustration. Điểm đối lập ấm-lạnh trong hệ màu đa sắc |"
    info: "| Saffron | `#a36a14` | `--color-saffron` | Accent vàng-hổ phách cho data visualization và illustration. Màu vàng ấm trong hệ màu đa sắc, dùng trong biểu đồ và decorative strokes |"
    info: "| Iris | `#652ea3` | `--color-iris` | Accent tím cho data visualization, illustration strokes, và gradient phần integrations. Điểm đối lập lạnh trong hệ màu đa sắc |"
    info: "| Mint Surface | `#e4f7f9` | `--color-mint-surface` | Nền thẻ tính năng pastel — màu xanh aqua nhạt gán cho các module sản phẩm như Performance. Mỗi khu vực sản phẩm có một pastel home riêng |"
    info: "| Lime Surface | `#f8fbe7` | `--color-lime-surface` | Nền thẻ tính năng pastel — màu vàng-xanh nhạt cho các module như Goals & OKRs. Pastel ấm nhất trong hệ thống |"
    info: "| Lavender Surface | `#e1e1fa` | `--color-lavender-surface` | Nền thẻ pastel — tím nhạt cho testimonial cards, khối tính năng phụ, và mặt lạnh của hệ thống pastel |"
    info: "| Blush Surface | `#fcf2fe` | `--color-blush-surface` | Nền thẻ pastel — hồng gần trắng để phân biệt bề mặt tinh tế. Pastel nhẹ nhàng nhất |"
    info: "| Buttercream | `#fff3c2` | `--color-buttercream` | Bề mặt accent pastel ấm — vàng mềm cho tag backgrounds và vùng highlight nhẹ |"
    info: "| Sage Glow | `#eff5ce` | `--color-sage-glow` | Accent pastel xanh lá cho tag backgrounds và soft category highlights. Xanh lá bão hòa hơn Lime Surface |"
    info: "| Petal | `#fde5ff` | `--color-petal` | Accent pastel hồng cho tag backgrounds và soft category highlights |"
    info: "| Lilac Stroke | `#dcc2eb` | `--color-lilac-stroke` | Tím nhẹ cho illustration strokes và decorative outlines |"
    info: "| Halo Gradient | `radial-gradient(circle, rgb(191, 241, 245) 32%, rgb(169, 235, 169) 64%, rgb(103, 226, 235))` | `--color-halo-gradient` | Hero radial gradient — vùng sáng xanh lime-to-teal phía sau khung thiết bị sản phẩm. Gợi nguồn sáng tự nhiên, hữu cơ thay vì ánh sáng công nghệ |"

  tokens___typography:

    matter___typeface_duy_nhất_trong_toàn_bộ_hệ_thống___nav__body__buttons__headings__và_display__một_geometric_sans_với_hơi_ấm_nhân_văn_giúp_thẩm_mỹ_parchment_ấm_áp_có_cảm_giác_hữu_cơ_thay_vì_lâm_sàng__weight_500_cho_headings_và_buttons__weight_400_cho_body_và_supporting_text__tracking_dày__0_024em_ở_kích_thước_display_tạo_headline_gọn_gàng__tự_tin__tracking_rộng_0_08em_trên_label_11px_uppercase_giúp_thẻ_có_không_gian_thở_____font_matter:
      - "**Thay thế:** Inter, DM Sans, hoặc Switzer"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 11, 13, 14, 16, 17, 18, 19, 22, 47, 72"
      - "**Line height:** 0.90, 1.00, 1.10, 1.20, 1.30"
      - "**Letter spacing:** -0.024em trên display/headings (47–72px), 0.08em trên label 11px uppercase, normal ở kích thước body"
      - "**Vai trò:** Typeface duy nhất trong toàn bộ hệ thống — nav, body, buttons, headings, và display. Một geometric sans với hơi ấm nhân văn giúp thẩm mỹ parchment ấm áp có cảm giác hữu cơ thay vì lâm sàng. Weight 500 cho headings và buttons, weight 400 cho body và supporting text. Tracking dày (-0.024em) ở kích thước display tạo headline gọn gàng, tự tin; tracking rộng (0.08em) trên label 11px uppercase giúp thẻ có không gian thở."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.3 | 0.88px | `--text-caption` |"
      info: "| body-sm | 14px | 1.3 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.3 | — | `--text-body` |"
      info: "| subheading | 19px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 47px | 1 | -1.13px | `--text-heading` |"
      info: "| display | 72px | 0.9 | -1.73px | `--text-display` |"

  tokens___spacing___shapes:

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

    mật_độ: "gọn nhẹ"

    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: "| 20 | 20px | `--spacing-20` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 116 | 116px | `--spacing-116` |"
      info: "| 188 | 188px | `--spacing-188` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 14px |"
      info: "| badges | 22px |"
      info: "| inputs | 12px |"
      info: "| buttons | 29px |"
      info: "| feature-cards | 14-43px |"
      info: "| small-elements | 7px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `color(srgb 0 0.121569 0.121569 / 0.04) 0px 12px 12px -6px...` | `--shadow-md` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 72px"
      - "**Card padding:** 28px"
      - "**Element gap:** 8-12px"

  components:

    filled_primary_button:
      vai_trò: "Main call-to-action — interactive element có độ nhấn cao nhất"

      info: "Nền Forest Ink (#001f1f) filled với text trắng. 29px border-radius (dạng pill nhưng hơi mềm). 13px vertical / 11-18px horizontal padding. Matter 500 ở 14-16px. Letter-spacing normal. Đây là mỏ neo tối giúp canvas kem ấm có cảm giác có chủ đích."

    outlined_secondary_button:
      vai_trò: "Companion cho primary CTA — cùng trọng số hierarchy, xử lý bề mặt khác"

      info: "Nền trong suốt với border 1.5px Forest Ink (#001f1f). Text Forest Ink. 29px border-radius. Cùng padding như variant filled. Đặt cạnh nút filled (ví dụ: 'Request a demo' filled + 'Take a tour' outlined)."

    category_pill_badge:
      vai_trò: "Label section và content taxonomy markers"

      info: "Nền Meadow (#cdface) fill với text Forest Ink (#001f1f) và border 1px Forest Ink. 22px border-radius. ~9px vertical / 11px horizontal padding. Matter 500 ở 13px. Luôn đi kèm với icon mũi tên nhỏ (→) bên trong container tròn màu forest-ink ở bên phải."

    pastel_feature_card:
      vai_trò: "Product module showcase — mỗi khu vực sản phẩm có một màu home riêng"

      info: "Thẻ bo tròn với nền pastel (Mint #e4f7f9, Lime #f8fbe7, Lavender #e1e1fa). 14-43px border-radius. Chứa category icon (hình tròn, filled với sắc thái đậm hơn một chút), title bằng Forest Ink ở 19-22px, description bằng Lichen Gray, và ảnh chụp màn hình product UI nhúng. Màu pastel là danh tính của thẻ — không bao giờ áp dụng gradient hoặc pattern cho các thẻ này."

    testimonial_card:
      vai_trò: "Social proof — trích dẫn khách hàng kèm kết quả định lượng"

      info: "Nền Lavender (#e1e1fa) hoặc pastel. 14px border-radius. Chứa: avatar (hình tròn, ~48px), tên bằng Forest Ink ở 16px weight 500, vai trò/công ty bằng Lichen Gray, text trích dẫn bằng Forest Ink ở 14-16px, số liệu lớn (ví dụ: '30h', '2,000') bằng Forest Ink ở 47px, và link 'Read the story →' bằng Forest Ink."

    product_device_frame:
      vai_trò: "Hero visual — giao diện sản phẩm hiển thị bên trong khung thiết bị/máy tính xách tay"

      info: "Container bo tròn (bán kính lớn ~14-29px) hiển thị giao diện sản phẩm trên thẻ trắng. Đặt trên nền Hero Gradient (radial mint→lime→teal). Khung có shadow nhẹ màu rừng. Đây là nơi duy nhất radial gradient xuất hiện."

    integration_banner:
      vai_trò: "Section-level call-to-action liên kết đến integrations"

      info: "Thẻ full-width với nền gradient tím sang xanh dương. Chứa pill badge 'Integrations →' ở giữa. Bán kính rộng (~14-29px). Gradient này là đối trọng lạnh với radial ấm của hero — dùng một lần mỗi trang như một section closer."

    top_navigation:
      vai_trò: "Primary site navigation — hiển thị cố định trên tất cả các trang"

      info: "Thanh top sticky trên nền Parchment. Logo Lattice (text teal đậm + icon cánh hoa nhiều màu nhỏ) bên trái. Giữa: nav items (Platform, Why Lattice, Customers, Resources, Pricing) bằng Slate (#455252) ở 14px weight 500 với dropdown chevrons. Phải: link text 'Log in' và nút filled Forest Ink 'Request a demo' với 11.5px radius."

    announcement_banner:
      vai_trò: "Dải quảng cáo đầu trang"

      info: "Nằm phía trên nav bar. Nền mint/teal nhạt. Chứa tiêu đề sự kiện bằng Forest Ink ở 13px, divider dọc, và link 'Register now →'. Có thể đóng bằng nút close bên phải."

    customer_logo_strip:
      vai_trò: "Social proof — trusted-by logos bên dưới hero"

      info: "Hàng ngang logo khách hàng (greenhouse, Robinhood, loom, duolingo, Discord, brooklinen, npr, gusto) với tông màu xám nhẹ trên nền Parchment. Logo có kích thước đồng đều với khoảng cách đều nhau. Không có thẻ nền — logo nổi trên canvas."

    link_with_arrow:
      vai_trò: "Inline navigation link — dùng trong body copy và card footers"

      info: "Text Forest Ink với ký tự mũi tên (→) theo sau. Gạch chân khi hover. 14-16px Matter 500. Không có nền hoặc border — màu sắc và weight mang trọng tâm."

    section_header:
      vai_trò: "Mẫu tiêu đề section trang — universal section opener"

      info: "Category Pill Badge ở trên, sau đó là heading ở 47px Matter 500 bằng Forest Ink với -1.13px tracking, line-height 1.00. Bên phải hoặc bên dưới: đoạn mô tả bằng Lichen Gray ở 16-19px, tùy chọn theo sau bởi Link with Arrow. Nhịp điệu badge → heading → description lặp lại ở mọi section."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #001f1f (Forest Ink) cho tất cả primary text, primary buttons, và structural borders — để một màu tối mang toàn bộ trọng lượng hệ thống"
      - "Dùng Parchment #f7f6f2 làm nền trang trên tất cả màn hình — không bao giờ thay thế canvas body bằng màu trắng tinh khiết"
      - "Gán mỗi module sản phẩm hoặc category section một pastel tint riêng (Mint, Lime, Lavender, Blush) cho nền thẻ tính năng — hệ thống mã hóa màu là đặc trưng"
      - "Đặt nút filled và outlined cạnh nhau cho mọi primary action: filled Forest Ink + outlined Forest Ink ở 29px radius"
      - "Dùng kích thước caption 11px với 0.08em letter-spacing cho label uppercase category và micro-text — tracking rộng là cách hệ thống báo hiệu 'tag/label'"
      - "Áp dụng radial gradient (mint→lime→teal) chỉ trong khu vực hero device frame — đây là atmospheric element dùng một lần, không phải pattern lặp lại"
      - "Dùng shadow stack màu rừng nhẹ (4% alpha, negative spread) cho tất cả card và image elevation — vòng cuối 1px thay thế khai báo border rõ ràng"

    không_nên_làm:
      - "Không dùng màu đen tinh khiết (#000000) cho text hoặc UI elements — Forest Ink #001f1f luôn là màu tối cấu trúc, ngay cả khi tỷ lệ tương phản giống hệt nhau"
      - "Không áp dụng pastel surface tints cho các section full-page — chúng chỉ thuộc về feature cards và testimonial blocks có chứa"
      - "Không dùng góc nhọn (0px radius) trên bất kỳ interactive element nào — hệ thống tối thiểu là 7px, và hầu hết element là 14-29px"
      - "Không thêm accent colors ngoài bảng màu đã định — hệ thống màu đa sắc (Deep Forest, Deep Teal, Olive, Plum, Saffron, Iris) dành riêng cho data visualization và illustration, không bao giờ dùng cho UI surfaces"
      - "Không dùng shadow nặng hoặc độ mờ cao — toàn bộ hệ thống shadow duy trì ở alpha 0.04-0.08 để có độ nâng hữu cơ, giống giấy"
      - "Không đặt nút màu (xanh lá, tím, v.v.) làm primary actions — primary CTA luôn là Forest Ink filled, bất kể ngữ cảnh section"
      - "Không phá vỡ nhịp điệu badge → heading → description section header — mọi section mở đầu bằng Category Pill Badge, sau đó heading, sau đó description"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Parchment Canvas | `#f7f6f2` | Nền trang — lớp cơ sở mọi thứ nằm trên |"
    info: "| 1 | Paper White Card | `#ffffff` | Product UI mockups, nội dung nhúng, và bề mặt thẻ tiêu chuẩn nâng lên trên canvas |"
    info: "| 2 | Pastel Feature Card | `#e4f7f9` | Thẻ module sản phẩm mã hóa màu — mint, lime, lavender tints gán cho mỗi khu vực tính năng lãnh thổ trực quan riêng |"

  elevation:

    - "**Cards, images, icons, links:** `color(srgb 0 0.121569 0.121569 / 0.04) 0px 12px 12px -6px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 6px 6px -3px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 3px 3px -1.5px, color(srgb 0 0.121569 0.121569 / 0.08) 0px 1px 1px -0.5px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 0px 0px 1px`"

  imagery:

    info: "Imagery tập trung vào sản phẩm, không phải lối sống. Hero sử dụng device frame chứa ảnh chụp màn hình product UI thực tế đặt trên nền radial gradient mềm — không có stock photography về người. Feature cards nhúng ảnh chụp màn hình giao diện sản phẩm thực tế (bảng đánh giá hiệu suất, danh sách theo dõi OKR) làm bằng chứng trực quan chính. Logo khách hàng xuất hiện trong dải đơn sắc phẳng — không có testimonial photography ngoài avatar hình tròn. Element trực quan duy nhất không phải sản phẩm là icon hoa cánh nhiều màu trong logo, gợi ẩn dụ thực vật/tăng trưởng. Tất cả imagery nằm trên container bo tròn với shadow màu rừng nhẹ. Không có ảnh full-bleed ở bất kỳ đâu — canvas Parchment luôn bao bọc nội dung."

  layout:

    info: "Max-width 1200px căn giữa, không bao giờ full-bleed. Mọi section tuân theo cùng nhịp điệu mở đầu: Category Pill Badge → heading đậm ở 47px → đoạn mô tả → nội dung. Hero sử dụng chia hai cột (headline + nút bên trái, text mô tả bên phải) thay vì stack căn giữa. Product feature sections sử dụng lưới thẻ 2 cột, mỗi thẻ có pastel tint riêng. Testimonials hiển thị trong carousel ngang với 3 thẻ và dot pagination. Section gaps rộng rãi (~72px) tạo không gian thở giữa các dải. Navigation là thanh top sticky với announcement banner phía trên. Trang đọc từ trên xuống dưới như sau: announcement → nav → hero (split layout + device frame) → logo strip → platform overview (2-col pastel cards) → customer stories (carousel) → integrations banner (gradient closer)."

  agent_prompt_guide:

  quick_color_reference:
    - "Text: #001f1f (Forest Ink)"
    - "Background: #f7f6f2 (Parchment)"
    - "Border: #5c7070 (Lichen Gray) hoặc #001f1f cho structural borders"
    - "Accent: #cdface (Meadow) cho badges và highlights"
    - "primary action: #cdface (filled action)"
    - "Card surface: #ffffff (Paper White) cho product UI, pastel tints (#e4f7f9, #f8fbe7, #e1e1fa) cho feature cards"

  example_component_prompts:

    - "**Hero Section**: Nền Parchment (#f7f6f2). Headline ở 72px Matter 500, #001f1f, letter-spacing -1.73px, line-height 0.90. Subtext ở 19px Matter 400, #5c7070. Nút filled: nền #001f1f, text trắng, 29px radius, 13px 18px padding. Nút outlined bên cạnh: trong suốt, border 1.5px #001f1f, text #001f1f, 29px radius. Bên dưới: product device frame trên radial gradient (mint→lime→teal)."

    - "**Pastel Feature Card**: Nền Mint (#e4f7f9) fill, 14px radius. Category icon trong container tròn với mint đậm hơn một chút. Title ở 22px Matter 500, #001f1f. Description ở 16px Matter 400, #5c7070. Thẻ product UI trắng nhúng với shadow màu rừng nhẹ."

    - "**Category Pill Badge**: Nền #cdface, border 1px #001f1f, 22px radius, 9px 11px padding. Text ở 13px Matter 500, #001f1f, với 0.08em letter-spacing. Icon mũi tên nhỏ trong container tròn #001f1f ở bên phải."

    - "**Testimonial Card**: Nền Lavender (#e1e1fa), 14px radius. Avatar tròn (48px) trên cùng bên trái. Tên ở 16px Matter 500, #001f1f. Vai trò bằng #5c7070 ở 14px. Trích dẫn bằng #001f1f ở 14px. Số liệu lớn ở 47px Matter 500, #001f1f. Link 'Read the story →' bằng #001f1f ở 14px Matter 500."

    - "**Integration Banner**: Thẻ full-width với nền linear gradient tím sang xanh dương, 14px radius. Pill badge 'Integrations →' căn giữa với styling trắng/forest-ink. 72px vertical padding."

  pastel_system:

    info: "Mỗi module sản phẩm hoặc category nội dung được gán một pastel tint làm visual home. Đây không phải là vòng quay màu ngẫu nhiên — đó là hệ thống phân loại có chủ đích, nơi người dùng bắt đầu liên kết Mint = Performance, Lime = Goals & OKRs, Lavender = Testimonials. Khi tạo section mới, chọn pastel phù hợp với category nội dung và chỉ dùng nó cho nền thẻ tính năng của section đó. Bộ pastel đầy đủ: Mint #e4f7f9, Lime #f8fbe7, Lavender #e1e1fa, Blush #fcf2fe, Buttercream #fff3c2, Sage #eff5ce, Petal #fde5ff. Không bao giờ áp dụng pastel cho section full-width hoặc element không phải thẻ."

  similar_brands:

    - "**Notion** — Cùng cách tiếp cận canvas trắng ngà ấm với một màu text/nút tối duy nhất và khối tính năng pastel thay thế section dividers"
    - "**Linear** — Geometric sans-serif typography gọn nhẹ với tracking dày trên headline lớn và bảng màu hạn chế để một accent tối làm công việc cấu trúc"
    - "**Webflow** — Homepage tập trung vào sản phẩm với ảnh chụp màn hình UI nhúng trong khung thiết bị bo tròn, thẻ tính năng pastel, và primary CTA một màu tối"
    - "**Intercom** — Canvas không trắng ấm với shadow mềm, badge hình pill, và hệ thống thẻ sản phẩm mã hóa màu, mỗi thẻ trong một pastel hue riêng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment: #f7f6f2;
          --color-paper-white: #ffffff;
          --color-forest-ink: #001f1f;
          --color-lichen-gray: #5c7070;
          --color-stone: #6a7878;
          --color-slate: #455252;
          --color-mist: #889494;
          --color-meadow: #cdface;
          --color-deep-forest: #2a4e1c;
          --color-deep-teal: #003d3d;
          --color-olive: #515c0b;
          --color-plum: #7a2251;
          --color-saffron: #a36a14;
          --color-iris: #652ea3;
          --color-mint-surface: #e4f7f9;
          --color-lime-surface: #f8fbe7;
          --color-lavender-surface: #e1e1fa;
          --color-blush-surface: #fcf2fe;
          --color-buttercream: #fff3c2;
          --color-sage-glow: #eff5ce;
          --color-petal: #fde5ff;
          --color-lilac-stroke: #dcc2eb;
          --color-halo-gradient: #a9eba9;
          --gradient-halo-gradient: radial-gradient(circle, rgb(191, 241, 245) 32%, rgb(169, 235, 169) 64%, rgb(103, 226, 235));
        
          /* Typography — Font Families */
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.3;
          --tracking-caption: 0.88px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.3;
          --text-body: 16px;
          --leading-body: 1.3;
          --text-subheading: 19px;
          --leading-subheading: 1.2;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --text-heading: 47px;
          --leading-heading: 1;
          --tracking-heading: -1.13px;
          --text-display: 72px;
          --leading-display: 0.9;
          --tracking-display: -1.73px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-116: 116px;
          --spacing-188: 188px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 72px;
          --card-padding: 28px;
          --element-gap: 8-12px;
        
          /* Border Radius */
          --radius-lg: 7.2192px;
          --radius-xl: 11.5507px;
          --radius-xl-2: 14.4384px;
          --radius-2xl: 18.048px;
          --radius-2xl-2: 21.6576px;
          --radius-3xl: 28.8768px;
          --radius-3xl-2: 43.3152px;
        
          /* Named Radii */
          --radius-cards: 14px;
          --radius-badges: 22px;
          --radius-inputs: 12px;
          --radius-buttons: 29px;
          --radius-feature-cards: 14-43px;
          --radius-small-elements: 7px;
        
          /* Shadows */
          --shadow-md: color(srgb 0 0.121569 0.121569 / 0.04) 0px 12px 12px -6px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 6px 6px -3px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 3px 3px -1.5px, color(srgb 0 0.121569 0.121569 / 0.08) 0px 1px 1px -0.5px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-parchment-canvas: #f7f6f2;
          --surface-paper-white-card: #ffffff;
          --surface-pastel-feature-card: #e4f7f9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment: #f7f6f2;
          --color-paper-white: #ffffff;
          --color-forest-ink: #001f1f;
          --color-lichen-gray: #5c7070;
          --color-stone: #6a7878;
          --color-slate: #455252;
          --color-mist: #889494;
          --color-meadow: #cdface;
          --color-deep-forest: #2a4e1c;
          --color-deep-teal: #003d3d;
          --color-olive: #515c0b;
          --color-plum: #7a2251;
          --color-saffron: #a36a14;
          --color-iris: #652ea3;
          --color-mint-surface: #e4f7f9;
          --color-lime-surface: #f8fbe7;
          --color-lavender-surface: #e1e1fa;
          --color-blush-surface: #fcf2fe;
          --color-buttercream: #fff3c2;
          --color-sage-glow: #eff5ce;
          --color-petal: #fde5ff;
          --color-lilac-stroke: #dcc2eb;
          --color-halo-gradient: #a9eba9;
        
          /* Typography */
          --font-matter: 'Matter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.3;
          --tracking-caption: 0.88px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.3;
          --text-body: 16px;
          --leading-body: 1.3;
          --text-subheading: 19px;
          --leading-subheading: 1.2;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.2;
          --text-heading: 47px;
          --leading-heading: 1;
          --tracking-heading: -1.13px;
          --text-display: 72px;
          --leading-display: 0.9;
          --tracking-display: -1.73px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-48: 48px;
          --spacing-72: 72px;
          --spacing-116: 116px;
          --spacing-188: 188px;
        
          /* Border Radius */
          --radius-lg: 7.2192px;
          --radius-xl: 11.5507px;
          --radius-xl-2: 14.4384px;
          --radius-2xl: 18.048px;
          --radius-2xl-2: 21.6576px;
          --radius-3xl: 28.8768px;
          --radius-3xl-2: 43.3152px;
        
          /* Shadows */
          --shadow-md: color(srgb 0 0.121569 0.121569 / 0.04) 0px 12px 12px -6px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 6px 6px -3px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 3px 3px -1.5px, color(srgb 0 0.121569 0.121569 / 0.08) 0px 1px 1px -0.5px, color(srgb 0 0.121569 0.121569 / 0.04) 0px 0px 0px 1px;
        }