grove_ai___style_reference:
  info: "> clinical journal in morning light — một từ xanh duy nhất neo giữ trang văn xuôi đong đếm"

  theme: "light"

  info: "Grove AI sử dụng ngôn ngữ mang tính clinical-credibility: canvas trắng sáng, điểm nhấn xanh rừng (forest-green) tiết chế, và sự tương phản typography có chủ đích giữa serif editorial (Libre Caslon Text) cho hero-level storytelling và grotesque chính xác (Geist) cho body và interface. Giọng thương hiệu sống trong một từ xanh duy nhất — \"Grace\" — được đặt bằng serif và thả vào một headline đơn sắc, khiến AI agent đọc như cá tính của sản phẩm chứ không phải một tính năng. Bề mặt phẳng với một lớp card xám nhạt duy nhất; độ cao đến từ inset shadow mềm và hairline borders, không bao giờ dùng drop shadow nặng. Component weight là lightweight: pill buttons, ghost controls, tags viền mảnh, và section labels small-caps khít. Tổng thể hệ thống giống một tạp chí y khoa được đầu tư tốt mà tình cờ cũng là một product page — thẩm quyền lâm sàng thể hiện qua sự tiết chế, không phải trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Forest Grove | `#0b835c` | `--color-forest-grove` | Màu thương hiệu chính — dùng cho logo mark, chữ ký trong serif headlines, accent borders trên tags và announcement pills, và điểm nhấn icon nhỏ. Một tông xanh đậm, hơi bão hòa thấp, đọc như clinical và đáng tin cậy hơn là năng động |"
    info: "| Pine Shadow | `#1c2b27` | `--color-pine-shadow` | Bề mặt tối thứ cấp — một tông xanh gần đen pha chút xanh lá dùng cho inverted buttons và các khoảnh khắc bề mặt tối nơi #000 sẽ quá gắt so với accent xanh |"
    info: "| Ink Black | `#1c1c1e` | `--color-ink-black` | Dark borders và separators cho elevated surfaces và inverted UI. Không nâng lên làm màu CTA chính |"
    info: "| Graphite | `#303033` | `--color-graphite` | Secondary text và dividers — xám đậm vừa dùng để giảm nhấn body copy, borders mờ, và metadata |"
    info: "| Slate Mid | `#676768` | `--color-slate-mid` | Muted helper text, inactive labels, và tertiary metadata — đạt AA contrast thoải mái trên nền trắng |"
    info: "| Mist Gray | `#eff1f6` | `--color-mist-gray` | Card surface và màu fill trung tính duy nhất trong hệ thống. Tạo một bậc elevated duy nhất phía trên white canvas mà không đưa thêm hue mới |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card-internal backgrounds, và inverse text trên dark fills |"
    info: "| Shadow Smoke | `#bfbfbf` | `--color-shadow-smoke` | Màu nền box-shadow cho độ elevation mềm phía sau cards và floating product mockup bên phải hero |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    libre_caslon_text___display_serif_dùng_riêng_cho_hero_level_headlines_và_chữ_ký_thương_hiệu__các_nét_tương_phản_nghiêng_nhẹ_mang_lại_cho__grace__và__meet__giọng_văn_editorial_có_tính_nhân_văn__tương_phản_với_geist_chính_xác_bên_dưới__lựa_chọn_này_mang_tính_anti_saas__hầu_hết_các_site_clinical_tech_dùng_geometric_sans_cho_hero__serif_này_khiến_thương_hiệu_giống_một_ấn_phẩm_y_khoa_được_kính_trọng_____font_libre_caslon_text:
      - "**Thay thế:** Source Serif 4, Lora, hoặc PT Serif"
      - "**Weights:** 400"
      - "**Sizes:** 36px, 40px, 92px"
      - "**Line height:** 1.20, 1.25"
      - "**Letter spacing:** -0.0110em"
      - "**Vai trò:** Display serif dùng riêng cho hero-level headlines và chữ ký thương hiệu. Các nét tương phản nghiêng nhẹ mang lại cho \"Grace\" và \"Meet\" giọng văn editorial có tính nhân văn, tương phản với Geist chính xác bên dưới. Lựa chọn này mang tính anti-SaaS: hầu hết các site clinical-tech dùng geometric sans cho hero; serif này khiến thương hiệu giống một ấn phẩm y khoa được kính trọng."

    geist___primary_interface_và_body_typeface__bao_phủ_body_copy_16_24px__400__subheadings_18_20px__500__card_titles_20_24px__600__và_số_thống_kê_lớn_32_40px__500_600__negative_letter_spacing_thắt_chặt_khi_kích_thước_tăng__tạo_mật_độ_ở_body_size_và_khoảng_thở_ở_display_____font_geist:
      - "**Thay thế:** Inter, IBM Plex Sans, hoặc system-ui"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 14px, 15px, 16px, 18px, 20px, 24px, 32px, 36px, 40px"
      - "**Line height:** 1.00, 1.07, 1.11, 1.14, 1.20, 1.25, 1.40, 1.44, 1.50, 1.65"
      - "**Letter spacing:** -0.0360em tại 40px, -0.0310em tại 36px, -0.0280em tại 32px, -0.0250em tại 24px, -0.0200em tại 20px, -0.0170em tại 18px, -0.0040em tại 16px, 0.1000em tại 12px (uppercase labels)"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Vai trò:** Primary interface và body typeface. Bao phủ body copy (16/24px, 400), subheadings (18–20px, 500), card titles (20–24px, 600), và số thống kê lớn (32–40px, 500/600). Negative letter-spacing thắt chặt khi kích thước tăng, tạo mật độ ở body size và khoảng thở ở display."

    geist_mono___biến_thể_monospaced_dùng_cho_code_like_hoặc_technical_callouts_trong_body_content_nơi_alignment_quan_trọng_____font_geist_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:**"
      - "**Sizes:**"
      - "**Line height:**"
      - "**Vai trò:** Biến thể monospaced dùng cho code-like hoặc technical callouts trong body content nơi alignment quan trọng."

    geist_medium___geist_medium___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_geist_medium:
      - "**Weights:** 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.88"
      - "**Vai trò:** Geist Medium — đượ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.5 | 1.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.32px | `--text-body` |"
      info: "| subheading | 20px | 1.25 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.9px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | -1.44px | `--text-heading-lg` |"
      info: "| display | 92px | 1.2 | -1.01px | `--text-display` |"

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

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| icons | 12px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"
      info: "| largeCards | 24px |"
      info: "| testimonialCards | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.35) 0px 0px 1px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.15) 0px 1px 1px 0px` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(255, 255, 255, 0.75) 0px 1px 2px 0px inset` | `--shadow-subtle-4` |"

    layout:

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

  components:

    top_announcement_banner:
      vai_trò: "Dải màu xanh đậm full-width ghim ở trên cùng trang, phía trên nav."

      info: "Background #0b835c, chữ trắng, Geist 12–14px, padding dọc 4px. Một dòng chữ căn giữa với mũi tên chỉ hướng ở cuối. Không border, không radius."

    sticky_navigation_bar:
      vai_trò: "Primary site nav tồn tại khi cuộn."

      info: "Background trắng với bottom border mờ (1px #1c1c1 ở độ mờ 0.1). Logo bên trái (grove + icon lá xanh), nav links ngang ở giữa/phải bằng Geist 14px, \"Sign In\" dạng ghost pill button ở ngoài cùng bên phải. Padding dọc 16px."

    announcement_pill:
      vai_trò: "Tag danh mục được highlight nằm phía trên hero headline."

      info: "Background trong suốt với border 1px #0b835c, radius 9999px, Geist 12px uppercase với tracking 0.1em, text #0b835c, padding 8px 16px. Đọc như một tag y khoa hoặc editorial."

    hero_headline:
      vai_trò: "Tuyên bố thương hiệu chính mở đầu trang."

      info: "Libre Caslon Text 92px, weight 400, line-height 1.2, letter-spacing -0.011em. Từ \"Meet\" được đặt bằng #1c1c1 và tên sản phẩm \"Grace\" được đặt bằng #0b835c — cùng serif, màu sắc mang thương hiệu. Không xử lý thêm; không gradient, không trang trí."

    hero_subhead:
      vai_trò: "Câu định vị một câu ngay dưới headline."

      info: "Geist 18–20px, weight 500, #1c1c1e. Leading khít (1.25), căn trái, không rộng quá 520px."

    floating_product_mockup_card:
      vai_trò: "Asset hero bên phải hiển thị AI agent trong giao diện cuộc gọi điện thoại/video."

      info: "Card cao với radius 20px, shadow hairline 1px (0px 0px 1px rgba(0,0,0,0.35) + 1px 2px inset), bề mặt trong trắng. Chat bubbles phủ lên ảnh: pill xanh cho lời chào, pill viền trắng cho trạng thái, và một question bubble nổi bật bằng Geist 18px."

    filled_dark_button:
      vai_trò: "Primary action — phần tử tương tác mạnh nhất trên trang."

      info: "Background #1c1c1, chữ trắng, Geist 14px medium, radius 9999px, padding 12px 24px. Mang inset highlight trắng mờ (rgba 0.75) và outer shadow 1px. Dùng cho \"Read Case Studies\" và các hành động có ý định cao tương tự."

    outlined_button:
      vai_trò: "Secondary action đi cùng với filled button."

      info: "Background trong suốt, border 1px #1c1c1, text #1c1c1, Geist 14px medium, radius 9999px, padding 12px 24px. Không fill khi hover trong screenshots — vẫn là ghost sạch. \"Explore Products\" dùng biến thể này."

    stat_card:
      vai_trò: "Block hiển thị cho các điểm chứng minh số lớn (10,000,000+ queries, v.v.)."

      info: "Background Mist Gray (#eff1f6), radius 20px, padding 24px. Số lớn bằng Geist 40px weight 600 #1c1c1, label bên dưới bằng Geist 14px #303033."

    small_caps_section_label:
      vai_trò: "Nhãn phân loại section như \"FOR 12 PHASE III TRIALS\"."

      info: "Geist 12px, letter-spacing 0.1em, uppercase, #0b835c hoặc #676768. Tạo giọng báo cáo thử nghiệm lâm sàng và cung cấp các neo danh mục được mã hóa màu sắc."

    big_stat_block_with_icon:
      vai_trò: "Metric được highlight (580%, 28%, 2 second) với icon chỉ hướng."

      info: "Số lớn bằng Geist 40px weight 600 #1c1c1, đứng trước là một icon nhỏ (mũi tên lên hoặc tia chớp) bằng #0b835c. Icon xanh + label small-caps xanh + số đậm tạo thành công thức điểm chứng minh của thương hiệu."

    testimonial_card:
      vai_trò: "Card trích dẫn khách hàng trong carousel."

      info: "Background trắng, radius 20px, padding 32px rộng rãi, shadow halo mảnh. Logo thương hiệu màu xanh ở góc trên bên trái, trích dẫn bằng Geist 18–20px regular, ảnh tác giả (vòng tròn 40px) + tên (Geist 14px medium) + vai trò (Geist 14px #676768) ở góc dưới bên trái."

    press___partner_logo_strip:
      vai_trò: "Hàng ngang logo truyền thông hoặc cố vấn dưới tiêu đề section."

      info: "Logo grayscale bằng Geist hoặc custom sans, #1c1c1 ở độ mờ giảm, cách đều với khoảng cách 40–60px. Không có background container — logo nằm trực tiếp trên white canvas."

  do_s_and_don_ts:

    do:
      - "Đặt hero headline bằng Libre Caslon Text 92px, dành màu xanh #0b835c cho tên sản phẩm duy nhất (ví dụ: \"Grace\") trong khi phần còn lại của headline giữ #1c1c1e."
      - "Dùng radius 9999px trên tất cả buttons, tags, và pills để giữ ngôn ngữ tương tác mềm mại và hình pill xuyên suốt."
      - "Dành forest green #0b835c cho ba công việc duy nhất: chữ thương hiệu trong serif headlines, small-caps section labels, và icon/directional accents (mũi tên, tia chớp). Không bao giờ dùng nó làm solid button fill hoặc bề mặt nền lớn."
      - "Ghép Filled Dark Button (#1c1c1 fill, chữ trắng) với Outlined Button (trong suốt, border #1c1c1) làm cặp CTA chuẩn trên bất kỳ section nào của trang."
      - "Dùng Mist Gray (#eff1f6) làm màu card surface duy nhất; cards không bao giờ trắng trên trắng khi cần nhóm nội dung."
      - "Gõ tất cả small-caps category labels ở 12px Geist với tracking 0.1em — tracking rộng chính là thứ khiến chúng đọc như clinical-trial section headers."
      - "Giữ body copy căn trái và giới hạn ở ~520px width để duy trì cột đọc editorial."

    don_t:
      - "Không dùng Geist hoặc bất kỳ sans-serif nào cho hero headline — serif Libre Caslon Text là chữ ký của thương hiệu và phải ở vị trí display."
      - "Không áp dụng drop shadows lớn hơn 1–2px blur; hệ thống từ chối elevation nặng để ưu tiên hairline halos."
      - "Không đưa màu accent mới; palette là monochrome cộng một màu xanh, thêm xanh dương/đỏ/tím sẽ làm loãng thẩm quyền lâm sàng."
      - "Không dùng #0b835c cho filled buttons — dark filled button luôn là #1c1c1, và xanh được dành cho accent và small-caps labels."
      - "Không căn giữa body paragraphs; hệ thống đọc như layout editorial và căn trái là bất khả thương lượng bên dưới hero."
      - "Không dùng radii giữa 14px và 18px — hệ thống cam kết với 8/12px (tight elements), 20/24px (cards), hoặc 9999px (pills), không có gì ở giữa."
      - "Không ghép serif với màu sáng hoặc bão hòa khác ngoài #0b835c; bất kỳ màu chromatic nào khác trên serif text đều phá vỡ chữ ký."

  surfaces:

    info: "| Bậc | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang mặc định — bề mặt chiếm ưu thế trên tất cả các section. |"
    info: "| 1 | Card | `#eff1f6` | Nền card và tile được nâng lên cho stat blocks, feature panels, và nội dung được nhóm. |"
    info: "| 2 | Inverted Dark | `#1c2b27` | Bề mặt tối cho announcement banner, testimonial overlays, và filled primary buttons. |"
    info: "| 3 | Brand Accent | `#0b835c` | Bề mặt màu thương hiệu cho top acquisition banner và bất kỳ khoảnh khắc full-bleed xanh nào. |"

  elevation:

    - "**Floating product mockup (hero image card):** `0px 0px 1px 0px rgba(0, 0, 0, 0.35), 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset`"
    - "**Testimonial carousel cards:** `0px 0px 1px 0px rgba(0, 0, 0, 0.35), 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset`"
    - "**Filled dark button (subtle inner highlight):** `0px 1px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(255, 255, 255, 0.75) inset`"

  imagery:

    info: "Imagery mang tính tài liệu và lấy con người làm trung tâm, không trừu tượng. Hero được neo bởi một bức ảnh thật về bác sĩ/nhà nghiên cứu với lớp phủ màu xanh, xếp lớp với chat UI bubbles để hiển thị AI đang trò chuyện. Không có decorative illustrations, 3D renders, hoặc đồ họa trừu tượng ở bất kỳ đâu — thương hiệu truyền đạt thực tế lâm sàng thay vì màn trình diễn công nghệ. Logo strips (press mentions, partner organizations, advisor brands) được xử lý dưới dạng wordmarks grayscale ở độ tương phản giảm, nằm trực tiếp trên nền trắng không khung. Icons dạng line-based, stroke weight tối thiểu, và hầu như luôn được tô màu Forest Grove khi xuất hiện. Mật độ thị giác thấp: khoảng trắng lớn, một bức ảnh, và các hàng logo tiết chế."

  layout:

    info: "Mô hình trang là centered max-width 1200px với side margins rộng rãi. Hero là split hai cột: cột trái chứa announcement pill, serif headline, subhead, và meta hỗ trợ, trong khi cột phải mang một floating product mockup card cao phá vỡ container và kéo dài ra ngoài một chút. Bên dưới hero, trang xếp chồng các section một cột: một hàng stat 3-up, một block kết quả 2-up với số lớn, một testimonial carousel căn giữa, một cặp CTA căn giữa, và một partner logo strip. Section gaps lớn (80px+) để duy trì khoảng thở editorial. Navigation là một sticky bar trắng duy nhất ở trên cùng với nav links ngang và một ghost pill \"Sign In\" bên phải. Nhịp điệu tổng thể là các dải trắng trên trắng với một section Mist Gray mỗi trang; không có pattern tối/sáng xen kẽ."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #1c1c1e"
    - "background: #ffffff"
    - "card: #eff1f6"
    - "border: #1c1c1e (ở độ mờ thấp) hoặc #303033"
    - "accent: #0b835c (Forest Grove)"
    - "primary action: #0b835c (filled action)"

    example_component_prompts:

    - "**Hero Headline**: White canvas. Display text bằng Libre Caslon Text 92px, weight 400, line-height 1.2, letter-spacing -0.011em. Từ \"Meet\" bằng #1c1c1e, từ \"Grace\" bằng #0b835c — cùng font, màu sắc mang thương hiệu. Subhead bên dưới bằng Geist 20px weight 500, #1c1c1e, max-width 520px."

    - "**Announcement Pill**: Background trong suốt, border 1px #0b835c, radius 9999px. Text bằng Geist 12px uppercase, letter-spacing 0.1em, màu #0b835c. Padding 8px 16px. Đặt nó 24px phía trên hero headline."

    - "**Stat Card**: Fill Mist Gray (#eff1f6), border-radius 20px, padding 24px. Số bằng Geist 40px weight 600 #1c1c1e. Label bằng Geist 14px #303033 ngay bên dưới, một dòng."

    - "**Testimonial Card**: Background trắng, radius 20px, padding 32px, hairline shadow (0 0 1px rgba(0,0,0,0.35) + 0 1px 2px rgba(0,0,0,0.25) inset). Logo thương hiệu màu xanh ở góc trên bên trái, trích dẫn bằng Geist 18px regular #1c1c1e, ảnh tác giả hình tròn 40px + tên/vai trò ở dưới cùng."

    - "Tạo Primary Action Button: Background #0b835c, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính."

  signature_formula___proof_point:

    info: "Mọi kết quả số trên site đều tuân theo cùng một cấu trúc: small-caps green label (Geist 12px, tracking 0.1em, #0b835c) → icon chỉ hướng xanh nhỏ (mũi tên lên hoặc tia chớp) → số đậm lớn (Geist 40px weight 600, #1c1c1e) → caption một dòng (Geist 14px, #303033). Công thức này là ngôn ngữ chứng minh của thương hiệu và nên được tái sử dụng cho bất kỳ metric, stat, hoặc KPI nào trên bất kỳ trang mới nào."

  similar_brands:

    - "**Hippocratic AI** — Cùng định vị clinical-AI, accent xanh rừng giống hệt trên white canvas, và cùng pattern chữ ký serif xanh trong headlines đơn sắc."
    - "**Abridge** — Healthcare AI với giao diện light-mode, một accent màu tiết chế, tương phản typography serif-meets-sans, và stat sections điểm chứng minh vang vọng công thức của Grove."
    - "**DeepScribe** — Clinical documentation AI với bề mặt trắng phẳng, CTAs hình pill, và một accent màu duy nhất dùng tiết kiệm cho labels và icons thay vì fills."
    - "**Verily (Alphabet)** — Thương hiệu life-sciences dùng editorial serif headlines trên white canvas với một accent chữ ký duy nhất, nhịp điệu layout medical-journal, và elevation drop-shadow tối thiểu."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-grove: #0b835c;
          --color-pine-shadow: #1c2b27;
          --color-ink-black: #1c1c1e;
          --color-graphite: #303033;
          --color-slate-mid: #676768;
          --color-mist-gray: #eff1f6;
          --color-pure-white: #ffffff;
          --color-shadow-smoke: #bfbfbf;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-libre-caslon-text: 'Libre Caslon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-geist-medium: 'Geist Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 1.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.44px;
          --text-display: 92px;
          --leading-display: 1.2;
          --tracking-display: -1.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --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-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-icons: 12px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
          --radius-largecards: 24px;
          --radius-testimonialcards: 20px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.35) 0px 0px 1px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.15) 0px 1px 1px 0px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.75) 0px 1px 2px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #eff1f6;
          --surface-inverted-dark: #1c2b27;
          --surface-brand-accent: #0b835c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-grove: #0b835c;
          --color-pine-shadow: #1c2b27;
          --color-ink-black: #1c1c1e;
          --color-graphite: #303033;
          --color-slate-mid: #676768;
          --color-mist-gray: #eff1f6;
          --color-pure-white: #ffffff;
          --color-shadow-smoke: #bfbfbf;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-libre-caslon-text: 'Libre Caslon Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-geist-medium: 'Geist Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 1.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.9px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.44px;
          --text-display: 92px;
          --leading-display: 1.2;
          --tracking-display: -1.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 40px;
          --radius-full: 100px;
          --radius-full-2: 999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.35) 0px 0px 1px 0px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.15) 0px 1px 1px 0px;
          --shadow-subtle-4: rgba(255, 255, 255, 0.75) 0px 1px 2px 0px inset;
        }