august_health_ehr___style_reference:
  info: "> Nền kem ấm với mực tím — một bề mặt clinical mang tính nhân văn, làm dịu đi sự khô khan thường thấy của healthcare."

  theme: "light"

  info: "August Health sử dụng ngôn ngữ thị giác warm-clinical: canvas kem mềm (#f8f3eb) thay thế cho nền trắng lạnh thường thấy trong healthcare SaaS, và shadow được pha màu nâu ấm rgba(75,68,57,0.1) thay vì xám lạnh. Sự kết hợp giữa serif mang phong cách editorial (Reckless Neue) và sans hình học (Saans) mang đến cho sản phẩm cảm giác dễ tiếp cận, nhân văn — phù hợp với lĩnh vực chăm sóc người cao tuổi — trong khi màu chàm rực rỡ (#4865ff) làm điểm neo cho mọi hành động chính. Màu sắc xuất hiện thành từng cụm tập trung — khung chân dung tròn, thẻ tính năng pha màu, và pill buttons — trên nền bảng màu neutral tiết chế, tạo nhịp điệu và hơi ấm mà không làm interface bị rối."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Primary Indigo | `#4865ff` | `--color-primary-indigo` | Primary action buttons, active nav state, icon accents — màu tập trung bão hòa duy nhất giúp CTA trông rõ ràng là có thể tương tác |"
    info: "| Deep Ink | `#080331` | `--color-deep-ink` | Headlines, body text, primary borders — gần như đen pha tím, kết hợp ấm áp với serif typeface |"
    info: "| Midnight Violet | `#1b1463` | `--color-midnight-violet` | Navigation borders, secondary surfaces, gradient terminus — phiên bản tối hơn của Primary Indigo để tạo chiều sâu phân lớp |"
    info: "| Forest | `#328a3b` | `--color-forest` | Green action color cho filled buttons, selected navigation states, và các thời điểm chuyển đổi tập trung |"
    info: "| Ember | `#ff6d39` | `--color-ember` | Tinted card surfaces, portrait frame backgrounds — cam ấm báo hiệu năng lượng và hơi ấm con người |"
    info: "| Blossom | `#f098d7` | `--color-blossom` | Tinted feature card backgrounds, hero photo frame — hồng trung cho các bề mặt được phân loại |"
    info: "| Petal | `#ffaefe` | `--color-petal` | Light pink surface washes và button backgrounds — sắc hồng nhạt nhất trong họ hồng dành cho các mảng nền mềm |"
    info: "| Meadow | `#114e0b` | `--color-meadow` | Dark green button background variant — xanh lá đậm bão hòa cho pill buttons tương phản |"
    info: "| Lavender Mist | `#a2baff` | `--color-lavender-mist` | Outlined/ghost button borders, subtle violet washes — phiên bản tint nhẹ của Primary Indigo |"
    info: "| Cream | `#f8f3eb` | `--color-cream` | Page canvas, section backgrounds, link surfaces — lớp nền off-white ấm áp định hình toàn bộ mood |"
    info: "| Stone | `#333333` | `--color-stone` | Link và icon text — sáng hơn đen thuần một chút cho secondary text |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, button text, inverted elements — bề mặt sạch nằm trên nền cream |"
    info: "| True Black | `#000000` | `--color-true-black` | Primary text, maximum-contrast borders, heading strokes |"
    info: "| Info Blue | `#dce4fb` | `--color-info-blue` | Badge backgrounds cho informational tags — xanh lam gần xám cho status indicators ít nhấn mạnh |"

  tokens___typography:

    reckless_neue___tất_cả_headings_và_display_text__một_editorial_serif_đương_đại_chỉ_dùng_ở_weight_400_regular___không_có_bold__đây_là_anti_convention__hầu_hết_các_thương_hiệu_healthtech_dùng_sans_serif_hoặc_bold_serifs__serif_weight_regular_ở_kích_thước_lớn_tạo_cảm_giác_văn_chương__đáng_tin_cậy_mà_không_cần_phải_la_hét__kích_thước_lớn_nhất_48_64px_làm_điểm_neo_cho_section_headlines__trong_khi_24_32px_phục_vụ_subheadings_____font_reckless_neue:
      - "**Thay thế:** DM Serif Display hoặc Source Serif 4"
      - "**Weights:** 400"
      - "**Kích thước:** 24px, 32px, 48px, 64px"
      - "**Line height:** 1.0-1.3"
      - "**Vai trò:** Tất cả headings và display text. Một editorial serif đương đại chỉ dùng ở weight 400 (regular) — không có bold. Đây là anti-convention: hầu hết các thương hiệu healthtech dùng sans-serif hoặc bold serifs; serif weight regular ở kích thước lớn tạo cảm giác văn chương, đáng tin cậy mà không cần phải la hét. Kích thước lớn nhất (48-64px) làm điểm neo cho section headlines, trong khi 24-32px phục vụ subheadings."

    saans___body_text__ui_controls__navigation__buttons__cards__labels__và_mọi_thứ_không_phải_headline__weight_400_cho_body_và_descriptions__weight_500_cho_buttons_và_nav_links_khi_cần_nhấn_mạnh_nhẹ__geometric_humanist_sans_mang_lại_sự_rõ_ràng_và_ấm_áp_ở_kích_thước_nhỏ__tương_phản_với_editorial_serif_headings_____font_saans:
      - "**Thay thế:** Inter hoặc DM Sans"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 12px, 14px, 16px, 20px, 24px"
      - "**Line height:** 1.0-1.6"
      - "**Vai trò:** Body text, UI controls, navigation, buttons, cards, labels, và mọi thứ không phải headline. Weight 400 cho body và descriptions, weight 500 cho buttons và nav links khi cần nhấn mạnh nhẹ. Geometric humanist sans mang lại sự rõ ràng và ấm áp ở kích thước nhỏ, tương phản với editorial serif headings."

    type_scale:

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

  tokens___spacing___shapes:

    base_unit: "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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 100px |"
      info: "| cards | 16px |"
      info: "| links | 24px |"
      info: "| badges | 1600px |"
      info: "| images | 1600px |"
      info: "| buttons | 1600px |"
      info: "| special | 100px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| lg | `rgba(75, 68, 57, 0.1) 0px 12px 24px 0px, rgba(75, 68, 57,...` | `--shadow-lg` |"
      info: "| sm | `rgba(75, 68, 57, 0.05) 0px 4px 4px 0px, rgba(75, 68, 57, ...` | `--shadow-sm` |"
      info: "| md | `rgba(99, 91, 79, 0.08) 0px 8px 16px 0px, rgba(99, 91, 79,...` | `--shadow-md` |"
      info: "| xl | `rgba(75, 68, 57, 0.1) 0px 48px 48px 0px` | `--shadow-xl` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button:
      vai_trò: "Main call-to-action trên tất cả các trang"

      info: "Nền Indigo (#4865ff), chữ trắng, border-radius 1600px (full pill), padding dọc 8-12px với padding ngang 16-24px, Saans weight 500 ở 14-16px. Đổ double shadow pha màu ấm (rgba(75,68,57,0.1) ở offset 12px/24px và 48px/48px)."

    ghost_text_button:
      vai_trò: "Secondary actions và inline links"

      info: "Nền trong suốt, chữ Deep Ink (#080331), không border, Saans weight 500. Đôi khi đi kèm icon mũi tên. Dùng cho navigation dropdowns và các actions ít nổi bật hơn."

    pill_navigation_bar:
      vai_trò: "Sticky top navigation"

      info: "Nền trắng (#ffffff) với border-radius 1600px, nổi trên cream canvas với shadow pha màu ấm. Chứa logo (trái), nav links (giữa, Saans 14px weight 500), và CTA button (phải). Khoảng cách nội bộ: padding ngang 16-24px, padding dọc 12-14px."

    tinted_feature_card:
      vai_trò: "Trưng bày khả năng sản phẩm"

      info: "Border-radius 16px, padding 32px, nền màu (Forest #328a3b, Blossom #f098d7, hoặc các accent tints khác). Chứa icon nhỏ, serif subheading (Reckless Neue 24px), body description (Saans 16px), và circular arrow button (trắng, radius 100px) ở góc trên bên phải."

    white_product_card:
      vai_trò: "UI screenshot hoặc feature container chi tiết"

      info: "Nền trắng (#ffffff), border-radius 16px, padding nội bộ 32px. Chứa product UI screenshots hoặc phân tích tính năng chi tiết. Nằm trên cream canvas để tạo các lớp tương phản."

    circular_portrait_frame:
      vai_trò: "Hero decorative photography"

      info: "Image masks hình tròn (về cơ bản là border-radius 50% hoặc giá trị radius lớn) chứa ảnh chân dung, được đặt bên trong các vòng tròn màu đặc lớn hơn (hồng, xanh lá, cam, trắng). Những yếu tố này tạo nên bố cục trang trí rải rác đặc trưng của hero và phá vỡ grid hình chữ nhật."

    info_badge_pill:
      vai_trò: "Category labels và tags"

      info: "Border-radius 1600px, padding dọc 10px, chữ nhỏ (Saans 12px). Dùng cho section labels như 'THE PLATFORM', 'CASE STUDIES', và các chỉ báo 'August Intelligence' với icon nhỏ phía trước."

    video_player_block:
      vai_trò: "Case study và testimonial content"

      info: "Media container hình chữ nhật lớn với radius 16px, nền cream hoặc trắng, overlay play button ở giữa (hình tròn, nền indigo, tam giác trắng). Kèm theo serif headline căn giữa phía trên."

    logo_strip:
      vai_trò: "Social proof và trust signals"

      info: "Hàng ngang logo đối tác/khách hàng trên nền cream, hiển thị ở chế độ grayscale hoặc tông màu nhẹ, cách đều nhau. Không có card containers — logo nổi trực tiếp trên cream canvas."

    section_header:
      vai_trò: "Giới thiệu section và điều hướng"

      bố_cục_căn_giữa: "pill badge label nhỏ ở trên cùng, serif headline lớn (Reckless Neue 48-64px) bên dưới, subtext tùy chọn (Saans 16-20px) bên dưới nữa. Khoảng cách dọc rộng rãi (40-64px) giữa các element."

    dropdown_nav_item:
      vai_trò: "Các mục navigation có thể mở rộng"

      info: "Nav link với caret indicator. Khi active, hiển thị dropdown panel với nền trắng, radius 16px, và shadow pha màu ấm chứa danh sách link."

    gradient_hero_accent:
      vai_trò: "Decorative background gradient"

      info: "Linear gradient (121deg) từ hồng rgb(204,122,181) qua indigo rgb(72,101,255) đến tím đậm rgb(27,20,99). Được dùng một cách tiết kiệm như background treatment cho các section đặc biệt hoặc feature highlights."

    outlined_secondary_button:
      vai_trò: "Biến thể action thay thế"

      info: "Border Lavender Mist (#a2baff), nền trong suốt hoặc trắng, chữ Deep Ink (#080331), radius 1600px. Dùng khi Primary Indigo CTA đã có mặt và cần một secondary action."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng border-radius 1600px cho tất cả interactive elements: buttons, badges, nav bar, và image frames để duy trì sự nhất quán hình pill"
      - "Đặt page canvas là Cream (#f8f3eb), không phải trắng thuần — tông màu ấm là nền tảng cảm xúc của thương hiệu"
      - "Áp dụng warm-tinted shadows (rgba(75,68,57,0.1)) cho tất cả elevated elements thay vì cool gray shadows"
      - "Kết hợp Reckless Neue (serif, weight 400 duy nhất) cho tất cả headings với Saans (sans, weights 400-500) cho tất cả body và UI text"
      - "Chỉ dùng Primary Indigo (#4865ff) cho primary action — không pha loãng với secondary action colors khi cần một CTA mạnh"
      - "Phân lớp bề mặt theo thứ tự: cream canvas → white card → tinted card → vibrant accent để tạo chiều sâu mà không cần shadow nặng"
      - "Duy trì khoảng cách dọc tối thiểu 64px giữa các section và padding nội bộ 32px cho tất cả card containers"
      - "Căn giữa hero và section headlines cho bố cục editorial; chỉ căn trái cho product UI và các khu vực nội dung dày đặc"

    không_nên_làm:
      - "Không dùng bold (600+) weights với Reckless Neue — sức mạnh của serif nằm ở sự tiết chế của regular weight"
      - "Không áp dụng cool gray shadows (rgba(0,0,0,...)) — warm brown shadows là một phần của bản sắc thị giác"
      - "Không dùng pure white (#ffffff) làm page background — cream là nền, white dành cho các bề mặt bên trên"
      - "Không dùng các accent colors (Forest, Ember, Blossom) cho primary CTAs — dành Primary Indigo cho vai trò đó"
      - "Không thêm quá hai weights cho bất kỳ text element nào — hệ thống cố tình tiết chế (400/500 cho sans, 400 cho serif)"
      - "Không dùng góc nhọn (0px radius) trên cards hoặc buttons — card radius tối thiểu là 16px, buttons luôn là pills"
      - "Không phá vỡ hệ thống phân cấp bề mặt cream/trắng/tinted bằng cách đặt một colored accent trực tiếp lên cream mà không có white card container"
      - "Không dùng xanh lá cho success states hoặc đỏ cho error states trừ khi thực sự bắt buộc — các accent colors mang tính trang trí, không phải ngữ nghĩa"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 0 | Cream Canvas | `#f8f3eb` | Primary page background và section bands |"
    info: "| 1 | White Surface | `#ffffff` | Card surfaces, product UI mockups, elevated content blocks |"
    info: "| 2 | Tinted Card | `#f098d7` | Category-coded feature cards với pink wash |"
    info: "| 3 | Accent Surface | `#ffaefe` | Accent fill nhẹ nhất cho soft callouts và pill buttons |"
    info: "| 4 | Vibrant Accent | `#ff6d39` | Bold accent surface cho portrait frames và high-energy cards |"

  elevation:

    - "**Primary CTA button:** `rgba(75, 68, 57, 0.1) 0px 12px 24px 0px, rgba(75, 68, 57, 0.1) 0px 48px 48px 0px`"
    - "**Card surface:** `rgba(75, 68, 57, 0.1) 0px 48px 48px 0px`"
    - "**Subtle elevation:** `rgba(75, 68, 57, 0.05) 0px 4px 4px 0px, rgba(75, 68, 57, 0.08) 0px 32px 16px 0px`"
    - "**Soft button:** `rgba(99, 91, 79, 0.08) 0px 8px 16px 0px, rgba(99, 91, 79, 0.04) 0px 32px 32px 0px`"

  imagery:

    info: "Nhiếp ảnh là trung tâm và mang tính nhân văn: các crop chân dung hình tròn của người chăm sóc và người cao tuổi trong khung màu rực rỡ (hồng, xanh lá, cam) đóng vai trò là chữ ký thị giác của hero. Ảnh là chân dung toàn mặt, high-key, chân thực hoặc bán dàn dựng — không phải ảnh phong cách sống (lifestyle environmental shots). Circular masking với bold color halos là một motif trang trí lặp lại. Product UI được hiển thị dưới dạng floating device mockup screenshots với radius rộng rãi. Không có illustrations hoặc đồ họa trừu tượng — tất cả năng lượng thị giác đến từ ảnh thật và product screenshots."

  layout:

    info: "Nội dung căn giữa với max-width ~1200px và full-bleed cream canvas. Hero là một headline stack căn giữa (không có sidebar image) được bao quanh bởi các circular portrait frames rải rác tràn ra mép trang. Navigation là một pill-shaped bar nổi (radius 1600px) với shadow nhẹ, đặt ở phía trên. Các section xen kẽ giữa white cards và cream backgrounds. Feature content dùng 2-column card grids trên nền cream. Case study sections dùng centered headlines phía trên full-width video blocks. Nhịp điệu tổng thể là: khoảng cách dọc rộng rãi (64px+), bố cục chữ căn giữa, và các decorative elements hình tròn phá vỡ grid hình chữ nhật."

  agent_prompt_guide:

    quick_color_reference:
    - "Background: #f8f3eb (cream)"
    - "Surface: #ffffff (trắng)"
    - "Text: #080331 (Deep Ink)"
    - "Border: #000000 (True Black, cho high-contrast hairlines)"
    - "Accent: #4865ff (Primary Indigo)"
    - "primary action: #4865ff (filled action)"

    example_component_prompts:

    - "Tạo một Primary Action Button: nền #4865ff, chữ #ffffff, radius 9999px, compact pill padding. Dùng filled treatment này cho main CTA."

    - "**Feature Card Grid (2-column)**: Card trắng (#ffffff), border-radius 16px, padding 32px. Icon (24px, stroke #080331) ở góc trên bên trái. Heading: Reckless Neue 24px weight 400, #080331. Description: Saans 16px weight 400, #080331. Circular arrow button (radius 100px, nền trắng, mũi tên #080331) ở góc trên bên phải."

    - "**Tinted Category Card**: Nền #f098d7 (Blossom), radius 16px, padding 32px. Icon prefix + heading: Reckless Neue 24px, #080331. Body: Saans 16px weight 400, #080331. Product screenshot nhúng ở dưới cùng: container trắng (#ffffff), radius 16px."

    - "**Section Header**: Căn giữa. Pill badge nhỏ (radius 1600px, padding dọc 10px, Saans 12px, chữ #080331, nền cream hoặc trắng) ở trên. Headline: Reckless Neue 48px weight 400, #080331, line-height 1.1. Khoảng cách 40px đến subtext tùy chọn: Saans 20px weight 400, #080331."

  visual_design_principles:

    - "**Warmth over sterility**: Mọi quyết định trong hệ thống (cream canvas, warm shadows, serif headlines) đều làm mềm đi kỳ vọng clinical về phần mềm healthcare. Đây là emotional design có chủ đích dành cho đối tượng chăm sóc người cao tuổi."

    - "**Concentrated color**: Bảng màu chủ yếu là cream và trắng trung tính. Màu sắc xuất hiện ở những khoảnh khắc cụ thể, có tác động cao: circular portrait frames, tinted feature cards, và single indigo CTA. Điều này làm cho mỗi instance màu sắc có cảm giác có chủ đích và mang tính tôn vinh hơn là tiếng ồn trang trí."

    - "**Pill everything**: Radius 1600px là mặc định cho tất cả interactive surfaces và nhiều decorative elements. Điều này tạo ra hình học mềm mại, dễ tiếp cận, không mang tính doanh nghiệp, giúp phân biệt hệ thống với enterprise software góc cạnh."

    - "**Editorial typography**: Sự kết hợp serif/sans (Reckless Neue + Saans) vay mượn từ thiết kế tạp chí, không phải quy ước software UI. Headlines được thiết kế để đọc và thưởng thức, không phải để lướt qua. Weight 400 duy nhất cho serif — không có biến thể bold."

    - "**Layered surface hierarchy**: Bốn cấp độ bề mặt riêng biệt (cream → white → tinted → vibrant) tạo chiều sâu thông qua nhiệt độ màu sắc, không phải trọng lượng shadow. Cards đổ shadow tối thiểu vì sự khác biệt màu sắc đã thiết lập elevation."

  typography_pairing_rationale:

    info: "Reckless Neue (serif) và Saans (sans) tạo thành một sự kết hợp editorial-meets-functional có chủ đích. Serif mang trọng lượng cảm xúc và sự đáng tin cậy — yếu tố quan trọng cho một nền tảng xử lý dữ liệu chăm sóc người cao tuổi. Saans cung cấp độ chính xác và dễ đọc cần thiết cho UI dày đặc (bảng biểu, biểu mẫu, dữ liệu). Cả hai đều được dùng ở regular weight (400) làm chính, riêng Saans dùng thêm 500 cho interactive emphasis. Sự tiết chế này có nghĩa là hệ thống phân cấp thị giác được tạo ra bởi kích thước và màu sắc, không phải bởi độ tương phản weight — một dấu hiệu của thiết kế editorial tự tin."

  similar_brands:

    - "**Calm** — Cream canvas ấm thay thế trắng lạnh, editorial serif headlines, pill-shaped buttons, và concentrated accent color usage"
    - "**Headspace** — Warm off-white backgrounds, rounded pill buttons, và approachable typography làm mềm một category vốn clinical"
    - "**Abridge** — Healthcare AI với serif/sans typography pairing, warm background tones, và indigo/violet làm primary brand color"
    - "**Sword Health** — Healthcare product dùng soft cream backgrounds, pill-shaped CTAs, và editorial serif display type kết hợp với clean sans body text"
    - "**Walnut** — Warm cream surfaces, concentrated accent colors trên nền neutral palette, và approach typography editorial serif + geometric sans"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-primary-indigo: #4865ff;
          --color-deep-ink: #080331;
          --color-midnight-violet: #1b1463;
          --color-forest: #328a3b;
          --color-ember: #ff6d39;
          --color-blossom: #f098d7;
          --color-petal: #ffaefe;
          --color-meadow: #114e0b;
          --color-lavender-mist: #a2baff;
          --color-cream: #f8f3eb;
          --color-stone: #333333;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-info-blue: #dce4fb;
        
          /* Typography — Font Families */
          --font-reckless-neue: 'Reckless Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-saans: 'Saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --text-display: 64px;
          --leading-display: 1;
        
          /* 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-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 100px;
          --radius-full-3: 1600px;
          --radius-full-4: 3200px;
        
          /* Named Radii */
          --radius-nav: 100px;
          --radius-cards: 16px;
          --radius-links: 24px;
          --radius-badges: 1600px;
          --radius-images: 1600px;
          --radius-buttons: 1600px;
          --radius-special: 100px;
        
          /* Shadows */
          --shadow-lg: rgba(75, 68, 57, 0.1) 0px 12px 24px 0px, rgba(75, 68, 57, 0.1) 0px 48px 48px 0px;
          --shadow-sm: rgba(75, 68, 57, 0.05) 0px 4px 4px 0px, rgba(75, 68, 57, 0.08) 0px 32px 16px 0px;
          --shadow-md: rgba(99, 91, 79, 0.08) 0px 8px 16px 0px, rgba(99, 91, 79, 0.04) 0px 32px 32px 0px;
          --shadow-xl: rgba(75, 68, 57, 0.1) 0px 48px 48px 0px;
        
          /* Surfaces */
          --surface-cream-canvas: #f8f3eb;
          --surface-white-surface: #ffffff;
          --surface-tinted-card: #f098d7;
          --surface-accent-surface: #ffaefe;
          --surface-vibrant-accent: #ff6d39;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-primary-indigo: #4865ff;
          --color-deep-ink: #080331;
          --color-midnight-violet: #1b1463;
          --color-forest: #328a3b;
          --color-ember: #ff6d39;
          --color-blossom: #f098d7;
          --color-petal: #ffaefe;
          --color-meadow: #114e0b;
          --color-lavender-mist: #a2baff;
          --color-cream: #f8f3eb;
          --color-stone: #333333;
          --color-pure-white: #ffffff;
          --color-true-black: #000000;
          --color-info-blue: #dce4fb;
        
          /* Typography */
          --font-reckless-neue: 'Reckless Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-saans: 'Saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.6;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body: 16px;
          --leading-body: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.1;
          --text-display: 64px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 100px;
          --radius-full-3: 1600px;
          --radius-full-4: 3200px;
        
          /* Shadows */
          --shadow-lg: rgba(75, 68, 57, 0.1) 0px 12px 24px 0px, rgba(75, 68, 57, 0.1) 0px 48px 48px 0px;
          --shadow-sm: rgba(75, 68, 57, 0.05) 0px 4px 4px 0px, rgba(75, 68, 57, 0.08) 0px 32px 16px 0px;
          --shadow-md: rgba(99, 91, 79, 0.08) 0px 8px 16px 0px, rgba(99, 91, 79, 0.04) 0px 32px 32px 0px;
          --shadow-xl: rgba(75, 68, 57, 0.1) 0px 48px 48px 0px;
        }