neon_rated___style_reference:
  info: "> cinematic gallery behind crimson neon"

  theme: "light"

  info: "NEON hoạt động như một bức tường poster điện ảnh dưới dạng trình duyệt: sự kiềm chế gần như tuyệt đối với gam màu achromatic, chỉ bị phá vỡ bởi một sắc đỏ thẫm (crimson) duy nhất xuất hiện ở những khoảnh khắc mang tính thương hiệu — thanh wordmark, thẻ ngày phát hành và các micro-accents. Giao diện về cơ bản là một khung hình; các bộ phim mới là nội dung. Một kiểu chữ grotesque tùy chỉnh (Flatspot) xử lý mọi phần UI ở kích thước nhỏ gọn với negative tracking dày đặc, trong khi một kiểu chữ display ấn tượng (Girott) được dành riêng cho các tiêu đề section khổng lồ, tràn qua 100px và neo giữ toàn bộ trang. Các component ở mức tối thiểu: card là khung ảnh thô với viền mảnh, button là pill phẳng hoặc hình chữ nhật sắc cạnh, và không có ngôn ngữ shadow nào đáng kể — chiều sâu đến từ chính nhiếp ảnh điện ảnh, không phải từ chrome."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Crimson Marquee | `#821e1e` | `--color-crimson-marquee` | Thanh wordmark thương hiệu, thẻ ngày phát hành, viền trạng thái được chọn, và điểm nhấn chromatic duy nhất neo giữ một hệ thống vốn đơn sắc — đỏ thẫm, hơi oxy hóa, không bao giờ là cam, không bao giờ sáng |"
    info: "| Ink | `#000000` | `--color-ink` | Văn bản chính, nét icon, màu heading, text button, và các fill bề mặt tối (hero overlay, footer) |"
    info: "| Paper | `#ffffff` | `--color-paper` | Nền trang, bề mặt card, text button trên fill tối, trường input, text badge |"
    info: "| Bone | `#f3f3f3` | `--color-bone` | Bề mặt card và nền section thay thế, dùng để phân cách một hàng film tile với hàng tiếp theo mà không cần divider cứng |"
    info: "| Silver | `#e5e7eb` | `--color-silver` | Viền mảnh (hairline) trên card, button, input và divider — quy tắc 1px phổ quát đóng khung hầu hết mọi element |"
    info: "| Smoke | `#cccccc` | `--color-smoke` | Tint bề mặt phụ và shadow base; được dùng hạn chế khi một bề mặt cần trông hơi lõm xuống so với Bone |"
    info: "| Cornflower | `#9dc1fb` | `--color-cornflower` | Focus ring và link/hover halo — một màu xanh da trời mát dịu báo hiệu tính tương tác mà không cạnh tranh với màu thương hiệu crimson |"

  tokens___typography:

    flatspot___kiểu_chữ_ui_đa_năng__navigation__body_copy__button_labels__metadata_tags__card_titles__section_headers__icons_và_badge_text__negative_tracking_dày_đặc_trên_toàn_bộ_hệ_thống__0_010em_đến__0_012em_giúp_ngay_cả_label_9px_nhỏ_nhất_cũng_dễ_đọc_và_nén_gọn__weight_500_là_mặc_định_cho_hầu_hết_văn_bản_chạy__700_được_dành_cho_section_titles_in_hoa_và_điểm_nhấn_____font_flatspot:
      - "**Thay thế:** Inter, Neue Haas Grotesk, hoặc Suisse Int'l"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 9px, 10px, 12px, 14px, 16px"
      - "**Line height:** 1.00 – 1.50"
      - "**Letter spacing:** -0.0120em, -0.0110em, -0.0100em"
      - "**Vai trò:** Kiểu chữ UI đa năng: navigation, body copy, button labels, metadata tags, card titles, section headers, icons và badge text. Negative tracking dày đặc trên toàn bộ hệ thống (-0.010em đến -0.012em) giúp ngay cả label 9px nhỏ nhất cũng dễ đọc và nén gọn. Weight 500 là mặc định cho hầu hết văn bản chạy; 700 được dành cho section titles in hoa và điểm nhấn."

    girott___chỉ_dùng_cho_display__page_heroes_và_feature_titles__sự_kết_hợp_160px___line_height_0_80___tracking__0_031em_là_signature_move__một_tiêu_đề_phim_duy_nhất_tràn_ngập_toàn_bộ_viewport_edge_to_edge__được_đặt_dày_đặc_đến_mức_descender_gần_như_chạm_ascender__khoảng_36_42px_dành_cho_các_khoảnh_khắc_display_phụ_sub_hero_headlines__featured_card_titles_____font_girott:
      - "**Thay thế:** Druk, Condensed, hoặc Test Press"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 36px, 41px, 42px, 160px"
      - "**Line height:** 0.80 – 0.90"
      - "**Letter spacing:** -0.031em ở 160px, -0.030em ở 36-42px"
      - "**Vai trò:** Chỉ dùng cho display: page heroes và feature titles. Sự kết hợp 160px / line-height 0.80 / tracking -0.031em là signature move: một tiêu đề phim duy nhất tràn ngập toàn bộ viewport edge-to-edge, được đặt dày đặc đến mức descender gần như chạm ascender. Khoảng 36-42px dành cho các khoảnh khắc display phụ (sub-hero headlines, featured card titles)."

    flatspot___ghi_chú_letter_spacing_body_và_body_small_chạy_ở_tracking__0_010em_đến__0_011em__tier_caption_metadata_9_10px_nằm_ở__0_012em___càng_nhỏ_càng_dày__điều_này_bất_thường_và_mang_lại_cho_văn_bản_nhỏ_nhất_một_cảm_giác_nén_gọn__gần_như_stencil_____font_flatspot:
      - "**Weights:** 400"
      - "**Kích thước:** 9px, 10px, 12px, 14px, 16px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** -0.012em ở 9-10px, -0.010em ở 14-16px"
      - "**Vai trò:** (Ghi chú letter-spacing) Body và body-small chạy ở tracking -0.010em đến -0.011em; tier caption/metadata 9-10px nằm ở -0.012em — càng nhỏ càng dày, điều này bất thường và mang lại cho văn bản nhỏ nhất một cảm giác nén gọn, gần như stencil."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| heading | 36px | 0.9 | -1.08px | `--text-heading` |"
      info: "| heading-lg | 42px | 0.9 | -1.26px | `--text-heading-lg` |"
      info: "| display | 160px | 0.8 | -4.96px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 27 | 27px | `--spacing-27` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 31 | 31px | `--spacing-31` |"
      info: "| 45 | 45px | `--spacing-45` |"
      info: "| 54 | 54px | `--spacing-54` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| tags | 4px |"
      info: "| cards | 8px |"
      info: "| pills | 100px |"
      info: "| badges | 80px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|---------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 120-160px"
      - "**Card padding:** 20px"
      - "**Element gap:** 10px"

  components:

    crimson_brand_bar:
      vai_trò: "Primary navigation header"

      info: "Hình chữ nhật đặc #821e1e trải dài trên cùng mỗi trang, chứa icon hamburger căn trái, wordmark NEON căn giữa màu trắng Flatspot 700, và cụm icon search/heart/bag căn phải màu trắng. Chiều cao nhỏ gọn (~40px). Thanh này đóng vai trò là element chromatic duy nhất và liên tục trong giao diện vốn đơn sắc."

    full_bleed_hero_slide:
      vai_trò: "Trình diễn feature trên landing page"

      info: "Ảnh landscape edge-to-edge không padding, không border, phủ bởi một tiêu đề display Girott khổng lồ (thường là tên phim) màu trắng, đặt ở góc dưới-bên trái ở 160px. Một thẻ nhỏ Flatspot 12px 700 in hoa màu #821e1e ('IN THEATERS MAY 1, 2026') nằm phía trên tiêu đề. Một hàng chấm phân trang (hình tròn nhỏ, active = #821e1e) neo giữ phía dưới trung tâm. Slide tiếp theo lộ ra từ cạnh phải, tạo hiệu ứng xếp chồng card."

    film_tile_card:
      vai_trò: "Đơn vị duyệt catalog"

      info: "Card ảnh landscape (tỷ lệ xấp xỉ 2:1 hoặc 16:9) không padding, không shadow, với viền hairline 1px #e5e7eb ở cả bốn cạnh. Corner radius 8px. Tên phim nằm ngay dưới ảnh ở Flatspot 16px 500 màu đen, căn trái, không có khoảng cách thừa. Một thẻ ngày phát hành in hoa nhỏ Flatspot 9-10px 700 màu #821e1e phủ lên góc trên-bên trái của chính ảnh. Các card được sắp xếp trong một hàng cuộn ngang."

    section_header:
      vai_trò: "Nhãn section nội dung"

      info: "Flatspot 36-42px 700 in hoa màu #000000, căn trái, không gạch chân hay trang trí. Đi kèm với mũi tên điều hướng trái/phải (icon đường mảnh #000) cho các hàng có thể cuộn, hoặc với link ghost 'SEE ALL' bên phải cho các section tĩnh. Nằm với khoảng không gian dọc rộng rãi phía trên hàng card (60-80px)."

    ghost_directional_arrow:
      vai_trò: "Điều khiển cuộn ngang"

      info: "Icon chevron trái/phải đường mảnh tối giản, 16-20px, #000000, không nền, không border, không padding. Nổi inline cạnh section headers. Sự phẳng lì của điều khiển này là có chủ đích — nó không được cạnh tranh với tác phẩm nghệ thuật phim."

    outlined_tag_badge:
      vai_trò: "Nhãn ngày phát hành / trạng thái"

      info: "Flatspot 9-12px 700 in hoa nhỏ màu #821e1e, không fill nền, không border, không padding. Nằm như một overlay tự do trên ảnh card hoặc như một label inline cạnh tiêu đề section. Đôi khi được bao trong viền 1px #821e1e với padding 4-8px để tạo thành biến thể pill."

    footer_bar:
      vai_trò: "Dải thông tin cuối trang"

      info: "Dải #000000 đặc, full-width, với các link điều hướng phụ và văn bản pháp lý màu trắng Flatspot 12-14px 400. Padding tối thiểu (20-40px dọc). Không icon mạng xã hội, không form newsletter — thuần túy tiện ích."

    cookie_consent_badge:
      vai_trò: "Thông báo quyền riêng tư cố định"

      info: "Icon hình tròn nhỏ, đường kính 40-48px, nền #9dc1fb (cornflower) với icon phẳng màu trắng ở trung tâm. Cố định ở góc dưới-bên phải của viewport. Là trường hợp sử dụng duy nhất của accent cornflower trong UI sản xuất."

    pagination_dots:
      vai_trò: "Chỉ báo tiến trình carousel hero"

      info: "Hàng gồm 8-12 hình tròn nhỏ, đường kính 6-8px, cách nhau ~8px, căn giữa theo chiều ngang ở cuối hero. Dot active được tô màu #821e1e; dot inactive là đường viền #cccccc hoặc #ffffff ở độ mờ thấp. Không số, không label."

    in_text_link:
      vai_trò: "Điều hướng / nhấn mạnh nội tuyến"

      info: "Văn bản Flatspot body-weight màu #000000, không gạch chân theo mặc định, với hiệu ứng box-shadow halo #9dc1fb tinh tế khi hover (phản hồi tương tác duy nhất trong hệ thống). Link không bao giờ sử dụng màu chromatic cho trạng thái mặc định."

    input_field:
      vai_trò: "Input tìm kiếm / form (dùng trong search overlay)"

      info: "Nền trắng (#ffffff), viền 1px #e5e7eb, corner radius 4px, chiều cao nhỏ gọn (~36-40px). Placeholder text màu #cccccc, Flatspot 14px 400. Trạng thái focus thay thế viền bằng vòng box-shadow #9dc1fb (dựa trên rgba, không phải thay đổi border-color thực sự)."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #821e1e cho brand bar, thẻ ngày phát hành và pagination active — không bao giờ dùng làm fill nền cho button hay card."
      - "Đặt tiêu đề display bằng Girott ở 36px hoặc lớn hơn với line-height 0.80-0.90 và tracking -0.030em đến -0.031em; không bao giờ đặt Girott dưới 36px, và không bao giờ đặt body copy bằng Girott."
      - "Đóng khung mọi card phim và button bằng viền 1px #e5e7eb; dùng radius 8px cho card và 4px cho button/input — hai giá trị này là toàn bộ ngôn ngữ radius."
      - "Để nhiếp ảnh điện ảnh cung cấp mọi sự thú vị thị giác — không thêm gradient trang trí, background pattern hay illustration phía sau văn bản."
      - "Giữ UI đơn sắc ngoại trừ brand bar: văn bản mặc định là #000000 trên #ffffff hoặc #f3f3f3, icon kế thừa màu văn bản, và accent chromatic duy nhất là #821e1e ở những khoảnh khắc mang tính thương hiệu."
      - "Nén letter-spacing chặt hơn khi kích thước chữ nhỏ đi: -0.012em ở 9-10px, -0.011em ở 12px, -0.010em ở 14-16px. Mối quan hệ nghịch đảo này là signature — không chuẩn hóa về một giá trị tracking duy nhất."
      - "Duy trì spacing nhỏ gọn xuyên suốt: element gap 10px, card padding 20px, và ít nhất 120px giữa các section chính để film tile có không gian thở."

    không_nên_làm:
      - "Không thêm màu accent bổ sung. Hệ thống là đơn sắc-cộng-crimson; bất kỳ chromatic thứ hai nào sẽ làm loãng cảm giác poster-gallery."
      - "Không dùng box-shadow hay drop-shadow để tạo độ cao. Chiều sâu đến từ viền silver 1px và từ nhiếp ảnh điện ảnh, không phải từ CSS shadow stacks."
      - "Không đặt body text lớn hơn 16px hoặc nhỏ hơn 9px — Flatspot là workhorse chỉ trong các giới hạn này."
      - "Không trộn hai kiểu chữ trên cùng một dòng. Flatspot xử lý mọi thứ trừ khoảnh khắc display; Girott chỉ xử lý khoảnh khắc display."
      - "Không căn giữa body copy hay section headers. NEON là flush-left editorial — mọi khối văn bản, button và label đều bắt đầu từ cùng một trục dọc."
      - "Không thêm góc bo tròn vượt quá 8px trên các component tiêu chuẩn. Hình pill (80-100px) chỉ dành cho badge và tag overlays."
      - "Không animate hoặc chuyển tiếp màu sắc khi hover. Cornflower box-shadow halo là phản hồi tương tác duy nhất — thêm color shifts, gạch chân hoặc transform sẽ phá vỡ thẩm mỹ poster tĩnh."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|--------|-----|---------|----------|"
    info: "| 1 | Paper | `#ffffff` | Canvas trang chính — bức tường nơi mọi thứ được treo |"
    info: "| 2 | Bone | `#f3f3f3` | Nền section xen kẽ, tạo một dải off-white tinh tế để ngắt các hàng tile ngang |"
    info: "| 3 | Smoke | `#cccccc` | Tint lõm xuống hiếm khi dùng cho bề mặt cấp ba hoặc shadow fills |"

  elevation:

    info: "Elevation cố tình vắng mặt trong design system. Chỉ có một lần xuất hiện shadow trong toàn bộ codebase (rgba(0,0,0,0.2) 0px 4px 8px 0px, dùng hai lần), chiều sâu được truyền tải thông qua chính nhiếp ảnh điện ảnh, không phải qua CSS shadows. Card không nổi; chúng nằm trực tiếp trên canvas, được phân cách bằng viền silver 1px. Điều này giữ cho UI phẳng, mang tính editorial và giống poster — gần với một trang tạp chí hơn là một web app."

  imagery:

    info: "Nhiếp ảnh điện ảnh là toàn bộ ngôn ngữ thị giác. Mỗi section là một hàng ngang các stills định dạng landscape từ catalog của NEON — crop 2:1 hoặc 16:9, không bao giờ portrait, không bao giờ vuông. Hình ảnh được trình bày nguyên bản: không xử lý duotone, không color grading, không overlay tint. Hero sử dụng ảnh full-bleed chiếm đầy khung hình với tiêu đề phim được ghép trực tiếp lên trên. Không có lifestyle photography, không có abstract illustration, không có 3D rendering, và không có hệ thống icon nào ngoài các glyph UI đường mảnh (hamburger, search, heart, bag, arrows). Mật độ nhiếp ảnh cực kỳ cao — trang về cơ bản là một catalog streaming nơi hình ảnh chiếm 70-80% diện tích hiển thị và văn bản lấp đầy các khoảng trống."

  layout:

    info: "Thiết kế full-bleed viewport-width không có cột max-width căn giữa. Hero là một slide ảnh edge-to-edge chiếm toàn bộ chiều cao viewport (~85vh) không padding. Bên dưới hero, nội dung được tổ chức thành các hàng cuộn ngang, mỗi hàng được giới thiệu bởi một section header căn trái lớn bằng Girott hoặc Flatspot nặng. Card trong các hàng là tile landscape được sắp xếp trong một track ngang cuộn từ trái sang phải; mũi tên nằm cạnh section header để báo hiệu khả năng cuộn. Các section xen kẽ nền #ffffff và #f3f3f3 để phân cách một hàng catalog với hàng tiếp theo mà không cần divider cứng. Navigation là một thanh trên cùng cố định mỏng, không phải sidebar. Nhịp điệu tổng thể là: full-bleed hero → header + hàng cuộn ngang → header + hàng cuộn ngang → footer."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #000000"
    - "background: #ffffff"
    - "border: #e5e7eb"
    - "accent: #821e1e (crimson — brand bar, tags only)"
    - "focus ring: #9dc1fb (cornflower halo, không phải màu border)"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"

    - "Xây dựng một hero slide: ảnh landscape full-bleed chiếm 85vh, không padding, không border. Phủ một tiêu đề phim Girott 160px / line-height 0.80 / letter-spacing -4.96px màu #ffffff đặt ở góc dưới-bên trái. Phía trên tiêu đề, một thẻ Flatspot 12px 700 in hoa màu #821e1e hiển thị ngày phát hành. Ở giữa phía dưới, một hàng 8 chấm phân trang mỗi chấm 6px, cách nhau 8px, active = tô màu #821e1e, inactive = viền #cccccc. Slide tiếp theo nên lộ ra 40px từ cạnh phải để tạo cảm giác xếp chồng card."

    - "Xây dựng một film tile card: ảnh landscape 16:9, corner radius 8px, viền 1px #e5e7eb ở cả bốn cạnh, zero padding xung quanh ảnh. Góc trên-bên trái của ảnh mang một thẻ nhỏ Flatspot 10px 700 in hoa màu #821e1e (ngày phát hành). Ngay bên dưới ảnh, tên phim ở Flatspot 16px 500 màu #000000, căn trái, không margin thừa. Tổng thể card không có shadow."

    - "Xây dựng một section header: Flatspot 42px 700 in hoa màu #000000, căn trái, 0px letter-spacing override (tracking -0.030em có sẵn của font được áp dụng). 120-160px không gian phía trên hàng card đầu tiên. Bên phải header, hai mũi tên chevron đường mảnh (trái + phải) màu #000000, 16px, không nền, cách nhau 8px."

    - "Xây dựng thanh navigation trên cùng: hình chữ nhật đặc #821e1e, full viewport width, chiều cao 40px, với icon hamburger căn trái màu #ffffff (20px), wordmark NEON căn giữa Flatspot 700 #ffffff, và cụm icon search / heart / bag căn phải màu #ffffff mỗi icon 20px, cách nhau 12px. Thanh này là element chromatic duy nhất trên trang."

    - "Xây dựng một ghost scroll arrow: icon chevron đường mảnh 20px, stroke #000000 1.5px, không fill, không border, không background. Nổi inline cạnh section headers để chỉ báo cuộn ngang. Khi hover, một vòng box-shadow #9dc1fb 4px tinh tế xuất hiện quanh icon — đây là phản hồi tương tác duy nhất trong hệ thống."

  signature_moments:

    info: "Ba lựa chọn xác định bản sắc thị giác của hệ thống này và phải được bảo tồn:"

    - "Tiêu đề display Girott 160px với line-height 0.80. Hầu hết các trang web giới hạn display type ở khoảng 56-72px; NEON để một tên phim duy nhất tiêu thụ toàn bộ chiều rộng hero, được đặt dày đặc đến mức các chữ gần như chạm nhau theo chiều dọc. Đây là tương đương của một poster phim được phóng to lên tỷ lệ kiến trúc."

    - "Quy tắc letter-spacing nghịch đảo. Tracking thắt chặt khi kích thước nhỏ đi (-0.012em ở 9px, -0.010em ở 16px). Điều này phản trực giác — hầu hết các hệ thống nới lỏng văn bản nhỏ để dễ đọc — và nó mang lại cho metadata và tags của NEON một chất lượng nén, đóng dấu, gần như được sắp chữ bằng kim loại, phù hợp với cảm giác editorial-poster."

    - "Kỷ luật single-accent. #821e1e xuất hiện trong đúng ba ngữ cảnh: brand bar, thẻ ngày phát hành và pagination active. Mọi element UI khác — border, icon, secondary button, hover state — vẫn ở thang xám hoặc cornflower. Sự kiềm chế khiến crimson có cảm giác như một ánh đèn sân khấu, không phải vật trang trí."

  similar_brands:

    - "**A24** — Cùng triết lý poster-như-website: giao diện gần như đơn sắc nơi nhiếp ảnh điện ảnh mang 90% trọng lượng thị giác, một kiểu chữ display đậm duy nhất cho tiêu đề, và sự kiềm chế gần như editorial trong UI chrome."
    - "**MUBI** — Cùng các hàng catalog cuộn ngang của stills phim landscape, cùng section header in hoa căn trái, cùng kiểu chữ body grotesque nhỏ gọn, cùng cách tiếp cận chống trang trí cho giao diện."
    - "**Criterion Channel** — Cùng cảm giác archival-gallery: stills phim được trình bày nguyên bản trong khung card đồng nhất với viền hairline, trang trí UI tối thiểu và hệ thống phân cấp kiểu chữ để catalog tự nói lên điều đó."
    - "**Sideshow / Janus Films** — Cùng sự kiềm chế của nhà phân phối cinephile: thương hiệu tự coi mình là khung hình cho các bộ phim hơn là một nền tảng, sử dụng decorative chrome gần như bằng không và để nhiếp ảnh cùng tiêu đề mang trang."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-crimson-marquee: #821e1e;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-bone: #f3f3f3;
          --color-silver: #e5e7eb;
          --color-smoke: #cccccc;
          --color-cornflower: #9dc1fb;
        
          /* Typography — Font Families */
          --font-flatspot: 'Flatspot', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-girott: 'Girott', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-heading: 36px;
          --leading-heading: 0.9;
          --tracking-heading: -1.08px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -1.26px;
          --text-display: 160px;
          --leading-display: 0.8;
          --tracking-display: -4.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-31: 31px;
          --spacing-45: 45px;
          --spacing-54: 54px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 120-160px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-full: 80px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 8px;
          --radius-pills: 100px;
          --radius-badges: 80px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #f3f3f3;
          --surface-smoke: #cccccc;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-crimson-marquee: #821e1e;
          --color-ink: #000000;
          --color-paper: #ffffff;
          --color-bone: #f3f3f3;
          --color-silver: #e5e7eb;
          --color-smoke: #cccccc;
          --color-cornflower: #9dc1fb;
        
          /* Typography */
          --font-flatspot: 'Flatspot', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-girott: 'Girott', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-heading: 36px;
          --leading-heading: 0.9;
          --tracking-heading: -1.08px;
          --text-heading-lg: 42px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -1.26px;
          --text-display: 160px;
          --leading-display: 0.8;
          --tracking-display: -4.96px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-27: 27px;
          --spacing-30: 30px;
          --spacing-31: 31px;
          --spacing-45: 45px;
          --spacing-54: 54px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-full: 80px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
        }