woven___style_reference:
  info: "> Mực đen trên giấy da kem. Một editorial spread của nhà chưng cất, nơi nền cream ấm, một màu mực đen duy nhất và chữ in hoa giãn rộng tạo nên toàn bộ cấu trúc thị giác; ảnh sản phẩm mang lại mọi sắc màu."

  theme: "light"

  info: "Woven là một nhãn hiệu whisky mang phong cách editorial, gợi cảm giác giấy da trên máy in: nền cream ấm, một màu mực đen duy nhất cho mọi dòng chữ và đường viền mảnh (hairline border), cùng tracking rộng rãi giúp chữ thở như masthead của tạp chí xa xỉ. Toàn bộ giao diện là đơn sắc — không có điểm nhấn màu sắc — nên ảnh sản phẩm (chai hổ phách, nắp giấy bạc, chất lỏng) trở thành màu sắc duy nhất mắt người dùng thấy. Layout rộng rãi và căn giữa, với micro-copy điều hướng viết hoa xếp thành cột hẹp và tiêu đề phần được đặt cách xa nội dung bên dưới. Các component phẳng và tĩnh lặng: thẻ sản phẩm trắng với đường viền mảnh, text link có gạch chân, ghost controls, không có đổ bóng hay gradient — bề mặt cream chính là độ cao duy nhất."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#eeede5` | `--color-parchment-cream` | Canvas trang, bề mặt footer, và nền chủ đạo — màu trắng ngà ấm tạo cảm giác editorial, giống giấy cho toàn bộ site |"
    info: "| Ink Black | `#232323` | `--color-ink-black` | Văn bản chính, mọi đường viền mảnh, mực footer, và màu gần đen tạo nên mọi đường nét cấu trúc trên trang |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt thẻ sản phẩm, nền section xen kẽ, và văn bản tương phản cao trên nền tối hoặc ảnh |"
    info: "| Iron Gray | `#4a4a4a` | `--color-iron-gray` | Body text phụ, đường viền nhẹ, và lớp văn bản trung tính nằm giữa mực chính và nền |"
    info: "| Soft Stone | `#ddddda` | `--color-soft-stone` | Phân biệt bề mặt tinh tế bên dưới thẻ và panel phụ — ấm hơn canvas cream một chút |"

  tokens___typography:

    spezia_semi_mono___typeface_chủ_lực_cho_body_copy__link_điều_hướng__text_trong_thẻ__mục_danh_sách_và_hầu_hết_ui_labels__cấu_trúc_semi_mono_mang_lại_chất_lượng_chính_xác__kiểu_sắp_chữ__củng_cố_bản_sắc_editorial__weight_700_được_dùng_tiết_chế_để_nhấn_mạnh_trong_các_khối_mono_spaced_____font_spezia_semi_mono:
      - "**Thay thế:** IBM Plex Mono hoặc JetBrains Mono"
      - "**Weights:** 400, 700"
      - "**Kích cỡ:** 12px, 14px, 15px, 16px, 18px, 20px"
      - "**Line height:** 1.20, 1.50, 1.63, 2.40"
      - "**Letter spacing:** 0.063em–0.167em"
      - "**OpenType features:** `\"ss01\" on, \"tnum\" on`"
      - "**Vai trò:** Typeface chủ lực cho body copy, link điều hướng, text trong thẻ, mục danh sách và hầu hết UI labels. Cấu trúc semi-mono mang lại chất lượng chính xác, kiểu sắp chữ, củng cố bản sắc editorial. Weight 700 được dùng tiết chế để nhấn mạnh trong các khối mono-spaced."

    spezia_medium___font_headline_và_display___font_tỷ_lệ_proportional_đồng_hành_cùng_semi_mono__dùng_cho_wordmark__woven__ở_hero_và_tiêu_đề_section__chỉ_một_weight_duy_nhất_giữ_cho_hệ_thống_type_có_kỷ_luật__sự_tương_phản_đến_từ_kích_cỡ_và_tracking__không_phải_weight_____font_spezia_medium:
      - "**Thay thế:** Söhne hoặc Inter Display"
      - "**Weights:** 400"
      - "**Kích cỡ:** 16px, 20px, 24px, 32px"
      - "**Line height:** 1.00, 1.13, 1.20, 1.23, 1.50, 1.63, 1.71, 2.40"
      - "**Vai trò:** Font headline và display — font tỷ lệ (proportional) đồng hành cùng Semi-Mono, dùng cho wordmark 'WOVEN' ở hero và tiêu đề section. Chỉ một weight duy nhất giữ cho hệ thống type có kỷ luật; sự tương phản đến từ kích cỡ và tracking, không phải weight."

    figtree___font_ui_tiện_ích_cỡ_nhỏ_cho_button__icon_label_và_tag_điều_hướng_chật_hẹp__bổ_sung_cho_hệ_thống_khi_một_humanist_sans_serif_cảm_thấy_ấm_áp_hơn_họ_mono_____font_figtree:
      - "**Thay thế:** Inter hoặc DM Sans"
      - "**Weights:** 400, 700"
      - "**Kích cỡ:** 12px, 14px"
      - "**Line height:** 1.63, 1.71"
      - "**Letter spacing:** 0.083em, 0.167em"
      - "**Vai trò:** Font UI tiện ích cỡ nhỏ cho button, icon label và tag điều hướng chật hẹp. Bổ sung cho hệ thống khi một humanist sans-serif cảm thấy ấm áp hơn họ mono."

    spezia_semi_mono_light___giọng_nhẹ_hơn_cho_input__helper_text_và_mô_tả_link___biến_thể_siêu_nhẹ_tạo_hierarchy_mà_không_cần_bold_____font_spezia_semi_mono_light:
      - "**Thay thế:** IBM Plex Mono Light hoặc Space Mono Regular"
      - "**Weights:** 400"
      - "**Kích cỡ:** 14px, 15px, 20px"
      - "**Line height:** 1.63, 1.71"
      - "**Vai trò:** Giọng nhẹ hơn cho input, helper text và mô tả link — biến thể siêu nhẹ tạo hierarchy mà không cần bold."

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.63 | 1px | `--text-caption` |"
      info: "| body-sm | 14px | 1.71 | 1.17px | `--text-body-sm` |"
      info: "| body-lg | 16px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.2 | 1.26px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.13 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1 | — | `--text-heading` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 70 | 70px | `--spacing-70` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 150 | 150px | `--spacing-150` |"
      info: "| 230 | 230px | `--spacing-230` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 120-160px"
      - "**Card padding:** 26px"
      - "**Element gap:** 20px"

  components:

    minimal_header_bar:
      vai_trò: "Điều hướng toàn site"

      header_ba_phần_tử: "icon hamburger (trái, stroke 2px), wordmark WW căn giữa bằng Spezia Medium 16px, và icon giỏ hàng nét mảnh (phải). Overlay trong suốt, dính (sticky) trên hero, chuyển sang nền #eeede5 khi cuộn. Không có background fill, không border — chỉ 40px khoảng trống dọc với các item căn chỉnh về hai mép."

    hero_overlay_wordmark:
      vai_trò: "Tuyên ngôn thương hiệu toàn viewport"

      info: "Từ 'WOVEN' được đặt cực lớn (ước tính 180–220px) bằng Spezia Medium, #ffffff ở độ mờ ~60% trên nền ảnh hero, căn giữa cả hai trục. Một hiệu ứng vignette/bóng tròn nhẹ xuất hiện phía sau chữ O. Không có CTA, không subhead — wordmark CHÍNH LÀ hero. Bên dưới viewport, một dải Parchment Cream (#eeede5) cao 80–100px với label 'EXPERIENCE WHISKY' căn giữa, viết hoa, cỡ 12px Figtree."

    split_footer_letterhead_bar:
      vai_trò: "Con dấu thương hiệu và điều hướng danh mục"

      info: "Con dấu chữ hình tròn (đường kính 160px) căn giữa trong một dải cream, chứa chữ viết hoa xếp chồng 'WOVEN / WHISKY MAKERS / THE WORLDWIDE'. Bên dưới, hai cột text link hẹp đẩy về mép trái và mép phải: 'WORLDWIDE / WHISKY / MAKERS' và 'BLENDING / BEYOND / BORDERS' — mỗi từ trên một dòng riêng, viết hoa 12px, gạch chân, tracking 0.167em."

    section_heading_block:
      vai_trò: "Nhãn subsection"

      info: "Label viết hoa một dòng bằng Spezia Semi-Mono, 14px, letter-spacing ~1.17px, căn giữa phía trên một section. Khoảng trống 40–60px bên dưới trước khi nội dung bắt đầu. Không có đường kẻ trang trí, không emoji, không subhead — chỉ label nổi trên khoảng trắng nền Parchment Cream."

    latest_releases_dual_card:
      vai_trò: "Trưng bày sản phẩm song song"

      info: "Hai thẻ sản phẩm lớn đặt cạnh nhau, mỗi thẻ ~45% chiều rộng trang với khoảng cách 20–26px. Nền trắng (#ffffff), viền mảnh 1px #232323, radius 0px. Ảnh sản phẩm phủ kín 75% phía trên của thẻ (edge-to-edge). Bên dưới: padding 20–26px với tên sản phẩm (Spezia Semi-Mono 14px viết hoa căn giữa) và giá (Figtree 12px bên dưới). Không đổ bóng, không bo góc."

    product_range_card:
      vai_trò: "Tile sản phẩm thương mại điện tử"

      info: "Biến thể thẻ lớn hơn cho section 'Discover Our Range'. Ảnh sản phẩm toàn chiều rộng (chai) căn giữa trong thẻ #ffffff với viền 1px #232323, radius 0px. Tên thẻ 'HOMEMADE' hoặc 'SUPERBLEND' bằng 14px viết hoa bên dưới ảnh, giá theo định dạng £ (14px) cách tên 10px. Hai thẻ trên một hàng, gap 8px. Ảnh phủ kín thẻ edge-to-edge, không có padding trong xung quanh ảnh."

    underlined_text_link:
      vai_trò: "Link điều hướng và danh mục"

      info: "Văn bản thuần bằng Spezia Semi-Mono, 12–14px, viết hoa, với gạch chân 1px #232323. Không đổi màu, không background — gạch chân là toàn bộ tín hiệu tương tác. Link thường được ngắt thành 2–3 dòng xếp chồng để tạo nhịp đọc dạng cột."

    ghost_icon_button:
      vai_trò: "Kích hoạt giỏ hàng và menu"

      info: "Icon button dạng line 24px trong header — hamburger (stroke 2px) và giỏ hàng. Stroke thuần #232323, không fill, không border-radius, không background. Độ dày nét của icon chính là thiết kế."

    circular_brand_seal:
      vai_trò: "Huy chương wordmark trang trí"

      info: "Hình tròn đường kính ~160px, viền 1px #232323, không fill. Chứa chữ đặt trên đường tròn và các dòng ngang xếp chồng 'WOVEN / WHISKY MAKERS / THE WORLDWIDE'. Xuất hiện căn giữa ở đầu các trang phụ. Thuần typographic — không minh họa, không trang trí."

    image_container:
      vai_trò: "Khung ảnh sản phẩm"

      info: "Ảnh chai thủy tinh màu hổ phách trên nền studio trung tính. Hiển thị edge-to-edge bên trong thẻ, không padding trong, không border-radius. Ảnh là nguồn màu sắc duy nhất trong hệ thống — ánh sáng trên chai càng ấm, trang càng có nhiều năng lượng thị giác."

  do_s_and_don_ts:

    do:
      - "Dùng Parchment Cream (#eeede5) làm canvas trang cho mọi section chính; chuyển sang Pure White (#ffffff) chỉ cho bề mặt thẻ sản phẩm và một hoặc hai dải tương phản"
      - "Đặt mọi body text và UI text bằng Spezia Semi-Mono, 14–15px, với letter-spacing 0.063–0.094em cho label viết hoa và 0.121–0.167em cho nav và tag text"
      - "Dùng hairline 1px #232323 cho mọi border — thẻ, khung ảnh sản phẩm, đường kẻ footer, gạch chân link — không bao giờ dùng màu nào khác cho border"
      - "Giữ corner radius ở 0px cho mọi card, button, tag, input và image; hệ thống dựa trên các cạnh sắc, không phải đường cong"
      - "Căn giữa tiêu đề section bằng Spezia Semi-Mono 14px viết hoa và để khoảng trống dọc 40–60px làm công việc phân cách thị giác"
      - "Dùng Spezia Medium ở 32px+ cho mọi display headline và wordmark; đây là mặt chữ tỷ lệ (non-mono) duy nhất trong hệ thống"
      - "Ngắt link nhiều từ thành các cột xếp chồng một từ một dòng để tạo nhịp cột editorial trong header và footer"
      - "Để ảnh sản phẩm cung cấp mọi màu sắc trong hệ thống; không bao giờ đưa vào điểm nhấn màu sắc, gradient hay màu thương hiệu"

    don_t:
      - "Không bao giờ thêm màu nhấn, gradient hay brand fill — hệ thống 0% màu sắc theo thiết kế"
      - "Không bao giờ bo góc trên card, button, input hay image — radius 0px là có chủ đích và định nghĩa phong cách in ấn editorial"
      - "Không bao giờ áp dụng box-shadow, drop-shadow hay hiệu ứng blur — các bề mặt phân cách qua màu sắc và hairline border"
      - "Không bao giờ dùng bold (700) cho đoạn body text; chỉ dành 700 cho các đoạn nhấn mạnh ngắn trong khối mono text"
      - "Không bao giờ đặt heading căn trái với body copy; tiêu đề section luôn căn giữa với khoảng trống dọc rộng rãi phía trên và dưới"
      - "Không bao giờ đưa vào hệ thống icon có fill, duotone hay màu sắc — icon chỉ là line work 1.5–2px #232323"
      - "Không bao giờ đặt text trực tiếp lên ảnh sản phẩm mà không có bề mặt cream hoặc trắng bên dưới; khả năng đọc yêu cầu một lớp nền đặc"
      - "Không bao giờ dùng kích cỡ display dưới 32px cho wordmark hoặc section opener; thang đo type có uy lực nhờ sự tiết chế ở cỡ nhỏ và hào phóng ở cỡ lớn"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#eeede5` | Nền trang chủ đạo, bề mặt footer, dải letterhead hero |"
    info: "| 1 | Pure White Card | `#ffffff` | Bề mặt thẻ sản phẩm, nền section xen kẽ, dải tương phản |"
    info: "| 2 | Soft Stone | `#ddddda` | Phân biệt panel tinh tế bên dưới các section nâng cao |"
    info: "| 3 | Ink Black | `#232323` | Bề mặt tối đảo ngược cho mực footer hoặc chế độ night-mode |"

  elevation:

    info: "Hệ thống thiết kế cố tình tránh mọi hiệu ứng đổ bóng, blur và glow. Hệ thống phân cấp bề mặt được truyền đạt hoàn toàn qua xếp lớp màu phẳng — Parchment Cream cho canvas, Pure White cho thẻ, và hairline 1px Ink Black cho ranh giới. Điều này tạo ra cảm giác in ấn-editorial, nơi chiều sâu đến từ thang đo typographic và khoảng trắng, không phải từ hiệu ứng độ cao."

  imagery:

    info: "Ngôn ngữ thị giác bị chi phối bởi ảnh sản phẩm chai whisky — thủy tinh màu hổ phách và xanh ô liu, nắp giấy bạc, nhãn giấy, chất lỏng bắt ánh sáng. Ảnh được đặt trên nền studio trung tính sạch sẽ (xám nhạt, trắng ngà) và hiển thị edge-to-edge bên trong thẻ sản phẩm góc vuông, không có padding trong hay border-radius. Không có ảnh phong cách sống, không có chủ thể con người, không có bối cảnh môi trường — chai CHÍNH LÀ hero. Đồ họa trang trí chỉ giới hạn ở con dấu chữ hình tròn. Ảnh là nguồn màu sắc duy nhất trong một hệ thống đơn sắc nghiêm ngặt, vì vậy ảnh chai càng ấm, trang đó càng có nhiều năng lượng thị giác."

  layout:

    info: "Layout được giới hạn trong max-width (căn giữa, ~1200–1280px) và chủ yếu là căn giữa/đối xứng thay vì bất đối xứng. Hero là nền ảnh full-bleed với wordmark cỡ lớn căn giữa phủ lên và một dải letterhead cream cao 80–100px bên dưới. Bên dưới fold, các section xếp chồng theo chiều dọc với khoảng trống dọc 120–160px giữa chúng, mỗi section được giới thiệu bằng một label viết hoa căn giữa duy nhất. Nội dung trong section có xu hướng đối xứng hai cột: cột text link chia đôi đẩy về mép xa, thẻ sản phẩm ghép đôi, hoặc con dấu tròn căn giữa. Card grid luôn là 2 cột trên desktop, với gutter rộng rãi 20–26px và border 1px. Điều hướng là một header bar tối giản duy nhất — hamburger, wordmark căn giữa, icon giỏ hàng — không có mega-menu, không sidebar, và không có hành vi sticky nào ngoài chuyển đổi tông màu. Nhịp điệu tổng thể giống như một spread tạp chí xa xỉ: khoảng trắng, chữ căn giữa, ảnh ghép đôi, không lộn xộn thị giác."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "Canvas: #eeede5 (Parchment Cream)"
    - "Bề mặt thẻ: #ffffff (Pure White)"
    - "Văn bản chính/border: #232323 (Ink Black)"
    - "Văn bản phụ: #4a4a4a (Iron Gray)"
    - "Bề mặt tinh tế: #ddddda (Soft Stone)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "*Hero section*: Ảnh full-bleed chai whisky hổ phách làm nền. Wordmark 'WOVEN' phủ lên, căn giữa, Spezia Medium, ~200px, #ffffff ở độ mờ 60%. Bên dưới viewport hero, một dải Parchment Cream (#eeede5) cao 90px với label 'EXPERIENCE WHISKY' căn giữa, Figtree 12px, letter-spacing 0.167em, #232323."

    - "*Product range card*: Thẻ trắng (#ffffff), radius 0px, viền mảnh 1px #232323, ~45% chiều rộng trang. Ảnh chai phủ kín 75% phía trên edge-to-edge, không padding. Bên dưới, card padding 26px chứa tên sản phẩm 'HOMEMADE' căn giữa, Spezia Semi-Mono 14px viết hoa, letter-spacing 0.094em, và giá '£45' cách 10px bên dưới, Figtree 14px, #232323. Không đổ bóng."

    - "*Split footer-letterhead bar*: Dải Parchment Cream (#eeede5), cao 160px. Con dấu tròn căn giữa (đường kính 160px, viền 1px #232323) chứa chữ viết hoa xếp chồng 'WOVEN / WHISKY MAKERS / THE WORLDWIDE'. Bên dưới ở mép dải: link ba dòng căn trái 'WORLDWIDE / WHISKY / MAKERS' và căn phải 'BLENDING / BEYOND / BORDERS', mỗi từ gạch chân bằng đường kẻ 1px #232323, 12px viết hoa, Spezia Semi-Mono."

    - "*Section heading with product grid*: Canvas Parchment Cream (#eeede5). Label viết hoa căn giữa 'DISCOVER OUR RANGE' Spezia Semi-Mono 14px, letter-spacing 1.17px, #232323, với khoảng trống 50px bên dưới. Hai thẻ sản phẩm cạnh nhau, gap 8px, radius 0px, viền 1px #232323, fill trắng, ảnh chai edge-to-edge phía trên tên + giá căn giữa."

    - "*Underlined stacked text link*: Cột hẹp căn trái, mỗi từ trên một dòng riêng: 'WORLDWIDE' / 'WHISKY' / 'MAKERS'. Spezia Semi-Mono 12px, viết hoa, #232323, letter-spacing 0.167em, gạch chân 1px #232323 bên dưới mỗi từ. Không đổi màu khi hover, không background — gạch chân là toàn bộ tín hiệu tương tác."

  similar_brands:

    - "**Aesop** — Cùng sự tiết chế editorial với hệ thống typographic cream-on-ink, không có điểm nhấn màu sắc, và ảnh sản phẩm là nguồn màu duy nhất"
    - "**Aēsop / Le Labo style apothecary sites** — Cùng nền cream ấm, hairline border 1px, góc vuông sắc nét 0px, và micro-copy viết hoa tracking rộng cho điều hướng"
    - "**Hendrick's Gin** — Cùng tông editorial đơn sắc với ảnh chai hổ phách là nguồn màu duy nhất và con dấu chữ tròn làm dấu ấn thương hiệu"
    - "**The Macallan** — Cùng ngôn ngữ editorial whisky xa xỉ: nền cream tiết chế, label section một dòng căn giữa, và thẻ sản phẩm với hairline border không trang trí"
    - "**Aram (design store)** — Cùng triết lý layout đơn sắc ấm trung tính với thẻ sản phẩm góc vuông, label viết hoa tracking rộng, và hệ thống phân cấp dựa trên khoảng trắng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #eeede5;
          --color-ink-black: #232323;
          --color-pure-white: #ffffff;
          --color-iron-gray: #4a4a4a;
          --color-soft-stone: #ddddda;
        
          /* Typography — Font Families */
          --font-spezia-semi-mono: 'Spezia Semi-Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-spezia-medium: 'Spezia Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spezia-semi-mono-light: 'Spezia Semi-Mono Light', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.63;
          --tracking-caption: 1px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.71;
          --tracking-body-sm: 1.17px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 1.26px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.13;
          --text-heading: 32px;
          --leading-heading: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-26: 26px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-120: 120px;
          --spacing-150: 150px;
          --spacing-230: 230px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 120-160px;
          --card-padding: 26px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #eeede5;
          --surface-pure-white-card: #ffffff;
          --surface-soft-stone: #ddddda;
          --surface-ink-black: #232323;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #eeede5;
          --color-ink-black: #232323;
          --color-pure-white: #ffffff;
          --color-iron-gray: #4a4a4a;
          --color-soft-stone: #ddddda;
        
          /* Typography */
          --font-spezia-semi-mono: 'Spezia Semi-Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-spezia-medium: 'Spezia Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-spezia-semi-mono-light: 'Spezia Semi-Mono Light', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.63;
          --tracking-caption: 1px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.71;
          --tracking-body-sm: 1.17px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 1.26px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.13;
          --text-heading: 32px;
          --leading-heading: 1;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-26: 26px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-120: 120px;
          --spacing-150: 150px;
          --spacing-230: 230px;
        }