sackville___co____style_reference:
  info: "> Cobalt zine ép trên nền kem — một editorial spread vẽ tay, nơi illustration là chính và UI chỉ là text được sắp chữ trên giấy ấm."

  theme: "light"

  info: "Sackville & Co. mang phong cách một risograph zine editorial ép trên giấy kem: một illustration cobalt xanh vẽ tay chiếm một nửa, nửa còn lại là canvas trắng kem với grotesque type dày đặc và một oval cỡ lớn viền xanh. Hệ thống được thiết kế theo mã in ấn — màu phẳng, không gradient, không shadow, không button có fill — và dùng bảng màu phụ bão hòa (peach, fire-red, marigold, terracotta) làm điểm nhấn tông màu trong artwork và border, không phải UI fill chức năng. Typography đảm nhận toàn bộ hệ thống phân cấp: Founders Grotesk weight 400 với line-height âm mạnh (0.80–0.90) ở display size tạo áp lực masthead như bìa tạp chí, trong khi TimesNow SemiLight mang lại sự tương phản serif editorial cho một số heading. Mọi thứ đều mang cảm giác sắp chữ thủ công: outline mảnh, khoảng trắng rộng rãi, không elevation, không card bo tròn — chỉ là mực in tự tin trên giấy ấm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Cream Paper | `#f3f4ee` | `--color-cream-paper` | Canvas trang, bề mặt card — nền trắng kem ấm áp khiến mọi màu mực trông như in |"
    info: "| Bone White | `#f8f8f8` | `--color-bone-white` | Lớp nền thay thế, phân biệt section nhẹ nhàng so với cream canvas |"
    info: "| Press Black | `#231f20` | `--color-press-black` | Text chính, border, divider, icon stroke — màu đen gần như mực in neo mọi màn hình |"
    info: "| Charcoal Headline | `#383435` | `--color-charcoal-headline` | Text heading hiển thị — hơi nhạt hơn press black để masthead mềm hơn |"
    info: "| Mid Gray | `#9a9a9a` | `--color-mid-gray` | Helper text mờ, border mảnh, metadata phụ |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Icon fill, border tương phản tối đa, nav accent |"
    info: "| Cobalt Ink | `#245dc5` | `--color-cobalt-ink` | Màu thương hiệu chính — illustration duotone wash, action border outline, interactive text — xanh bão hòa trên nền kem tạo dấu ấn risograph |"
    info: "| Peach Wash | `#ffc6a6` | `--color-peach-wash` | Accent illustration phụ, border trang trí, tonal fill ấm — màu hồng má của risograph layering |"
    info: "| Fire Red | `#f04736` | `--color-fire-red` | Action border outline, emphasis stroke, error-like accent — dùng như editorial red, không phải error state chức năng |"
    info: "| Vermillion | `#f52302` | `--color-vermillion` | Accent đỏ cam đậm cho border và fill — mực ấm nhất trong riso palette |"
    info: "| Crimson | `#d42121` | `--color-crimson` | Accent đỏ đậm — dùng tiết kiệm trong illustration wash và emphasis border |"
    info: "| Marigold | `#feee71` | `--color-marigold` | Yellow accent fill, spot-color highlight, decorative emphasis — plate riso thứ ba |"
    info: "| Terracotta | `#b45e42` | `--color-terracotta` | Accent nâu ấm cho body và heading border — mực earthy nhất trong editorial palette |"

  tokens___typography:

    foundersgrotesk___workhorse_type_cho_mọi_thứ_từ_body_đến_display___single_weight_400_không_có_biến_thể_bold__nghĩa_là_hệ_thống_phân_cấp_được_tạo_hoàn_toàn_qua_size__line_height_và_letter_spacing__không_phải_weight_contrast__line_height_âm_mạnh_0_80_ở_130px_tạo_áp_lực_masthead_như_bìa_tạp_chí__thay_thế__neue_haas_grotesk__inter__s_hne_____font_foundersgrotesk:
      - "**Weights:** 400"
      - "**Sizes:** 16px, 22px, 23px, 25px, 26px, 29px, 32px, 34px, 38px, 47px, 50px, 60px, 72px, 85px, 99px, 122px, 130px"
      - "**Line height:** 0.80–2.19 (tight ở display: 0.80–0.90 ở 72px+; standard 1.15–1.30 ở body size)"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Workhorse type cho mọi thứ từ body đến display — single weight 400 không có biến thể bold, nghĩa là hệ thống phân cấp được tạo hoàn toàn qua size, line-height và letter-spacing, không phải weight contrast. Line-height âm mạnh (0.80 ở 130px) tạo áp lực masthead như bìa tạp chí. Thay thế: Neue Haas Grotesk, Inter, Söhne."

    timesnow_semilight___editorial_serif_contrast_cho_một_số_heading_và_navigation___humanist_serif_phá_vỡ_sự_đơn_điệu_grotesque_ở_những_thời_điểm_then_chốt__tạo_hiệu_ứng_magazine_section_divider__thay_thế__times_now__tiempos__source_serif_____font_timesnow_semilight:
      - "**Weights:** 400 (SemiLight)"
      - "**Sizes:** 29px, 34px, 60px, 122px, 130px"
      - "**Line height:** 0.80–1.15"
      - "**OpenType features:** `\"liga\"`"
      - "**Vai trò:** Editorial serif contrast cho một số heading và navigation — humanist serif phá vỡ sự đơn điệu grotesque ở những thời điểm then chốt, tạo hiệu ứng magazine-section-divider. Thay thế: Times Now, Tiempos, Source Serif."

    sackville_script_hand_drawn_wordmark___chữ_cursive_vẽ_tay_tùy_chỉnh_chỉ_dùng_cho_brand_wordmark___overlay_lên_illustration_và_hero_composition__không_phải_ui_font__không_có_thay_thế__đây_là_dấu_ấn_đặc_trưng_____font_sackville_script_hand_drawn_wordmark:
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** tự nhiên"
      - "**Vai trò:** Chữ cursive vẽ tay tùy chỉnh chỉ dùng cho brand wordmark — overlay lên illustration và hero composition. Không phải UI font. Không có thay thế; đây là dấu ấn đặc trưng."

    type_scale:

      info: "| Vai trò | Size | Line Height | Letter Spacing | Token |"
      info: "|---------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.3 | — | `--text-caption` |"
      info: "| body | 22px | 1.3 | — | `--text-body` |"
      info: "| body-lg | 25px | 1.15 | — | `--text-body-lg` |"
      info: "| subheading | 29px | 1.15 | — | `--text-subheading` |"
      info: "| heading-sm | 34px | 1 | — | `--text-heading-sm` |"
      info: "| heading | 47px | 0.94 | — | `--text-heading` |"
      info: "| heading-lg | 72px | 0.85 | — | `--text-heading-lg` |"
      info: "| display | 99px | 0.85 | — | `--text-display` |"
      info: "| display-lg | 130px | 0.8 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 72 | 72px | `--spacing-72` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 0px (chỉ tag vuông) |"
      info: "| cards | 10px |"
      info: "| buttons | 50px |"
      info: "| ovalButtons | 81px |"

    layout:

      - "**Section gap:** 43px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    age_gate_oval_button_primary_action:
      vai_trò: "Interactive element đặc trưng — button oval outline thay thế CTA có fill thông thường"

      info: "Hình oval với border-radius 81px, outline bằng Cobalt Ink (#245dc5) stroke ~1.5–2px, fill trong suốt trên cream canvas. Text bên trong: FoundersGrotesk 400 ở ~38–47px, line-height 0.90–0.94, màu Cobalt Ink. Không hover fill, không shadow, không border-radius collapse — outline CHÍNH LÀ affordance. Padding khoảng 18px dọc, 60–80px ngang để tạo hình ellipse kéo dài. Đây là interactive element duy nhất trên age-gate và nó mang toàn bộ trọng lượng thị giác của trang."

    secondary_text_link_i_m_under_21:
      vai_trò: "Tùy chọn text-only dự phòng bên dưới oval button chính"

      info: "Không border, không background, không padding. FoundersGrotesk 400 ở ~38–47px, line-height 0.90–0.94, màu Cobalt Ink (#245dc5). Hệ thống phân cấp thị giác giữa oval outline và text trần tạo ra một lựa chọn ngầm: oval là hành động khẳng định, text là passive opt-out."

    age_verification_eyebrow:
      vai_trò: "Câu hỏi nhắc nhở phía trên age-gate button"

      info: "FoundersGrotesk 400 ở ~16–18px, viết hoa hoặc sentence case, màu Press Black (#231f20) hoặc Cobalt Ink (#245dc5). Không có điều chỉnh letter-spacing rõ ràng. Hoạt động như một label nhẹ nhàng — trọng lượng thị giác nằm ở các tùy chọn phản hồi bên dưới."

    hand_drawn_wordmark:
      vai_trò: "Dấu ấn thương hiệu overlay lên hero illustration"

      info: "Chữ cursive tùy chỉnh đọc là 'Sackville' — vẽ tay, cobalt blue (#245dc5), overlay ở 100% width trên đầu các panel illustration hero. Không được đặt bằng font; đây là một asset. Luôn nằm trên duotone illustration, không bao giờ trên bề mặt phẳng."

    duotone_illustration_panel:
      vai_trò: "Artwork editorial full-bleed chiếm ưu thế trong hero và section composition"

      info: "Illustration phong cách risograph hai màu dùng Cobalt Ink (#245dc5) làm plate chính và Cream Paper (#f3f4ee) làm khoảng trống âm. Độ sâu tông màu được tạo bằng mật độ hatching, không phải màu bổ sung. Tùy chọn Peach Wash (#ffc6a6) làm plate thứ ba. Không border, không góc bo tròn — illustration chảy đến mép panel. Tỷ lệ khung hình thay đổi theo composition nhưng luôn lấp đầy ít nhất 50% viewport trong hero context."

    section_divider_rule:
      vai_trò: "Dấu phân cách ngang giữa các section nội dung"

      info: "Đường 1px solid màu Press Black (#231f20), full-width, dùng tiết kiệm. Không trang trí, không dashed pattern, không double rule. Hệ thống tin tưởng vào khoảng trắng và type scale để tạo ngắt section; divider chỉ xuất hiện khi cần ngắt cấu trúc thực sự."

    product_card:
      vai_trò: "Item trong e-commerce hoặc collection grid"

      info: "Bề mặt phẳng trên cream canvas — không background fill, không border, không shadow. Corner radius 10px chỉ khi dùng ảnh có khung. Hình ảnh sản phẩm lấp đầy card; metadata bên dưới bằng FoundersGrotesk 400 ở 16–22px. Hệ thống card ưu tiên hình ảnh, không phải khung — ảnh hoặc illustration CHÍNH LÀ card, và type nằm bên dưới không có khung."

    editorial_headline_block:
      vai_trò: "Display heading phong cách tạp chí cho section title và hero copy"

      info: "FoundersGrotesk 400 ở 72–130px, line-height 0.80–0.85, màu Press Black (#231f20) hoặc Charcoal Headline (#383435). Không bold weight, không underline, không xử lý màu — size và negative leading làm tất cả. Tùy chọn TimesNow SemiLight để tương phản serif trên key section opener."

    riso_color_border_accent:
      vai_trò: "Border trang trí bằng màu secondary palette"

      info: "Border solid mảnh (1–2px) bằng Peach Wash (#ffc6a6), Fire Red (#f04736), Marigold (#feee71), hoặc Terracotta (#b45e42). Dùng để đóng khung chi tiết illustration, tạo editorial callout, hoặc thêm sự ấm áp tông màu cho cạnh card. Không bao giờ dùng làm border chức năng trên input hoặc form element."

    navigation_bar:
      vai_trò: "Navigation cấp trang chính"

      info: "Phẳng trên cream canvas, không background fill, không shadow. Nav item bằng FoundersGrotesk 400 ở ~16–22px, Press Black (#231f20). Active state được biểu thị bằng underline 1px hoặc chromatic accent color (Cobalt Ink). Logo bên trái dùng biến thể TimesNow SemiLight wordmark. Sticky behavior tùy chọn; hệ thống thoải mái với scroll-away nav."

  do_s_and_don_ts:

    do:
      - "Dùng Cobalt Ink (#245dc5) làm action border outline cho mọi interactive element chính — không bao giờ fill button với nó; outline là dấu ấn của thương hiệu"
      - "Đặt display type ở 72px+ với line-height 0.80–0.85 để tạo độ nén magazine-masthead xác định trọng lượng editorial của hệ thống"
      - "Để cream canvas (#f3f4ee) lộ ra — không che nó bằng bề mặt trắng hoặc dark mode tương đương; tông giấy ấm là nền tảng của thương hiệu"
      - "Dùng riso accent palette (Peach Wash, Fire Red, Marigold, Vermillion, Terracotta) chỉ trong illustration wash, border trang trí và spot-color emphasis — không bao giờ làm UI fill chức năng cho button, badge hoặc state"
      - "Dành TimesNow SemiLight cho tối đa một hoặc hai heading moment mỗi trang — nó phá vỡ sự đơn điệu grotesque và nên có cảm giác như một sự gián đoạn editorial hiếm hoi"
      - "Giữ wordmark như một asset vẽ tay overlay trên illustration panel — không tạo lại nó bằng web font hoặc đặt trên bề mặt phẳng không có hình ảnh"
      - "Dùng radius 81px độc quyền cho age-gate oval và các interactive prompt lớn khác — stretched ellipse là dấu ấn hệ thống, không phải mặc định"

    don_t:
      - "Không fill bất kỳ button nào bằng Cobalt Ink, Fire Red hoặc bất kỳ chromatic color nào — hệ thống chỉ có outlined-action; filled button sẽ phá vỡ thẩm mỹ zine"
      - "Không thêm box-shadow, drop-shadow hoặc bất kỳ elevation effect nào — thiết kế phẳng theo nguyên tắc; chiều sâu đến từ color contrast và mật độ illustration, không phải từ blur hoặc offset"
      - "Không dùng canvas trắng (#ffffff) — cream (#f3f4ee) ấm hơn và là lý do màu mực đọc như in chứ không phải màn hình"
      - "Không đặt body text bằng serif TimesNow SemiLight — nó chỉ là display contrast font; body copy giữ nguyên FoundersGrotesk 400"
      - "Không áp dụng bold hoặc semibold weight — hệ thống type là single-weight (400) theo thiết kế; hierarchy là size và line-height, không bao giờ là weight"
      - "Không bo tròn card hoặc ảnh quá 10px — radius 50px và 81px dành riêng cho button và oval action; mọi thứ khác gần với góc sắc"
      - "Không thêm gradient, blur hoặc glow effect vào bất kỳ element nào — palette là risograph-flat; bất kỳ chuyển tiếp tông màu mượt nào cũng phá vỡ ảo giác in ấn"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Cream Paper | `#f3f4ee` | Base page canvas — nền trắng kem ấm mà mọi nội dung nằm trên, không bao giờ bị thay thế bởi card background |"
    info: "| 1 | Bone White | `#f8f8f8` | Lớp nền thay thế cho section cần phân biệt nhẹ nhàng với cream canvas |"
    info: "| 2 | Peach Wash | `#ffc6a6` | Bề mặt illustration tông màu — xuất hiện như background plate trong hero artwork, không phải UI card |"

  elevation:

    info: "Hệ thống cố tình phẳng — không box-shadow, không drop-shadow, không blur, không glow effect. Chiều sâu và hệ thống phân cấp đạt được hoàn toàn qua color contrast (mực trên kem), mật độ illustration (riso hatching) và typographic scale (tight display leading). Đây là ngôn ngữ thiết kế in ấn trước tiên được áp dụng cho màn hình, và elevation sẽ phá vỡ ảo giác rằng mọi thứ là mực in trên giấy ấm."

  imagery:

    info: "Ngôn ngữ thị giác được xác định bởi duotone risograph-style illustration được render chủ yếu bằng Cobalt Ink (#245dc5) trên cream canvas, với tùy chọn Peach Wash (#ffc6a6) và các accent plate khác cho độ sâu tông màu. Illustration là full-bleed, hard-edged và vẽ tay — không gradient, không 3D, không nhiếp ảnh trên hero composition. Chữ cursive 'Sackville' vẽ tay overlay lên illustration panel như dấu ấn thương hiệu. Nhiếp ảnh, khi được dùng trong product context, không có khung và nằm trực tiếp trên cream canvas mà không có border hoặc card. Mật độ tổng thể là image-dominant trong hero moment và type-dominant trong editorial section."

  layout:

    age_gate_dùng_split_50_50_full_bleed: "nửa trái là duotone illustration panel (Cobalt Ink trên kem, không border, chảy đến mép), nửa phải là cột text-and-interactive trên cream canvas. Không có max-width container — split lấp đầy viewport. Cột interactive căn giữa nội dung theo chiều dọc và ngang trong nửa của nó, với eyebrow prompt ở trên cùng, oval outline button ở trung tâm và secondary text option bên dưới. Navigation tối giản và ở vị trí trên cùng. Hệ thống không dùng layout marketing SaaS tiêu chuẩn (không hero band, không feature grid, không pricing table) — thay vào đó, mỗi trang đọc như một editorial spread với full-bleed illustration panel xen kẽ với text-driven column. Section gap rộng (~43px+) và khoảng trắng được xem như một yếu tố composition, không phải filler."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #231f20 (Press Black)"
    - "background: #f3f4ee (Cream Paper)"
    - "border: #231f20 (Press Black, 1px hairlines)"
    - "accent: #245dc5 (Cobalt Ink)"
    - "secondary accent: #ffc6a6 (Peach Wash)"
    - "primary action: #245dc5 (outlined action border)"

    info: "3-5 Example Component Prompts:"

    - "Tạo age-gate oval button: fill trong suốt, border solid 1.5px màu #245dc5, border-radius 81px, padding 18px 72px. Text: 'I'M OVER 21' bằng FoundersGrotesk 400, 42px, line-height 0.94, màu #245dc5. Trên cream canvas (#f3f4ee). Không shadow, không hover fill change — outline CHÍNH LÀ affordance."

    - "Tạo editorial headline block: text bằng FoundersGrotesk 400, 99px, line-height 0.80, màu #231f20. Tối đa hai hoặc ba từ. Không bold, không underline, không color accent — size và negative leading làm tất cả. Background là cream canvas (#f3f4ee) không có container."

    - "Tạo duotone illustration panel: full-bleed nửa trái của split layout, không border, không radius. Illustration được render bằng #245dc5 trên khoảng trống âm #f3f4ee. Overlay chữ cursive 'Sackville' vẽ tay ở 100% width trên đầu bằng #245dc5. Không có peach hoặc red accent trong phiên bản này — pure two-color riso."

    - "Tạo product card: không background fill, không border, không shadow, không radius. Ảnh sản phẩm lấp đầy vùng card ở corner radius 10px chỉ khi ảnh là hình chữ nhật. Metadata bên dưới: tên sản phẩm bằng FoundersGrotesk 400, 22px, line-height 1.15, màu #231f20. Giá bằng cùng type, 16px, màu #383435. Card là ảnh, không phải khung."

    - "Tạo riso-accent callout block: border solid 1px màu Fire Red (#f04736) hoặc Marigold (#feee71) stroke 1–2px, padding 16px 20px, trên cream canvas. Text bên trong bằng FoundersGrotesk 400, 22px, màu #231f20. Border màu là tín hiệu thị giác duy nhất — không fill, không icon, không badge shape."

  risograph_color_logic:

    info: "Accent palette được mô phỏng theo máy in riso ba plate: Cobalt Blue (#245dc5) là plate chính, Peach (#ffc6a6) là plate thứ hai, và Marigold (#feee71) hoặc Fire Red (#f04736) là spot-color plate thứ ba. Màu sắc được xếp lớp bằng độ mờ đục overlap — Peach trên Cobalt tạo tông tím ấm, Marigold trên Cobalt tạo xanh olive. Khi tạo illustration hoặc decorative element, hãy nghĩ theo 'plate' nào đang được in, không phải hex value nào lấp đầy một hình dạng. Hệ thống cố tình bao gồm các hue gần trùng lặp (nhiều màu đỏ, nhiều màu cam) vì chúng đại diện cho các ink plate riêng biệt, không phải gradient."

  similar_brands:

    - "**Aesop** — Cùng sự kiềm chế editorial trên nền trắng kem ấm, grotesque single-weight typography, và bordered/outlined interactive element thay vì filled button — cả hai xem trang như một trang in, không phải màn hình"
    - "**Maison Margiela** — Cùng mã thị giác riso/zine-print với illustration vẽ tay, background kem, và display type dày đặc tạo áp lực như bìa tạp chí"
    - "**A24** — Cùng thẩm mỹ illustration flat-color với duotone treatment, hand-drawn wordmark, và secondary palette bão hòa dùng làm editorial emphasis thay vì UI chức năng"
    - "**Toast (restaurant OS)** — Cùng single-weight grotesque typography trên nền neutral ấm, không shadow, không gradient, không filled button — cả hai tin tưởng vào khoảng trắng và type scale để tạo hierarchy"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-paper: #f3f4ee;
          --color-bone-white: #f8f8f8;
          --color-press-black: #231f20;
          --color-charcoal-headline: #383435;
          --color-mid-gray: #9a9a9a;
          --color-pure-black: #000000;
          --color-cobalt-ink: #245dc5;
          --color-peach-wash: #ffc6a6;
          --color-fire-red: #f04736;
          --color-vermillion: #f52302;
          --color-crimson: #d42121;
          --color-marigold: #feee71;
          --color-terracotta: #b45e42;
        
          /* Typography — Font Families */
          --font-foundersgrotesk: 'FoundersGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-timesnow-semilight: 'TimesNow SemiLight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sackville-script-hand-drawn-wordmark: 'Sackville Script (hand-drawn wordmark)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.3;
          --text-body: 22px;
          --leading-body: 1.3;
          --text-body-lg: 25px;
          --leading-body-lg: 1.15;
          --text-subheading: 29px;
          --leading-subheading: 1.15;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1;
          --text-heading: 47px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.85;
          --text-display: 99px;
          --leading-display: 0.85;
          --text-display-lg: 130px;
          --leading-display-lg: 0.8;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-40: 40px;
          --spacing-43: 43px;
          --spacing-58: 58px;
          --spacing-60: 60px;
          --spacing-72: 72px;
        
          /* Layout */
          --section-gap: 43px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 50px;
          --radius-full-2: 81px;
        
          /* Named Radii */
          --radius-tags: 0px (square tags only);
          --radius-cards: 10px;
          --radius-buttons: 50px;
          --radius-ovalbuttons: 81px;
        
          /* Surfaces */
          --surface-cream-paper: #f3f4ee;
          --surface-bone-white: #f8f8f8;
          --surface-peach-wash: #ffc6a6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-paper: #f3f4ee;
          --color-bone-white: #f8f8f8;
          --color-press-black: #231f20;
          --color-charcoal-headline: #383435;
          --color-mid-gray: #9a9a9a;
          --color-pure-black: #000000;
          --color-cobalt-ink: #245dc5;
          --color-peach-wash: #ffc6a6;
          --color-fire-red: #f04736;
          --color-vermillion: #f52302;
          --color-crimson: #d42121;
          --color-marigold: #feee71;
          --color-terracotta: #b45e42;
        
          /* Typography */
          --font-foundersgrotesk: 'FoundersGrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-timesnow-semilight: 'TimesNow SemiLight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sackville-script-hand-drawn-wordmark: 'Sackville Script (hand-drawn wordmark)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.3;
          --text-body: 22px;
          --leading-body: 1.3;
          --text-body-lg: 25px;
          --leading-body-lg: 1.15;
          --text-subheading: 29px;
          --leading-subheading: 1.15;
          --text-heading-sm: 34px;
          --leading-heading-sm: 1;
          --text-heading: 47px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.85;
          --text-display: 99px;
          --leading-display: 0.85;
          --text-display-lg: 130px;
          --leading-display-lg: 0.8;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-40: 40px;
          --spacing-43: 43px;
          --spacing-58: 58px;
          --spacing-60: 60px;
          --spacing-72: 72px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-full: 50px;
          --radius-full-2: 81px;
        }