authkit___style_reference:
  info: "> blueprint on midnight glass"

  theme: "dark"

  info: "AuthKit hoạt động trong ngôn ngữ blueprint midnight: canvas gần như đen, typography xanh lam-xám mát, và một màu tím iris điện duy nhất đánh dấu thứ duy nhất bạn có thể nhấn. Bề mặt là matte và phẳng — không có glossy gradient, không có drop shadow nặng — thay vào đó, một chòm sao các ánh sáng xanh mềm (rgba(186, 207, 247, 0.32)) và các đường viền inset 1px mảnh gợi ý một giao diện được vẽ bằng ánh sáng trên giấy tối. Typography được kiềm chế và tự tin: một geometric workhorse (Untitled Sans) xử lý mọi thứ từ caption 12px đến section title 24px, trong khi một display face rộng hơn (aeonikPro) đảm nhận hero và section headline. Hầu như tất cả màu sắc trang trí đều nằm trong bóng đổ, không phải trong phần fill — kết quả mang phong cách kỹ thuật, chính xác và phát sáng nhẹ nhàng thay vì sặc sỡ."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#05060f` | `--color-midnight-ink` | Canvas trang và bề mặt chính — nền gần như đen mà mọi thứ khác được vẽ lên. Một chút sắc xanh mát giúp nó không cảm thấy đen tuyệt đối, tạo chất giấy blueprint |"
    info: "| Graphite Plate | `#2f343e` | `--color-graphite-plate` | Bề mặt card và panel được nâng lên — cao hơn canvas một bậc, dùng cho các UI mockup xem trước và form container. Matte, không bao giờ bóng |"
    info: "| Steel Border | `#3f4959` | `--color-steel-border` | Đường viền mảnh, divider, và đường cấu trúc mờ giữa các UI element |"
    info: "| Fog | `#81899b` | `--color-fog` | Helper text và secondary metadata được giảm nhấn mạnh, nên lùi lại phía sau nội dung chính |"
    info: "| Pebble | `#9da7ba` | `--color-pebble` | Body text mờ và label ở trạng thái disabled — có thể đọc nhưng rõ ràng là secondary |"
    info: "| Moonlight | `#c7d3ea` | `--color-moonlight` | Màu body text và icon chính — off-white mát, mang giọng nói mặc định của giao diện |"
    info: "| Ice | `#d1e4fa` | `--color-ice` | Body text được tô sáng, secondary label mạnh, và nội dung badge khi cần sự hiện diện thêm mà không cần full white |"
    info: "| Glacier | `#d8ecf8` | `--color-glacier` | Heading, link text, và section title — văn bản có thể đọc sáng nhất, dùng để neo mắt vào những chuỗi quan trọng nhất |"
    info: "| Frost Link | `#b6d9fc` | `--color-frost-link` | Trạng thái link active và accent text phát sáng khi cần tín hiệu xanh rõ ràng |"
    info: "| Electric Iris | `#663af3` | `--color-electric-iris` | Accent hỗ trợ màu tím cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Ember | `#e46d4c` | `--color-ember` | Accent thương hiệu thay thế cho CTA live-preview hoặc demo khi cần độ tương phản ấm với bảng màu mát |"
    info: "| Azure | `#027dea` | `--color-azure` | Accent hỗ trợ màu xanh cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Cipher Mint | `#269684` | `--color-cipher-mint` | Accent hỗ trợ màu teal cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng lên thành màu CTA chính |"
    info: "| Blueprint Glow | `linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%)` | `--color-blueprint-glow` | Điểm cuối gradient highlight mềm — xuất hiện trong vertical text gradient (Glacier → Frost Link) và là điểm dừng trên cùng trong hero light gradient |"

  tokens___typography:

    untitled_sans___workhorse_ui_và_body_face__xử_lý_mọi_thứ_từ_caption_12px_đến_section_title_24px__weight_400_là_body_mặc_định__500_để_nhấn_mạnh__600_700_cho_button_label_và_form_control__tracking_âm_nhẹ__0_01em_thắt_chặt_nhịp_điệu_dark_mode_____font_untitled_sans:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Kích thước:** 12, 14, 16, 18, 24"
      - "**Line height:** 1.17, 1.20, 1.33, 1.43, 1.50"
      - "**Letter spacing:** -0.01em"
      - "**Vai trò:** Workhorse UI và body face. Xử lý mọi thứ từ caption 12px đến section title 24px; weight 400 là body mặc định, 500 để nhấn mạnh, 600–700 cho button label và form control. Tracking âm nhẹ (-0.01em) thắt chặt nhịp điệu dark-mode."

    aeonikpro___display_và_hero_only_face__dùng_cho_wordmark__authkit__và_section_headline_lớn_ở_44_48px__tỷ_lệ_rộng_hơn_và_bộ_xương_geometric_sạch_hơn_mang_lại_sự_hiện_diện_đặc_biệt_cho_thương_hiệu_mà_untitled_sans_không_thể_cung_cấp_ở_tỷ_lệ_lớn__tracking_bình_thường_____font_aeonikpro:
      - "**Thay thế:** Aeonik"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 28, 44, 48"
      - "**Line height:** 1.14, 1.16, 1.17, 1.20"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Display và hero-only face. Dùng cho wordmark 'AuthKit' và section headline lớn ở 44–48px. Tỷ lệ rộng hơn và bộ xương geometric sạch hơn mang lại sự hiện diện đặc biệt cho thương hiệu mà Untitled Sans không thể cung cấp ở tỷ lệ lớn. Tracking bình thường."

    dotdigital___eyebrow_và_label_only_face_ở_15px__tracking_rộng_0_1em_và_chữ_số_dạng_tabular__tnum__đánh_dấu_đây_là_các_marker_cấu_trúc_yên_tĩnh____introducing___shine_bright___extensible_by_design____đứng_trước_headline__không_bao_giờ_dùng_cho_body_copy_____font_dotdigital:
      - "**Thay thế:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 15"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.1em"
      - "**OpenType features:** `\"tnum\"`"
      - "**Vai trò:** Eyebrow và label-only face ở 15px. Tracking rộng 0.1em và chữ số dạng tabular ('tnum') đánh dấu đây là các marker cấu trúc yên tĩnh — 'Introducing', 'Shine bright', 'Extensible by design' — đứng trước headline. Không bao giờ dùng cho body copy."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.01px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.01px | `--text-body` |"
      info: "| subheading | 18px | 1.33 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.17 | — | `--text-heading` |"
      info: "| display | 48px | 1.14 | — | `--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: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 10-16px |"
      info: "| pills | 999px |"
      info: "| badges | 6px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` | `--shadow-sm` |"
      info: "| md | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` | `--shadow-md` |"
      info: "| subtle | `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgb...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-7` |"

    layout:

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

  components:

    primary_cta_button_electric_iris:
      vai_trò: "Filled action button cho hành động quan trọng nhất trên một trang."

      info: "Background #663af3, text #ffffff, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px, line-height 1.5. Nằm phẳng — không có drop shadow, dựa vào fill bão hòa trên Midnight Ink để tạo điểm nhấn. Dùng tối đa một lần mỗi viewport."

    ghost_button:
      vai_trò: "Secondary action không nên cạnh tranh với primary CTA."

      info: "Transparent background với 1px inset hairline rgba(186, 215, 247, 0.06), text #c7d3ea, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px. Đường viền mảnh tạo sự hiện diện mà không thêm độ sáng."

    pill_navigation_button:
      vai_trò: "Top-bar và inline navigation link."

      info: "Radius 999px, background transparent hoặc Moonlight tint nhẹ khi hover. Text 14px Untitled Sans weight 400–500, #c7d3ea. Kết hợp với form button sắc cạnh 2px để tạo cặp primary/pill button rõ ràng."

    sign_in_form_card:
      vai_trò: "Product preview card hiển thị sign-in widget của AuthKit được nhúng trong marketing."

      info: "Background #2f343 với card elevation stack (inset highlights + drop shadow gần đen). Radius 10px. Chứa email input (2px radius, 1px Steel Border), Continue button (Electric Iris), và social provider button (Microsoft, Google) ở dạng ghost style. Padding 24px."

    eyebrow_label:
      vai_trò: "Marker cấu trúc nhỏ phía trên headline — 'Introducing', 'Shine bright', 'Extensible by design'."

      info: "dotDigital 15px, weight 400, letter-spacing 0.1em, line-height 1.20. Text color #81899b. Tracking rộng và chữ số dạng tabular là tín hiệu thương hiệu yên tĩnh nhất của hệ thống — nó báo hiệu 'đây là label cấu trúc, không phải nội dung'."

    section_heading:
      vai_trò: "Section title cấp trung — 'Your users. Your data. Maximum flexibility.'"

      info: "aeonikPro 44–48px, weight 400–500, line-height 1.14–1.16, normal tracking. Color #d8ecf8 (Glacier) trên Midnight Ink. Sự kết hợp giữa display face ở weight gần thường và off-white mát tạo cho headline sức nặng kiến trúc mà không cần phải la hét."

    feature_icon_tile:
      vai_trò: "Single sign-on, password, MFA, social login, RBAC, và magic auth feature row entries."

      info: "Container icon vuông ~40px trong Graphite Plate (#2f343e) với 6px radius. Icon stroke là Moonlight (#c7d3ea), 1.5px. Label bên dưới trong Untitled Sans 12–14px weight 400, color #81899b. Mũi tên giữa các tile là đường Moonlight 1px với ánh sáng 186/207/247 nhẹ."

    theme_toggle_pill:
      vai_trò: "Light/dark mode switcher hiển thị phía trên feature row."

      info: "Pill 999px radius, background #2f343e. Hai segment icon (moon/sun) trong Moonlight. Caption bên dưới trong Untitled Sans 14px, #81899b."

    customization_annotation_chip:
      vai_trò: "Callout nhỏ có label chỉ vào các phần của UI mockup — 'Colour', 'Logo icon', 'Page background', 'Button text', 'Preferred appearance: System / Light / Dark'."

      info: "Radius 6–10px, background #2f343 với 1px inset rgba(186, 215, 247, 0.12) hairline. Text 12px Untitled Sans weight 500, #c7d3ea. Kết nối với element mục tiêu bằng guideline xanh mờ. Nằm nổi xung quanh sign-in card được xem trước."

    brand_colour_swatch:
      vai_trò: "Hàng ô vuông nhỏ màu bên trong Colour annotation chip."

      info: "Bốn ô vuông 12px, 2px radius, được fill với Electric Iris, Ember, Azure, và Cipher Mint. Truyền đạt các slot màu thương hiệu có thể tùy chỉnh mà AuthKit cung cấp."

    background_grid_overlay:
      vai_trò: "Lưới kiến trúc mờ hiển thị trên canvas Midnight Ink phía sau hero."

      info: "Đường 1px trong rgba(186, 215, 247, 0.04) tạo thành lưới vuông ~40px. Thêm radial blue glow ở trung tâm phía trên sử dụng Blueprint Glow palette, và viền conic gradient mỏng xung quanh khung hero. Lưới là 'blueprint' trong north star — nó làm cho trang cảm thấy được phác thảo, không phải thiết kế."

    hero_wordmark_lockup:
      vai_trò: "Display headline 'AuthKit' căn giữa với eyebrow phía trên và subtitle phía dưới."

      eyebrow: "dotDigital 15px, 0.1em tracking, #81899b, được bao quanh bởi các đường kẻ ngang ngắn. Wordmark: aeonikPro 48px weight 500, #ffffff, line-height 1.14. Subtitle: Untitled Sans 18px weight 400, #9da7ba. Nhịp điệu dọc khoảng 16px / 24px / 16px."

    conic_border_frame:
      vai_trò: "Viền phát sáng mỏng đóng khung hero section và customization mockup."

      info: "1px conic gradient tại 50% -5% với các điểm dừng transparent → rgba(124, 145, 182, 0.3) → 0.5 → 0.3 → transparent. Tạo ra một vòng cung ánh sáng mát nhẹ ở đầu khung, gợi ý một nguồn sáng phía trên viewport."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Midnight Ink #05060f làm background trang duy nhất — không bao giờ giới thiệu màu canvas thứ hai."
      - "Giới hạn fill Electric Iris #663af3 ở một primary CTA duy nhất mỗi viewport; mọi thứ khác là ghost, outlined, hoặc neutral."
      - "Sử dụng cặp aeonikPro 48px / weight 500 / line-height 1.14 cho bất kỳ headline nào giới thiệu một section mới."
      - "Đánh dấu tất cả structural eyebrow bằng dotDigital 15px / 0.1em tracking / 'tnum' tabular figures, không bao giờ dùng Untitled Sans."
      - "Xây dựng elevation từ inset hairline pha xanh (rgba(186, 215, 247, 0.12)) và inner glow 96px, không phải từ drop shadow."
      - "Kết hợp form control (button, input) ở 2px radius với card ở 10–16px và pill ở 999px để duy trì hệ thống phân cấp sharp-to-soft."
      - "Đặt section gap là 120px và giữ hero-to-section transition căn giữa trên một trục dọc duy nhất."

    không_nên_làm:
      - "Không đặt màu bão hòa trên bất kỳ element nào ngoài primary hoặc alternative-action button — không có card, banner, hoặc background màu."
      - "Không dùng drop shadow màu truyền thống; shadow giữ gần đen hoặc xanh mát, không bao giờ ấm."
      - "Không trộn nhiều hơn ba typeface trên một màn hình — Untitled Sans, aeonikPro, và dotDigital là bộ đầy đủ."
      - "Không làm tròn button thành bất kỳ thứ gì khác ngoài 2px; pill-shaped action button phá vỡ nhịp điệu sharp-utility."
      - "Không giới thiệu màu thương hiệu thứ hai cho primary CTA — Electric Iris là màu action hạng nhất duy nhất."
      - "Không dùng Untitled Sans ở kích thước display (28px+) khi có aeonikPro; display face được dành riêng cho headline và wordmark."
      - "Không đặt text dưới Glacier #d8ecf8 về độ sáng cho heading — body có thể giảm xuống Pebble/Fog, nhưng title phải giữ sáng."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#05060f` | Background trang — gần đen với grid overlay mờ. |"
    info: "| 1 | Plate | `#2f343` | Bề mặt card và UI xem trước, nâng lên một bậc so với canvas. |"
    info: "| 2 | Iris Lift | `#663af3` | Filled action surface — bề mặt màu sắc duy nhất trong hệ thống. |"

  elevation:

    - "**Glow accent (icon, highlight):** `0px 0px 6px 0px rgba(186, 207, 247, 0.32)`"
    - "**Ambient glow (secondary highlight):** `0px 0px 12px 0px rgba(238, 186, 247, 0.24)`"
    - "**Hairline inset (link, button, outline):** `inset 0px 0px 0px 1px rgba(186, 215, 247, 0.12)`"
    - "**Card elevation:** `inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12), inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05), 0px 24px 32px 0px rgba(6, 6, 14, 0.7)`"

  imagery:

    info: "Không có nhiếp ảnh, không có minh họa, không có ảnh chụp màn hình ứng dụng bên thứ ba. Ngôn ngữ hình ảnh là UI-on-canvas thuần túy: bản xem trước sign-in widget được render bằng CSS, glyph icon được vẽ dưới dạng stroke Moonlight 1.5px, và một lưới kiến trúc mờ phía sau mọi thứ. Bản thân sign-in card là hình ảnh — chúng là sản phẩm được hiển thị bên trong trang sản phẩm. Iconography là monochrome outlined với stroke weight 1.5px nhất quán, nằm trong tile Graphite Plate vuông. Element hình ảnh phi-UI duy nhất là Blueprint Glow gradient trải rộng phía trên hero, tạo cảm giác ánh sáng rơi xuống canvas tối."

  layout:

    info: "Hero một cột, căn giữa, neo vào max-width 1200px trên canvas Midnight Ink full-bleed. Hero xếp chồng theo chiều dọc: eyebrow → wordmark → subtitle → preview card, với sign-in widget hơi quá khổ và căn giữa, chồng lên lưới background mờ. Bên dưới hero, nội dung chảy trong các dải max-width căn giữa, cách nhau bởi gap 120px, mỗi dải có eyebrow + heading + supporting text + một hình ảnh duy nhất (một feature row gồm icon tile, hoặc một UI mockup xem trước full-width với annotation chip). Trang không bao giờ dùng split hai cột text+image; nó luôn căn giữa. Navigation là một top bar tối giản: brand wordmark bên trái, một pill 'Get started' button bên phải, với một GitHub icon nhỏ ở giữa. Không có sidebar, không có mega-menu, không có sticky chrome ngoài nav."

  agent_prompt_guide:

  quick_color_reference:
    - "text primary: #ffffff"
    - "text heading: #d8ecf8 (Glacier)"
    - "text body: #c7d3ea (Moonlight)"
    - "text muted: #81899b (Fog)"
    - "background: #05060f (Midnight Ink)"
    - "surface: #2f343e (Graphite Plate)"
    - "border: #3f4959 (Steel)"
    - "accent: #b6d9fc (Frost Link)"
    - "primary action: không có màu CTA riêng biệt"

  3_5_example_component_prompts:

    hero_section: ": Background Midnight Ink #05060f với lưới Blueprint Glow 1px mờ. Eyebrow trong dotDigital 15px / 0.1em tracking / #81899b, hiển thị 'Introducing'. Wordmark trong aeonikPro 48px / weight 500 / #ffffff / line-height 1.14. Subtitle trong Untitled Sans 18px / weight 400 / #9da7ba. Một button 'Get started' Electric Iris #663af3, 2px radius, căn giữa nằm bên dưới. Phía trên hero mang viền conic gradient trong rgba(124, 145, 182, 0.5)."

    sign_in_widget_preview_card: ": Background Graphite Plate #2f343e, 10px radius, 24px padding. Card elevation stack: inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12) + inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05) + 0px 24px 32px 0px rgba(6, 6, 14, 0.7). Email input với 2px radius, 1px Steel Border #3f4959, placeholder Untitled Sans 14px. Primary 'Continue' button: 2px radius, Electric Iris #663af3, text trắng, padding 10px 16px. Hai ghost social button bên dưới trong Moonlight #c7d3ea với cùng hairline 2px."

    feature_icon_row: ": Sáu tile Graphite Plate #2f343e vuông 40px với 6px radius, mỗi tile chứa một icon outlined Moonlight #c7d3ea stroke 1.5px. Label bên dưới trong Untitled Sans 12–14px / weight 400 / #81899b. Các tile được kết nối bằng đường Moonlight 1px với glow 6px rgba(186, 207, 247, 0.32)."

    theme_toggle_pill: ": Pill 999px radius, fill Graphite Plate #2f343e, padding 6px. Hai segment icon 14px (moon và sun) trong Moonlight #c7d3ea, segment active được làm sáng nhẹ lên Glacier #d8ecf8. Caption 'Light and dark modes supported.' bên dưới trong Untitled Sans 14px / #81899b."

    customization_annotation_chip: ": 10px radius, fill Graphite Plate #2f343e, hairline inset 1px rgba(186, 215, 247, 0.12). Label trong Untitled Sans 12px / weight 500 / #c7d3ea. Kết nối với element mục tiêu bằng guideline Moonlight 1px. Bên trong chip Colour, bốn ô vuông 12px ở 2px radius được fill với Electric Iris #663af3, Ember #e46d4c, Azure #027dea, và Cipher Mint #269684."

  similar_brands:

    - "**Linear** — Cùng midnight-canvas + single saturated accent + thin-stroke outlined iconography + tight geometric sans display face."
    - "**Vercel** — Dark blueprint aesthetic với một vivid accent duy nhất (màu cam của họ thay thế iris của AuthKit), hero max-width căn giữa, và product preview được render dưới dạng CSS thay vì ảnh chụp màn hình."
    - "**Clerk** — Developer tool liên quan đến auth với sign-in widget preview được nhúng trên canvas tối, hệ thống type off-white mát, và một chromatic action color duy nhất."
    - "**Resend** — Dark palette xanh lam-xám mát, sử dụng màu sắc hạn chế, và hero một cột căn giữa với background pattern mờ đóng khung wordmark."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #05060f;
          --color-graphite-plate: #2f343e;
          --color-steel-border: #3f4959;
          --color-fog: #81899b;
          --color-pebble: #9da7ba;
          --color-moonlight: #c7d3ea;
          --color-ice: #d1e4fa;
          --color-glacier: #d8ecf8;
          --color-frost-link: #b6d9fc;
          --color-electric-iris: #663af3;
          --color-ember: #e46d4c;
          --color-azure: #027dea;
          --color-cipher-mint: #269684;
          --color-blueprint-glow: #bacff7;
          --gradient-blueprint-glow: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
        
          /* Typography — Font Families */
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dotdigital: 'dotDigital', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.01px;
          --text-heading: 28px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 999px;
          --radius-full-2: 4999.5px;
          --radius-full-3: 9999px;
        
          /* Named Radii */
          --radius-cards: 10-16px;
          --radius-pills: 999px;
          --radius-badges: 6px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Shadows */
          --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
          --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
          --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
          --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
          --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #05060f;
          --surface-plate: #2f343;
          --surface-iris-lift: #663af3;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #05060f;
          --color-graphite-plate: #2f343e;
          --color-steel-border: #3f4959;
          --color-fog: #81899b;
          --color-pebble: #9da7ba;
          --color-moonlight: #c7d3ea;
          --color-ice: #d1e4fa;
          --color-glacier: #d8ecf8;
          --color-frost-link: #b6d9fc;
          --color-electric-iris: #663af3;
          --color-ember: #e46d4c;
          --color-azure: #027dea;
          --color-cipher-mint: #269684;
          --color-blueprint-glow: #bacff7;
        
          /* Typography */
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dotdigital: 'dotDigital', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.01px;
          --text-heading: 28px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 999px;
          --radius-full-2: 4999.5px;
          --radius-full-3: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
          --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
          --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
          --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
          --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
        }