arte___style_reference:
  info: "> Golden hour harvest editorial — một tấm canvas màu kem nơi ảnh rừng ngập nắng hòa cùng display type bo tròn cỡ lớn, logo xanh chanh điện, và chữ đồng ấm áp mang cảm giác như được in chứ không phải render."

  theme: "light"

  info: "arte* là một harvest editorial tràn ngập ánh nắng: canvas kem ấm (#e5dccd) làm nền cho những display headline cỡ lớn bằng font Parafina — một sans-serif bo tròn mềm mại, hơi retro ở kích thước cực lớn (70–173px) với line-height dồn nén gần 0.8–0.9 — trong khi Poppins đảm nhận toàn bộ secondary copy ở line-height 1.4 chặt chẽ. Bảng màu mang phong cách vườn-nông trại: harvest copper nâu đồng cháy (#ab5700) cho primary text, chartreuse xanh chanh gây sốc (#e8e359) cho logo và hero overlays, và periwinkle xanh hoa chuông (#7997ff) đóng vai trò đối trọng mát mẻ cho các inline highlights. Hình ảnh là nửa còn lại của hệ thống — ảnh golden-hour full-bleed về rừng, đồ ăn và khuôn mặt, được xếp lớp với display type thay vì tách rời. Các component ít và mềm mại: pill buttons với radius 31px, card radii 20px, viền mảnh, gần như không có shadow. Ấn tượng tổng thể là một cuốn sách nấu ăn in ấn hoặc poster chợ nông sản được số hóa — display type tự tin, tông màu đất với một điểm nhấn vàng điện, và bản thân tên thương hiệu kết thúc bằng dấu hoa thị (*) báo hiệu sự tinh nghịch editorial."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Wheat Cream | `#e5dccd` | `--color-wheat-cream` | Canvas trang, bề mặt card, nền section — tông trắng kem ấm giữ mọi màn hình |"
    info: "| Harvest Copper | `#ab5700` | `--color-harvest-copper` | Primary text, body copy, list borders, card borders, decorative strokes — màu mực mặc định trên toàn bộ nội dung editorial |"
    info: "| Citron Beam | `#e8e359` | `--color-citron-beam` | Màu logotype, hero text overlays, accent borders, icon highlights — xanh chanh điện giúp thương hiệu nổi bật trên nền xanh rừng và kem |"
    info: "| Morning Glory | `#7997ff` | `--color-morning-glory` | Inline text highlights, links, secondary icon accents, input focus — periwinkle mát mẻ làm dịu bảng màu ấm khi xuất hiện trong body copy |"
    info: "| Amber Glow | `#d99623` | `--color-amber-glow` | List borders, secondary heading accents, decorative strokes ấm |"
    info: "| Forest Floor | `#214534` | `--color-forest-floor` | Button borders, body text trên light accents, decorative strokes đậm — xanh đậm làm nền tảng cho các khoảnh khắc tương phản |"
    info: "| Deep Moss | `#103d26` | `--color-deep-moss` | Accent tối nhất, background fills cho các khối tương phản, depth shadows |"
    info: "| Olive Branch | `#568037` | `--color-olive-branch` | List borders, tag accents, decorative strokes hữu cơ |"
    info: "| Slate Bloom | `#3d549c` | `--color-slate-bloom` | Heading borders, decorative strokes muted, secondary tông lạnh |"
    info: "| Coral Petal | `#e99686` | `--color-coral-petal` | Soft fill washes, list surface tints, secondary backgrounds ấm |"

  tokens___typography:

    poppins___body_text__ui_labels__navigation__buttons__list_items__footer_copy__input_fields___một_geometric_sans_trung_tính__lặng_lẽ_và_chức_năng_ở_kích_thước_12_16px__line_height_1_4_với_weight_400_500_giúp_body_copy_thoáng_nhẹ__dễ_đọc_mà_không_cạnh_tranh_với_display_headlines_____font_poppins:
      - "**Thay thế:** Inter, DM Sans, hoặc Manrope ở weight 400/500"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12px, 13px, 16px"
      - "**Line height:** 1.40"
      - "**Vai trò:** Body text, UI labels, navigation, buttons, list items, footer copy, input fields — một geometric sans trung tính, lặng lẽ và chức năng ở kích thước 12–16px. Line-height 1.4 với weight 400/500 giúp body copy thoáng nhẹ, dễ đọc mà không cạnh tranh với display headlines."

    parafina___display_và_headings___một_custom_rounded_retro_display_sans_được_dùng_ở_kích_thước_cực_lớn_lên_đến_173px_với_line_height_dồn_nén_0_80_0_90__cách_xử_lý_single_weight_500_ở_tỷ_lệ_quá_khổ_là_điểm_đặc_trưng__kiểu_chữ_mang_cảm_giác_vui_tươi__ấm_áp__và_giống_poster_in_ấn_hơn_là_corporate__xuất_hiện_ở_hero__section_headlines__và_chính_logotype_____font_parafina:
      - "**Thay thế:** Bricolage Grotesque, Cabinet Grotesk, hoặc Familjen Grotesk ở weight 500 với optical sizing"
      - "**Weights:** 500"
      - "**Sizes:** 20px, 30px, 56px, 70px, 104px, 173px"
      - "**Line height:** 0.80, 0.90, 1.00"
      - "**Vai trò:** Display và headings — một custom rounded retro display sans được dùng ở kích thước cực lớn (lên đến 173px) với line-height dồn nén (0.80–0.90). Cách xử lý single-weight 500 ở tỷ lệ quá khổ là điểm đặc trưng: kiểu chữ mang cảm giác vui tươi, ấm áp, và giống poster in ấn hơn là corporate. Xuất hiện ở hero, section headlines, và chính logotype."

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

    exposuretrial___exposuretrial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_exposuretrial:
      - "**Weights:** 500"
      - "**Sizes:** 56px"
      - "**Line height:** 0.9"
      - "**Vai trò:** ExposureTrial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    gtstandard_m___gtstandard_m___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_gtstandard_m:
      - "**Weights:** 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1.5"
      - "**Vai trò:** GTStandard-M — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    itc_avant_garde_gothic_medium___itc_avant_garde_gothic_medium___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_itcavantgardegothicmedium:
      - "**Weights:** 400"
      - "**Sizes:** 26px"
      - "**Line height:** 1.2"
      - "**Vai trò:** ITC_Avant_Garde_Gothic_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.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.4 | — | `--text-body` |"
      info: "| subheading | 20px | 1 | — | `--text-subheading` |"
      info: "| heading-sm | 30px | 0.9 | — | `--text-heading-sm` |"
      info: "| heading | 56px | 0.9 | — | `--text-heading` |"
      info: "| heading-lg | 70px | 0.85 | — | `--text-heading-lg` |"
      info: "| display | 104px | 0.85 | — | `--text-display` |"
      info: "| display-xl | 173px | 0.8 | — | `--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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| other | 64px |"
      info: "| buttons | 31px |"

    layout:

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

  components:

    ghost_menu_button:
      vai_trò: "Navigation trigger trong hero overlay"

      info: "Nền trong suốt, viền 1px Citron Beam (#e8e359), chữ Citron Beam bằng Poppins 12–13px weight 500 uppercase, border-radius 31px (dạng pill), padding 6px dọc / 24px ngang. Nổi trên ảnh hero mà không có nền — chỉ có chữ và viền định nghĩa nó."

    hero_display_headline:
      vai_trò: "Tuyên bố thương hiệu màn hình đầu tiên, phủ lên ảnh"

      info: "Parafina ở 104–173px weight 500, line-height 0.80–0.85, màu Citron Beam (#e8e359). Nằm trực tiếp trên ảnh thiên nhiên full-bleed, không có nền chữ hay gradient — chỉ riêng màu sắc tạo độ tương phản với tông xanh. Bản thân logotype 'arte*' cũng được xử lý theo cách này ở cùng tỷ lệ."

    editorial_subheadline:
      vai_trò: "Secondary hero text — 'tagline' bên dưới display"

      info: "Parafina ở 20–30px weight 500, line-height 0.90–1.00, màu Citron Beam. Căn giữa, nằm cách display headline 24–40px. Sử dụng cùng display font ở tỷ lệ nhỏ hơn thay vì chuyển sang Poppins — giữ cho hero hoàn toàn trong giọng display."

    section_display_headline:
      vai_trò: "Headline editorial cỡ lớn trên các section màu kem"

      info: "Parafina ở 56–70px weight 500, line-height 0.85–0.90, màu Morning Glory (#7997ff) hoặc Harvest Copper (#ab5700). Căn giữa hoặc căn trái trên nền Wheat Cream, với margin trên/dưới rộng 80–120px để tạo khoảng thở editorial. Đây là nơi periwinkle xanh xuất hiện trong hệ thống chữ."

    body_paragraph_block:
      vai_trò: "Copy editorial dạng dài trong các feature sections"

      info: "Poppins 16px weight 400, line-height 1.40, Harvest Copper (#ab5700) là màu chữ mặc định. Độ dài dòng tối đa khoảng 60–70 ký tự. Inline emphasis dùng màu Morning Glory (#7997ff) để làm nổi bật các cụm từ như 'environment front-of-mind' mà không thay đổi weight hay style."

    image_text_editorial_block:
      vai_trò: "Ảnh lifestyle full-width với chữ bên dưới"

      info: "Ảnh full-bleed hoặc max-width (bo tròn hoặc góc vuông, tỷ lệ rộng rãi) theo sau là một body paragraph bên dưới với gap 40px. Ảnh được xử lý như minh họa editorial — người, đồ ăn, thiên nhiên — thay vì ảnh sản phẩm. Khối chữ căn trái, max-width ~600px."

    text_link_cta:
      vai_trò: "Điều hướng đến thêm nội dung (ví dụ: 'MORE ON US')"

      info: "Poppins 12–13px weight 500 uppercase, màu Harvest Copper hoặc Morning Glory, pill border border-radius 31px, padding 6px dọc / 24px ngang, viền 1px. Không có fill — pill chỉ là outline. Thường có một dấu chấm hoặc icon mũi tên nhỏ cùng màu phía trước."

    card:
      vai_trò: "Content cards trên nền kem"

      info: "Border-radius 20px, viền 1px Harvest Copper (#ab5700), padding 24px, fill Wheat Cream (#e5dccd) (giống canvas — viền định nghĩa card). Không shadow. Được dùng có chọn lọc — hầu hết nội dung chảy dưới dạng các khối editorial thay vì card grids."

    pill_button:
      vai_trò: "Interactive controls xuyên suốt"

      info: "Border-radius 31px (gần như full pill), padding 6px dọc / 24px ngang, Poppins 12–13px weight 500 uppercase. Có sẵn ở dạng ghost (nền trong suốt, viền + chữ màu Citron Beam hoặc Harvest Copper) hoặc filled (fill Citron Beam #e8e359 với chữ tối). Radius 31px — không phải full 9999px pill — là điểm đặc biệt; nó tạo hình dạng mềm mại, thân thiện mà không trở thành stadium hoàn toàn."

    scroll_indicator:
      vai_trò: "Gợi ý nhẹ nhàng bên dưới hero để cuộn"

      info: "Chữ monospace hoặc Poppins nhỏ '[scroll down]' màu Citron Beam, căn giữa, đặt ở mép dưới của hero. Tối giản, 12px, không ngụ ý animation — chỉ là signage kiểu chữ lặng lẽ."

    inline_color_highlight:
      vai_trò: "Các cụm từ được nhấn mạnh trong body copy"

      info: "Một kỹ thuật hơn là một component: chọn các cụm từ trong body text Harvest Copper chuyển sang màu Morning Glory (#7997ff) trong khi vẫn giữ nguyên Poppins 16px weight 400 — chỉ riêng sự thay đổi màu sắc đã thu hút mắt mà không cần in đậm, in nghiêng hay gạch chân. Đây là cách links và emphasis tích hợp tự nhiên vào văn xuôi editorial."

  do_s_and_don_ts:

    do:
      - "Dùng Parafina (hoặc Bricolage Grotesque thay thế) ở weight 500 cho tất cả display và heading text — không bao giờ lên trên 500 hoặc xuống dưới 500, cách xử lý single-weight là điểm đặc trưng"
      - "Áp dụng Citron Beam (#e8e359) làm màu chữ hero overlay trên ảnh thiên nhiên full-bleed — chartreuse trên nền xanh rừng là khoảnh khắc thị giác dễ nhận biết nhất của thương hiệu"
      - "Đặt display type ở line-height 0.80–0.90 — leading dồn nén là điều thiết yếu; không bao giờ để display headlines thở với line-height 1.2+"
      - "Dùng Morning Glory (#7997ff) cho inline text highlights trong body copy Harvest Copper — màu sắc là sự nhấn mạnh, không phải thay đổi weight hay style"
      - "Mặc định tất cả body và list text thành Harvest Copper (#ab5700) — đây là màu mực của thương hiệu, không phải đen hay xám"
      - "Áp dụng border-radius 31px cho tất cả interactive elements (buttons, links, menu triggers) — không phải 9999px, không phải 8px; 31px soft-pill là radius hệ thống"
      - "Đặt ảnh editorial full-bleed làm lớp bề mặt với display type phủ trực tiếp — không bao giờ đặt chữ trong hộp trên ảnh"

    don_t:
      - "Không dùng Arial, Helvetica, hoặc bất kỳ system font nào cho headings — Parafina ở kích thước cực lớn là bản sắc chính của thương hiệu"
      - "Không dùng đen (#000000) hoặc xám đậm cho body text — Harvest Copper (#ab5700) là mực mặc định"
      - "Không áp dụng drop shadows, blurs, hoặc elevation cho cards hoặc buttons — chiều sâu đến từ nhiếp ảnh và whitespace, không phải shadow"
      - "Không dùng card grids 12 cột chặt chẽ cho nội dung — các section editorial chảy dưới dạng các khối một cột với display type lớn"
      - "Không vượt quá weight 500 trong Parafina — không in đậm, không black weight; display luôn ở một weight duy nhất"
      - "Không dùng xanh lam hoặc xám cho nền trang — Wheat Cream (#e5dccd) là canvas duy nhất"
      - "Không thêm gradient overlays, vignette effects, hoặc text-background boxes trên ảnh hero — chữ Citron Beam nằm trực tiếp trên ảnh"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Wheat Cream Canvas | `#e5dccd` | Nền trang mặc định — trắng kem ấm đón nhận mọi nội dung editorial |"
    info: "| 1 | Photographic Full-Bleed | `#1a3a1a` | Hero và feature sections dùng ảnh full-bleed làm bề mặt; type phủ trực tiếp |"
    info: "| 2 | Card Surface | `#e5dccd` | Cards nằm trên cùng canvas kem, được phân biệt bởi radius 20px và viền mảnh Harvest Copper |"

  elevation:

    info: "Không shadow. Design system cố tình tránh drop shadows, blurs và elevation stacks. Chiều sâu được tạo ra qua ảnh full-bleed, whitespace rộng rãi, và viền mảnh 1px Harvest Copper. Các bề mặt phẳng — canvas kem là bề mặt duy nhất, và cards được định nghĩa bằng đường viền, không phải bằng cách nổi lên trên trang."

  imagery:

    info: "Ảnh lifestyle golden-hour full-bleed là trung tâm của nhận diện thị giác. Hình ảnh bao gồm: tán rừng ngập nắng với ánh sáng xuyên qua lá (hero), góc chụp từ trên cao và góc nghiêng của mọi người quây quần bên bàn ăn với đồ ăn đầy màu sắc, và chân dung tông ấm của các nhóm đa dạng. Ảnh có độ sáng cao, bão hòa ấm, và tự nhiên — không có ảnh sản phẩm studio, không có độ phẳng stock-photo. Ảnh được xử lý như bề mặt, không phải minh họa: chúng trải dài từ mép này sang mép kia với display type phủ trực tiếp, đôi khi ảnh chảy vào section tiếp theo. Không có icon system ngoài các dấu chấm và mũi tên nhỏ; không có minh họa, không có đồ họa trừu tượng, không có 3D renders. Chính nhiếp ảnh LÀ hệ thống thị giác cùng với display type."

  layout:

    info: "Hero full-bleed với display type căn giữa phủ lên, sau đó chuyển sang luồng editorial một cột căn giữa trên nền Wheat Cream. Các section được phân cách bằng khoảng trống dọc rộng 80–120px thay vì divider hoặc các dải nền xen kẽ. Bên dưới hero, nội dung theo mẫu ảnh-rồi-chữ hoặc chữ-rồi-ảnh: display headline lớn, khoảng thở rộng rãi, một bức ảnh full-width hoặc khổ lớn, sau đó là body paragraph căn trái bên dưới. Không có sidebar navigation, không có card grids, không có multi-column feature matrices. Navigation tối giản: một nút ghost 'MENU' duy nhất ở góc trên bên phải của hero. Nhịp điệu trang tổng thể là: ồn ào (ảnh full-bleed + type khổng lồ) → yên tĩnh (canvas kem + headline căn giữa) → ấm áp (ảnh + body text editorial) → yên tĩnh, lặp lại. Page max-width khoảng 1200px cho các khối text và image, mặc dù ảnh hero phá vỡ điều này để trải dài toàn bộ viewport."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #ab5700 (Harvest Copper)"
    - "background: #e5dccd (Wheat Cream)"
    - "border: #ab5700 (Harvest Copper, 1px hairline)"
    - "accent: #e8e359 (Citron Beam)"
    - "secondary accent: #7997ff (Morning Glory)"
    - "primary action: #e8e359 (filled action)"

    ví_dụ_component_prompts:
    - "**Hero Section**: Ảnh tán rừng full-bleed làm nền. Display type căn giữa phủ lên bằng Parafina (hoặc Bricolage Grotesque thay thế) weight 500, 120px, line-height 0.85, màu #e8e359, hiển thị 'arte*'. Bên dưới, gap 24px, sau đó subheadline ở 28px Parafina weight 500, line-height 1.0, cũng màu #e8e359. Góc trên bên phải: ghost 'MENU' pill button — nền trong suốt, viền 1px #e8e359, radius 31px, padding 6px 24px, chữ Poppins 13px weight 500 uppercase #e8e359."

    - "**Section Headline**: Căn giữa trên nền Wheat Cream (#e5dccd). Parafina 64px weight 500, line-height 0.90, màu #7997ff. Padding trên 80px, padding dưới 80px, max-width 800px căn giữa."

    - "**Editorial Image-Text Block**: Ảnh full-width (mọi người tại bàn, max-width 1200px, không border-radius hoặc 20px nếu được chứa). Gap 40px bên dưới. Body paragraph: Poppins 16px weight 400, line-height 1.40, màu #ab5700, max-width 620px, căn trái. Một cụm từ trong đoạn văn chuyển sang màu #7997ff để nhấn mạnh."

    - "**Ghost Pill Link Button**: Nền trong suốt, viền 1px Harvest Copper (#ab5700), border-radius 31px, padding 6px dọc / 24px ngang, chữ Poppins 13px weight 500 uppercase #ab5700. Phía trước có một dấu chấm 8px cùng màu."

    - "**Card on Cream Canvas**: Border-radius 20px, viền 1px #ab5700, padding 24px, fill #e5dccd. Body text Poppins 16px weight 400 #ab5700. Không shadow, không thay đổi fill — chỉ riêng viền định nghĩa cạnh card trên nền canvas cùng màu."

  similar_brands:

    - "**Oatly** — Cùng canvas kem ấm với display type vui tươi quá khổ và ảnh lifestyle full-bleed; cả hai đều dùng một màu accent đậm duy nhất trên nền tông đất và dựa vào typography poster editorial thay vì UI chrome"
    - "**Yolélé** — Ảnh thiên nhiên và đồ ăn full-bleed với display headline lớn căn giữa phủ lên, bảng màu tông đất ấm, và nút ghost-pill navigation tối giản"
    - "**Sweetgreen** — Ngôn ngữ thương hiệu farm-to-table với bề mặt kem ấm, ảnh lifestyle làm yếu tố thị giác chính, và UI components tối giản — mặc dù arte* thiên về editorial hơn và ít dùng grid hơn"
    - "**Farmacy** — Bảng màu thương hiệu thực vật ấm với nền kem, display type bo tròn hữu cơ, và một màu accent sáng duy nhất (chartreuse trong arte*, xanh lá trong Farmacy) được dùng trên nền ảnh thiên nhiên"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-wheat-cream: #e5dccd;
          --color-harvest-copper: #ab5700;
          --color-citron-beam: #e8e359;
          --color-morning-glory: #7997ff;
          --color-amber-glow: #d99623;
          --color-forest-floor: #214534;
          --color-deep-moss: #103d26;
          --color-olive-branch: #568037;
          --color-slate-bloom: #3d549c;
          --color-coral-petal: #e99686;
        
          /* Typography — Font Families */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-parafina: 'Parafina', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-exposuretrial: 'ExposureTrial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itcavantgardegothicmedium: 'ITC_Avant_Garde_Gothic_Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1;
          --text-heading-sm: 30px;
          --leading-heading-sm: 0.9;
          --text-heading: 56px;
          --leading-heading: 0.9;
          --text-heading-lg: 70px;
          --leading-heading-lg: 0.85;
          --text-display: 104px;
          --leading-display: 0.85;
          --text-display-xl: 173px;
          --leading-display-xl: 0.8;
        
          /* 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-24: 24px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-2xl: 20px;
          --radius-3xl: 31px;
          --radius-full: 64px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-other: 64px;
          --radius-buttons: 31px;
        
          /* Surfaces */
          --surface-wheat-cream-canvas: #e5dccd;
          --surface-photographic-full-bleed: #1a3a1a;
          --surface-card-surface: #e5dccd;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-wheat-cream: #e5dccd;
          --color-harvest-copper: #ab5700;
          --color-citron-beam: #e8e359;
          --color-morning-glory: #7997ff;
          --color-amber-glow: #d99623;
          --color-forest-floor: #214534;
          --color-deep-moss: #103d26;
          --color-olive-branch: #568037;
          --color-slate-bloom: #3d549c;
          --color-coral-petal: #e99686;
        
          /* Typography */
          --font-poppins: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-parafina: 'Parafina', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-exposuretrial: 'ExposureTrial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itcavantgardegothicmedium: 'ITC_Avant_Garde_Gothic_Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.4;
          --text-subheading: 20px;
          --leading-subheading: 1;
          --text-heading-sm: 30px;
          --leading-heading-sm: 0.9;
          --text-heading: 56px;
          --leading-heading: 0.9;
          --text-heading-lg: 70px;
          --leading-heading-lg: 0.85;
          --text-display: 104px;
          --leading-display: 0.85;
          --text-display-xl: 173px;
          --leading-display-xl: 0.8;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-2xl: 20px;
          --radius-3xl: 31px;
          --radius-full: 64px;
        }