freitag___style_reference:
  info: "> Catalog công nghiệp Thụy Sĩ — một bản in manifest của những tấm bạt xe tải trải phẳng trên nền bê tông đổ, nơi màu sắc duy nhất chính là sản phẩm tái chế."

  theme: "light"

  info: "Freitag hoạt động như một catalog công nghiệp Thụy Sĩ đơn sắc: một hệ thống gần như không màu, nơi bề mặt có sắc độ duy nhất là chính sản phẩm (túi bạt xe tải với các mảng đỏ, vàng, xanh dương, xanh lá). UI là một grid gồm đen, trắng và xám bê tông, đóng vai trò sân khấu trung tính cho hàng hóa kinh tế tuần hoàn. Typography được nén và viết hoa (Akkurat Standard), line-height chặt như máy móc, letter-spacing rộng trên label, và các thành phần tương tác có dạng pill ngang với đường viền 1px sắc cạnh. Layout tuân theo modular grid nghiêm ngặt — hero full-bleed 50/50, tiếp đến là khối danh mục 3 cột, rồi ma trận sản phẩm 6 cột. Thủ thuật đặc trưng: trang web đọc như một bảng thông số kỹ thuật hoặc vận đơn, không phải cửa hàng thời trang. Các component có cảm giác như được dập lên trang thay vì thiết kế — pill buttons, đường kẻ mảnh, hairline grids, và hầu như không có độ sâu đổ bóng."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Văn bản chính, logo plate, pill-button fills, hairline borders, icon strokes — mực in chủ đạo mang mọi label, heading và đường viền |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, bề mặt card, nền ảnh sản phẩm, văn bản trên nền tối, văn bản đảo màu trên overlay danh mục |"
    info: "| Concrete Gray | `#cacaca` | `--color-concrete-gray` | Card borders, thumbnail dividers, đường phân cách thứ cấp giữa các ô sản phẩm — màu trung tính cấu trúc tạo khung cho grid |"
    info: "| Mist Gray | `#f1f1f1` | `--color-mist-gray` | Màu nền nhẹ cho trạng thái nút không hoạt động và các lớp fill mềm, không bao giờ dùng làm nền trang |"
    info: "| Iron Gray | `#404040` | `--color-iron-gray` | Tông đổ bóng đậm và viền dày hơn cho container nâng cao và ngắt section |"
    info: "| Ash Gray | `#616161` | `--color-ash-gray` | Văn bản phụ mờ, body helpers, viền cấp ba — màu xám thì thầm bên dưới mực in |"
    info: "| Ink | `#1a1b1e` | `--color-ink` | Accent gần đen hiếm gặp cho solid button fills cần một chút ấm áp mà không lệch sang carbon thuần |"
    info: "| Caution Yellow | `#ffdd00` | `--color-caution-yellow` | Lớp vàng cho highlight backgrounds, dải trang trí và điểm nhấn mềm phía sau nội dung. |"

  tokens___typography:

    ui_sans_serif___ui_sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_ui_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 11px, 16px"
      - "**Line height:** 1.15, 1.5"
      - "**Letter spacing:** 0.02"
      - "**Vai trò:** ui-sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    akkstdrg_akkurat_standard___typeface_thương_hiệu_duy_nhất__con_ngựa_thồ_neo_grotesque_thụy_sĩ_dùng_cho_mọi_thứ_từ_display_headlines_đến_eyebrow_labels_8px__weight_luôn_ở_400___không_có_bold_weight_trong_hệ_thống__điểm_nhấn_đạt_được_qua_kích_thước__chữ_hoa_và_tracking__line_height_0_74_ở_kích_thước_display_là_phản_quy_ước_và_tạo_hiệu_ứng_poster_công_nghiệp_nén_chặt__tracking_rộng_ở_kích_thước_nhỏ_0_04_0_05em_mang_lại_cho_label_khoảng_cách_của_số_serial_dập_máy_____font_akkstdrg_akkurat_standard:
      - "**Thay thế:** Inter, Helvetica Neue, Aktiv Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 8px, 10px, 11px, 16px, 24px, 32px, 48px"
      - "**Line height:** 0.74 / 0.97 / 1.10 / 1.15 / 1.28 / 1.50"
      - "**Letter spacing:** −0.48px ở 48px, −0.16px ở 32px, +0.32px ở 16px, +0.44px ở 11px, +0.50px ở 10px, +0.40px ở 8px"
      - "**OpenType features:** `\"tnum\" on, \"ss01\" on`"
      - "**Vai trò:** Typeface thương hiệu duy nhất. Con ngựa thồ neo-grotesque Thụy Sĩ dùng cho mọi thứ từ display headlines đến eyebrow labels 8px. Weight luôn ở 400 — không có bold weight trong hệ thống; điểm nhấn đạt được qua kích thước, chữ hoa và tracking. Line-height 0.74 ở kích thước display là phản quy ước và tạo hiệu ứng poster công nghiệp nén chặt. Tracking rộng ở kích thước nhỏ (0.04–0.05em) mang lại cho label khoảng cách của số serial dập máy."

    frg_freitag_regular___dành_riêng_cho_mã_model_sản_phẩm_f141_clark__f531_archer___xử_lý_condensed_mark_thứ_cấp_khiến_sku_đọc_như_số_bộ_phận_được_dập_trên_thùng_hàng____font_frg_freitag_regular:
      - "**Thay thế:** Akkurat Standard Small Caps"
      - "**Weights:** 400"
      - "**Sizes:** 10px"
      - "**Line height:** 0.74"
      - "**Letter spacing:** +0.50px"
      - "**Vai trò:** Dành riêng cho mã model sản phẩm (F141 CLARK, F531 ARCHER) — xử lý condensed-mark thứ cấp khiến SKU đọc như số bộ phận được dập trên thùng hàng"

    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:** 10px"
      - "**Line height:** 1"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Vai trò:** sans-serif — đượ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: "| label-sm | 11px | 1.15 | 0.44px | `--text-label-sm` |"
      info: "| body | 16px | 1.5 | 0.32px | `--text-body` |"
      info: "| subheading | 24px | 1.28 | — | `--text-subheading` |"
      info: "| heading | 32px | 0.97 | -0.16px | `--text-heading` |"
      info: "| display | 48px | 0.97 | -0.48px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_sở: "4px"

    mật_độ: "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: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| badges | 9999px |"
      info: "| images | 12px |"
      info: "| buttons | 9999px |"
      info: "| inline-links | 4px |"
      info: "| nav-elements | 16px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.12) 2px 2px 10px 0px` | `--shadow-md` |"
      info: "| subtle | `rgb(64, 64, 64) 0px -1px 0px 0px` | `--shadow-subtle` |"
      info: "| sm | `rgba(45, 45, 45, 0.5) 2px 2px 5px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 64-80px"
      - "**Card padding:** 12px"
      - "**Element gap:** 12px"

  components:

    primary_pill_button:
      vai_trò: "Hành động ưu tiên cao nhất — hero CTAs, lối vào danh mục, khám phá sản phẩm"

      info: "Solid Carbon Black (#000000) fill, Paper White (#ffffff) text, border-radius 9999px (pill tròn hoàn toàn), padding 12px 22px, Akkurat 10–11px weight 400 uppercase với +0.5px tracking. Đổ bóng nhẹ rgba(0,0,0,0.12) 2px 2px 10px. Hình dạng pill là đặc trưng — không có nút hình chữ nhật nào trong hệ thống này."

    ghost_pill_button:
      vai_trò: "Hành động thứ cấp — 'DISCOVER ONE-OFF ITEMS', 'ABOUT PRODUCTION' trên category cards"

      info: "Paper White (#ffffff) fill, 1px Carbon Black border, Carbon Black text, 9999px radius, 12px 22px padding. Nằm trên nền ảnh danh mục, nơi lớp fill trắng làm cho CTA dễ đọc mà không cạnh tranh với hình ảnh."

    category_card_3_column:
      vai_trò: "Lối vào danh mục sản phẩm cấp cao nhất — Shoulder Bags, Laptop Sleeves, Made in Europe"

      info: "Tỷ lệ khung hình vuông, ảnh sản phẩm full-bleed (không bị giới hạn — ảnh CHÍNH LÀ card), tùy chọn viền 1px Concrete Gray (#cacaca). Heading overlay ở góc dưới bên trái bằng Paper White, 32–48px Akkurat weight 400 uppercase. Ghost pill button đặt ngay bên dưới heading. Ba card trong một hàng ngang, cách nhau bằng gutter trắng 1px thay vì margin."

    product_cell_6_column_grid:
      vai_trò: "Hiển thị SKU riêng lẻ trong ma trận catalog"

      info: "Bề mặt trắng với viền 1px Concrete Gray (#cacaca) ở tất cả các cạnh — các ô tạo thành một ruled grid liên tục. Phía trên: ảnh sản phẩm trên nền trắng, corner radius 12px. Bên dưới: mã model FRg 10px (ví dụ 'F141 CLARK'), giá bằng Akkurat 11px (ví dụ '175.75 CHF'). Không có card shadow — các đường grid cung cấp toàn bộ sự phân cách. Status badges nổi ở góc dưới bên phải của ảnh."

    status_badge_new___bestseller:
      vai_trò: "Chỉ báo nổi bật sản phẩm"

      info: "Hình pill (9999px radius), Paper White fill, 1px Carbon Black border, 8px Akkurat uppercase text. Đặt absolute ở góc dưới bên phải của ảnh sản phẩm. Biến thể 'NEW' đôi khi sử dụng chấm accent Caution Yellow (#ffdd00) bên cạnh pill trắng. Hạn chế — không bao giờ quá 5% ô catalog có badge."

    top_navigation_bar:
      vai_trò: "Site chrome cố định"

      info: "Nền trắng, viền dưới 1px Concrete Gray. Bên trái: eyebrow label 'FREITAG' và các link 'PRODUCTS' / 'MISSION' bằng Akkurat 10px uppercase. Giữa: logo plate hình chữ nhật đen (Carbon Black fill, wordmark 'FREITAG' trắng, corner radius 16px). Bên phải: language switcher (LANGUAGE (EN), DELIVER TO (CH)), icon giỏ hàng, icon tài khoản. Chiều cao khoảng 56–64px. Sticky khi cuộn."

    language___region_switcher:
      vai_trò: "Tiện ích góc trên bên phải — ngôn ngữ và điểm đến vận chuyển"

      info: "Hai pill container nội tuyến (16px radius), mỗi cái có eyebrow label màu xám mờ + giá trị hoạt động bằng Carbon Black uppercase, cách nhau bởi khoảng cách 8px. Đọc như một control có nhãn thay vì dropdown khi thu gọn."

    hero_section_50_50_split:
      vai_trò: "Module editorial / chiến dịch phía trên fold"

      info: "Full-bleed, hai panel dọc bằng nhau — ảnh trái trên nền xanh lá, ảnh phải trên nền trung tính. Display headline (48px Akkurat weight 400) overlay ở góc dưới bên trái của panel đầu tiên bằng Paper White, tiếp theo là primary pill button. Bên dưới các panel: eyebrow label ('WE THINK AND ACT IN CYCLES') bằng 10px uppercase, sau đó là display heading 48–56px thường bị cắt giữa chừng — việc cắt CHÍNH LÀ layout, không phải lỗi."

    section_heading_block:
      vai_trò: "Giới thiệu một dải nội dung mới (ví dụ 'FRESHLY UPLOADED')"

      info: "Akkurat 32px weight 400 uppercase căn trái, bề mặt Paper White, không trang trí. Theo sau là đoạn body 16px tùy chọn bằng Iron Gray (#404040). Padding dọc 64–80px để phân cách với grid bên dưới."

    scroll_to_top_indicator:
      vai_trò: "Affordance ở giữa dưới cùng trên các trang catalog dài"

      info: "Glyph mũi tên tối giản (↑) bằng Carbon Black trên nền trắng, đặt ở cạnh dưới của ma trận sản phẩm phía trên footer. Không có button chrome — chỉ là dấu typographic."

    chat_bubble_góc_dưới_bên_phải:
      vai_trò: "Lối vào dịch vụ khách hàng"

      info: "Icon hình tròn đen (44px) ở góc cố định dưới bên phải với glyph bong bóng thoại trắng. Thành phần nổi duy nhất trên trang."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng Akkurat Standard (hoặc Inter / Aktiv Grotesk thay thế) cho MỌI văn bản — không có typeface khác, không có decorative scripts, không có display serifs"
      - "Đặt display headlines ở 48px với line-height 0.97 và letter-spacing −0.48px để tạo hiệu ứng poster công nghiệp nén chặt"
      - "Sử dụng pill radius 9999px cho mọi button, badge và pill-shaped control — nút hình chữ nhật không tồn tại trong hệ thống này"
      - "Áp dụng letter-spacing 0.04–0.05em trên tất cả văn bản 11px và nhỏ hơn để label đọc như số serial dập"
      - "Giữ product grid trên lưới ruled 1px Concrete Gray (#cacaca) nghiêm ngặt — không có card shadows, không có rounded card containers xung quanh từng SKU"
      - "Chỉ dành #ffdd00 (Caution Yellow) cho chấm accent 'NEW' — không bao giờ dùng làm lớp nền, background hoặc bề mặt lớn"
      - "Để ảnh sản phẩm mang toàn bộ màu sắc — UI chrome phải không màu để hàng hóa bạt tái chế đọc như yếu tố có sắc độ duy nhất"

    không_nên_làm:
      - "Không đưa vào color fills, gradients hoặc brand chromatic washes — hệ thống cố tình 0% màu sắc ở lớp UI"
      - "Không sử dụng bold (600+) hoặc semibold (500) weights — toàn bộ hệ thống là weight 400, điểm nhấn đến từ kích thước, chữ hoa và tracking"
      - "Không thêm drop shadows vào product cells hoặc category cards — shadow chỉ dành cho floating primary buttons"
      - "Không căn giữa body text hoặc section headings — mọi thứ đều căn trái với lề trái cứng"
      - "Không sử dụng màu 'primary action' riêng — buttons là Carbon Black thuần trên trắng hoặc trắng trên Carbon Black, không có gì ở giữa"
      - "Không thêm rounded card containers xung quanh sản phẩm bên trong ma trận catalog — ruled grid CHÍNH LÀ container"
      - "Không để line-height vượt quá 1.5 trên body text hoặc giảm xuống dưới 0.74 trên display — đó là các giới hạn nén chặt của hệ thống"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền trang mặc định và nền ảnh sản phẩm |"
    info: "| 1 | Muted Surface | `#f1f1f1` | Button fills không hoạt động và các lớp tông màu nhẹ |"
    info: "| 2 | Ruled Cell | `#cacaca` | Viền 1px tạo thành lưới catalog |"
    info: "| 3 | Logo Plate | `#000000` | Bề mặt đen đảo màu cho wordmark FREITAG ở giữa và button fill chính duy nhất |"

  elevation:

    - "**Primary Pill Button:** `rgba(0, 0, 0, 0.12) 2px 2px 10px 0px`"
    - "**Section Divider:** `rgb(64, 64, 64) 0px -1px 0px 0px`"

  imagery:

    info: "Nhiếp ảnh tập trung vào sản phẩm và trực tiếp một cách tàn bạo — không có lifestyle, không có người mẫu trong bối cảnh, không có ảnh môi trường. Túi được chụp chính giữa trên nền trắng tinh, cắt ở quai, chiếm toàn bộ ô của grid catalog. Hero photography sử dụng hai ảnh editorial bổ sung cạnh nhau: một trên nền màu thương hiệu bão hòa (xanh lá, xanh dương) và một trên nền xám trung tính, để màu bạt nổi bật trên nền màu đặc trong khi ảnh thứ hai neo nó vào hệ thống đơn sắc. Category card 'Made in Europe' hiển thị bàn tay đang làm việc — da, chỉ, vải công nghiệp — như bằng chứng tài liệu về quy trình sản xuất thay vì lifestyle khát vọng. Không có illustrations, không có 3D renders, không có đồ họa trừu tượng. Icons chỉ là line-only, single-weight và giới hạn trong nav (giỏ hàng, tài khoản, tìm kiếm). Mật độ thị giác chủ yếu do sản phẩm dẫn dắt: grid catalog chiếm khoảng 70% không gian dọc của bất kỳ trang catalog nào."

  layout:

    info: "Hero full-bleed xen kẽ với các dải nội dung căn giữa max-width 1440px. Hero là split dọc 50/50 nghiêm ngặt không có margin giữa hai panel ảnh — đường nối giữa các ảnh chính là layout. Sau hero, nội dung chảy qua các khối section căn trái với padding dọc 64–80px, mỗi khối được giới hạn bởi heading Akkurat uppercase. Bản thân catalog sử dụng grid 6 cột gồm các ô sản phẩm có chiều rộng bằng nhau, cách nhau bởi rules 1px Concrete Gray (không có gutter — các viền chạm nhau), tạo thành một tấm ruled liên tục. Lối vào danh mục sử dụng hàng 3 cột gồm các card ảnh tỷ lệ khung hình vuông. Navigation là một thanh trắng sticky duy nhất với logo plate đen ở giữa — logo-on-black là bề mặt đảo màu duy nhất trong header. Footer (hiển thị một phần) tiếp tục xử lý trắng phẳng với các link uppercase thưa thớt. Không có sidebar, không có mega-menu, không có modal overlay chrome — mọi tương tác đều dẫn hướng hoặc mở một lightbox tối giản."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #cacaca"
    - "muted text: #616161"
    - "accent (chỉ chấm NEW tag): #ffdd00"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA fill."

    - "*Category card row*: Ba ô vuông bằng nhau trong một hàng ngang trên nền trắng, mỗi ô có ảnh sản phẩm full-bleed (không viền, không padding xung quanh ảnh). Heading Paper White 'SHOULDER BAGS' bằng 48px Akkurat weight 400 uppercase, đặt ở góc dưới bên trái. Ghost pill button 'DISCOVER ONE-OFF ITEMS' bên dưới: white fill, 1px Carbon Black border, black text, 9999px radius. Các đường dọc 1px Concrete Gray (#cacaca) giữa ba ô."

    - "*Product catalog cell*: Bề mặt trắng, viền 1px Concrete Gray (#cacaca) ở cả bốn cạnh. Ảnh sản phẩm căn giữa trên nền trắng với corner radius 12px. Bên dưới ảnh: mã model FRg 10px uppercase 'F141 CLARK' với +0.5px tracking, sau đó '175.75 CHF' bằng Akkurat 11px weight 400. Tùy chọn badge pill 'BESTSELLER' absolute ở góc dưới bên phải của ảnh: 9999px radius, white fill, 1px black border, 8px Akkurat uppercase."

    - "*Navigation bar*: Nền trắng, viền dưới 1px Concrete Gray. Bên trái: eyebrow 'FREITAG' + các link 'PRODUCTS' / 'MISSION' bằng Akkurat 10px uppercase. Giữa: logo plate hình chữ nhật Carbon Black corner radius 16px, wordmark 'FREITAG' trắng bên trong. Bên phải: 'LANGUAGE (EN)' và 'DELIVER TO (CH)' dưới dạng pill nội tuyến 16px radius, sau đó icon giỏ hàng và icon tài khoản dưới dạng glyph line-only. Tổng chiều cao 56px, sticky."

    - "*Section heading block*: Căn trái trên canvas trắng, top padding 64px. 'FRESHLY UPLOADED' bằng Akkurat 32px weight 400 uppercase, letter-spacing −0.16px, line-height 0.97. Tùy chọn subhead bên dưới bằng 16px Akkurat weight 400, Iron Gray (#404040), line-height 1.5. Không gạch chân, không accent rule, không trang trí."

  similar_brands:

    - "**Patagonia** — Cùng ngôn ngữ catalog công nghiệp-tiện ích — UI đơn sắc làm sân khấu trung tính cho ảnh sản phẩm đầy màu sắc và eyebrow labels uppercase dẫn dắt mọi section"
    - "**Carhartt WIP** — Cùng hệ thống đơn sắc gốc workwear: logo plate đen, pill-shaped CTAs, ruled grid các ô sản phẩm và hoàn toàn không có decorative gradients hoặc color washes"
    - "**VEJA** — Cùng cách tiếp cận thương hiệu sinh thái Thụy Sĩ — không có màu sắc trong lớp UI để sản phẩm tái chế/hữu cơ mang toàn bộ trọng lượng sắc độ, với các ô grid viền 1px nghiêm ngặt"
    - "**Café du Cycliste** — Cùng thẩm mỹ editorial-cycling với ảnh full-bleed, headline neo-grotesque kiểu Akkurat cỡ lớn và grid catalog trắng phẳng"
    - "**Aesop** — Cùng sự kiềm chế catalog dược phẩm Thụy Sĩ: hệ thống phân cấp typographic làm công việc mà màu sắc thường làm, với ma trận sản phẩm dày đặc và hairline grid rules"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-concrete-gray: #cacaca;
          --color-mist-gray: #f1f1f1;
          --color-iron-gray: #404040;
          --color-ash-gray: #616161;
          --color-ink: #1a1b1e;
          --color-caution-yellow: #ffdd00;
        
          /* Typography — Font Families */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-akkstdrg-akkurat-standard: 'AkkStdRg (Akkurat Standard)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-frg-freitag-regular: 'FRg (Freitag Regular)', 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-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label-sm: 11px;
          --leading-label-sm: 1.15;
          --tracking-label-sm: 0.44px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.28;
          --text-heading: 32px;
          --leading-heading: 0.97;
          --tracking-heading: -0.16px;
          --text-display: 48px;
          --leading-display: 0.97;
          --tracking-display: -0.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 64-80px;
          --card-padding: 12px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-badges: 9999px;
          --radius-images: 12px;
          --radius-buttons: 9999px;
          --radius-inline-links: 4px;
          --radius-nav-elements: 16px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 2px 2px 10px 0px;
          --shadow-subtle: rgb(64, 64, 64) 0px -1px 0px 0px;
          --shadow-sm: rgba(45, 45, 45, 0.5) 2px 2px 5px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-muted-surface: #f1f1f1;
          --surface-ruled-cell: #cacaca;
          --surface-logo-plate: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-carbon-black: #000000;
          --color-paper-white: #ffffff;
          --color-concrete-gray: #cacaca;
          --color-mist-gray: #f1f1f1;
          --color-iron-gray: #404040;
          --color-ash-gray: #616161;
          --color-ink: #1a1b1e;
          --color-caution-yellow: #ffdd00;
        
          /* Typography */
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-akkstdrg-akkurat-standard: 'AkkStdRg (Akkurat Standard)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-frg-freitag-regular: 'FRg (Freitag Regular)', 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-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label-sm: 11px;
          --leading-label-sm: 1.15;
          --tracking-label-sm: 0.44px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.32px;
          --text-subheading: 24px;
          --leading-subheading: 1.28;
          --text-heading: 32px;
          --leading-heading: 0.97;
          --tracking-heading: -0.16px;
          --text-display: 48px;
          --leading-display: 0.97;
          --tracking-display: -0.48px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.12) 2px 2px 10px 0px;
          --shadow-subtle: rgb(64, 64, 64) 0px -1px 0px 0px;
          --shadow-sm: rgba(45, 45, 45, 0.5) 2px 2px 5px 0px;
        }