forner___style_reference:
  info: "> Warm earthen atelier — hãy tưởng tượng một xưởng gốm vào giờ vàng, nơi mọi bề mặt đều là đất sét, xương, hoặc cà phê rang, và thứ chrome duy nhất là mảnh giấy ghi chú viết tay của người thợ gốm cài trên tường."

  theme: "light"

  info: "Forner hoạt động như một design atelier ngập nắng: bảng màu gần như hoàn toàn là tông đất ấm, một custom grotesque duy nhất đảm nhận 95% giọng điệu, và typography siêu lớn đến mức từ bỏ hệ thống phân cấp để tạo bầu không khí. Canvas là một tông kem khô; mực là một tông nâu rang đậm; mọi điểm nhấn đều nằm trong cùng một dải màu từ nâu đến xương. Không có màu thương hiệu chromatic — chính độ ấm là thương hiệu. Bề mặt phẳng với hairline borders, góc vuông sắc nét ở 4px, và khoảng thở rộng rãi (100px+ giữa các section). Custom serif italics xuất hiện tiết kiệm như những chú thích viết tay đặt cạnh nhịp điệu cơ học của grotesque."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Roast Ink | `#484036` | `--color-roast-ink` | Primary text, borders, icon strokes, xương sống cấu trúc của mọi giao diện — nâu ấm đậm đóng vai trò như mực trên nền kem, màu foreground chủ đạo trên toàn bộ hệ thống |"
    info: "| Bone Canvas | `#faf5eb` | `--color-bone-canvas` | Nền trang, trường kem ấm mà mọi bề mặt đặt trên đó |"
    info: "| Linen Surface | `#ecece4` | `--color-linen-surface` | Bề mặt card, panel nâng cao, content blocks — cách canvas một bước, hơi lạnh và xám hơn để lùi về phía sau |"
    info: "| Sandstone | `#cacab0` | `--color-sandstone` | Heading accents, icon strokes, decorative borders, link underlines — neutral có cảm giác chromatic nhẹ nhất, dùng khi Roast Ink có vẻ quá nặng |"
    info: "| Pebble | `#d5d5c4` | `--color-pebble` | Link text, secondary interactive states — ấm hơn các tông xám lạnh, giữ họ link trong bảng màu đất |"
    info: "| Manilla Cream | `#f2e9cf` | `--color-manilla-cream` | Warm highlight wash, soft fill cho tags và subtle emphasis blocks |"
    info: "| Slate Border | `#666e72` | `--color-slate-border` | Hairline borders tông lạnh, dividers, structural lines — điểm phá vỡ duy nhất khỏi bảng màu ấm, cung cấp độ tương phản cấu trúc trung tính |"
    info: "| Charcoal Depth | `#33302c` | `--color-charcoal-depth` | Deep heading text, near-black emphasis — ấm hơn đen thuần, dành cho những khoảnh khắc type nặng nhất |"
    info: "| Obsidian | `#212529` | `--color-obsidian` | Borders và text có độ tương phản tối đa — tối nhất hiện có, dùng tiết kiệm cho emphasis tuyệt đối |"

  tokens___typography:

    surt___primary_workhorse___dùng_cho_body__navigation__buttons__hero__headings__và_mọi_thứ_ở_giữa__font_đơn_này_đảm_nhận_606_instances_trên_mọi_ngữ_cảnh__biến_nó_thành_giọng_nói_của_toàn_bộ_hệ_thống__line_height_siêu_khít_0_98_1_10_ở_cỡ_lớn_là_signature__display_text_nằm_gần_đến_mức_các_dòng_gần_như_chạm_nhau__tạo_nhịp_điệu_editorial_nén_chặt__chỉ_có_weight_400___không_có_bold__không_có_light__sự_kiềm_chế_thông_qua_phạm_vi_kích_thước__không_phải_weight_____font_surt:
      - "**Thay thế:** Söhne, Inter, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 22px, 29px, 45px, 56px, 112px"
      - "**Line height:** 0.98-1.10 cho display, 1.35-1.50 cho body"
      - "**Letter spacing:** -0.0400em ở body, 0.0110em ở cỡ nhỏ, -0.0500em ở display"
      - "**Vai trò:** Primary workhorse — dùng cho body, navigation, buttons, hero, headings, và mọi thứ ở giữa. Font đơn này đảm nhận 606 instances trên mọi ngữ cảnh, biến nó thành giọng nói của toàn bộ hệ thống. Line-height siêu khít (0.98-1.10) ở cỡ lớn là signature: display text nằm gần đến mức các dòng gần như chạm nhau, tạo nhịp điệu editorial nén chặt. Chỉ có weight 400 — không có bold, không có light. Sự kiềm chế thông qua phạm vi kích thước, không phải weight."

    clashdisplay___secondary_display_face___dùng_cho_structural_headings_và_labels_khi_cần_cảm_giác_kiến_trúc_hơn_một_chút__line_height_0_97_siêu_khít_ở_cỡ_56px_là_aggressive_ngay_cả_theo_chuẩn_display__các_dòng_xếp_chồng_như_một_modernist_poster__kết_hợp_với_surt_như_giọng__engineered__đối_lập_với_giọng__neutral__của_surt_____font_clashdisplay:
      - "**Thay thế:** Clash Display (Fontshare), Söhne Schmal, Founders Grotesk Condensed"
      - "**Weights:** 400"
      - "**Sizes:** 17px, 30px, 52px, 56px"
      - "**Line height:** 0.97-1.13"
      - "**Letter spacing:** -0.0100em ở body, 0.0200em ở display"
      - "**Vai trò:** Secondary display face — dùng cho structural headings và labels khi cần cảm giác kiến trúc hơn một chút. Line-height 0.97 siêu khít ở cỡ 56px là aggressive ngay cả theo chuẩn display; các dòng xếp chồng như một modernist poster. Kết hợp với Surt như giọng 'engineered' đối lập với giọng 'neutral' của Surt."

    bigdailyshort___accent_serif_italic___chỉ_xuất_hiện_5_lần_trong_toàn_hệ_thống__hoạt_động_như_một_ghi_chú_viết_tay_đặt_cạnh_grotesque__dùng_cho_pull_quotes__editorial_labels__hoặc_những_khoảnh_khắc_signature_khi_hệ_thống_cần_cảm_giác_được_ký_tên_thay_vì_in_ấn__sự_khan_hiếm_chính_là_điểm_mấu_chốt__khi_nó_xuất_hiện__nó_mang_trọng_lượng_thông_qua_sự_hiện_diện__không_phải_kích_thước_____font_bigdailyshort:
      - "**Thay thế:** GT Sectra, Canela, Domaine Display Italic"
      - "**Weights:** 400 (Light Italic)"
      - "**Sizes:** 17px, 37px, 45px"
      - "**Line height:** 0.98-1.03"
      - "**Letter spacing:** -0.0500em, 0.0110em, 0.0200em"
      - "**Vai trò:** Accent serif italic — chỉ xuất hiện 5 lần trong toàn hệ thống, hoạt động như một ghi chú viết tay đặt cạnh grotesque. Dùng cho pull quotes, editorial labels, hoặc những khoảnh khắc signature khi hệ thống cần cảm giác được ký tên thay vì in ấn. Sự khan hiếm chính là điểm mấu chốt: khi nó xuất hiện, nó mang trọng lượng thông qua sự hiện diện, không phải kích thước."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 17px | 1.13 | 0.34px | `--text-caption` |"
      info: "| body | 22px | 1.35 | 0.24px | `--text-body` |"
      info: "| subheading | 29px | 1.1 | -0.29px | `--text-subheading` |"
      info: "| heading | 45px | 1.03 | -0.45px | `--text-heading` |"
      info: "| heading-lg | 56px | 0.98 | -2.24px | `--text-heading-lg` |"
      info: "| display | 112px | 0.98 | -5.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 58 | 58px | `--spacing-58` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 86 | 86px | `--spacing-86` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 121 | 121px | `--spacing-121` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 161 | 161px | `--spacing-161` |"
      info: "| 232 | 232px | `--spacing-232` |"
      info: "| 233 | 233px | `--spacing-233` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 100px"
      - "**Card padding:** 29px"
      - "**Element gap:** 14px"

  components:

    display_hero_headline:
      vai_trò: "Hero và section-anchoring text"

      info: "Surt ở 112px, weight 400, line-height 0.98, letter-spacing -5.6px. Màu #484036 trên canvas #faf5eb. Tracking siêu khít và line-height nén chặt khiến các dòng gần như chạm nhau — tạo sự hiện diện như poster, không phải trải nghiệm đọc thoải mái. Đây là bầu không khí, không phải thông tin."

    section_heading:
      vai_trò: "Structural headings giữa trang"

      info: "Surt ở 45-56px, weight 400, line-height 1.03-0.98, letter-spacing -1.8 đến -2.24px. Màu #484036. Cùng anti-convention như display: light weight ở cỡ lớn, negative tracking nặng. Headlines thì thầm ở tỷ lệ mà hầu hết các trang đều hét to."

    body_paragraph:
      vai_trò: "Tất cả paragraph text"

      info: "Surt ở 22px, weight 400, line-height 1.35, letter-spacing 0.24px. Màu #484036. Positive tracking nhẹ trên body là bất thường — hầu hết grotesque đều thắt chặt ở cỡ body, Surt lại mở rộng. Tạo nhịp đọc editorial thoáng đãng hơn."

    outlined_action_button:
      vai_trò: "Primary interactive trigger"

      info: "Surt ở 17px, weight 400, text #484036. Border 1px #484036, radius 4px, padding dọc 14px, padding ngang 29px. Không fill — chỉ outlined. Border tối trung tính có nghĩa là không có chromatic CTA; tính cấp bách đến từ border weight và spacing rộng rãi, không phải màu sắc. Hover state có thể fill thành #484036 với bone text."

    ghost_link:
      vai_trò: "Inline navigation, footer links, tertiary actions"

      info: "Surt ở 17-22px, weight 400, màu #d5d5c4 với underline #cacab0 (1px). Không background, không border. Underline luôn hiện diện — link giao tiếp thông qua đường kẻ liên tục, không phải độ tương phản màu."

    content_card:
      vai_trò: "Project tiles, case study blocks, content containers"

      info: "Background #ecece4 (lạnh hơn canvas một bước). Radius 4px. Internal padding 29px. Border 1px #666e72 (slate) để định nghĩa cấu trúc. Không shadow — sự chuyển tông nhẹ từ canvas sang card là tín hiệu elevation duy nhất. Đây là hệ thống phẳng, paper-on-paper, không phải floating-card."

    product_showcase_panel:
      vai_trò: "Full-bleed portfolio imagery"

      info: "Ảnh được xử lý ở tỷ lệ đầy đủ không có frame hoặc container — chúng chảy vào canvas #faf5eb. Radius 4px chỉ khi bị giới hạn trong một card. Ảnh chụp màn hình cho thấy một product photograph nổi trên trường kem ấm, màu sắc riêng của bức ảnh (terracotta) làm công việc chống lại hệ thống muted."

    editorial_annotation:
      vai_trò: "Pull quotes, signed notes, accent labels"

      info: "BigDailyShort Light Italic ở 17-45px, line-height 0.98-1.03, màu #484036. Dùng 5 lần trong toàn hệ thống — sự khan hiếm này là lựa chọn thiết kế. Khi xuất hiện, nó đọc như một nhãn viết tay của curator ghim trên tường gallery. Không bao giờ dùng cho body hoặc navigation."

    navigation_bar:
      vai_trò: "Top-level site navigation"

      info: "Surt ở 22px, weight 400, transparent trên canvas #faf5eb. Các link ngang cách nhau bởi khoảng trống 29-68px. Không background fill, không border, không shadow. Nav là text nổi trên canvas — nó không tự xưng là một UI element."

    section_divider:
      vai_trò: "Giữa các content section"

      info: "Không phải một đường kẻ nhìn thấy được — các section được phân cách bởi 86-144px khoảng trống âm. Khi cần một đường kẻ, 1px #666e72 ở 100% width. Hệ thống ưu tiên khoảng thở hơn các đường kẻ."

    tag_or_category_label:
      vai_trò: "Project categories, metadata chips"

      info: "Surt ở 17px, weight 400, text #484036. Tùy chọn border 1px #cacab0, radius 4px, padding dọc 14px / ngang 29px. Fill Manilla Cream (#f2e9cf) có sẵn cho emphasis variants. Tags nhỏ, yên tĩnh, outlined — không bao giờ fill với brand color."

    image_caption:
      vai_trò: "Bên dưới project imagery"

      info: "Surt ở 17px, weight 400, line-height 1.13, letter-spacing 0.34px, màu #666e72. Cách ảnh 14px. Màu xám lạnh hơn và positive tracking tách biệt nó khỏi giọng body — captions là metadata, không phải content."

  do_s_and_don_ts:

    do:
      - "Dùng Surt weight 400 cho tất cả text — không có bold, không light, không medium. Kích thước và tracking tạo hierarchy, không phải weight."
      - "Đặt line-height ở 0.98-1.10 cho tất cả display sizes từ 45px trở lên — sự xếp chồng nén chặt là signature."
      - "Dùng #faf5eb cho page canvas và #ecece4 cho card surfaces — sự chuyển tông hai bước ấm sang lạnh là tín hiệu elevation duy nhất cần."
      - "Duy trì vertical rhythm 100px+ giữa các section; để khoảng trống âm phân cách content thay vì vẽ các đường kẻ."
      - "Đặt tất cả border-radius thành 4px — hệ thống sắc nét như phẫu thuật, không mềm mại."
      - "Chỉ dùng BigDailyShort italic 1-3 lần mỗi trang — sự khan hiếm của nó tạo thẩm quyền như một chú thích có chữ ký."
      - "Giữ tất cả interactive elements ở dạng outlined hoặc ghosted với border #484036; không bao giờ đưa vào chromatic action color."

    don_t:
      - "Không dùng bold hoặc semibold weights — hệ thống có một giọng duy nhất (regular 400) ở mọi kích thước."
      - "Không thêm drop shadows hoặc box-shadows — elevation đến từ sự chuyển tông bề mặt, không phải blurred offsets."
      - "Không dùng trắng tinh (#ffffff) hoặc đen tinh (#000000) — toàn bộ bảng màu sống trong dải nâu ấm đến xương."
      - "Không đưa accent colors (không xanh, đỏ, xanh lá, hoặc bất kỳ chromatic brand color nào) — 5% colorfulness là hệ thống."
      - "Không dùng border-radius trên 4px — không pills, không bo tròn lớn, không đường cong 'thân thiện'."
      - "Không đặt display line-height trên 1.10 — spacing rộng rãi giết chết nhịp điệu editorial nén chặt."
      - "Không dùng BigDailyShort italic cho navigation, body, hoặc buttons — nó chỉ dành cho annotation và mất hết ý nghĩa nếu dùng quá nhiều."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Bone Canvas | `#faf5eb` | Nền trang — trường kem ấm mà mọi content đặt trên đó |"
    info: "| 1 | Linen Surface | `#ecece4` | Nền card và content panel — lạnh và xám hơn canvas một tông để lùi mà không cần shadow |"
    info: "| 2 | Manilla Highlight | `#f2e9cf` | Soft emphasis fill cho tags, highlights, và accent blocks |"

  elevation:

    info: "Hệ thống cố tình tránh hoàn toàn shadows. Elevation được truyền đạt độc quyền thông qua sự chuyển tông bề mặt — canvas (#faf5eb) là nền, cards bước lạnh hơn sang Linen (#ecece4), và emphasis blocks thêm độ ấm sang Manilla (#f2e9cf). Kết hợp với hairline borders 1px #666e72 hoặc #484036, điều này tạo ra hệ thống phân lớp paper-on-paper thay vì floating-card. Shadows sẽ đưa nhiễu thị giác mà bảng màu đất không thể hấp thụ."

  imagery:

    info: "Imagery do portfolio-driven và có độ trung thực cao: full-bleed product photography, brand mockups, và editorial compositions đặt trực tiếp trên canvas kem ấm mà không có frames hoặc containers. Ảnh chụp màn hình cho thấy một terracotta product package (Doma microdose blend) như một hero element — màu sắc rực rỡ của chính bức ảnh làm công việc, không khung. Không có decorative illustrations, không stock photography, không abstract graphics. Khi product hoặc brand work xuất hiện, nó được xử lý như một artifact thực: tight crops, góc 4px sắc nét chỉ khi bị giới hạn, nếu không thì chảy ra mép canvas. Icon style (có thể thấy trong UI): thin 1px line icons #484036 hoặc #cacab0, stroke-led, monoline, không filled states. Imagery nặng về ảnh ở cấp portfolio và tối giản icon ở cấp UI."

  layout:

    info: "Layout được max-width contained (1440px) với outer padding rộng rãi (29-68px ngang). Trang đọc như một chuỗi dọc các full-width sections được phân cách bởi 100px+ khoảng thở — không có sidebar, không có grid-of-grids phức tạp. Hero là một centered display headline ở 112px trên cream canvas, thường đi kèm với một full-bleed product hoặc brand image duy nhất bên dưới. Section rhythm nhất quán: display heading → supporting body ở 22px → visual artifact → section tiếp theo. Content được sắp xếp trong single-column stacks cho hero moments, mở rộng thành 2-column text+image pairs cho case studies. Không có masonry, không card grid 3+, không pricing table. Navigation là một top bar tối giản với các link ngang. Mật độ tổng thể spacious và editorial — hệ thống xử lý trang như một portfolio spread in ấn, không phải dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #484036"
    - "background: #faf5eb"
    - "card surface: #ecece4"
    - "border: #666e72"
    - "accent: #cacab0"
    - "primary action: không có distinct CTA color"

    3_example_component_prompts:

    info: "Không quan sát thấy distinct primary action color; dùng các neutral button treatments đã trích xuất thay vì phát minh ra filled CTA color."

    - "Tạo một content card: background #ecece4, radius 4px, padding 29px tất cả các cạnh, border 1px #666e72. Heading ở 45px Surt weight 400, #484036, letter-spacing -1.8px. Body ở 22px Surt weight 400, #484036, line-height 1.35. Không shadow."

    - "Tạo một navigation bar: transparent trên canvas #faf5eb. Logo wordmark ở 22px Surt weight 400, #484036. Links ở 22px Surt weight 400, #d5d5c4 với underline #cacab0 1px, gap 29px giữa các item. Không background, không border, không shadow."

  typographic_philosophy:

    info: "Hệ thống cố tình loại bỏ sự biến thiên weight. Chỉ có weight 400, hierarchy được xây dựng hoàn toàn thông qua kích thước, tracking, và line-height. Display sizes (56-112px) dùng aggressive negative tracking (-0.0400em đến -0.0500em) và compressed line-heights (0.97-0.98) — text xếp chồng như một modernist poster. Body sizes (22-29px) mở ra với positive tracking (0.0110em) và generous line-height (1.35-1.50) — đọc trở nên thoáng đãng và editorial. Weight đơn buộc mọi quyết định typographic phải xoay quanh tỷ lệ, không phải sự nhấn mạnh. Đây là một anti-bold system: sự vắng mặt của độ đậm chính là điểm mấu chốt."

  earth_palette_logic:

    info: "Mọi màu sắc trong hệ thống đều thuộc dải nâu đến xương. Không có xanh, không đỏ, không xanh lá, không chromatic accent, không semantic color coding theo nghĩa truyền thống (không đỏ cho lỗi, không xanh lá cho thành công). Độ ấm là đồng nhất — ngay cả slate 'lạnh' (#666e72) cũng được dùng về mặt cấu trúc cho borders, không bao giờ cho emphasis. Điều này có nghĩa là success/error/warning states, nếu cần, phải được truyền đạt thông qua tông (Roast Ink nhạt hơn/ấm hơn) hoặc thông qua BigDailyShort italic annotation thay vì tín hiệu chromatic. Kỷ luật của bảng màu chính là thương hiệu của nó: 5% colorfulness có nghĩa là 95% warm neutral đang làm tất cả công việc thị giác."

  similar_brands:

    - "**Aether** — Cùng bảng màu neutral ấm đất với một custom grotesque duy nhất đảm nhận toàn bộ giọng điệu, cộng thêm cùng cách tiếp cận editorial large-display-headline"
    - "**Resn** — Cùng aesthetic tối giản với hairline borders, flat surfaces, và cùng paper-on-paper layering không shadows"
    - "**Locomotive (MTL)** — Cùng layout editorial spacious rhythm, oversized display type, và từ chối dùng chromatic brand color — độ ấm của neutrals làm công việc"
    - "**Studio Dumbar** — Cùng kỷ luật single-weight typography và earth-toned palette, với sự phụ thuộc signature vào một bộ nhỏ custom typefaces làm mọi công việc typographic"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-roast-ink: #484036;
          --color-bone-canvas: #faf5eb;
          --color-linen-surface: #ecece4;
          --color-sandstone: #cacab0;
          --color-pebble: #d5d5c4;
          --color-manilla-cream: #f2e9cf;
          --color-slate-border: #666e72;
          --color-charcoal-depth: #33302c;
          --color-obsidian: #212529;
        
          /* Typography — Font Families */
          --font-surt: 'Surt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bigdailyshort: 'BigDailyShort', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 17px;
          --leading-caption: 1.13;
          --tracking-caption: 0.34px;
          --text-body: 22px;
          --leading-body: 1.35;
          --tracking-body: 0.24px;
          --text-subheading: 29px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.29px;
          --text-heading: 45px;
          --leading-heading: 1.03;
          --tracking-heading: -0.45px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 0.98;
          --tracking-heading-lg: -2.24px;
          --text-display: 112px;
          --leading-display: 0.98;
          --tracking-display: -5.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-14: 14px;
          --spacing-29: 29px;
          --spacing-43: 43px;
          --spacing-58: 58px;
          --spacing-68: 68px;
          --spacing-86: 86px;
          --spacing-100: 100px;
          --spacing-121: 121px;
          --spacing-144: 144px;
          --spacing-161: 161px;
          --spacing-232: 232px;
          --spacing-233: 233px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 100px;
          --card-padding: 29px;
          --element-gap: 14px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 4px;
          --radius-images: 4px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-bone-canvas: #faf5eb;
          --surface-linen-surface: #ecece4;
          --surface-manilla-highlight: #f2e9cf;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-roast-ink: #484036;
          --color-bone-canvas: #faf5eb;
          --color-linen-surface: #ecece4;
          --color-sandstone: #cacab0;
          --color-pebble: #d5d5c4;
          --color-manilla-cream: #f2e9cf;
          --color-slate-border: #666e72;
          --color-charcoal-depth: #33302c;
          --color-obsidian: #212529;
        
          /* Typography */
          --font-surt: 'Surt', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-clashdisplay: 'ClashDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bigdailyshort: 'BigDailyShort', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 17px;
          --leading-caption: 1.13;
          --tracking-caption: 0.34px;
          --text-body: 22px;
          --leading-body: 1.35;
          --tracking-body: 0.24px;
          --text-subheading: 29px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.29px;
          --text-heading: 45px;
          --leading-heading: 1.03;
          --tracking-heading: -0.45px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 0.98;
          --tracking-heading-lg: -2.24px;
          --text-display: 112px;
          --leading-display: 0.98;
          --tracking-display: -5.6px;
        
          /* Spacing */
          --spacing-14: 14px;
          --spacing-29: 29px;
          --spacing-43: 43px;
          --spacing-58: 58px;
          --spacing-68: 68px;
          --spacing-86: 86px;
          --spacing-100: 100px;
          --spacing-121: 121px;
          --spacing-144: 144px;
          --spacing-161: 161px;
          --spacing-232: 232px;
          --spacing-233: 233px;
        
          /* Border Radius */
          --radius-md: 4px;
        }