adaptive_ml___style_reference:
  info: "> Ấn phẩm in trên giấy kem ấm. Một phong cách editorial monochrome đầy tự tin, nơi màu sắc duy nhất là artwork trên các card và điểm trang trí duy nhất là serif."

  theme: "light"

  info: "Adaptive ML sử dụng ngôn ngữ editorial-monochrome ấm áp: mực gần đen (#272421) trên nền giấy kem trắng ấm (#ffffff, #edebe8), với headline serif cổ điển (Egyptienne F) mang phong cách typography ấn phẩm in hơn là web display text. Giao diện được thiết kế tối giản có chủ đích — không có điểm nhấn màu, không panel gradient trang trí, không badge màu — để mắt người xem bị thu hút vào một trong hai thứ: headline editorial, hoặc artwork gradient trừu tượng sống động trên các content card, vốn là màu sắc duy nhất trong hệ thống. Các component phẳng và đầy tự tin: dark filled buttons, hairline borders, 9px radii, và một shadow 12px gần như vô hình dành riêng cho elevated cards. Nhịp điệu tổng thể rộng rãi và phân chia theo section, với mono labels dạng uppercase có tracking rộng (Diatype Mono) đóng vai trò như 'typographic furniture' lặng lẽ bên cạnh serif display text uyển chuyển."

  tokens___colors:

    info: "| Name | Value | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink | `#272421` | `--color-ink` | Primary text, filled buttons, dark inverse surfaces, hairlines, logo mark. Token tối nhất trong hệ thống — một màu gần đen ấm, đọc như mực in, không phải đen tuyền |"
    info: "| Paper Warm | `#edebe8` | `--color-paper-warm` | Hairline borders, dividers, input outlines, và card edges trên light surfaces. Không dùng làm màu CTA chính |"
    info: "| Paper Cool | `#e3e3e2` | `--color-paper-cool` | Tertiary surface tint, alternating row backgrounds, inset wells. Hơi lạnh hơn Paper Warm — dùng tiết kiệm để tạo chiều sâu phân lớp mà không cần màu sắc |"
    info: "| Mist | `#eeeeed` | `--color-mist` | Subtle dividers, low-contrast borders, badge fill backgrounds, hover wash trên neutral surfaces. Sáng hơn Paper Warm một bậc, dùng cho hairline detail work |"
    info: "| Stone | `#7d7c7a` | `--color-stone` | Muted body copy, secondary metadata, disabled labels, low-emphasis icon strokes. Màu xám ấm trung bình giúp supporting text dễ đọc mà không cạnh tranh với Ink |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Link text và link borders cho in-content references. Sáng hơn Ink một bậc, chỉ dùng khi link cần cảm giác bớt mạnh mẽ hơn primary type |"
    info: "| White | `#ffffff` | `--color-white` | Page canvas, button text trên Ink fills, nav background, card image overlay text. Giấy nền cho toàn bộ hệ thống |"

  tokens___typography:

    egyptienne_f_lt___display_và_hero_headlines__serif_này_là_giọng_nói_đặc_trưng___các_serif_có_chân_đế_cổ_điển_và_độ_tương_phản_nét_đều_mang_lại_cảm_giác_ấn_phẩm_in_cho_thương_hiệu_mà_sans_serif_không_thể_tái_tạo__chỉ_dùng_cho_editorial_display_text__không_bao_giờ_dùng_cho_body_hay_ui_____font_egyptienne_f_lt:
      - "**Thay thế:** Source Serif Pro hoặc PT Serif"
      - "**Weights:** 400, 500"
      - "**Sizes:** 22px, 77px, 94px"
      - "**Line height:** 0.90, 1.00, 1.20"
      - "**Letter spacing:** -0.028em đến -0.030em (tight ở mọi kích thước)"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Display và hero headlines. Serif này là giọng nói đặc trưng — các serif có chân đế cổ điển và độ tương phản nét đều mang lại cảm giác ấn phẩm in cho thương hiệu mà sans-serif không thể tái tạo. Chỉ dùng cho editorial display text, không bao giờ dùng cho body hay UI."

    diatype___primary_ui_và_body_typeface__geometric_humanist_sans_đảm_nhận_navigation__body_copy__buttons__subheadings__và_large_sans_serif_display_text__500_cho_emphasized_labels__700_dành_cho_rare_weight_contrast__400_là_workhorse_____font_diatype:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14px, 15px, 18px, 24px, 32px, 48px, 72px, 88px"
      - "**Line height:** 1.20, 1.30, 1.40, 1.43"
      - "**Letter spacing:** -0.030em ở 32px+ (tight), 0.018em ở 14–24px (open)"
      - "**Vai trò:** Primary UI và body typeface. Geometric humanist sans đảm nhận navigation, body copy, buttons, subheadings, và large sans-serif display text. 500 cho emphasized labels, 700 dành cho rare weight contrast, 400 là workhorse."

    diatype_mono___micro_labels__step_numbers__category_tags_use_cases__adapt__evaluate__serve__uppercase_nav_items__badge_text__tracking_rộng_và_mono_face_tạo_ra__typographic_furniture__báo_hiệu_cấu_trúc_hệ_thống_mà_không_cạnh_tranh_với_serif_display_____font_diatype_mono:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 13px"
      - "**Line height:** 1.00, 1.40"
      - "**Letter spacing:** 0.030em, 0.090em (wide, dành cho uppercase tracked labels)"
      - "**Vai trò:** Micro-labels: step numbers, category tags (USE CASES, ADAPT, EVALUATE, SERVE), uppercase nav items, badge text. Tracking rộng và mono face tạo ra 'typographic furniture' báo hiệu cấu trúc hệ thống mà không cạnh tranh với serif display."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | 0.33px | `--text-caption` |"
      info: "| body | 15px | 1.43 | 0.27px | `--text-body` |"
      info: "| subheading | 18px | 1.3 | 0.32px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | 0.43px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -1.44px | `--text-heading-lg` |"
      info: "| display | 77px | 1 | -2.16px | `--text-display` |"
      info: "| display-xl | 94px | 0.9 | -2.82px | `--text-display-xl` |"

  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: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 76 | 76px | `--spacing-76` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 84 | 84px | `--spacing-84` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 136 | 136px | `--spacing-136` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 9px |"
      info: "| pills | 9999px |"
      info: "| badges | 9px |"
      info: "| inputs | 9px |"
      info: "| buttons | 9px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| md | `rgba(39, 36, 33, 0.1) 0px 4px 12px 0px` | `--shadow-md` |"

    layout:

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

  components:

    primary_navigation_bar:
      vai_trò: "Site-wide header neo giữ brand identity và top-level IA"

      info: "Nền trắng, border bottom 1px màu #edebe8 (hoặc không border). Logo bên trái (Adaptive ML mark + wordmark, Ink). Các nav items uppercase căn giữa, 13px Diatype Mono, 0.090em tracking, Ink. Bên phải là filled dark CONTACT button. Tổng chiều cao khoảng 72–80px với padding ngang 24px bên trong container max-width 1200px."

    filled_dark_button:
      vai_trò: "Primary interactive control — kiểu button fill duy nhất trong hệ thống"

      info: "Background #272421 (Ink), text #ffffff, 13px Diatype Mono uppercase, 0.090em tracking, weight 500. border-radius 9px. Padding 10px 24px. Không border. Tùy chọn icon mũi tên trailing cho các hành động có hướng như 'Book a demo'. Dùng cho CONTACT ở góc trên bên phải và BOOK A DEMO trong hero."

    outlined_ghost_button:
      vai_trò: "Secondary action khi cần một lựa chọn trung tính"

      info: "Background trong suốt, border 1px màu #edebe8, text Ink, 13px Diatype Mono uppercase, 0.090em tracking. border-radius 9px. Padding 10px 24px. Nằm cạnh hoặc bên dưới filled dark buttons khi cần hai hành động có trọng lượng ngang nhau."

    workflow_tab_pill:
      vai_trò: "Segmented control để chuyển đổi giữa các platform stages"

      info: "Hình stadium bo tròn hoàn toàn (9999px radius). Tab active: background Ink, text trắng. Tab inactive: trong suốt, text Ink, border hairline 1px Ink. Labels 13px Diatype Mono uppercase, 0.090em tracking. Padding 10px 20px. Dùng trong platform section cho USE CASES / ADAPT / EVALUATE / SERVE."

    use_case_card:
      vai_trò: "Content card hiển thị một use case với artwork gradient sống động"

      info: "Hình gradient full-bleed (trừu tượng, hữu cơ, độ bão hòa cao) lấp đầy diện tích card. border-radius 9px. Label overlay màu trắng, 15px Diatype 500, đặt ở góc dưới bên trái với padding inset 16–24px. Không border hay shadow nhìn thấy được — bản thân gradient image chính là card. Cards được sắp xếp trong grid 3 cột trên desktop, gap 12–16px."

    platform_feature_card:
      vai_trò: "Content card dạng dài mô tả một platform capability"

      info: "Background #edebe8 (Paper Warm). border-radius 9px. Soft shadow 0 4px 12px rgba(39,36,33,0.1). Padding trong 24–32px. Layout: bên trái chứa icon/illustration trong vùng 160×160, bên phải chứa step label mono uppercase (11px, 0.33px tracking, Stone), một serif heading 24–32px, và một body paragraph 15px. Cards nằm trong grid 2 cột."

    step_number_label:
      vai_trò: "Micro-label xác định một section hoặc bước được đánh số"

      info: "11px Diatype Mono, 0.090em tracking, uppercase, màu Stone (#7d7c78). Pattern: '001 ADAPT', '002 FASTPATHNESS'. Nằm phía trên heading và đóng vai trò như section anchor — typography furniture, không phải navigation."

    case_study_tag:
      vai_trò: "Pill tag gắn nhãn logo hoặc testimonial là case study"

      info: "Background Paper Warm (#edebe8), text Ink, radius 9999px. 11px Diatype Mono uppercase, 0.090em tracking. Padding 6px 12px. Luôn đi kèm với customer logo phía trên."

    customer_logo_strip:
      vai_trò: "Social proof band hiển thị enterprise customers"

      info: "Một hàng logo khách hàng duy nhất, hiển thị dưới dạng grayscale (Stone hoặc nhạt hơn). Các logo cách nhau bằng khoảng trắng ngang rộng rãi. Tùy chọn CASE STUDY pill bên dưới một logo. Không border, không background — logo nổi trên nền trắng."

    hero_section:
      vai_trò: "First-viewport editorial headline area"

      info: "Canvas trắng, nội dung căn giữa trong 1200px. Headline 77–94px Egyptienne F, weight 400, -0.030em tracking, Ink, line-height 0.9–1.0, tối đa 3 dòng. Sub-paragraph 15–18px Diatype 400, Stone. Dark filled BOOK A DEMO button bên cạnh hoặc bên dưới sub-paragraph. Khoảng không gian dọc rộng rãi — khoảng 80–120px top padding."

    footer_logo_mark:
      vai_trò: "Wordmark và cluster icon dùng trong nav"

      info: "Icon cluster ba chấm (tượng trưng cho chòm sao hoặc ba node) đi kèm với 'Adaptive' bằng Diatype 500 Ink, theo sau là 'ML' superscript nâng lên bằng 11px Diatype Mono, 0.090em tracking. Ink trên nền trắng."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Egyptienne F (hoặc Source Serif Pro thay thế) ở 77–94px, weight 400, line-height 0.9, -0.030em tracking cho tất cả hero và section headlines. Không đặt serif trên 100px hoặc dưới 18px."
      - "Dùng 13px Diatype Mono uppercase với 0.090em tracking cho mọi nav item, button label, và step label. Pattern mono+tracking rộng này là chữ ký typography của hệ thống."
      - "Đổ đầy tất cả primary action buttons bằng #272421 Ink, text trắng, radius 9px, padding 10px 24px. Không thêm màu sắc cho button."
      - "Dùng border-radius 9px trên mọi card, button, badge, và input. Chỉ dùng radius 9999px cho stadium-shaped tab pills và case study tags."
      - "Chỉ áp dụng một shadow pattern duy nhất — 0px 4px 12px rgba(39,36,33,0.1) — cho elevated feature cards. Không chồng hoặc thay đổi shadow ở bất kỳ đâu khác."
      - "Dùng #edebe8 (Paper Warm) làm bề mặt card/panel và #ffffff làm canvas. Dùng #e3e3e2 (Paper Cool) chỉ cho inset wells và recessed containers."
      - "Để abstract gradient artwork mang toàn bộ nội dung màu sắc trên use case cards. Không thêm điểm nhấn màu vào buttons, borders, icons, hay text — hệ thống là monochrome theo thiết kế."

    không_nên_làm:
      - "Không thêm brand color, accent, hay CTA fill màu sắc. Hệ thống không có màu CTA riêng biệt; hành động chính là dark neutral fill, và sự kiềm chế đó chính là bản sắc."
      - "Không dùng serif typeface cho body copy, button labels, hay UI chrome. Chỉ dành Egyptienne F cho editorial display."
      - "Không dùng full black (#000000) ở bất kỳ đâu — dùng #272421 Ink. Sắc ấm là có chủ đích."
      - "Không dùng bold (700) weight trên body text hay headlines. Chỉ dành 700 cho rare emphasis; 400 và 500 là chủ đạo."
      - "Không dùng shadow lớn hơn single 12px drop shadow 10% opacity, và không bao giờ dùng shadow trên buttons, inputs, hay modals."
      - "Không dùng tracking rộng hơn 0.090em hoặc chặt hơn -0.030em. Letter-spacing có giới hạn và có chủ đích."
      - "Không đặt text bên trong gradient artwork trên use case cards. Labels luôn nằm ở góc dưới bên trái với padding inset 16–24px trên overlay trắng sạch hoặc trực tiếp trên cạnh tối của ảnh."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Canvas | `#ffffff` | Page background, base layer cho tất cả content sections |"
    info: "| 2 | Soft Surface | `#edebe8` | Card backgrounds, feature panels, secondary buttons, soft section bands |"
    info: "| 3 | Cool Surface | `#e3e3e2` | Inset wells, table headers, containers hơi lõm |"
    info: "| 4 | Inverse Surface | `#272421` | Filled buttons, dark badges, rare inverted sections — token bề mặt tối duy nhất |"

  elevation:

    - "**Elevated card (use case card, platform feature card):** `0px 4px 12px 0px rgba(39, 36, 33, 0.1)`"

  imagery:

    info: "Imagery là màu sắc duy nhất trong hệ thống và nó tập trung ở một nơi: các use case cards. Đây là những composition gradient trừu tượng, full-bleed, độ bão hòa cao — những vòng xoáy hữu cơ của các màu bổ túc và split-complementary (violet→cam, teal→đỏ, chàm→hổ phách) với lớp texture grain mềm phủ lên. Chúng gợi cảm giác như pigment hòa trộn trên giấy ướt hoặc color fields sơn dầu trên canvas, không phải ảnh stock doanh nghiệp. Cách xử lý là bo tròn (9px radius trên card), không bao giờ được mask, không bao giờ overlay text bên trong vùng màu. White labels nằm ở góc dưới bên trái của mỗi gradient. Bên ngoài các card này, site không sử dụng photography, không có người, không có product screenshots — gradient art CHÍNH LÀ brand expression. Icons bên trong platform feature cards là geometric line+fill constructions đơn giản (hexagons, circles, connecting dots) bằng Ink trên bề mặt card ấm."

  layout:

    info: "Container max-width 1200px căn giữa với gutters 24px. Hero là một khối text căn giữa rộng rãi theo chiều dọc (không split image, không video) với một dark filled button duy nhất. Bên dưới hero, use case grid là một card wall dạng masonry 3 cột nơi gradient images cung cấp toàn bộ năng lượng thị giác. Một customer logo strip ngang với khoảng trắng rộng rãi ngắt trang. Platform section chuyển sang layout card 2 cột với cặp icon+text, centered serif section heading phía trên. Nav là một thanh ngang đơn giản với logo trái, uppercase mono links giữa, dark filled contact button phải — không có sticky behavior nhìn thấy, không sidebar, không mega-menu. Chuyển tiếp section là seamless white-to-white; chiều sâu đến từ bề mặt card Paper Warm ấm áp và shadow 12px hiếm hoi. Trang chủ yếu là text-dominant ở mọi nơi ngoại trừ use case grid, nơi hoàn toàn image-dominant."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #272421 (Ink)"
    - "background: #ffffff (Canvas)"
    - "card surface: #edebe8 (Paper Warm)"
    - "border / hairline: #edebe8 hoặc #272421"
    - "muted text / metadata: #7d7c7a (Stone)"
    - "primary action: không có màu CTA riêng biệt"

  3_5_example_component_prompts:

    - "**Hero section**: Canvas trắng. Headline căn giữa 94px Egyptienne F weight 400, màu #272421, letter-spacing -2.82px, line-height 0.9. Tối đa 3 dòng. Sub-paragraph bên dưới 15px Diatype 400, màu #7d7c7a. Filled dark button bên cạnh sub-paragraph: background #272421, text #ffffff, 13px Diatype Mono uppercase, 0.090em tracking, radius 9px, padding 10px 24px, tùy chọn icon mũi tên trailing."

    - "**Use case card grid (3 columns)**: Mỗi card radius 9px, ảnh gradient abstract full-bleed (vòng xoáy hữu cơ, độ bão hòa cao, tỷ lệ 200×140). White label overlay ở góc dưới bên trái, inset 16px, 15px Diatype 500. Card gap 12px. Không border, không shadow trên chính các card."

    - "**Platform feature card**: Background #edebe8, radius 9px, padding 24px, shadow 0px 4px 12px rgba(39,36,33,0.1). Layout nội bộ hai cột: cột trái chứa geometric icon 160×160 bằng Ink; cột phải chứa step label 11px Diatype Mono uppercase màu #7d7c7a, heading Egyptienne F 24–32px màu #272421, và paragraph 15px Diatype 400 màu #272421."

    - "**Workflow tab pill row**: Hình stadium (radius 9999px). Tab active: background #272421, text #ffffff. Tab inactive: background trong suốt, border 1px #272421, text #272421. Tất cả labels 13px Diatype Mono uppercase, 0.090em tracking, padding 10px 20px. Hàng ngang với gap 4–8px giữa các pills."

    - "**Customer logo strip**: Một hàng duy nhất, căn giữa trong max-width 1200px. Logos hiển thị dưới dạng grayscale #7d7c7a, mỗi logo rộng khoảng 100–140px, cách nhau bằng khoảng trắng 80–120px. Tùy chọn Case Study pill (background #edebe8, text #272421, radius 9999px, 11px Diatype Mono uppercase, 0.090em tracking) bên dưới một logo được chọn."

  type_pairing_logic:

    info: "Hệ thống cố tình kết hợp hai giọng nói typography rất khác nhau. Egyptienne F nói bằng các paragraph editorial — chậm rãi, cổ điển, độ tương phản cao — và chỉ được dùng ở kích thước display cho headlines. Diatype nói bằng UI — nhỏ gọn, trung tính, line-height 1.3–1.4 — và đảm nhận mọi thứ chức năng. Diatype Mono là mô liên kết: 13px mono uppercase với 0.090em tracking gắn nhãn mọi section, nav, và button, tạo ra một nhịp điệu typography đồng nhất bên dưới các editorial headlines. Sự tương phản giữa serif headline 94px và mono label 11px là nhịp điệu đặc trưng của hệ thống — không bao giờ làm phẳng nó bằng cách thay serif bằng sans-serif hoặc loại bỏ mono labels."

  color_discipline:

    info: "Hệ thống chứa chính xác không token màu sắc nào. Tất cả màu sắc trong giao diện đều đạt được thông qua warm neutrals: Ink, Paper Warm, Paper Cool, Mist, Stone, Charcoal, White. Các pixel màu sắc duy nhất trên site là các abstract gradient artworks trên use case cards, và đó là content, không phải UI. Bất kỳ nỗ lực nào thêm brand accent color, colored badge, green success state, hay red error state đều phá vỡ bản sắc. Nếu thực sự cần status indicator, dùng Stone (muted) cho neutral, và dựa vào iconography (check, x, dot) thay vì màu sắc."

  similar_brands:

    - "**Replicate** — Cùng vỏ UI warm-monochrome với abstract gradient artwork độ bão hòa cao là nguồn màu sắc duy nhất trên content cards"
    - "**Mistral AI** — Bảng màu editorial monochrome với serif headlines cổ điển và hero sections căn giữa rộng rãi"
    - "**Linear** — Giao diện grayscale ấm áp kiềm chế với hệ thống phân cấp typography tự tin và corner radii 8–10px xuyên suốt"
    - "**Hugging Face** — Light theme mật độ thoải mái với một kiểu dark filled button duy nhất và không có hệ thống accent màu sắc"
    - "**Anysphere (Cursor)** — Thẩm mỹ dev-tool monochrome với editorial display type và uppercase tracked mono labels cho navigation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #272421;
          --color-paper-warm: #edebe8;
          --color-paper-cool: #e3e3e2;
          --color-mist: #eeeeed;
          --color-stone: #7d7c7a;
          --color-charcoal: #333333;
          --color-white: #ffffff;
        
          /* Typography — Font Families */
          --font-egyptienne-f-lt: 'Egyptienne F LT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diatype-mono: 'Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: 0.33px;
          --text-body: 15px;
          --leading-body: 1.43;
          --tracking-body: 0.27px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.32px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.43px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.44px;
          --text-display: 77px;
          --leading-display: 1;
          --tracking-display: -2.16px;
          --text-display-xl: 94px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -2.82px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --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-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-76: 76px;
          --spacing-80: 80px;
          --spacing-84: 84px;
          --spacing-88: 88px;
          --spacing-136: 136px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8.96px;
          --radius-2xl: 20px;
          --radius-full: 1600px;
        
          /* Named Radii */
          --radius-cards: 9px;
          --radius-pills: 9999px;
          --radius-badges: 9px;
          --radius-inputs: 9px;
          --radius-buttons: 9px;
        
          /* Shadows */
          --shadow-md: rgba(39, 36, 33, 0.1) 0px 4px 12px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-soft-surface: #edebe8;
          --surface-cool-surface: #e3e3e2;
          --surface-inverse-surface: #272421;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #272421;
          --color-paper-warm: #edebe8;
          --color-paper-cool: #e3e3e2;
          --color-mist: #eeeeed;
          --color-stone: #7d7c7a;
          --color-charcoal: #333333;
          --color-white: #ffffff;
        
          /* Typography */
          --font-egyptienne-f-lt: 'Egyptienne F LT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diatype: 'Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-diatype-mono: 'Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --tracking-caption: 0.33px;
          --text-body: 15px;
          --leading-body: 1.43;
          --tracking-body: 0.27px;
          --text-subheading: 18px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.32px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: 0.43px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.96px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.44px;
          --text-display: 77px;
          --leading-display: 1;
          --tracking-display: -2.16px;
          --text-display-xl: 94px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -2.82px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-76: 76px;
          --spacing-80: 80px;
          --spacing-84: 84px;
          --spacing-88: 88px;
          --spacing-136: 136px;
        
          /* Border Radius */
          --radius-lg: 8.96px;
          --radius-2xl: 20px;
          --radius-full: 1600px;
        
          /* Shadows */
          --shadow-md: rgba(39, 36, 33, 0.1) 0px 4px 12px 0px;
        }