cohere___style_reference:
  info: "> Editorial monograph trên nền giấy kem — mỗi màn hình là một spread, không phải dashboard."

  theme: "light"

  info: "Cohere mang phong cách một ấn phẩm editorial monograph: nền trắng kem, typography gần đen, và các CTA dạng pill tối màu đảm nhiệm toàn bộ hệ thống phân cấp mà không cần trang trí. Dấu ấn là sự tiết chế — một gradient ba màu (coral → violet → blue) chỉ xuất hiện bên trong ảnh chụp và các mảng trang trí, không bao giờ dùng trên UI controls, nhờ đó giao diện giữ được đơn sắc trong khi hình ảnh cung cấp hơi ấm màu sắc. Typography đảm nhiệm phần nặng nhất: Unica77 ở mọi vai trò UI với negative tracking dày, và CohereText display face rộng hơn cho hero headlines, tạo uy quyền editorial thay vì mật độ SaaS. Các component tối giản và tự tin — thẻ ảnh bo góc 22px, border hairline #e5e7eb, actions tối màu — để ảnh chụp, code snippets và nội dung chữ gánh trọng lượng kể chuyện."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Canvas White | `#ffffff` | `--color-canvas-white` | Nền trang chính, bề mặt thẻ, chữ trên nút |"
    info: "| Soft Cream | `#f0eee9` | `--color-soft-cream` | Biến thể nền ấm nhẹ cho các section xen kẽ |"
    info: "| Hairline Mist | `#e5e7eb` | `--color-hairline-mist` | Border mặc định, divider, đường viền thẻ, input strokes |"
    info: "| Silver Rule | `#d9d9dd` | `--color-silver-rule` | Border phụ, nav dividers, separator nhẹ |"
    info: "| Fog | `#93939f` | `--color-fog` | Body text mờ, helper text, nhãn phụ |"
    info: "| Slate Caption | `#75758a` | `--color-slate-caption` | Chữ nav, chú thích nhẹ, nhãn kiểu breadcrumb |"
    info: "| Graphite Body | `#616161` | `--color-graphite-body` | Body text cấp ba, metadata, timestamp |"
    info: "| Press Black | `#212121` | `--color-press-black` | Chữ chính, heading fill, icon stroke — màu tối chủ lực |"
    info: "| Inkwell | `#17171c` | `--color-inkwell` | Bề mặt tối, pill buttons đặc, nền footer, code panels |"
    info: "| Charcoal Depth | `#2e2e2e` | `--color-charcoal-depth` | Accent bề mặt sâu nhất, overlay tint, nền code block |"
    info: "| Coral Glow | `linear-gradient(to right, #ff7759, #7670c5, #4c6ee6)` | `--color-coral-glow` | Gradient trang trí — chỉ xuất hiện trong ảnh washes và điểm nhấn trang trí, không bao giờ trên UI controls |"
    info: "| Iris Wash | `#7670c5` | `--color-iris-wash` | Midstop gradient trang trí — violet chuyển tiếp trong dải ấm-lạnh đặc trưng |"
    info: "| Signal Blue | `#4c6ee6` | `--color-signal-blue` | Endpoint gradient trang trí — đầu lạnh trong gradient đặc trưng, cũng là accent minh họa nhẹ |"
    info: "| Lilac Mist | `#f0dff3` | `--color-lilac-mist` | Highlight wash mềm, tint bề mặt gradient cho feature cards |"
    info: "| Orchid | `#d18ee2` | `--color-orchid` | Accent bão hòa vừa trong washes trang trí và tag backgrounds |"

  tokens___typography:

    unica77___primary_ui_and_body_typeface___weight_400_cho_body__captions__buttons_và_nav__weight_700_cho_subheadings_và_card_titles__các_dạng_hình_học_nhân_văn_tùy_chỉnh_mang_đến_cho_cohere_hơi_ấm_editorial_riêng_biệt_mà_các_system_sans_serif_không_thể_sao_chép__letter_spacing__0_0100em_trên_mọi_kích_thước_thắt_chặt_nhịp_điệu_và_giữ_cho_các_display_sizes_không_bị_thoáng_____font_unica77:
      - "**Thay thế:** Inter, Söhne, hoặc DM Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 12, 14, 16, 18, 24, 32, 48"
      - "**Line height:** 1.20, 1.30, 1.40, 1.50"
      - "**Letter spacing:** -0.0100em"
      - "**Vai trò:** Primary UI and body typeface — weight 400 cho body, captions, buttons và nav; weight 700 cho subheadings và card titles. Các dạng hình học-nhân văn tùy chỉnh mang đến cho Cohere hơi ấm editorial riêng biệt mà các system sans-serif không thể sao chép. Letter-spacing -0.0100em trên mọi kích thước thắt chặt nhịp điệu và giữ cho các display sizes không bị thoáng."

    coheretext___display_only_face_cho_hero_headline__line_height_cố_định_ở_1_00_và_tracking_ở__0_0200em_tạo_sự_hiện_diện_wordmark_hoành_tráng__xếp_chặt___điều_đầu_tiên_khách_truy_cập_đọc_nằm_ở_tỷ_lệ_này__chỉ_dành_riêng_cho_câu_tuyên_bố_lớn_nhất_trên_mỗi_trang__không_bao_giờ_dùng_dưới_48px_____font_coheretext:
      - "**Thay thế:** GT Sectra Display hoặc Tiempos Headline"
      - "**Weights:** 400"
      - "**Kích thước:** 60, 72"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.0200em"
      - "**Vai trò:** Display-only face cho hero headline. Line-height cố định ở 1.00 và tracking ở -0.0200em tạo sự hiện diện wordmark hoành tráng, xếp chặt — điều đầu tiên khách truy cập đọc nằm ở tỷ lệ này. Chỉ dành riêng cho câu tuyên bố lớn nhất trên mỗi trang; không bao giờ dùng dưới 48px."

    coheremono___monospaced_accent_cho_version_tags__metadata_dạng_code__và_micro_labels_trong_nav__kích_thước_8px_với_0_0200em_tracking_tạo_cảm_giác_kỹ_thuật__gần_như_đóng_dấu__tương_phản_với_primary_face_mang_phong_cách_editorial_serif_adjacent_____font_coheremono:
      - "**Thay thế:** JetBrains Mono hoặc IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 8, 14"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 0.0200em"
      - "**Vai trò:** Monospaced accent cho version tags, metadata dạng code, và micro-labels trong nav. Kích thước 8px với 0.0200em tracking tạo cảm giác kỹ thuật, gần như đóng dấu, tương phản với primary face mang phong cách editorial serif-adjacent."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | -0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.3 | -0.32px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -0.48px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -1.44px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 144 | 144px | `--spacing-144` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 22px |"
      info: "| images | 22px |"
      info: "| buttons | 9999px |"
      info: "| small_ui | 4px |"
      info: "| nav_elements | 8px |"

    layout:

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

  components:

    dark_pill_primary_button:
      vai_trò: "Primary action — nút đặc duy nhất trong hệ thống"

      info: "Pill đặc #17171c với border-radius 9999px. Chữ trắng (#ffffff) Unica77 16px weight 400. Padding ngang 24px, padding dọc 12px. Không border nhìn thấy, không shadow — phần đặc tối trên nền trắng là toàn bộ tín hiệu thị giác. Một instance CTA duy nhất trên mỗi vùng viewport."

    underline_text_link:
      vai_trò: "Secondary action / navigation affordance"

      info: "Kế thừa màu chữ #212121, Unica77 16px weight 400. Gạch chân 1px solid #212121, offset 4px dưới baseline. Không background, không border, không padding. Nằm inline với body text hoặc đứng độc lập như secondary CTA bên cạnh dark pill."

    ghost_nav_button:
      vai_trò: "Tertiary nav-level action (ví dụ: 'Sign in')"

      info: "Background trong suốt, chữ #212121 Unica77 14px weight 400, không border, padding dọc 8px / ngang 12px. Chuyển thành pill đặc #17171c khi chuyển đổi thành CTA (xem Dark Pill Primary Button)."

    feature_image_card:
      vai_trò: "Thẻ nội dung lớn hướng media, dùng trong các product showcase sections"

      info: "Border-radius 22px ở cả bốn góc. Ảnh full-bleed hoặc gradient wash lấp đầy thẻ; không border nhìn thấy. Các panel overlay bên trong (cho code snippets hoặc quotes) nằm trên nền #17171c với chữ trắng. Khoảng cách giữa các thẻ: 16-24px."

    outlined_content_card:
      vai_trò: "Thẻ nhỏ gọn cho feature lists, product specs, pricing tiers"

      info: "Bề mặt trắng (#ffffff), border 1px solid #e5e7eb, border-radius 22px. Padding trong 24-32px. Headings ở Unica77 24px weight 700 #212121. Không shadow — hairline border là xử lý cạnh duy nhất."

    top_navigation_bar:
      vai_trò: "Primary site navigation"

      info: "Nền trắng, nằm trực tiếp trên canvas, không shadow hay border. Logo trái, nav links giữa, ghost button + dark pill phải. Nav links ở Unica77 14px weight 400 #212121 với padding dọc 8px / ngang 16px và border-radius 8px trên hover backgrounds. Căn giữa theo chiều dọc ở chiều cao ~64px."

    trust_logo_strip:
      vai_trò: "Social proof — hàng thương hiệu 'Trusted by'"

      info: "Section heading ở Unica77 16px weight 400 #212121 căn giữa phía trên. Logo thương hiệu hiển thị đơn sắc #212121 trên nền trắng, phân bố đều trong một hàng với khoảng cách 40-60px. Không card containers, không border — logo nổi trên canvas."

    feature_icon_block:
      vai_trò: "Ba cột value proposition (Security / Deployment / Customization)"

      bố_cục_xếp_chồng: "icon đường nét mảnh ở 48-64px với stroke #212121, khoảng cách 16px đến nhãn bên dưới. Nhãn ở Unica77 18px weight 400 #212121. Không background, không card, không border — icon và nhãn nằm trực tiếp trên nền trắng."

    code_snippet_panel:
      vai_trò: "Code nhúng hoặc preview phản hồi AI trong thẻ"

      info: "Nền tối #17171c, border-radius 12px, chữ trắng #ffffff Unica77 14px. Padding trong 16-24px. Thường xuất hiện dưới dạng inset overlay trên thẻ ảnh lớn hơn."

    footer_multi_column:
      vai_trò: "Site-wide footer với các nhóm link và newsletter"

      info: "Nền tối #17171c trải rộng toàn chiều rộng. Column headers chữ trắng Unica77 16px weight 700 với glyph mũi tên nhỏ. Link items chữ trắng Unica77 14px weight 400 với khoảng cách dọc 12px. Newsletter input: background trong suốt, border dưới 1px solid trắng, placeholder text trắng, icon submit mũi tên. Social icons góc dưới phải dưới dạng stroke đơn sắc trắng 20px."

    newsletter_input:
      vai_trò: "Thu thập email trong footer"

      info: "Background trong suốt, không box bao quanh. Một border dưới 1px solid #ffffff. Placeholder text 'Enter your email' ở Unica77 14px weight 400 trắng. Icon submit mũi tên → bên phải, rộng 16px, stroke trắng."

    hero_headline:
      vai_trò: "Câu tuyên bố mở đầu trang"

      info: "CohereText weight 400 ở 60-72px, line-height 1.00, letter-spacing -0.0200em, màu #212121. Căn giữa trên canvas. Sự xếp chặt và display weight tạo sự hiện diện như poster in ấn — không trang trí, không gạch chân, không màu."

    gradient_photography_wash:
      vai_trò: "Xử lý ảnh hero trang trí"

      info: "Ảnh editorial full-bleed với overlay gradient mềm coral→violet→blue (linear-gradient to right, #ff7759 → #7670c5 → #4c6ee6). Border-radius 22px khi dùng dưới dạng thẻ chứa. Hoạt động như brand expression, không phải interface."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Unica77 weight 400 cho mọi body, nav, caption và button text — chỉ dùng weight 700 cho card titles và section labels."
      - "Dùng border-radius 9999px cho mọi button, tag và pill-shaped control — giao diện Cohere không bao giờ dùng nút vuông hoặc bo góc vừa phải."
      - "Dùng border-radius 22px cho mọi card, image và content surface — đây là độ mềm đặc trưng của hệ thống."
      - "Căn giữa hero headline ở CohereText 60-72px / line-height 1.00 với -0.0200em tracking — không bao giờ căn trái câu tuyên bố chính."
      - "Giữ gradient màu (coral → violet → blue) chỉ trong photography washes và decorative overlays; UI controls giữ đơn sắc."
      - "Dùng hairline 1px solid #e5e7eb cho mọi card và divider borders — không bao giờ dùng drop shadows để phân cách bề mặt."
      - "Duy trì nhịp dọc 80px giữa các section chính; cards trong một section dùng khoảng cách 16-24px."

    không_nên_làm:
      - "Không áp dụng gradient đặc trưng lên buttons, links hoặc bất kỳ interactive control nào — nó chỉ thuộc về hình ảnh."
      - "Không dùng drop shadows trên cards hoặc panels — Cohere phân cách bề mặt bằng hairline borders và độ tương phản nền, không bao giờ dùng elevation."
      - "Không dùng màu từ gradient làm text fills — #ff7759, #7670c5 và #4c6ee6 không bao giờ dùng cho UI text hoặc icons."
      - "Không đặt type dưới 12px hoặc trên 72px — hệ thống không có nhu cầu dùng oversize hoặc micro type."
      - "Không dùng hero headlines căn trái — giọng văn editorial của Cohere yêu cầu display text căn giữa."
      - "Không giới thiệu giá trị border-radius mới; dùng 4px cho small UI, 8px cho nav elements, 22px cho cards, 9999px cho pills — đó là bộ hoàn chỉnh."
      - "Không dùng nút CTA có màu — primary action luôn là fill #17171c với chữ trắng; secondary actions là underline links."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#ffffff` | Nền trang cơ bản, bề mặt mặc định cho mọi nội dung |"
    info: "| 2 | Warm Cream | `#f0eee9` | Nền section thay thế để phân cách thị giác mà không cần độ tương phản |"
    info: "| 3 | Lilac Wash | `#f0dff3` | Bề mặt màu nhẹ cho feature cards và decorative blocks |"
    info: "| 4 | Code Panel | `#17171c` | Bề mặt tối inset cho code snippets, preview phản hồi AI và dark pill button |"
    info: "| 5 | Footer | `#17171c` | Bề mặt tối full-bleed cho site footer |"

  elevation:

    info: "Cohere cố tình tránh drop shadows như một cơ chế phân cách. Hệ thống phân cấp bề mặt được truyền đạt qua sự thay đổi màu nền (trắng → kem → lilac → mực) và border hairline 1px tại #e5e7eb. Bề mặt tối duy nhất 'nâng lên' về mặt thị giác là code panel hoặc button #17171c, đạt được sự nổi bật thông qua tương phản tông màu thay vì shadow."

  imagery:

    info: "Photography mang phong cách editorial và con người — ảnh full-bleed lifestyle về người trong không gian làm việc, một phụ nữ mặc áo lụa xanh lá bên laptop, cận cảnh sản phẩm thân mật. Ảnh được xử lý với gradient wash màu mềm (coral → violet → blue) trải dài trên bề mặt, mang đến cho mọi bức ảnh hơi ấm đặc trưng của Cohere. Cards dùng bo góc 22px và thường chứa code panels tối hoặc overlay phản hồi AI đặt chồng lên ảnh. Không có hệ thống minh họa phẳng — thương hiệu dựa vào photography và nhấn mạnh typographic thay vì đồ họa vẽ tay. Icons là thin-line strokes tối giản, đơn sắc, weight 1.5px."

  layout:

    info: "Max-width ~1200px căn giữa, với các section full-bleed xen kẽ giữa nền trắng và kem. Hero là chồng text căn giữa: display headline → subtitle → primary pill + underline link, không có hero image. Bên dưới hero, một hàng thẻ ảnh hai cột (product screenshot trái, lifestyle photo phải) với khoảng cách 16-24px. Trust logo strip theo sau dưới dạng một hàng căn giữa. Feature section dùng bố cục 3 cột icon block (Security / Deployment / Customization). Footer là dải tối full-bleed với lưới link 5 cột cộng cột newsletter bên trái. Navigation là top bar tối giản — logo trái, links giữa, ghost button + dark pill phải. Nhịp dọc dùng 80px giữa các section chính, card padding trong 24-32px."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #212121"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "accent: #ff7759 (chỉ gradient trang trí, không dùng cho UI)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"
    info: "Không quan sát thấy màu primary action riêng biệt; dùng các xử lý nút trung tính đã trích xuất thay vì phát minh ra màu CTA đặc."
    - "Tạo hero headline: căn giữa trên nền trắng, CohereText 72px weight 400, màu #212121, line-height 1.00, letter-spacing -1.44px. Một câu tuyên bố, không trang trí."
    - "Tạo feature image card: border-radius 22px, ảnh full-bleed, code panel tối #17171c đặt inset với padding 24px và chữ trắng Unica77 14px, border-radius 12px trên code panel."
    - "Tạo outlined content card: nền trắng, border 1px solid #e5e7eb, border-radius 22px, padding trong 32px, heading ở Unica77 24px weight 700 #212121, body ở Unica77 16px weight 400 #212121."
    - "Tạo top navigation bar: nền trắng, không border, logo bên trái, ba nav links căn giữa ở Unica77 14px #212121 với padding dọc 8px, ghost button 'Sign in' và dark pill #17171c 'Request a demo' bên phải."

  gradient_system:

    info: "Cohere có chính xác một signature gradient: linear-gradient(to right, #ff7759, #7670c5, #4c6ee6). Nó chỉ xuất hiện dưới dạng overlay trên ảnh và làm background wash nhẹ trên các section trang trí. Gradient chảy từ ấm sang lạnh (coral → violet → blue) và không bao giờ được dùng trên các interactive elements. Một biến thể trang trí thứ hai áp dụng cùng các stop ở 78° cho bố cục đường chéo. Giữ gradient này như brand expression, không phải UI accent."

  monochrome_discipline:

    info: "Giao diện là 99% achromatic. Năm màu sắc phát hiện (#f0dff3, #d18ee2, #4c6ee6, #ff7759 và violet giữa) đều xuất hiện trong các ngữ cảnh nav-adjacent hoặc minh họa với tần suất rất thấp. Quy tắc thiết kế là tuyệt đối: không có màu sắc nào chạm vào bất kỳ text, button, border hay icon nào. Màu sắc tồn tại trong thế giới của Cohere dưới dạng bầu không khí nhiếp ảnh, không phải tín hiệu giao diện."

  similar_brands:

    - "**Linear** — Cùng giao diện đơn sắc tối giản với một custom typeface duy nhất và dark CTAs dạng pill trên nền trắng"
    - "**Anthropic** — Cách tiếp cận editorial tương tự cho một thương hiệu AI — bảng màu tiết chế, display headlines lớn, hairline borders và hero sections dẫn dắt bằng photography"
    - "**Notion** — Cùng hình học pill-button và thực hành để biến thể nền kem mềm hoặc xám ấm tạo điểm ngắt section mà không cần tương phản nặng"
    - "**Vercel** — Cùng micro-type accent monospaced, hairline borders #e5e7eb và dark filled button là primary action duy nhất"
    - "**Stripe** — Cùng triết lý gradient-như-minh họa — màu sắc chỉ giới hạn trong decorative washes và hình ảnh, không bao giờ trên functional UI"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-cream: #f0eee9;
          --color-hairline-mist: #e5e7eb;
          --color-silver-rule: #d9d9dd;
          --color-fog: #93939f;
          --color-slate-caption: #75758a;
          --color-graphite-body: #616161;
          --color-press-black: #212121;
          --color-inkwell: #17171c;
          --color-charcoal-depth: #2e2e2e;
          --color-coral-glow: #ff7759;
          --gradient-coral-glow: linear-gradient(to right, #ff7759, #7670c5, #4c6ee6);
          --color-iris-wash: #7670c5;
          --color-signal-blue: #4c6ee6;
          --color-lilac-mist: #f0dff3;
          --color-orchid: #d18ee2;
        
          /* Typography — Font Families */
          --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheretext: 'CohereText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheremono: 'CohereMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.48px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 22px;
          --radius-images: 22px;
          --radius-buttons: 9999px;
          --radius-smallui: 4px;
          --radius-navelements: 8px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-warm-cream: #f0eee9;
          --surface-lilac-wash: #f0dff3;
          --surface-code-panel: #17171c;
          --surface-footer: #17171c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-white: #ffffff;
          --color-soft-cream: #f0eee9;
          --color-hairline-mist: #e5e7eb;
          --color-silver-rule: #d9d9dd;
          --color-fog: #93939f;
          --color-slate-caption: #75758a;
          --color-graphite-body: #616161;
          --color-press-black: #212121;
          --color-inkwell: #17171c;
          --color-charcoal-depth: #2e2e2e;
          --color-coral-glow: #ff7759;
          --color-iris-wash: #7670c5;
          --color-signal-blue: #4c6ee6;
          --color-lilac-mist: #f0dff3;
          --color-orchid: #d18ee2;
        
          /* Typography */
          --font-unica77: 'Unica77', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheretext: 'CohereText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-coheremono: 'CohereMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.24px;
          --text-heading: 32px;
          --leading-heading: 1.3;
          --tracking-heading: -0.32px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.48px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -1.44px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-144: 144px;
          --spacing-160: 160px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
          --radius-full: 9999px;
        }