integrated_biosciences___style_reference:
  info: "> phòng thí nghiệm phát quang sinh học lúc nửa đêm"

  theme: "mixed"

  info: "Integrated Biosciences vận hành trong ngôn ngữ thị giác của một phòng tối-phòng thí nghiệm: canvas gần như đen với tông xanh lá dịu, typography trắng tiết chế, và một điểm nhấn xanh phát quang duy nhất chỉ xuất hiện trên các phần tử tương tác nhỏ như mũi tên, tag dots và chỉ báo tiến trình. Toàn bộ hệ thống type chạy trên một weight duy nhất của Aspekta — thứ bậc được tạo hình hoàn toàn bằng kích thước và letter-spacing âm mạnh, khiến các dòng display 111px và 158px mang cảm giác kiến trúc chứ không chỉ trang trí. Roboto Mono được dành riêng cho nhãn kỹ thuật, nav items và metadata, củng cố tính chất bảng thiết bị đo lường của thương hiệu. Bề mặt hầu hết phẳng — không shadow, không gradient — với các đường viền mảnh màu #c9cbbe hoặc #4d5757 làm nhiệm vụ phân cách. Các section sáng chuyển sang canvas ấm trắng kem (#f7f7f5) với thẻ trắng, nhưng điểm nhấn xanh vẫn tồn tại như một tín hiệu sinh học bất biến."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|-----|---------|-------|---------|"
    info: "| Bioluminescent Lime | `#cef79e` | `--color-bioluminescent-lime` | Lớp phủ xanh cho nền highlight, dải trang trí và điểm nhấn mềm phía sau nội dung |"
    info: "| Abyssal Ink | `#222f30` | `--color-abyssal-ink` | Văn bản chính, đường viền, canvas section tối, nền nav. Gần đen với tông xanh lá dịu — không phải đen thuần, mang cùng sắc xanh như điểm nhấn. Bề mặt nội dung tối nhất |"
    info: "| Bone White | `#f7f7f5` | `--color-bone-white` | Canvas trang section sáng, nền hero/section khi ở chế độ sáng. Trắng ấm với chút kem rất nhẹ |"
    info: "| Paper | `#ffffff` | `--color-paper` | Bề mặt thẻ trên section sáng, container nâng cao, icon fill, body text trên nền tối. Bề mặt sáng nhất trong hệ thống |"
    info: "| Graphite | `#4d5757` | `--color-graphite` | Body text phụ, metadata mờ, đường viền nhẹ, ghost button outlines. Trung tính với tông xanh lá phù hợp hệ thống |"
    info: "| Lichen | `#c9cbbe` | `--color-lichen` | Đường viền mảnh, divider nhẹ, placeholder metadata text. Xanh-be ấm bão hòa thấp, biến mất trên nền trắng nhưng hiện rõ trên #f7f7f5 |"
    info: "| Tissue | `#e7e8e1` | `--color-tissue` | Bề mặt thẻ thay thế — xám nhạt ấm hơn, dùng để phân biệt thẻ phụ hoặc khối nội dung mờ với bề mặt trắng chính |"
    info: "| Frost | `#eeeeee` | `--color-frost` | Bề mặt thẻ sáng trung tính khi cần thay thế không ấm |"
    info: "| Void | `#000000` | `--color-void` | Nền footer, anchor đen thuần. Dùng hạn chế như một trung tính thực sự khi Abyssal Ink quá nhiều màu |"

  tokens___typography:

    aspekta___display_và_body_typeface_duy_nhất__mọi_kích_thước_từ_caption_đến_display_đều_chạy_trên_một_weight_400_duy_nhất___thứ_bậc_được_tạo_hình_bằng_kích_thước_và_tracking_thắt_chặt__không_bao_giờ_dùng_weight__negative_letter_spacing_tăng_tuyến_tính_theo_kích_thước___0_001em_ở_body___0_03em_ở_display_lớn_nhất__giữ_cho_letterform_cân_bằng_quang_học_khi_phóng_to__xử_lý_single_weight_phẳng_mang_lại_sự_điềm_tĩnh_của_thiết_bị_phòng_thí_nghiệm___không_có_bold_gây_ồn__không_có_italic_cảm_xúc_____font_aspekta:
      - "**Thay thế:** Inter Tight weight 400, hoặc Söhne Buch"
      - "**Weights:** 400"
      - "**Kích thước:** 16px, 18px, 19px, 22px, 24px, 36px, 42px, 58px, 75px, 89px, 111px, 158px"
      - "**Line height:** 1.00–1.30"
      - "**Letter spacing:** -0.03em ở 158px, -0.02em ở 89–111px, -0.006em ở 36–42px, -0.001em ở 16–19px"
      - "**Vai trò:** Display và body typeface duy nhất. Mọi kích thước từ caption đến display đều chạy trên một weight 400 duy nhất — thứ bậc được tạo hình bằng kích thước và tracking thắt chặt, không bao giờ dùng weight. Negative letter-spacing tăng tuyến tính theo kích thước: -0.001em ở body, -0.03em ở display lớn nhất, giữ cho letterform cân bằng quang học khi phóng to. Xử lý single-weight phẳng mang lại sự điềm tĩnh của thiết bị phòng thí nghiệm — không có bold gây ồn, không có italic cảm xúc."

    roboto_mono___nhãn_kỹ_thuật__nav_items__section_markers_bộ_đếm_01_02__tags__publication_metadata__button_text__hình_học_monospaced_báo_hiệu_tính_thiết_bị_đo_lường_và_độ_chính_xác_khoa_học___đây_là_giọng_nói_của_sổ_ghi_chép_phòng_thí_nghiệm__tương_phản_với_sự_rõ_ràng_editorial_của_aspekta_____font_roboto_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 13px, 14px, 15px"
      - "**Line height:** 1.00–1.23"
      - "**Letter spacing:** -0.02em ở 13px, -0.008em ở 14px, -0.007em ở 15px"
      - "**Vai trò:** Nhãn kỹ thuật, nav items, section markers (bộ đếm 01/02), tags, publication metadata, button text. Hình học monospaced báo hiệu tính thiết bị đo lường và độ chính xác khoa học — đây là giọng nói của sổ ghi chép phòng thí nghiệm, tương phản với sự rõ ràng editorial của Aspekta."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.23 | -0.26px | `--text-caption` |"
      info: "| body | 18px | 1.3 | -0.018px | `--text-body` |"
      info: "| body-lg | 22px | 1.3 | -0.13px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.2 | -0.14px | `--text-subheading` |"
      info: "| heading-sm | 36px | 1.2 | -0.22px | `--text-heading-sm` |"
      info: "| heading-lg | 58px | 1.1 | -0.7px | `--text-heading-lg` |"
      info: "| display | 75px | 1.1 | -1.5px | `--text-display` |"
      info: "| display-lg | 89px | 1.1 | -1.78px | `--text-display-lg` |"
      info: "| display-xl | 111px | 1 | -2.22px | `--text-display-xl` |"
      info: "| hero | 158px | 1 | -4.74px | `--text-hero` |"

  tokens___spacing___shapes:

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

    mật_độ: "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: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Phần tử | Giá trị |"
      info: "|---------|---------|"
      info: "| nav | 12px |"
      info: "| tags | 9999px |"
      info: "| cards | 16-20px |"
      info: "| buttons | 8px |"
      info: "| largeCards | 40px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 40px"
      - "**Element gap:** 8-20px"

  components:

    hero_display_headline:
      vai_trò: "Headline cấp trang chính"

      info: "Đặt ở Aspekta 400 cỡ 111–158px, line-height 1.0, letter-spacing -0.03em. Màu trắng (#ffffff) trên nền Abyssal Ink (#222f30). Căn trái, không giới hạn max-width — ngắt dòng rộng rãi. Kết thúc bằng dấu chấm. Đây là phần tử typographic lớn nhất trong hệ thống và tạo nên tông kiến trúc của thương hiệu."

    section_sub_headline:
      vai_trò: "Tuyên bố cấp section"

      info: "Aspekta 400 cỡ 36–42px, line-height 1.2, letter-spacing -0.006em. Hiển thị bằng Graphite mờ (#4d5757) trên nền tối, hoặc Abyssal Ink trên nền sáng. Mang giọng điệu trầm lắng, suy tư đối lập với hero — giọng của nhà nghiên cứu giải thích, không phải tuyên bố."

    pill_navigation_button:
      vai_trò: "Nav item đang hoạt động/được highlight"

      info: "Hình pill có viền, border 1px màu #c9cbbe trên nền tối hoặc #4d5757 trên nền sáng, radius 12px. Roboto Mono 13–14px weight 400, letter-spacing -0.02em. Văn bản cùng màu với viền. Khi active, fill chuyển sang Bioluminescent Lime (#cef79e) và text chuyển sang Abyssal Ink."

    filled_action_button_work_with_us:
      vai_trò: "CTA cấp trang chính"

      info: "Hình chữ nhật có fill, nền #222f30 (tối) hoặc #ffffff (sáng), text màu ngược với bề mặt. Không viền. Radius 8px. Roboto Mono 13–14px uppercase tracking -0.02em. Padding ngang gọn ~12-16px, dọc 8px. Kích thước tiết chế — hệ thống này không dùng kích thước nút để gây chú ý."

    arrow_cta_button:
      vai_trò: "Hành động định hướng thứ cấp"

      info: "Hình vuông 40×40px, radius 8px, fill Bioluminescent Lime (#cef79e) với icon mũi tên Abyssal Ink. Dùng ở cuối tiêu đề thẻ, chân section và inline links. Đây là nơi duy nhất điểm nhấn xanh fill một hình dạng — nó hoạt động như đèn giao thông xanh chỉ về phía trước."

    outlined_ghost_button_discover_our_platform:
      vai_trò: "CTA ít nhấn mạnh"

      info: "Nền trong suốt, border 1px màu #4d5757, text màu #ffffff hoặc #222f30. Radius 8px. Roboto Mono 14px. Kết hợp với Arrow CTA button khi có hai hành động cạnh nhau."

    section_counter_01_02:
      vai_trò: "Đánh số section"

      info: "Pill nhỏ chứa số section, border 1px màu #4d5757, radius 9999px. Roboto Mono 13px. Nằm phía trên hoặc bên cạnh headline section như một anchor điều hướng — giọng nói mục lục của trang."

    news_article_card:
      vai_trò: "Khối nội dung editorial"

      info: "Bề mặt trắng (#ffffff) trên canvas Bone White (#f7f7f5), radius 20–40px, không shadow. Padding trong 40px. Layout hai cột: nửa trái là ảnh khoa học full-bleed tối (radius 12-16px trên chính ảnh), nửa phải là tiêu đề + meta + excerpt + link 'READ ARTICLE'. Khoảng thở rộng rãi — thẻ này chiếm một dải full viewport-width."

    publication_tag:
      vai_trò: "Chỉ báo danh mục"

      info: "Tiền tố chấm xanh nhỏ + nhãn Roboto Mono uppercase. Chấm là hình tròn Bioluminescent Lime 6px. Nhãn bằng Roboto Mono 13px màu #4d5757 hoặc #c9cbbe. Hoạt động như marker phân loại mã màu duy nhất của hệ thống."

    hero_section_background:
      vai_trò: "Bề mặt canvas tối"

      info: "Abyssal Ink (#222f30) full-bleed. Không gradient, không texture. Headline căn trái ở 1/3 trên, văn bản hỗ trợ căn trái ở 1/3 dưới. Khoảng thở dọc rộng lớn — tối thiểu 400px không gian âm giữa headline và copy."

    light_section_background:
      vai_trò: "Bề mặt canvas sáng"

      info: "Bone White (#f7f7f5) full-bleed với thẻ trắng. Dùng cho các section editorial/newsroom, tạo sự chuyển đổi từ các section nội dung tối. Bản thân sự chuyển đổi là tín hiệu thị giác — không cần đường divider."

    hairline_divider:
      vai_trò: "Phân cách section/nội dung"

      info: "Đường 1px màu #c9cbbe (trên nền sáng) hoặc #4d5757 (trên nền tối). Full width hoặc column-width. Hệ thống chỉ dùng divider ngang — không bao giờ dọc, không kép, không đứt nét."

    footer:
      vai_trò: "Kết thúc site"

      info: "Nền đen thuần (#000000) — tông đậm hơn Abyssal Ink dùng trong các section nội dung. Text trắng, Roboto Mono cho link, Aspekta cho văn bản lớn hơn. Báo hiệu điểm kết thúc tuyệt đối của site."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Aspekta weight 400 cho tất cả display và body text — không bao giờ bold, không semibold, không italic. Thứ bậc chỉ là kích thước và tracking."
      - "Đặt fill Bioluminescent Lime (#cef79e) chính xác 40×40px cho arrow buttons và đường kính 6px cho tag dots. Không bao giờ mở rộng điểm nhấn lớn hơn micro-surface."
      - "Áp dụng letter-spacing theo tỷ lệ: -0.03em ở 158px, -0.02em ở 89–111px, -0.006em ở 36–42px, -0.001em ở 16–19px. Tracking là yếu tố giữ cho flat weight dễ đọc ở kích thước cực lớn."
      - "Dùng hairline 1px màu #c9cbbe (trên nền sáng) hoặc #4d5757 (trên nền tối) cho tất cả divider và card borders. Không bao giờ dùng viền dày hơn, không bao giờ dùng shadow để tạo chiều sâu."
      - "Dành Roboto Mono cho nav items, section counters (01/02), publication tags, ngày tháng và button text. Không bao giờ dùng cho headline hoặc body copy dài hơn một nhãn."
      - "Duy trì section gap dọc 80–120px. Hệ thống cần thở — nén sẽ phá hủy sự điềm tĩnh của thiết bị phòng thí nghiệm."
      - "Ghép mỗi hành động với bề mặt đối lập: dark button (fill #222f30) trên canvas sáng, light button (fill #ffffff) trên canvas tối. Không bao giờ dùng Bioluminescent Lime làm nền button chính."

    không_nên_làm:
      - "Không thêm weight thứ hai của Aspekta hoặc bất kỳ sans-serif nào khác cho heading. Hệ thống single-weight là bản sắc thương hiệu — thêm bold sẽ phá vỡ nó."
      - "Không dùng #cef79 làm nền cho body text, bề mặt lớn, gradient hoặc hero overlays. Điểm nhấn được phân bổ ở micro-scale có lý do."
      - "Không áp dụng box-shadows, drop-shadows hoặc bất kỳ hiệu ứng nâng cao nào. Chiều sâu đến từ tương phản màu sắc và đường viền."
      - "Không dùng #000000 thuần cho các section nội dung — dành nó cho footer. Bề mặt tối nội dung là #222f30 với tông xanh lá."
      - "Không dùng trung tính ấm (#e7e8e1, #c9cbbe) trên section tối. Chúng biến mất trên Abyssal Ink và phá vỡ thứ bậc bề mặt."
      - "Không đặt ảnh bên ngoài container bo tròn (radius tối thiểu 12px) hoặc không có xử lý khoa học tối. Ảnh lifestyle phá vỡ ngôn ngữ thiết bị phòng thí nghiệm."
      - "Không dùng nhiều accent color. Sức mạnh của hệ thống nằm ở kỷ luật đơn sắc cộng một tín hiệu. Thêm vai trò chromatic thứ hai làm loãng sự căng thẳng thị giác của thương hiệu."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|---------|----------|"
    info: "| 0 | Page Canvas — Light | `#f7f7f5` | Nền cơ sở cho section sáng (Newsroom, editorial) |"
    info: "| 1 | Page Canvas — Dark | `#222f30` | Nền cơ sở cho section tối (Hero, What We Do, nội dung) |"
    info: "| 2 | Card Surface — Light | `#ffffff` | Thẻ nâng cao trên canvas sáng, icon fill trên nền tối |"
    info: "| 3 | Card Surface — Warm Alternate | `#e7e8e1` | Tông thẻ phụ trên section sáng |"
    info: "| 4 | Accent Fill | `#cef79` | Micro-surface tương tác — arrow buttons, active tags, accent dots |"
    info: "| 5 | Footer Ground | `#000000` | Bề mặt kết thúc tối tuyệt đối |"

  elevation:

    info: "Hệ thống này cố tình phẳng. Không có box-shadows ở bất cứ đâu. Chiều sâu được truyền đạt hoàn toàn qua tương phản màu bề mặt (Abyssal Ink vs Paper vs Bone White) và hairline borders. Triết lý thị giác coi giao diện như một poster khoa học in — mọi phần tử là một hình mực phẳng trên bề mặt phẳng, và thứ bậc đến từ kích thước, màu sắc và khoảng cách chứ không phải từ cảm giác nổi hay bay lên."

  imagery:

    info: "Hình ảnh hiển vi khoa học và 3D molecular render chiếm ưu thế — cụm tế bào, cấu trúc protein và mạng lưới thần kinh được render trong bảng màu xanh đậm-đen duy nhất để hòa nhập với canvas Abyssal Ink. Nhiếp ảnh không được sử dụng; tất cả hình ảnh đều được tạo hoặc minh họa. Hình ảnh luôn được chứa trong hình chữ nhật bo tròn (radius 12–16px) và kết hợp với thẻ trắng. Màu xanh Bioluminescent Lime được lặp lại trong các highlight của hình ảnh, tạo sự liên tục thị giác giữa điểm nhấn giao diện và chủ đề khoa học. Ảnh chính của Newsroom section là crop cận các cấu trúc tế bào phát sáng trên nền đen — full-bleed trong thẻ, không có text overlay, để chủ thể tự nói lên."

  layout:

    info: "Max-width 1200px căn giữa cho tất cả nội dung. Các section tối (hero, 'What We Do', platform) full-bleed trong Abyssal Ink với nội dung giới hạn trong cột 1200px và padding trái rộng cho văn bản. Các section sáng (Newsroom) full-bleed trong Bone White với cùng cột nội dung 1200px. Hero bất đối xứng: headline chiếm 2/3 bên trái, khoảng trống âm lớn bên phải và phía dưới. Nhịp section luân phiên: dải tối → dải tối → dải sáng, không có divider giữa các section cùng chế độ. Card layouts hai cột (ảnh-trái, text-phải) cho khối editorial và một cột xếp chồng cho nội dung nhiều text. Navigation là một thanh ngang duy nhất — logo trái, nav links phải, với chỉ báo active hình pill. Không sticky header, không sidebar, không mega-menu — navigation cố tình tối giản để nội dung thu hút sự chú ý."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #222f30 (tối) / #ffffff (trên nền tối)"
    - "background: #f7f7f5 (sáng) / #222f30 (tối)"
    - "border: #c9cbbe (sáng) / #4d5757 (tối)"
    - "accent: #cef79e"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Hero Headline**: Nền #222f30 full-bleed. Headline cỡ 158px Aspekta weight 400, màu #ffffff, line-height 1.0, letter-spacing -4.74px. Kết thúc bằng dấu chấm, căn trái, cách nav 80px."

    info: "Không quan sát thấy màu primary action riêng biệt; dùng các xử lý button trung tính đã trích xuất thay vì tự tạo màu CTA có fill."

    - "**News Article Card**: Thẻ trắng (#ffffff) trên canvas #f7f7f5, radius 20px, padding 40px. Hai cột: trái = ảnh khoa học tối radius 16px, phải = publication tag (chấm 6px #cef79e + Roboto Mono 13px 'PUBLICATIONS'), ngày tháng bằng Roboto Mono 13px #c9cbbe, headline cỡ 36px Aspekta 400 #222f30 letter-spacing -0.22px, excerpt cỡ 18px #4d5757, link 'READ ARTICLE' bằng Roboto Mono 13px."

    - "**Section with Counter**: Dải tối #222f30. Pill counter '01 / 02' với border 1px #4d5757, radius 9999px, Roboto Mono 13px #4d5757. Headline cỡ 42px Aspekta 400 #4d5757, letter-spacing -0.5px, line-height 1.2, max-width 600px, căn trái cách mép trái 50%."

    - "**Ghost Navigation Button**: Fill trong suốt, border 1px #c9cbbe, radius 12px, padding 8px 16px, Roboto Mono 13px #c9cbbe, letter-spacing -0.26px. Khi active, fill chuyển sang #cef79e và text sang #222f30."

  type_system_philosophy:

    info: "Toàn bộ hệ thống chạy trên một weight duy nhất (400) của Aspekta. Đây không phải giới hạn — đây là lựa chọn định hình thương hiệu. Sự biến đổi weight cố tình vắng mặt; thứ bậc được tạo hình bằng ba công cụ: kích thước (16px đến 158px), nén line-height (1.3 ở body, 1.0 ở display) và thắt chặt letter-spacing (-0.001em ở body, -0.03em ở hero). Kết quả đọc như một chuyên khảo khoa học — phẳng, chính xác và không trang trí. Roboto Mono chỉ xuất hiện cho metadata kỹ thuật: nav labels, section counters, publication tags, ngày tháng và button text. Sự cứng nhắc hình học của mono đối lập với đường cong nhân văn của Aspekta tạo ra sự tương phản typographic duy nhất của hệ thống."

  accent_discipline:

    info: "Bioluminescent Lime (#cef79e) được phân bổ hạn chế. Nó xuất hiện trên: arrow buttons 40×40, tag dots 6px, active nav pills và progress indicators. Nó không bao giờ fill bề mặt lớn, không bao giờ nằm sau body text, không bao giờ xuất hiện trong gradient. Kỷ luật là điểm mấu chốt — khi màu xanh xuất hiện, mắt sẽ khóa vào nó vì phần còn lại của giao diện là đơn sắc. Hãy coi nó như đèn tín hiệu: bật = active, tiến lên hoặc sinh học."

  similar_brands:

    - "**Arc Institute** — Canvas xanh đen-đen với điểm nhấn sống động đơn lẻ, display type single-weight cỡ lớn, thẩm mỹ thiết bị khoa học/công nghệ sinh học"
    - "**Chai Discovery** — Nền gần đen, accent color phát quang sinh học, bề mặt phẳng tối giản, display typography single-weight cỡ lớn trong bối cảnh sinh học/AI"
    - "**EvolutionaryScale** — Giao diện công nghệ sinh học dark-mode, tương phản kích thước type cực đoan giữa mono label nhỏ và sans-serif display line khổng lồ, hairline borders, accent color đơn lẻ"
    - "**Notion AI landing pages** — Display headlines single-weight cỡ lớn, không gian âm rộng rãi, secondary text color mờ, trang trí bề mặt tối giản"
    - "**Linear** — Canvas tối với hairline borders, accent color đơn lẻ dùng tiết chế trên phần tử tương tác, mono labels cho metadata kỹ thuật"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-bioluminescent-lime: #cef79e;
          --color-abyssal-ink: #222f30;
          --color-bone-white: #f7f7f5;
          --color-paper: #ffffff;
          --color-graphite: #4d5757;
          --color-lichen: #c9cbbe;
          --color-tissue: #e7e8e1;
          --color-frost: #eeeeee;
          --color-void: #000000;
        
          /* Typography — Font Families */
          --font-aspekta: 'Aspekta', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.23;
          --tracking-caption: -0.26px;
          --text-body: 18px;
          --leading-body: 1.3;
          --tracking-body: -0.018px;
          --text-body-lg: 22px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.13px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.22px;
          --text-heading-lg: 58px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.7px;
          --text-display: 75px;
          --leading-display: 1.1;
          --tracking-display: -1.5px;
          --text-display-lg: 89px;
          --leading-display-lg: 1.1;
          --tracking-display-lg: -1.78px;
          --text-display-xl: 111px;
          --leading-display-xl: 1;
          --tracking-display-xl: -2.22px;
          --text-hero: 158px;
          --leading-hero: 1;
          --tracking-hero: -4.74px;
        
          /* 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-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-60: 60px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 40px;
          --element-gap: 8-20px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 40px;
        
          /* Named Radii */
          --radius-nav: 12px;
          --radius-tags: 9999px;
          --radius-cards: 16-20px;
          --radius-buttons: 8px;
          --radius-largecards: 40px;
        
          /* Surfaces */
          --surface-page-canvas-light: #f7f7f5;
          --surface-page-canvas-dark: #222f30;
          --surface-card-surface-light: #ffffff;
          --surface-card-surface-warm-alternate: #e7e8e1;
          --surface-accent-fill: #cef79;
          --surface-footer-ground: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-bioluminescent-lime: #cef79e;
          --color-abyssal-ink: #222f30;
          --color-bone-white: #f7f7f5;
          --color-paper: #ffffff;
          --color-graphite: #4d5757;
          --color-lichen: #c9cbbe;
          --color-tissue: #e7e8e1;
          --color-frost: #eeeeee;
          --color-void: #000000;
        
          /* Typography */
          --font-aspekta: 'Aspekta', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.23;
          --tracking-caption: -0.26px;
          --text-body: 18px;
          --leading-body: 1.3;
          --tracking-body: -0.018px;
          --text-body-lg: 22px;
          --leading-body-lg: 1.3;
          --tracking-body-lg: -0.13px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.14px;
          --text-heading-sm: 36px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.22px;
          --text-heading-lg: 58px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.7px;
          --text-display: 75px;
          --leading-display: 1.1;
          --tracking-display: -1.5px;
          --text-display-lg: 89px;
          --leading-display-lg: 1.1;
          --tracking-display-lg: -1.78px;
          --text-display-xl: 111px;
          --leading-display-xl: 1;
          --tracking-display-xl: -2.22px;
          --text-hero: 158px;
          --leading-hero: 1;
          --tracking-hero: -4.74px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-60: 60px;
          --spacing-88: 88px;
          --spacing-100: 100px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 40px;
        }