angellist___style_reference:
  info: "> midnight greenhouse with violet dawn — một khoảng không teal gần như đen, nơi chữ serif màu mint-green phát sáng và những nút lavender nở rộ như điểm sáng ấm duy nhất"

  theme: "dark"

  info: "AngelList vận hành như một nhà kính lúc nửa đêm: nền canvas teal gần như đen (#001d21) là mặt sàn, chữ display serif màu mint-green (#e0fee6) phát sáng như thể phát quang sinh học, và một điểm nhấn lavender-violet (#cdcbff) xuyên suốt giao diện như ánh bình minh. Hệ thống thị giác ưu tiên dark — toàn bộ trang nằm trên nền teal đậm, bao gồm card, navigation và footer — tạo ra bầu không khí ngân hàng tư nhân về đêm thay vì light mode SaaS điển hình. Typography là ngôi sao: một custom serif display face hiển thị số liệu và headline copy ở kích thước cực lớn (90–216px) với negative tracking dày đặc, trong khi một sans trung tính xử lý toàn bộ UI chrome. Các bề mặt phẳng với elevation tối thiểu; chiều sâu đến từ sự chuyển tông giữa các sắc teal gần như đen và các dải full-bleed màu đất thỉnh thoảng xuất hiện (olive grove, mint wash). Photography mang tông ấm, phong cách lifestyle — con người trong ánh sáng tự nhiên, đang làm việc — được đặt trong các card bo tròn nằm trên nền canvas tối."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Abyssal Teal | `#001d21` | `--color-abyssal-teal` | Page canvas, hero background, navigation surface, footer, primary text trên nền sáng — khoảng không mà mọi thứ nằm trên đó |"
    info: "| Deep Reef | `#002b31` | `--color-deep-reef` | Elevated card surfaces, secondary buttons, filled chip backgrounds — cao hơn canvas một tông để tạo chiều sâu tinh tế mà không rời khỏi họ dark |"
    info: "| Bio Mint | `#e0fee6` | `--color-bio-mint` | Display headlines, hero copy, chữ số lớn — mint phát quang mang bản sắc thương hiệu trên nền canvas tối |"
    info: "| Lavender Dawn | `#cdcbff` | `--color-lavender-dawn` | Violet text accent cho link, tag và các cụm từ ngắn cần nhấn mạnh. Không nâng lên làm màu CTA chính |"
    info: "| Vivid Iris | `#3a25f5` | `--color-vivid-iris` | Outlined link borders, chromatic accent borders, text link đã chọn/active — violet bão hòa cao cho những khoảnh khắc cần một điểm nhấn điện sắc nét hơn |"
    info: "| Pale Periwinkle | `#bdbbff` | `--color-pale-periwinkle` | Secondary button fill, hover state cho các hành động lavender — phiên bản nhạt hơn của violet chính để tạo bước chuyển tông |"
    info: "| Mint Whisper | `#cdeed3` | `--color-mint-whisper` | Navigation accents, stroke details, secondary mint highlights — phiên bản giảm bão hòa của mint headline cho các chi tiết giao diện tinh tế |"
    info: "| Olive Grove | `#5d5337` | `--color-olive-grove` | Nền section full-bleed màu đất, warm break-band — mang đến hơi ấm hữu cơ bất ngờ cho hệ thống tối |"
    info: "| Dark Olive | `#544a2e` | `--color-dark-olive` | Border và text trong các section tông olive, link borders trên warm bands |"
    info: "| Fog Veil | `#f1f3f2` | `--color-fog-veil` | Light surface break, navigation pill backgrounds, light-mode card surfaces — màu trung tính xuất hiện khi hệ thống tạm thời nổi lên light |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Outlined button text, light card surfaces, inverted text trên nền tối, image card content backgrounds |"
    info: "| Graphite | `#1d2a29` | `--color-graphite` | Subtle dark borders, hairline dividers trong các section tối |"
    info: "| Steel | `#68706f` | `--color-steel` | Body text trên nền sáng, muted helper text, secondary copy |"
    info: "| Ash Border | `#ccd5d6` | `--color-ash-border` | Hairline borders trên mọi bề mặt, card outlines, divider lines, các cạnh cấu trúc tinh tế |"
    info: "| Pewter | `#e1e3e3` | `--color-pewter` | Secondary text trên light cards, muted body copy, icon fills trong ngữ cảnh trung tính |"

  tokens___typography:

    angellistdisplay___display_serif___dành_riêng_cho_hero_headlines__section_titles_và_các_câu_số_lớn_ví_dụ__171b__chỉ_có_một_weight_duy_nhất_ở_400_với_negative_tracking_cực_mạnh__0_04em_đến__0_05em_tạo_ra_chất_điêu_khắc_nén_chặt__một_serif_ở_quy_mô_fintech_là_phá_vỡ_quy_ước__sự_lựa_chọn_này_thể_hiện_sự_tự_tin_về_mặt_biên_tập_thay_vì_sự_vô_cảm_của_utility_app__thay_thế___gt_sectra___tiempos_headline__hoặc__dm_serif_display_____font_angellistdisplay:
      - "**Thay thế:** GT Sectra"
      - "**Weights:** 400"
      - "**Kích thước:** 28px, 38px, 60px, 90px, 112px, 216px"
      - "**Line height:** 0.90–1.30"
      - "**Letter spacing:** -0.04em ở 60–112px, -0.05em ở 216px"
      - "**Vai trò:** Display serif — dành riêng cho hero headlines, section titles và các câu số lớn (ví dụ $171B). Chỉ có một weight duy nhất ở 400 với negative tracking cực mạnh (-0.04em đến -0.05em) tạo ra chất điêu khắc nén chặt. Một serif ở quy mô fintech là phá vỡ quy ước; sự lựa chọn này thể hiện sự tự tin về mặt biên tập thay vì sự vô cảm của utility-app. Thay thế: 'GT Sectra', 'Tiempos Headline', hoặc 'DM Serif Display'."

    angellist___primary_sans_cho_toàn_bộ_ui__body__navigation__button__card_và_micro_copy__các_weight_chuyển_đổi_rõ_ràng_từ_400_body_lên_600_subheadings_đến_700_emphasis__line_height_cao_lên_đến_2_64_cho_text_quá_khổ_và_tabular_numerals_biến_nó_thành_một_interface_face_thực_thụ__font_features__lnum__và__tnum__đảm_bảo_độ_rộng_chữ_số_nhất_quán_trong_ngữ_cảnh_tài_chính__thay_thế___inter___gt_america__hoặc__s_hne_____font_angellist:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 11px, 12px, 13px, 14px, 16px, 18px, 90px, 216px"
      - "**Line height:** 1.10–2.64"
      - "**Letter spacing:** -0.005em ở 16px, -0.003em ở 14px, -0.002em ở 12px, 0.01em ở small caps, 0.08em cho label"
      - "**OpenType features:** `\"lnum\", \"ss01\", \"tnum\"`"
      - "**Vai trò:** Primary sans cho toàn bộ UI, body, navigation, button, card và micro-copy. Các weight chuyển đổi rõ ràng từ 400 (body) lên 600 (subheadings) đến 700 (emphasis). Line-height cao (lên đến 2.64 cho text quá khổ) và tabular numerals biến nó thành một interface face thực thụ. Font features 'lnum' và 'tnum' đảm bảo độ rộng chữ số nhất quán trong ngữ cảnh tài chính. Thay thế: 'Inter', 'GT America', hoặc 'Söhne'."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | 0.08px | `--text-caption` |"
      info: "| heading-sm | 18px | 1.4 | -0.005px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.25 | -0.04px | `--text-heading` |"
      info: "| heading-lg | 38px | 1.2 | -0.04px | `--text-heading-lg` |"
      info: "| display | 90px | 1.1 | -0.05px | `--text-display` |"
      info: "| display-xl | 216px | 0.9 | -0.05px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "thoải mái"

    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: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 9999px |"
      info: "| cards | 4px |"
      info: "| pills | 9999px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    lavender_filled_button:
      vai_trò: "Primary action CTA (header, high-emphasis)"

      info: "Filled button với nền #cdcbff, text #001d21, radius 9999px (pill), padding 10px 18px, 14px angellist weight 500. Text là màu abyssal teal tối, tạo độ tương phản cao, dễ đọc trên nền violet mềm mại. Được sử dụng một cách tiết kiệm — chỉ một hành động quan trọng nhất trên mỗi section."

    outlined_ghost_button:
      vai_trò: "Secondary action CTA trên nền canvas tối"

      info: "Nền trong suốt với border 1px #ffffff, text #e0fee6 (Bio Mint), radius 9999px, padding 10px 18px, 14px angellist weight 500. Nằm trên nền canvas teal tối như CTA mặc định ở cấp độ body. Text mint + border trắng = signature dark-mode button."

    header_contact_sales_button:
      vai_trò: "CTA cố định ở góc trên bên phải"

      info: "Lavender filled button (#cdcbff) với text #001d21, nhỏ hơn một chút so với CTA ở body. Luôn hiển thị trong sticky header, tương phản với thanh navigation tối."

    navigation_pill:
      vai_trò: "Container navigation trung tâm ở đầu trang"

      info: "Container pill bo tròn (radius 9999px) với nền #f1f3f2 hoặc trong mờ, chứa các link Products, Solutions, Pricing, Resources. Các link sử dụng 14px angellist weight 400 màu #e0fee6 mint. Mỗi nav item có một chevron nhỏ để chỉ dropdown."

    product_card:
      vai_trò: "Feature card trong grid 4 cột (Venture Funds, SPVs, Scout Funds, Digital Subscriptions)"

      info: "Card photography full-bleed trên nền canvas tối. Ảnh lấp đầy phần trên của card với radius 4px, tiếp theo là text headline trắng (16px weight 600) và mô tả (13px weight 400 màu #e1e3e3). Link mũi tên chỉ về bên phải màu mint. Không có card border hiển thị — các cạnh của photography xác định ranh giới card."

    section_divider:
      vai_trò: "Horizontal rule giữa các section"

      info: "Đường line mỏng 1px màu #ccd5d6 trải dài theo chiều rộng nội dung, dùng để phân cách grid sản phẩm với section logo đối tác."

    partner_logo_bar:
      vai_trò: "Dải tin cậy/uy tín"

      info: "Một hàng duy nhất gồm 5 logo đối tác, căn giữa trên nền canvas tối, hiển thị dưới dạng trắng/đơn sắc. Không có card nền — logo nổi trực tiếp trên #001d21. Một outlined link button hình pill nằm bên dưới: 'Our premier partnership program…' kèm mũi tên."

    fund_description_banner:
      vai_trò: "Section sáng full-bleed với chân dung hình tròn"

      info: "Nền mint nhạt (#cdeed3 hoặc green wash nhạt) chứa một đoạn mô tả ngắn và một text link được gạch chân, với 3–4 avatar hình tròn cắt ra ở cạnh phải. Tạo ra một điểm ngắt thị giác khỏi nền canvas tối bằng cách sử dụng họ mint của thương hiệu."

    by_the_numbers_display_block:
      vai_trò: "Section hiển thị số liệu lớn"

      info: "Nền olive (#5d5337) full-bleed. Cột trái: section label, headline ('Fueling innovation') bằng angellistDisplay ở 90px màu mint/nhạt, và body copy bằng text nhạt. Cột phải: hiển thị số liệu hoành tráng (ví dụ '$171B') ở 216px bằng angellistDisplay, kèm caption bên dưới ('Assets on platform'). Chữ số serif quá khổ trên nền đất là khoảnh khắc ấn tượng nhất của hệ thống."

    announcement_chip:
      vai_trò: "Link eyebrow trên hero (ví dụ 'Explore the Fund Benchmarks Report 2025')"

      info: "Pill tối tinh tế (nền #002b31) với text #e0fee6 mint ở 12–13px weight 400, radius 9999px, padding 4px 12px. Bao gồm biểu tượng mũi tên phải. Nằm phía trên hero headline như một teaser điều hướng."

    inverted_light_cta:
      vai_trò: "CTA xuất hiện trên các section sáng/mint"

      info: "Outlined button với border #002b31 và text #002b31, radius 9999px, nằm trên nền xanh nhạt (#cdeed3). Đảo ngược ghost button dark-mode tiêu chuẩn để sử dụng trên bề mặt sáng hiếm hoi."

  do_s_and_don_ts:

    do:
      - "Sử dụng #001d21 làm canvas mặc định cho tất cả full-page layouts; teal tối là bản sắc của hệ thống, không phải là một theme toggle."
      - "Hiển thị display headlines bằng angellistDisplay weight 400 ở 60–216px với letter-spacing -0.04em đến -0.05em; serif nén chặt là khoảnh khắc dễ nhận biết nhất của thương hiệu."
      - "Sử dụng #e0fee6 (Bio Mint) cho tất cả text và display type nằm trên nền canvas tối; không bao giờ dùng trắng tinh khiết cho primary text trên #001d21."
      - "Áp dụng radius 9999px cho tất cả button, chip và navigation containers; radius 4px cho content cards. Không pha trộn các bán kính trung gian."
      - "Sử dụng filled button #cdcbff (Lavender Dawn) cho một primary action duy nhất trên mỗi section; kết hợp với ghost outlined button trắng/mint cho secondary actions."
      - "Đặt font-feature-settings thành 'lnum', 'ss01', 'tnum' trên tất cả text rendering; tabular numerals rất quan trọng cho dữ liệu tài chính."
      - "Phân cách các section bằng khoảng cách dọc 80px và đường divider mỏng 1px #ccd5d6 trên nền canvas tối."

    don_t:
      - "Không thêm drop shadow ở bất kỳ đâu trong giao diện; chiều sâu chỉ đến từ sự chuyển tông giữa #001d21 và #002b31."
      - "Không sử dụng trắng tinh khiết (#ffffff) làm body text trên nền canvas tối; sử dụng #e0fee6 (Bio Mint) cho primary text và #e1e3e3 (Pewter) cho secondary."
      - "Không áp dụng border radius trung gian (8px, 12px) cho button hoặc chip; hệ thống là nhị phân: 4px cho card, 9999px cho các phần tử tương tác."
      - "Không sử dụng multi-color gradient làm nền trang hoặc section; nó chỉ là một brand swatch trang trí, không bao giờ là surface treatment."
      - "Không đặt nhiều hơn một filled lavender (#cdcbff) CTA trên mỗi section; violet nên cảm giác như một điểm ấm duy nhất, không bị rải rác."
      - "Không sử dụng angellistDisplay cho body copy hoặc UI labels; chỉ dành riêng cho display-scale headlines (60px+) và các câu số."
      - "Không đặt light-mode làm mặc định; hệ thống ưu tiên dark. Các bề mặt sáng (#f1f3f2, #cdeed3) chỉ xuất hiện như các break bands có chủ đích, không phải là page backgrounds."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Abyssal Teal | `#001d21` | Base page canvas — khoảng không teal tối lấp đầy viewport |"
    info: "| 2 | Deep Reef | `#002b31` | Card và button surface — elevation tinh tế trong họ dark |"
    info: "| 3 | Fog Veil | `#f1f3f2` | Light break surface — navigation pill, các section light-band thỉnh thoảng |"
    info: "| 4 | Olive Grove | `#5d5337` | Dải full-bleed màu đất — section tương phản ấm |"

  elevation:

    - "**Product Cards:** `không — các cạnh photography phẳng trên nền canvas tối xác định ranh giới card mà không cần shadow`"
    - "**Tất cả UI elements:** `không — hệ thống tránh hoàn toàn drop shadows`"

  imagery:

    info: "Photography mang phong cách lifestyle ấm áp, ánh sáng tự nhiên: con người làm việc với điện thoại, trong các cuộc họp, ngoài trời. Ảnh full-bleed trong card với góc bo 4px, không bao giờ được mask thành hình tròn. Tông màu là golden-hour ấm áp tương phản với nền canvas teal mát mẻ — một sự căng thẳng ấm/lạnh có chủ đích. Fund description banner sử dụng avatar hình tròn cắt ra cho khuôn mặt. Không có product screenshots hoặc 3D renders trừu tượng; photography mang tất cả hơi ấm con người. Hình ảnh phi nhiếp ảnh duy nhất là một multi-color gradient swatch xuất hiện như một brand element trang trí."

  layout:

    info: "Full-bleed dark canvas với nội dung căn giữa, max-width 1280px. Hero là một khối text căn trái (headline + subhead + CTA) trên khoảng không tối, không có hero image — typography là ngôi sao. Bên dưới: grid product card 4 cột bằng nhau với gutter rộng. Một đường divider mỏng phân cách dải logo đối tác (một hàng căn giữa). Sau đó là một light mint band full-bleed với text bên trái, avatar bên phải. Cuối cùng, một olive section full-bleed với bố cục 2 cột: text mô tả bên trái, số liệu hoành tráng bên phải. Navigation là một pill căn giữa nổi trong header, không phải thanh full-width. Section gaps là 80px. Nhịp điệu là: tối → tối → tối → light break → tối → warm break → tối."

  gradient_system:

    info: "Một multi-stop gradient đặc trưng duy nhất tồn tại: linear-gradient(195.85deg, #6258ff, #e06ab2, #fb8569, #ffb1b1, #cdcbff, #7e6f4a, #32607f, #fde8b5). Nó quét từ violet rực rỡ qua hồng, coral, lavender, olive, xanh thép, đến kem. Đây không phải là background gradient mà là một brand swatch trang trí — được sử dụng như một visual element mỏng để thể hiện toàn bộ dải màu sắc mà AngelList hoạt động, tương phản với dark UI vốn dĩ hạn chế."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "Canvas: #001d21 (Abyssal Teal)"
    - "Text trên nền tối: #e0fee6 (Bio Mint)"
    - "Body/muted text: #68706f (Steel) trên nền sáng, #e1e3e3 (Pewter) trên nền tối"
    - "Border/hairline: #ccd5d6 (Ash Border)"
    - "primary action: #002b31 (filled action)"
    - "Accent/border: #3a25f5 (Vivid Iris) — outlined links"

    info: "Example Component Prompts:"
    - "Tạo một Primary Action Button: nền #002b31, text #ffffff, radius 9999px, padding pill nhỏ gọn. Sử dụng filled treatment này cho CTA chính."
    - "Xây dựng một product card grid (4 cột): Mỗi card có một ảnh lifestyle tông ấm full-bleed với radius 4px ở trên, sau đó là headline 16px weight 600 #ffffff, mô tả 13px weight 400 #e1e3e3, và link mũi tên #e0fee6. Không có card border, không shadow."
    - "Tạo một section 'by the numbers': nền #5d5337 full-bleed, bố cục hai cột. Bên trái: headline 90px angellistDisplay #e0fee6, body text 16px màu #e1e3e3. Bên phải: câu số 216px angellistDisplay màu #e0fee6, letter-spacing -0.05em, line-height 0.9."
    - "Xây dựng một navigation pill: container radius 9999px với nền #f1f3f2 hoặc tối trong mờ, chứa 4 nav items ở 14px angellist weight 400 màu #e0fee6, mỗi item có một chevron nhỏ."
    - "Tạo một fund description banner: nền mint nhạt #cdeed3, text mô tả căn trái với link #002b31 được gạch chân, bên phải hiển thị 3-4 avatar hình tròn cắt ra, chồng lên cạnh section."

  similar_brands:

    - "**Mercury** — Cùng thẩm mỹ tài chính dark-teal với nền canvas tối full-bleed và photography tông ấm; cả hai đều sử dụng một màu nhấn hạn chế duy nhất cho các hành động."
    - "**Plaid** — Fintech dark-mode với display type lớn, elevation tối thiểu và nền gần như đen sâu; cả hai đều để typography đảm nhận hệ thống phân cấp mà không cần phân lớp bề mặt."
    - "**Brex** — Canvas tối táo bạo với display type số liệu/thống kê quá khổ và card elevation tối thiểu; cả hai đều coi dữ liệu tài chính là tâm điểm thị giác."
    - "**Linear** — Product UI dark-mode với navigation và button hình pill, letter-spacing chặt trên type lớn, và bảng màu gần như đơn sắc với một màu nhấn duy nhất."
    - "**Arc** — Giao diện tài chính dark-canvas với pill navigation, photography ấm tương phản canvas mát, và hệ thống CTA một màu nhấn hạn chế."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-abyssal-teal: #001d21;
          --color-deep-reef: #002b31;
          --color-bio-mint: #e0fee6;
          --color-lavender-dawn: #cdcbff;
          --color-vivid-iris: #3a25f5;
          --color-pale-periwinkle: #bdbbff;
          --color-mint-whisper: #cdeed3;
          --color-olive-grove: #5d5337;
          --color-dark-olive: #544a2e;
          --color-fog-veil: #f1f3f2;
          --color-paper-white: #ffffff;
          --color-graphite: #1d2a29;
          --color-steel: #68706f;
          --color-ash-border: #ccd5d6;
          --color-pewter: #e1e3e3;
        
          /* Typography — Font Families */
          --font-angellistdisplay: 'angellistDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-angellist: 'angellist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.08px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.005px;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --tracking-heading: -0.04px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.04px;
          --text-display: 90px;
          --leading-display: 1.1;
          --tracking-display: -0.05px;
          --text-display-xl: 216px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -0.05px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-nav: 9999px;
          --radius-cards: 4px;
          --radius-pills: 9999px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-abyssal-teal: #001d21;
          --surface-deep-reef: #002b31;
          --surface-fog-veil: #f1f3f2;
          --surface-olive-grove: #5d5337;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-abyssal-teal: #001d21;
          --color-deep-reef: #002b31;
          --color-bio-mint: #e0fee6;
          --color-lavender-dawn: #cdcbff;
          --color-vivid-iris: #3a25f5;
          --color-pale-periwinkle: #bdbbff;
          --color-mint-whisper: #cdeed3;
          --color-olive-grove: #5d5337;
          --color-dark-olive: #544a2e;
          --color-fog-veil: #f1f3f2;
          --color-paper-white: #ffffff;
          --color-graphite: #1d2a29;
          --color-steel: #68706f;
          --color-ash-border: #ccd5d6;
          --color-pewter: #e1e3e3;
        
          /* Typography */
          --font-angellistdisplay: 'angellistDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-angellist: 'angellist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.08px;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.005px;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --tracking-heading: -0.04px;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.04px;
          --text-display: 90px;
          --leading-display: 1.1;
          --tracking-display: -0.05px;
          --text-display-xl: 216px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -0.05px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-full: 9999px;
        }