8returns___style_reference:
  info: "> Tia chớp xanh vôi trong phòng điều khiển nửa đêm — một điểm nhấn điện duy nhất đánh thức không gian làm việc đơn sắc vốn dĩ."

  theme: "mixed"

  info: "8returns sử dụng ngôn ngữ thiết kế split-canvas: hero xanh navy gần như đen mở ra một nội thất trắng sáng, mang phong cách workspace. Bản sắc thị giác xoay quanh sự tương phản — một màu xanh vôi điện (#cfff69) là điểm nhấn màu duy nhất được phép phát sáng trên nền hero tối, trong khi các bề mặt sản phẩm trắng vẫn trung tính, rộng rãi và gần như mang tính phòng thí nghiệm. Các card nổi trên nền canvas thép-lạnh (#eef0f2) với góc bo 16px, và màu trang trí duy nhất bên trong các section trắng là cobalt iris (#6289ff) được dùng một cách tiết kiệm cho tag, icon và highlight chip. Typography là một geometric sans duy nhất (roobert) chạy trên một scale chặt chẽ, hơi positive-tracked từ caption 11px đến display 64px, không có serif, không mono, không script — một giọng nói duy nhất trên mọi bề mặt."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|-------|"
    info: "| Lime Volt | `#cfff69` | `--color-lime-volt` | Primary action — nút CTA dạng filled, gạch chân tab active, highlight chip. Màu sắc sống động duy nhất được phép trên nền hero tối; độ bão hòa gần như huỳnh quang của nó trên nền #051923 tạo cảm giác cấp bách mà không mang hơi hướng ấm áp hay hung hăng |"
    info: "| Cobalt Iris | `#6289ff` | `--color-cobalt-iris` | Điểm nhấn viền tím cho tag, divider và cạnh UI đang focus |"
    info: "| Midnight Abyss | `#051923` | `--color-midnight-abyss` | Primary text, nền hero, dark section canvas, text trên nút lime fill. Gần như đen với undertone teal mát — không phải đen tuyền, sắc xanh nhẹ giúp nó có cảm giác kỹ thuật hơn là phẳng |"
    info: "| Abyssal Teal | `#004853` | `--color-abyssal-teal` | Bề mặt card tối và gradient endpoint — màu cầu nối giữa Midnight Abyss và radial gradient teal đậm. Dùng cho elevated dark card và inset panel |"
    info: "| Steel Mist | `#eef0f2` | `--color-steel-mist` | Light neutral action fill cho nút trên nền tối. |"
    info: "| Charcoal Edge | `#27272a` | `--color-charcoal-edge` | Muted body text và secondary border. Xám đậm họ Zinc cho phân cấp dưới mức primary text |"
    info: "| Zinc | `#a1a1aa` | `--color-zinc` | Icon stroke, tertiary text, disabled state và subtle divider. Chrome nhẹ nhất trong giao diện |"
    info: "| Slate | `#525252` | `--color-slate` | Secondary body text, caption label, metadata. Xám trung bình cho nội dung body cần đọc được nhưng phải lùi lại |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card, text trên nút và form input — điểm sáng nhất trong surface stack. Card trên nền Steel Mist đọc như những tấm panel trắng sắc nét |"

  tokens___typography:

    roobert___typeface_duy_nhất___geometric_sans_dùng_cho_mọi_thứ_từ_caption_11px_đến_display_headline_64px__line_height_chặt_ở_kích_thước_lớn_1_07_1_16_khiến_headline_có_cảm_giác_kiến_trúc_và_xếp_chồng__line_height_lỏng_ở_body_1_5_1_63_giúp_văn_bản_dài_dễ_đọc__tracking_hơi_dương_là_có_chủ_đích___nó_tạo_khoảng_thở_cho_các_letterform_hình_học_ở_kích_thước_nhỏ_mà_không_trông_lỏng_lẻo_ở_kích_thước_display_____font_roobert:
      - "**Thay thế:** Inter, General Sans, hoặc Söhne"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 10px, 11px, 13px, 14px, 16px, 18px, 20px, 22px, 26px, 48px, 56px, 60px, 64px"
      - "**Line height:** 1.07, 1.16, 1.23, 1.24, 1.25, 1.27, 1.38, 1.40, 1.43, 1.44, 1.45, 1.50, 1.54, 1.56, 1.63"
      - "**Letter spacing:** 0.0050em đến 0.0360em (hơi dương, mạnh nhất ở kích thước nhỏ nhất)"
      - "**Vai trò:** Typeface duy nhất — geometric sans dùng cho mọi thứ từ caption 11px đến display headline 64px. Line-height chặt ở kích thước lớn (1.07–1.16) khiến headline có cảm giác kiến trúc và xếp chồng; line-height lỏng ở body (1.5–1.63) giúp văn bản dài dễ đọc. Tracking hơi dương là có chủ đích — nó tạo khoảng thở cho các letterform hình học ở kích thước nhỏ mà không trông lỏng lẻo ở kích thước display."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | 0.31px | `--text-caption` |"
      info: "| body | 16px | 1.56 | 0.58px | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | 0.58px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.45 | 0.1px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.27 | 0.1px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.16 | 0.1px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.12 | 0.1px | `--text-heading-lg` |"
      info: "| display | 64px | 1.07 | 0.1px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 6px |"
      info: "| cards | 16px |"
      info: "| inputs | 12px |"
      info: "| buttons | 32px |"
      info: "| hero-image-frame | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-xl` |"
      info: "| subtle | `rgba(0, 0, 0, 0.07) 0px 1px 2px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    primary_cta_button_lime_pill:
      vai_trò: "Hành động đặc trưng — một nút filled màu xanh vôi huỳnh quang thu hút sự chú ý trên cả nền tối và sáng."

      info: "Fill #cfff69, text #051923, border-radius 32px (full pill), padding ngang 24px, padding dọc 12px. Font: roobert 600, 14–16px. Fill xanh vôi mang năng lượng của thương hiệu; text Midnight Abyss trên nền xanh vôi tạo độ tương phản 18:1. Dùng một cách tiết kiệm — tối đa một nút trên mỗi viewport."

    ghost_outline_button_header_cta:
      vai_trò: "Secondary action trong navigation và trong các section tối — pill có độ nhấn thấp, mời gọi mà không đòi hỏi."

      info: "Nền trong suốt, border 1px #ffffff (trên nền tối) hoặc #051923 (trên nền sáng), text cùng màu với border, border-radius 32px, padding dọc 12px / ngang 20px. Dùng cho 'Book a demo' trong header và 'Log in' — giữ cho nav yên tĩnh để nút lime primary có thể nổi bật."

    tab_navigation_item:
      vai_trò: "Thanh nav tab sản phẩm nằm ngay dưới hero — bề mặt navigation quan trọng nhất sau header."

      roobert_14px_500__inactive: "#051923 ở độ mờ ~60%. Active: #051923 với gạch chân 2px màu xanh vôi (#cfff69) nằm trực tiếp bên dưới text. Không có background fill, không border, không padding-box — gạch chân là chỉ báo active duy nhất. Active label hơi đậm hơn inactive."

    product_hero_frame:
      vai_trò: "Bề mặt screenshot/demo lớn nằm dưới headline hero — hiển thị sản phẩm trong bối cảnh với một bức tranh phong cảnh cổ điển."

      info: "border-radius 24px, border 1px #1e3039, overflow hidden, shadow lớn ấn tượng rgba(0,0,0,0.25) 0px 25px 50px -12px. Bên trong hiển thị mockup return portal đặt chồng lên một bức tranh phong cảnh muted — sự tương phản giữa tác phẩm nghệ thuật cổ điển và UI sản phẩm hiện đại là điểm nhấn thị giác."

    feature_card_white:
      vai_trò: "Tile xem trước sản phẩm trong feature section ở giữa trang."

      info: "Background #ffffff, border-radius 16px, border 1px #e0e0e0, padding 32px. Chứa mockup UI sản phẩm nhỏ (trạng thái trả hàng, hàng bảng, trình chỉnh sửa quy tắc). Không có shadow — dựa vào border và nền Steel Mist phía sau để tạo sự phân cách."

    testimonial_card:
      vai_trò: "Card chứng thực khách hàng trong carousel section — mỗi card kết hợp logo thương hiệu, ảnh lifestyle full-bleed và một lớp phủ thống kê lớn."

      info: "Ảnh lấp đầy toàn bộ card, border-radius 16px, không border. Lớp phủ ở góc dưới-bên trái: số lớn màu trắng (roobert 700, ~48–60px) với caption ngắn bên dưới bằng roobert 400, 14px, màu trắng. Logo thương hiệu ở góc trên-bên trái màu trắng. Bức ảnh chính là card — chrome là tối thiểu."

    brand_logo_strip:
      vai_trò: "Trust bar — hàng ngang logo thương hiệu đơn sắc nằm trên nền trắng."

      info: "Logo được render bằng #051923 ở độ mờ ~50–60% hoặc xám phẳng, cách đều nhau trong một hàng duy nhất, mỗi logo rộng ~120px. Không có divider, không animation, không caption — logo tự nói lên tất cả."

    section_pill_tabs:
      vai_trò: "Content-segment switcher trong feature section (ví dụ: 'Returns automation / Customer retention / Returns prevention')."

      roobert_14px_500__tab_active: "background #051923, text #ffffff, border-radius 24px (pill), padding 8px 20px. Tab inactive: không background, text #525252. Pill active tối trên nền tab inactive trong suốt tạo ra một toggle rõ ràng mà không cần dùng màu nhấn."

    header_navigation:
      vai_trò: "Navigation cấp cao nhất của site với logo, link chính và account action."

      info: "Nằm trên hero tối (#051923) với background trong suốt — transparent. Logo '8RETURNS' bằng roobert 700, 18px, màu trắng, letter-spacing hơi dương. Nav link (Platform, Pricing, Integrations, Resources, Company) bằng roobert 400, 14px, màu trắng, có dropdown chevron. Bên phải: 'Log in' dưới dạng text trắng đơn giản, 'Book a demo' dưới dạng ghost outline button."

    dark_section_tab_bar:
      vai_trò: "Product sub-navigation xuất hiện trong một dải tối bên dưới hero, liệt kê các module sản phẩm của 8returns."

      info: "Dải tối full-width (#051923), padding dọc 16px. Tab inline: 'Custom Portal' (active, với gạch chân xanh vôi), 'Exchange', 'Reasons', 'Shop Prompt', 'Shop Browser', 'Return Methods', 'Overview', 'Success'. Trạng thái active giống gạch chân 2px xanh vôi được dùng ở nơi khác — chỉ báo active nhất quán trên toàn bộ product nav."

    product_return_item_card:
      vai_trò: "Card UI trong sản phẩm — đơn vị của giao diện return portal (có thể thấy trong hero demo)."

      info: "Bề mặt trắng bên trong khung sản phẩm, border-radius 12px, border 1px #eef0f2, padding 16px. Bên trái: thumbnail sản phẩm nhỏ (hình vuông, 48px, radius 8px). Ở giữa: tên sản phẩm (roobert 500, 14px) + biến thể (roobert 400, 12px, #525252). Bên phải: giá (roobert 600, 14px). Chỉ báo trạng thái (eligible / not eligible) nằm phía trên item dưới dạng label nhỏ với một chấm màu."

    highlight_chip___tag:
      vai_trò: "Label inline nhỏ cho trạng thái, danh mục hoặc tính năng nổi bật — sử dụng điểm nhấn cobalt iris."

      info: "Background #6289ff ở độ mờ ~15% hoặc solid #6289ff với text trắng, border-radius 6px, padding 4px 10px, roobert 500 12px. Dùng cho tag như 'country · equal · Germany' trong trình chỉnh sửa quy tắc và metadata inline tương tự."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng fill xanh vôi #cfff69 với text #051923 cho hành động quan trọng nhất trên mọi màn hình — không bao giờ dùng xanh vôi cho nút phụ, tag hoặc element trang trí"
      - "Đặt hero và bất kỳ dark section background nào thành #051923, không phải #000000 — undertone teal mát là signature darkness của thương hiệu"
      - "Dùng border-radius 32px cho tất cả nút và control dạng pill để duy trì signature 'pill-button + monochrome'"
      - "Dùng border-radius 16px cho card, 12px cho input, 6px cho tag — ba radius này xác định phân cấp bề mặt và không được hoán đổi"
      - "Giữ các product section trắng trên nền canvas Steel Mist #eef0f2, không bao giờ trên nền trang #ffffff tuyệt đối — canvas luôn là off-white"
      - "Đặt headline line-height thành 1.07–1.16 ở kích thước 48px+ để có kiểu xếp chồng kiến trúc chặt chẽ — không bao giờ dùng body line-height cho kích thước display"
      - "Chỉ dùng Cobalt Iris #6289ff cho tag, icon và điểm nhấn inline nhỏ bên trong section trắng — nó không phải màu CTA và không được xuất hiện dưới dạng button fill"

    không_nên_làm:
      - "Không dùng nhiều màu nhấn sống động cùng nhau — hệ thống là đơn sắc (navy/trắng/xám) cộng với đúng một điểm nhấn xanh vôi và một cobalt iris, không có gì khác"
      - "Không đặt xanh vôi hoặc cobalt trên nền canvas sản phẩm trắng mà không có canvas tối phía sau — điểm nhấn hoạt động nhờ sự tương phản, không phải trong sự cô lập"
      - "Không dùng #000000 tuyệt đối cho text hoặc background — #051923 là near-black của thương hiệu và mang undertone teal mát xác định hệ thống"
      - "Không áp dụng shadow cho feature card — hệ thống card dựa vào border 1px và canvas Steel Mist để tạo sự phân cách, shadow được dành riêng cho hero product frame và element nổi"
      - "Không trộn lẫn giá trị radius trong cùng một loại component — button luôn là 32px (pill), card luôn 16px, input luôn 12px, tag luôn 6px"
      - "Không dùng nhiều hơn một font family — roobert là giọng nói duy nhất; không serif, không mono, không script ở bất kỳ đâu trong hệ thống"
      - "Không đặt page background thành #ffffff — canvas luôn là #eef0f2; màu trắng tuyệt đối được dành riêng cho bề mặt card cần nổi lên khỏi canvas"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#eef0f2` | Off-white mát phía sau tất cả product section trắng |"
    info: "| 1 | Card Surface | `#ffffff` | Panel trắng — feature card, testimonial card, product preview |"
    info: "| 2 | Dark Card | `#004853` | Elevated card trên hero tối hoặc dark section |"
    info: "| 3 | Hero Canvas | `#051923` | Nền hero tối và dark section |"
    info: "| 4 | Accent Surface | `#cfff69` | CTA fill, active state, highlight chip — bề mặt chức năng, không phải trang trí |"

  elevation:

    - "**Product Screenshot Frame:** `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`"
    - "**Card:** `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px`"
    - "**Subtle UI element:** `rgba(0, 0, 0, 0.07) 0px 1px 2px 0px`"

  imagery:

    info: "Imagery tuân theo chiến lược đặt cạnh nhau 'cổ điển × hiện đại'. Hero product demo được đặt có chủ đích lên trên một bức tranh phong cảnh muted — một bức tranh biển phong cách Lãng mạn cổ điển với bầu trời nhiều mây — để tạo sự tương phản biên tập với UI return-portal hiện đại nổi bên trên. Bên dưới hero, nhiếp ảnh chuyển sang lifestyle/editorial: chân dung chặt chẽ và ảnh thương hiệu full-bleed của quần áo mẫu mặc (thể thao, đương đại, activewear). Logo thương hiệu trong trust bar được render phẳng và đơn sắc, không màu, không chrome. Ảnh chụp màn hình UI sản phẩm xuất hiện trong card trắng có viền mềm, không bao giờ dưới dạng raw screenshot. Tỷ lệ tổng thể là image-light: hầu hết trang là typography và khoảng trắng; imagery xuất hiện như dấu câu, không phải như hình nền."

  layout:

    info: "Trang là một luồng single-column xếp chồng theo chiều dọc với max-width ~1200px căn giữa trong khung, nhưng hero phá vỡ full-bleed. Hero là một dải tối full-bleed (#051923) với một chồng text căn giữa (headline + subtitle + CTA xanh vôi) theo sau là product demo kéo dài gần đến mép viewport, được chặn trên cùng bởi một dải nav tab tối cũng chạy full-bleed. Từ brand-logo strip trở xuống, layout quay lại max-width căn giữa với nhịp điệu dọc rộng rãi (section gap 80px). Section nội dung xen kẽ giữa chồng text căn giữa và lưới card 2-up hoặc 3-up. Section testimonial sử dụng carousel ngang với điều khiển mũi tên trái/phải. Navigation là một top bar trong suốt duy nhất phủ lên hero — không có sticky behavior, không có sidebar. Mật độ tổng thể là comfortable: headline lớn, padding rộng rãi bên trong card, khoảng thở giữa các section."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "background: #eef0f2 (page canvas) / #ffffff (card) / #051923 (hero/dark)"
    - "text: #051923 (primary) / #525252 (secondary) / #a1a1aa (tertiary)"
    - "border: #e0e0e0 (default) / #051923 (strong) / #ffffff (trên nền tối)"
    - "accent: #cfff69 (xanh vôi — chỉ dùng cho CTA và highlight)"
    - "secondary accent: #6289ff (cobalt iris — chỉ dùng cho tag và icon)"
    - "primary action: #cfff69 (filled action)"

    3_5_ví_dụ_component_prompt:

    - "*Hero section*: Background #051923 full-bleed. Headline 56px roobert 600, #ffffff, line-height 1.12. Subtitle 18px roobert 400, #ffffff ở độ mờ 70%. Primary CTA: fill #cfff69, text #051923, radius 32px, padding 12px/24px, roobert 600 14px. Bên dưới headline, một khung product demo: radius 24px, border 1px #1e3039, shadow rgba(0,0,0,0.25) 0px 25px 50px -12px, hiển thị mockup return-portal trắng đặt chồng lên một bức tranh phong cảnh muted."

    - "*Feature card*: Background #ffffff, radius 16px, border 1px #e0e0e0, padding 32px. Heading 22px roobert 600, #051923. Body 16px roobert 400, #525252, line-height 1.56. Không shadow — border xác định cạnh so với canvas #eef0f2."

    - "*Section pill tab*: Inactive: background trong suốt, text #525252, roobert 500 14px. Active: background #051923, text #ffffff, radius pill 24px, padding 8px/20px. Nằm inline với gap 8px giữa các tab."

    - "*Testimonial card*: Ảnh full-bleed (lifestyle hoặc editorial) lấp đầy card, radius 16px, không border. Lớp phủ góc dưới-bên trái: thống kê lớn bằng roobert 700, 56px, #ffffff, line-height 1.1. Bên dưới: caption bằng roobert 400, 14px, #ffffff. Logo thương hiệu ở góc trên-bên trái màu trắng."

    - "Tạo Primary Action Button: background #cfff69, text #051923, radius 9999px, padding pill nhỏ gọn. Dùng treatment filled này cho CTA chính."

  elevation_philosophy:

    info: "Elevation được dùng một cách phẫu thuật, không phải hào phóng. Hệ thống chủ yếu dựa vào surface contrast (Steel Mist canvas → white card) và border 1px để xác định phân cấp. Shadow xuất hiện trong đúng hai ngữ cảnh: shadow lớn ấn tượng trên hero product frame (làm cho product demo có cảm giác nâng lên khỏi trang và mang tính biên tập), và double-shadow 1px+2px dạng hairline trên card trong layout dày đặc. Không có hiệu ứng hover-lift, không có shadow màu, không có hiệu ứng glow. Khi nghi ngờ, hãy dùng border, không phải shadow."

  gradient_system:

    info: "Ba gradient được xác định nhưng được dùng làm backdrop, không phải trang trí:"

    - "*Dark teal radial* — radial-gradient(80% 80%, rgb(0,102,112) 0%, rgb(0,72,83) 50%, rgb(0,56,64) 100%) — dùng làm vignette nhẹ trên dark hero section để thêm chiều sâu mà không gây nhiễu màu."

    - "*Navy diagonal* — linear-gradient(135deg, rgb(5,25,35) 0%, rgb(10,42,56) 100%) — dùng trên dark card và panel nơi flat #051923 sẽ có cảm giác quá đồng nhất."

    - "*Cobalt diagonal* — linear-gradient(135deg, rgb(98,137,255) 0%, rgb(74,111,224) 100%) — gradient màu duy nhất, dùng trên bề mặt điểm nhấn cobalt iris (tag background, icon container) để tạo cho secondary accent một chút chiều sâu."

    info: "Gradient không bao giờ xuất hiện trên text, không bao giờ trên primary CTA và không bao giờ trải rộng quá một component duy nhất."

  similar_brands:

    - "**Linear** — Cùng hero dark-near-black với một màu nhấn sống động duy nhất, geometric sans typography ở kích thước display và CTA dạng pill"
    - "**Vercel** — Cùng mô hình trang split dark/light, bề mặt đơn sắc với một điểm nhấn sáng duy nhất và geometric sans họ roobert (Vercel dùng Geist, một họ gần)"
    - "**Resend** — Cùng treatment accent xanh vôi trên nền navy, typeface geometric duy nhất, card radius 16px và sử dụng shadow tối thiểu"
    - "**Loops** — Cùng dark-canvas hero đơn sắc mở ra không gian làm việc sản phẩm trắng sạch, với một màu nhấn sáng duy nhất chỉ dành riêng cho CTA"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-lime-volt: #cfff69;
          --color-cobalt-iris: #6289ff;
          --color-midnight-abyss: #051923;
          --color-abyssal-teal: #004853;
          --color-steel-mist: #eef0f2;
          --color-charcoal-edge: #27272a;
          --color-zinc: #a1a1aa;
          --color-slate: #525252;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-roobert: 'roobert', 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.31px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: 0.58px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 0.58px;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --tracking-subheading: 0.1px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: 0.1px;
          --text-heading: 48px;
          --leading-heading: 1.16;
          --tracking-heading: 0.1px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.12;
          --tracking-heading-lg: 0.1px;
          --text-display: 64px;
          --leading-display: 1.07;
          --tracking-display: 0.1px;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-120: 120px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-tags: 6px;
          --radius-cards: 16px;
          --radius-inputs: 12px;
          --radius-buttons: 32px;
          --radius-hero-image-frame: 24px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
          --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 1px 2px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #eef0f2;
          --surface-card-surface: #ffffff;
          --surface-dark-card: #004853;
          --surface-hero-canvas: #051923;
          --surface-accent-surface: #cfff69;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-lime-volt: #cfff69;
          --color-cobalt-iris: #6289ff;
          --color-midnight-abyss: #051923;
          --color-abyssal-teal: #004853;
          --color-steel-mist: #eef0f2;
          --color-charcoal-edge: #27272a;
          --color-zinc: #a1a1aa;
          --color-slate: #525252;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-roobert: 'roobert', 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.31px;
          --text-body: 16px;
          --leading-body: 1.56;
          --tracking-body: 0.58px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: 0.58px;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --tracking-subheading: 0.1px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.27;
          --tracking-heading-sm: 0.1px;
          --text-heading: 48px;
          --leading-heading: 1.16;
          --tracking-heading: 0.1px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.12;
          --tracking-heading-lg: 0.1px;
          --text-display: 64px;
          --leading-display: 1.07;
          --tracking-display: 0.1px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-120: 120px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-xl: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
          --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 1px 2px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
        }