watch_new_originals___style_reference:
  info: "> Khoảng không điện ảnh với ánh đèn sân khấu. Hãy tưởng tượng một sảnh rạp chiếu phim tối om, nơi một ngọn đèn neon xanh lơ là thứ màu sắc duy nhất trong tầm mắt — mọi thứ còn lại đều là chiều sâu đơn sắc, dẫn mắt người xem đến những tấm poster trên tường."

  theme: "dark"

  info: "Disney+ hoạt động như một canvas rạp chiếu phim tối: khoảng không gần như đen tuyền (#040714) nơi artwork phim và series là nhân vật chính, còn UI chrome lùi ra ngoài rìa. Giao diện dựa trên độ tương phản cực cao (trắng #fafafa trên nền gần đen) và một điểm nhấn màu sắc duy nhất — cyan điện tử (#33ddff) — đóng vai trò là lý do duy nhất để rời mắt khỏi nội dung. Typography là một font sans-serif tùy chỉnh duy nhất (Inspire) ở cỡ vừa phải, với letter-spacing dương (0.025em) mang đến cho cả những label ngắn một nhịp điệu tinh tế, cao cấp. Hệ thống ưu tiên nội dung: card là tile tỷ lệ poster, section là horizontal scroll rails, và những quyết định màu sắc nổi bật duy nhất (cyan CTA fills, teal link text) tồn tại để thúc đẩy chuyển đổi, không phải trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Midnight Canvas | `#040714` | `--color-midnight-canvas` | Nền trang, nền hero, canvas chính — màu navy gần đen sâu thẳm, hút mắt và làm artwork nổi bật |"
    info: "| Abyss | `#010104` | `--color-abyss` | Lớp bề mặt sâu nhất, nền navigation — lớp nền gần như đen tuyền bên dưới canvas |"
    info: "| Eclipse | `#0e0b14` | `--color-eclipse` | Nền footer, bề mặt tối thay thế — màu tối hơi ấm để tạo biến thể chiều sâu |"
    info: "| Carbon | `#1e1f24` | `--color-carbon` | Bề mặt tối nâng cao — dùng cho card hoặc panel nằm trên canvas |"
    info: "| Slate Veil | `#282a36` | `--color-slate-veil` | Trạng thái form trung tính, badge text và phản hồi UI nhẹ nhàng nơi màu sắc nên giữ kín đáo. Không nâng cấp lên màu CTA chính |"
    info: "| Luminous | `#fafafa` | `--color-luminous` | Text chính, heading text, icon fills, link text, button labels — yếu tố sáng chủ đạo trên toàn giao diện |"
    info: "| Pearl | `#e5e7eb` | `--color-pearl` | Màu border dùng ở quy mô lớn (đường kẻ, divider, cạnh card) — khung xương cấu trúc của UI |"
    info: "| Mist | `#b7b8bd` | `--color-mist` | Body text, secondary text, helper copy — xám nhạt cho nội dung không phải chính |"
    info: "| Fog | `#c0c0c0` | `--color-fog` | List text, icon fills, secondary metadata — mức sáng nhất của secondary text |"
    info: "| Deep Ink | `#02172a` | `--color-deep-ink` | Gray text accent cho link, tag và cụm từ ngắn được nhấn mạnh. Không nâng cấp lên màu CTA chính |"
    info: "| Onyx Label | `#17171c` | `--color-onyx-label` | Text tối cho button label tương phản cao trên nền sáng |"
    info: "| Electric Cyan | `#33ddff` | `--color-electric-cyan` | Nút CTA chính (SIGN UP NOW, plan tier cards) — màu hành động có sắc duy nhất; neon-cyan trên nền tối tạo cảm giác khẩn cấp kiểu rạp chiếu phim |"
    info: "| Teal Pulse | `#02d6e8` | `--color-teal-pulse` | Accent text, điểm nhấn giá khuyến mãi (€4.99), link emphasis, body emphasis — màu teal đậm hơn một chút, dùng cho những khoảnh khắc có sắc nội dòng không phải button |"

  tokens___typography:

    inspire___kiểu_chữ_duy_nhất_trên_toàn_bộ_giao_diện___heading__body__button__label__nav__cam_kết_một_font_là_có_chủ_đích__inspire_phải_đảm_nhận_cả_micro_label_12px_lẫn_display_moment_40px_mà_không_mất_đi_cá_tính__dùng_700_cho_heading__giá_và_nhấn_mạnh__400_cho_mọi_thứ_còn_lại_____font_inspire:
      - "**Thay thế:** Inter, Helvetica Neue, Arial"
      - "**Trọng lượng:** 400, 700"
      - "**Cỡ chữ:** 12, 14, 16, 18, 20, 28, 40px"
      - "**Line height:** 1.20, 1.38, 1.40, 1.50, 1.83"
      - "**Letter spacing:** 0.0250em đồng nhất — tracking dương nhất quán này là dấu ấn riêng của hệ thống chữ, áp dụng giống hệt nhau ở cả 12px và 40px, tạo nhịp điệu tinh tế, cao cấp"
      - "**Vai trò:** Kiểu chữ duy nhất trên toàn bộ giao diện — heading, body, button, label, nav. Cam kết một font là có chủ đích: Inspire phải đảm nhận cả micro-label 12px lẫn display moment 40px mà không mất đi cá tính. Dùng 700 cho heading, giá và nhấn mạnh; 400 cho mọi thứ còn lại."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.38 | 0.3px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | 0.35px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.4px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | 0.45px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.4 | 0.5px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.2 | 0.7px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | 1px | `--text-heading-lg` |"

  tokens___spacing___shapes:

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

    mật_độ: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 12px |"
      info: "| inputs | 8px |"
      info: "| buttons | 12px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48-64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    cyan_cta_button:
      vai_trò: "Hành động chuyển đổi chính — sign up, subscribe, chọn gói"

      fill: "#33ddff (Electric Cyan). Text: #02172a (Deep Ink), Inspire 700, 14-16px, letter-spacing 0.4px. Padding: 12px 24px. Border-radius: 12px. Không border, không shadow. Button là một mảng neon phẳng — sự phẳng lì chính là điểm mấu chốt. Text tối trên nền cyan tạo độ tương phản đảo ngược với khoảng không tối, khiến button phát sáng mà không cần elevation."

    plan_tier_card:
      vai_trò: "Hiển thị tùy chọn đăng ký (Standard with Ads, Standard, Premium)"

      info: "Full-width cyan fill (#33ddff), padding ~24px dọc, border-radius 12px. Tên gói bằng Inspire 700 cỡ 16-18px, #02172a. Giá bằng Inspire 700, ~20px, #02172a. Dòng tiết kiệm bằng Teal Pulse (#02d6e8) để nhấn mạnh. Toàn bộ card là button — vùng click là toàn bộ diện tích card, không phải button lồng bên trong."

    email_input_field:
      vai_trò: "Thu thập email đăng ký / newsletter"

      background: "transparent hoặc canvas #040714. Border: 1px solid #282a36 hoặc #e5e7eb ở độ mờ thấp. Border-radius: 8px. Padding: 12px 16px. Placeholder text: #b7b8bd. Text: #fafafa. Inspire 400, 16px. Input nằm sát cạnh cyan CTA button — chuyển tiếp từ tối sang neon tạo khung cho khoảnh khắc chuyển đổi."

    content_tile_card:
      vai_trò: "Card poster phim/series trong carousel và grid"

      info: "Không có background fill — artwork poster CHÍNH LÀ card. Tỷ lệ khung hình 2:3 (poster dọc). Border-radius: 12px. Border tối thiểu hoặc không có. Số thứ tự tùy chọn (1-10) đè lên góc trên bên trái bằng Inspire 700 cỡ ~40px, #33ddff hoặc #fafafa. Dải metadata bên dưới poster: tiêu đề bằng Inspire 700 14px #fafafa, thể loại/năm bằng Inspire 400 12px #b7b8bd."

    top_10_ranked_card:
      vai_trò: "Xếp hạng nội dung hero với số thứ tự lớn đè lên"

      tile_poster_dọc_tỷ_lệ_2: "3) với số thứ tự lớn (1-10) bằng Inspire 700, 40px, đặt chồng lên góc trên bên trái tile. Số thứ tự màu #33ddff (Electric Cyan) — khoảnh khắc có sắc duy nhất trong content rail. Card không border, không shadow, không background. Số thứ tự chính là badge."

    feature_comparison_row:
      vai_trò: "Bảng so sánh gói — số luồng đồng thời, Dolby Atmos, quảng cáo, v.v."

      đường_phân_cách_hàng: "1px #e5e7eb ở độ mờ thấp. Label tính năng căn trái bằng Inspire 400, 16px, #fafafa. Giá trị căn giữa theo từng cột. Icon checkmark màu #fafafa cho tính năng được hỗ trợ, dấu gạch ngang #282a36 cho không hỗ trợ. Tiêu đề cột (tên gói) bằng Inspire 700, 14-16px, #33ddff khi đang active/highlighted. Không có card background — bảng nằm thoáng trên canvas."

    section_heading:
      vai_trò: "Tiêu đề section nội dung (ví dụ: 'Top 10 Today', 'Choose your plan', 'Watch the way you want')"

      info: "Inspire 700, 28-40px, #fafafa, letter-spacing 0.7-1.0px. Căn giữa. Không gạch chân, không đường accent. Subheading tùy chọn bằng Inspire 400, 18px, #b7b8bd, căn giữa bên dưới. Khoảng trống rộng (40-64px) phía trên heading tạo khoảng lặng trước nội dung section."

    top_navigation_bar:
      vai_trò: "Navigation chính của trang"

      background: "#010104 (Abyss) hoặc trong suốt trên canvas. Border-bottom: 1px #6f717b ở độ mờ thấp. Logo bên trái. Link bằng Inspire 400, 14-16px, #fafafa. Nút Login bên phải: border 1px #e5e7eb, text #fafafa, border-radius 8px, padding 8px 16px. Không có dropdown menu hiển thị trong navigation chính — chrome tối giản."

    hero_pricing_banner:
      vai_trò: "Lời đề nghị chuyển đổi trung tâm đè lên nền lưới poster"

      info: "Cụm căn giữa trên nền mosaic poster tối. Headline 'From' bằng Inspire 400 20px #fafafa. Giá '€4.99' bằng Inspire 700 40px hoặc lớn hơn, bên trong hình chữ nhật bo tròn cyan (#33ddff) (border-radius 12px) làm điểm neo thị giác. Thời lượng 'a month for 3 months' bằng Inspire 400 20px #fafafa. Hạn chót bằng Inspire 400 14px #b7b8bd. Email input + cyan CTA bên dưới."

    ghost_outline_button:
      vai_trò: "Hành động phụ — 'View all plans', 'Learn more'"

      info: "Không fill (nền trong suốt hoặc màu canvas). Border: 1px solid #e5e7eb hoặc #fafafa. Text: #fafafa, Inspire 400-700, 14-16px. Border-radius: 8-12px. Padding: 8px 16px đến 12px 24px. Gạch chân text thường dùng cho biến thể text-link. Đây là phiên bản kiềm chế của cyan CTA."

    footer:
      vai_trò: "Link pháp lý, chữ nhỏ, nội dung cuối trang"

      background: "#0e0b14 (Eclipse). Text: #b7b8bd và #c0c0c0, Inspire 400, 12-14px. Link màu #fafafa, không gạch chân mặc định, gạch chân khi hover. Được tách khỏi nội dung chính bằng padding trực quan (~48px) thay vì border cứng."

    promotional_price_highlight:
      vai_trò: "Gạch ngang hoặc dòng tiết kiệm trong ngữ cảnh giá"

      info: "Text tiết kiệm ('Save €2.00 per month') bằng Teal Pulse (#02d6e8), Inspire 400, 14-16px. Việc đặt teal (không phải cyan) có chủ đích — teal mang nghĩa nhấn mạnh thông tin, trong khi cyan dành cho hành động. Điều này tạo hệ thống phân cấp màu sắc hai tầng: cyan = hành động, teal = thông tin."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng #33ddff (Electric Cyan) riêng cho filled CTA buttons và active plan tier cards — không fill nào khác được mang màu này"
      - "Giữ tất cả text trên nền tối ở #fafafa cho primary, #b7b8bd cho secondary, #c0c0c0 cho tertiary — không bao giờ dùng màu sắc cho body text"
      - "Dùng Teal Pulse (#02d6e8) cho nhấn mạnh nội dòng, dòng tiết kiệm và điểm nhấn thông tin — không dùng cho button"
      - "Áp dụng Inspire ở mọi cỡ với cùng letter-spacing 0.025em — không thắt chặt tracking trên cỡ display"
      - "Dùng border-radius 12px cho tất cả button và content card; 8px cho input và nav element"
      - "Để artwork poster chiếm toàn bộ diện tích card — không bao giờ bọc poster trong khung card, border hoặc shadow có thể nhìn thấy"
      - "Căn giữa section heading và để khoảng trống dọc 48-64px rộng rãi tạo nhịp điệu giữa các content rail"

    không_nên_làm:
      - "Không thêm màu accent bổ sung — hệ thống là đơn sắc với một cyan và một teal; bất kỳ màu sắc nào khác đều nằm ngoài hệ thống"
      - "Không áp dụng box-shadow cho card, button hoặc content tile — thiết kế dùng màu phẳng và border để tạo cấu trúc, không dùng elevation"
      - "Không dùng cyan (#33ddff) cho text không phải hành động, icon hoặc element trang trí — chỉ dành riêng cho filled button"
      - "Không ghi đè letter-spacing dương trên heading lớn — 0.025em ở 40px tạo tracking 1px, đây là tỷ lệ thì thầm chứ không phải la hét"
      - "Không đặt text sáng trên nền cyan mà không kiểm tra độ tương phản — dùng #02172a (Deep Ink) cho text tối trên nền cyan, không dùng #17171c hoặc đen tuyền"
      - "Không thêm background fill vào content poster card — artwork là card; thêm khung làm giảm hiệu ứng điện ảnh"
      - "Không dùng kiểu chữ thứ hai cho display hoặc hero moment — Inspire đảm nhận toàn bộ type scale, từ caption 12px đến heading 40px"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Abyss | `#010104` | Background sâu nhất, navigation chrome |"
    info: "| 1 | Midnight Canvas | `#040714` | Nền trang chính và hero |"
    info: "| 2 | Eclipse | `#0e0b14` | Footer và dải tối thay thế |"
    info: "| 3 | Carbon | `#1e1f24` | Card và panel nâng cao trên canvas |"
    info: "| 4 | Slate Veil | `#282a36` | Input field và bề mặt được xác định bằng border |"

  elevation:

    info: "Thiết kế cố tình phẳng — không box-shadow, không drop-shadow, không hiệu ứng phát sáng trên bất kỳ component nào. Cấu trúc được truyền đạt qua độ tương phản màu sắc, hairline border (#e5e7eb ở độ mờ thấp) và phân lớp bề mặt nền (5 cấp tối từ #010104 đến #282a36). Cyan CTA buttons là mảng neon phẳng, không phải element nổi. Content poster cards không có elevation vì artwork poster chính là elevation thị giác. Sự phẳng lì này là phép ẩn dụ rạp chiếu phim: khán giả nhìn vào màn hình, không nhìn vào khung xung quanh."

  imagery:

    info: "Ngôn ngữ hình ảnh chủ yếu là content-as-imagery: artwork poster phim và series chiếm ưu thế trên giao diện dưới dạng tile full poster-aspect (2:3) được sắp xếp trong horizontal scroll rails. Không có lifestyle photography, không có abstract illustration, không có 3D render — thư viện nội dung CHÍNH LÀ thiết kế hình ảnh. Poster được trình bày dưới dạng artwork thô với góc bo tròn (12px) và không có khung, shadow hoặc overlay ngoài số thứ tự cyan lớn cho mục Top 10. Icon tối giản và đơn sắc (line/fill trắng trên nền tối), chỉ xuất hiện cho checkmark, navigation và điều khiển tiện ích. Hero section dùng chính lưới poster làm background ảnh tối — tile bị mờ/làm tối tạo chiều sâu không khí phía sau lời đề nghị giá căn giữa. Không có gradient trang trí, không có điểm nhấn minh họa, không có ảnh chụp màn hình UI sản phẩm. Toàn bộ hệ thống hình ảnh phục tùng nội dung có bản quyền, coi UI chrome như lớp vỏ rạp chiếu phim tối bao quanh artwork."

  layout:

    info: "Full-bleed dark canvas với nội dung được sắp xếp trong horizontal scroll rails (poster carousel) xếp chồng theo chiều dọc. Hero section: background lưới poster làm tối đến gần đen, với khối giá/thu thập email căn giữa nổi ở một phần ba giữa. Content section: 'Top 10 Today' là hàng ngang gồm 6-7 tile poster với số thứ tự cyan lớn, có thể cuộn. Chọn gói: ba cyan tier card có chiều rộng bằng nhau được sắp xếp thành hàng căn giữa. So sánh tính năng: bảng full-width với label tính năng căn trái và giá trị cột căn giữa. Tất cả nội dung nằm trong max-width ~1200px, căn giữa, với khoảng cách 48-64px rộng rãi giữa các section. Navigation là top bar tối giản với logo trái và login phải. Nhịp điệu trang: hero → content rail → chọn gói → bảng so sánh → device-agnostic CTA → footer, mỗi section được phân cách bằng khoảng trống dọc thay vì divider trực quan."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text (primary): #fafafa"
    - "text (secondary): #b7b8bd"
    - "background (canvas): #040714"
    - "border / hairline: #e5e7eb"
    - "accent (nhấn mạnh thông tin): #02d6e8"
    - "primary action: #33ddff (filled action)"

    ví_dụ_component_prompts:

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

    - "**Plan Tier Card**: Card full-width với fill #33ddff, border-radius 12px, padding 24px. Tên gói bằng Inspire 700 cỡ 18px, màu #02172a. Giá bằng Inspire 700 cỡ 20px, màu #02172a. Dòng tiết kiệm bằng #02d6e8, Inspire 400, 14px."

    - "**Content Poster Tile**: Không background, không border, không shadow. Artwork poster lấp đầy khung dọc 2:3 với border-radius 12px. Số thứ tự đè lên góc trên bên trái bằng Inspire 700, 40px, màu #33ddff. Tiêu đề bên dưới bằng Inspire 700, 14px, #fafafa. Thể loại/năm bằng Inspire 400, 12px, #b7b8bd."

    - "**Section Heading + Subheading**: Inspire 700, 28px, #fafafa, letter-spacing 0.7px, căn giữa. Subheading bên dưới: Inspire 400, 18px, #b7b8bd, căn giữa. Khoảng trống 64px phía trên heading, gap 24px đến nội dung bên dưới."

  chromatic_hierarchy:

    info: "Hệ thống áp dụng kỷ luật màu sắc hai tầng nghiêm ngặt:"

    - "**Cyan (#33ddff)** = HÀNH ĐỘNG. Chỉ dùng cho filled button và plan card đang active/highlighted. Khi người dùng thấy cyan, nó phải có thể click được hoặc đang được chọn."
    - "**Teal (#02d6e8)** = THÔNG TIN. Dùng cho số tiền tiết kiệm, text nhấn mạnh và điểm nhấn nội dòng được đọc nhưng không click."

    info: "Không có màu nào khác xuất hiện dưới dạng fill, stroke hoặc text color trong giao diện. Điều này tạo một hợp đồng thị giác: cyan = làm, teal = biết. Nếu cần trạng thái thứ ba (lỗi, thành công, cảnh báo), dùng xám trung tính và iconography thay vì giới thiệu màu sắc mới — hệ thống cố tình không dùng semantic color coding."

  similar_brands:

    - "**Netflix** — Cùng cách tiếp cận dark-canvas điện ảnh, content-as-imagery với tile poster, màu accent một thương hiệu cho CTA và UI chrome tối giản phục tùng artwork"
    - "**HBO Max** — Canvas gần đen giống hệt, content rail cuộn ngang, typography trắng trên nền tối và CTA color-block phẳng không shadow elevation"
    - "**Apple TV+** — Cùng thẩm mỹ rạp chiếu tối, khoảng trống âm rộng rãi giữa các content section và chiến lược để nội dung có bản quyền gánh trọng lượng thị giác trong khi UI giữ đơn sắc"
    - "**Prime Video** — Giao diện streaming dark-mode với một điểm nhấn màu sắc duy nhất (blue-cyan đặc trưng của Prime), lưới poster nội dung và thiết kế card phẳng không elevation"
    - "**Crunchyroll** — Canvas tối với accent rực rỡ cho CTA, carousel tile poster cho nội dung anime và thiết kế component phẳng ưu tiên khả năng hiển thị artwork"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-canvas: #040714;
          --color-abyss: #010104;
          --color-eclipse: #0e0b14;
          --color-carbon: #1e1f24;
          --color-slate-veil: #282a36;
          --color-luminous: #fafafa;
          --color-pearl: #e5e7eb;
          --color-mist: #b7b8bd;
          --color-fog: #c0c0c0;
          --color-deep-ink: #02172a;
          --color-onyx-label: #17171c;
          --color-electric-cyan: #33ddff;
          --color-teal-pulse: #02d6e8;
        
          /* Typography — Font Families */
          --font-inspire: 'Inspire', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.38;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.45px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.5px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: 0.7px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 1px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 12px;
          --radius-inputs: 8px;
          --radius-buttons: 12px;
        
          /* Surfaces */
          --surface-abyss: #010104;
          --surface-midnight-canvas: #040714;
          --surface-eclipse: #0e0b14;
          --surface-carbon: #1e1f24;
          --surface-slate-veil: #282a36;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-canvas: #040714;
          --color-abyss: #010104;
          --color-eclipse: #0e0b14;
          --color-carbon: #1e1f24;
          --color-slate-veil: #282a36;
          --color-luminous: #fafafa;
          --color-pearl: #e5e7eb;
          --color-mist: #b7b8bd;
          --color-fog: #c0c0c0;
          --color-deep-ink: #02172a;
          --color-onyx-label: #17171c;
          --color-electric-cyan: #33ddff;
          --color-teal-pulse: #02d6e8;
        
          /* Typography */
          --font-inspire: 'Inspire', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.38;
          --tracking-caption: 0.3px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.35px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.4px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.45px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.5px;
          --text-heading: 28px;
          --leading-heading: 1.2;
          --tracking-heading: 0.7px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: 1px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
        }