geniestudio___style_reference:
  info: "> bầu trời pastel vui tươi với doodle bay lượn"

  theme: "light"

  info: "Geniestudio nói ngôn ngữ thị giác của một canvas thiết kế hiện đại: không gian làm việc xanh pastel thoáng đãng, nơi các nhân vật minh họa tinh nghịch trôi nổi trên khoảng trống rộng rãi. Hệ thống kết hợp một CTA gần-đen (#181d27) duy nhất trên nền canvas xanh nhạt (#ebf5ff) với bộ bốn điểm nhấn minh họa bão hòa — xanh hoa ngô, cam, tím, vàng mù tạt — mang lại hơi ấm mà không cạnh tranh với UI. Typography có chừng mực và hình học: Aeonik weight 500 dẫn dắt headline với tracking -0.02em chặt chẽ, trong khi Geist 500/600 xử lý mọi thứ từ caption 10px đến label nút bấm. Bề mặt phẳng, viền mảnh, bo góc rộng (32px là mặc định), và shadow là lớp rửa xanh nhạt gần như vô hình thay vì đổ bóng tối. Kết quả là một công cụ mang cảm giác sáng tạo, dễ tiếp cận và tự tin nhẹ nhàng — màu sắc dành cho kể chuyện, không phải chrome."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Sky Wash | `#ebf5ff` | `--color-sky-wash` | Canvas trang — xanh nhạt tạo không khí thoáng đãng thay vì trắng tinh, mang đến nền có chiều sâu nhẹ nhàng |"
    info: "| Paper White | `#fafdff` | `--color-paper-white` | Bề mặt card và elevated surface — mát hơn trắng tinh một chút, giúp bề mặt không bị lạnh lẽo trên nền sky canvas |"
    info: "| Cloud Veil | `#f6f7f8` | `--color-cloud-veil` | Bề mặt phụ nhẹ và fill wash cho các UI element mờ cần sự tách biệt mà không cần độ tương phản |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt card lồng nhau, icon fills và button text — điểm sáng nhất trong hệ thống |"
    info: "| Midnight Ink | `#0a0d12` | `--color-midnight-ink` | Màu text chính và heading — gần-đen với sắc lạnh, đạt tỷ lệ 19.5:1 trên nền trắng để đọc tối đa |"
    info: "| Pressed Charcoal | `#181d27` | `--color-pressed-charcoal` | Nút hành động chính và khối UI tối — màu action fill duy nhất trong hệ thống, tạo độ tương phản quyết định trên nền canvas nhạt |"
    info: "| Stone | `#535862` | `--color-stone` | Body text, viền mảnh và icon strokes — neutral chủ lực cho mọi thứ giữa heading và canvas |"
    info: "| Fog | `#93979f` | `--color-fog` | Helper text mờ, secondary borders và disabled states — nằm giữa Stone và canvas để lùi lại một cách duyên dáng |"
    info: "| Cornflower | `#4fbeff` | `--color-cornflower` | Điểm nhấn minh họa và decorative icon stroke — đối trọng mát mẻ cho bộ ba accent ấm |"
    info: "| Tangerine | `#f26110` | `--color-tangerine` | Điểm nhấn minh họa và decorative warm pop — mang năng lượng và tương phản trong thiết kế nhân vật và icon |"
    info: "| Amethyst | `#9552e0` | `--color-amethyst` | Điểm nhấn minh họa và decorative stroke — thêm nốt tím mát giúp phân biệt bảng màu với scheme xanh-cam thông thường |"
    info: "| Mustard | `#bb9915` | `--color-mustard` | Điểm nhấn minh họa và decorative warm-yellow stroke — điểm đối trọng đất giữ cho bảng màu không bị giả tạo |"
    info: "| Signal Blue | `#0099ff` | `--color-signal-blue` | Link text, active link borders và decorative brand-blue fills — giọng chromatic cho navigation và emphasis |"
    info: "| Deep Cobalt | `#0069e0` | `--color-deep-cobalt` | Hover/active state cho Signal Blue, gradient stop trong brand blue gradient và decorative illustration stroke |"
    info: "| Morning Tint | `#cce7ff` | `--color-morning-tint` | Nền card và chip có pha màu — điểm dừng xanh nhạt nhất, dùng cho callout cards và soft highlights |"
    info: "| Lilac Mist | `#f1e6ff` | `--color-lilac-mist` | Nền card có pha màu cho các section hoặc category chip mã tím |"
    info: "| Sprout | `#d3f6e3` | `--color-sprout` | Gray wash cho highlight backgrounds, decorative bands và soft emphasis phía sau nội dung |"
    info: "| Buttery Gradient | `linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%)` | `--color-buttery-gradient` | Gradient: linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%) — lớp rửa ấm mềm cho feature callouts |"
    info: "| Lilac Gradient | `linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%)` | `--color-lilac-gradient` | Gradient: linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%) — lớp rửa tím mềm cho feature callouts |"
    info: "| Sky Gradient | `linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%)` | `--color-sky-gradient` | Gradient: linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%) — lớp rửa xanh mềm cho feature callouts |"
    info: "| Sunset Gradient | `linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%)` | `--color-sunset-gradient` | Gradient: linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%) — lớp rửa cam ấm cho feature callouts |"
    info: "| Brand Blue Gradient | `linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%)` | `--color-brand-blue-gradient` | Gradient: linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%) — brand gradient đặc trưng cho hero accents và premium surfaces |"

  tokens___typography:

    aeonik___display_và_heading_family___một_weight_duy_nhất_500_trên_tất_cả_kích_thước_display_từ_20px_đến_148px__với_tracking__0_02em_chặt_chẽ_giúp_thắt_chặt_wordmark_mà_không_trở_nên_hình_học__tính_năng__case__chuẩn_hóa_letterform_cho_tính_nhất_quán_thương_hiệu__kích_thước_hero_148px_đặc_trưng_kết_hợp_với_line_height_1_05_tạo_khối_headline_như_poster_____font_aeonik:
      - "**Thay thế:** Inter, Satoshi, General Sans"
      - "**Weights:** 500"
      - "**Sizes:** 20px, 24px, 32px, 48px, 72px, 148px"
      - "**Line height:** 1.05-1.25"
      - "**Letter spacing:** -0.0200em"
      - "**OpenType features:** `\"case\"`"
      - "**Vai trò:** Display và heading family — một weight duy nhất (500) trên tất cả kích thước display từ 20px đến 148px, với tracking -0.02em chặt chẽ giúp thắt chặt wordmark mà không trở nên hình học. Tính năng \"case\" chuẩn hóa letterform cho tính nhất quán thương hiệu. Kích thước hero 148px đặc trưng kết hợp với line-height 1.05 tạo khối headline như poster."

    geist___body__ui__caption_và_button_family___geist_xử_lý_mọi_text_chức_năng_từ_micro_labels_10px_đến_subheads_20px__weight_500_là_mặc_định__600_dành_cho_emphasis__tracking__0_01em_và_tính_năng__case__giữ_cho_utility_text_đồng_bộ_với_display_family_____font_geist:
      - "**Thay thế:** Inter, Söhne, Geist Sans (open-source)"
      - "**Weights:** 500, 600"
      - "**Sizes:** 10px, 12px, 14px, 16px, 18px, 20px"
      - "**Line height:** 1.14-1.50"
      - "**Letter spacing:** -0.0100em"
      - "**OpenType features:** `\"case\"`"
      - "**Vai trò:** Body, UI, caption và button family — Geist xử lý mọi text chức năng từ micro-labels 10px đến subheads 20px. Weight 500 là mặc định, 600 dành cho emphasis. Tracking -0.01em và tính năng \"case\" giữ cho utility text đồng bộ với display family."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.14 | -0.1px | `--text-caption` |"
      info: "| body | 14px | 1.35 | -0.14px | `--text-body` |"
      info: "| body-lg | 16px | 1.5 | -0.16px | `--text-body-lg` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.25 | -0.4px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.17 | -0.96px | `--text-heading-lg` |"
      info: "| display | 72px | 1.11 | -1.44px | `--text-display` |"

  tokens___spacing___shapes:

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

    density: "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: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 32px |"
      info: "| icons | 16px |"
      info: "| pills | 9999px |"
      info: "| images | 16px |"
      info: "| buttons | 32px |"
      info: "| cards-inner | 8px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(4, 69, 144, 0.08) 0px 14px 20px 4px` | `--shadow-lg` |"
      info: "| subtle | `rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0p...` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_action_button_filled:
      vai_trò: "CTA duy nhất có emphasis cao"

      info: "Nền Pressed Charcoal (#181d27), text trắng (#ffffff), Geist 500 ở 16px, pill radius 9999px (thực chất là 32px+ cho chiều cao 40px), padding dọc 12px / ngang 28px. Fill tối trên nền sky canvas là khoảnh khắc duy nhất có trọng lượng thị giác thực sự trên trang."

    ghost_navigation_button:
      vai_trò: "Utility action nhỏ gọn trong top nav"

      info: "Cùng fill Pressed Charcoal như primary action nhưng thu nhỏ — Geist 500 ở 14px, text trắng, radius 9999px, padding dọc 8px / ngang 16px. Nằm ở góc trên bên phải của navigation bar."

    testimonial_card:
      vai_trò: "Social proof card trong grid nhiều cột"

      info: "Bề mặt Paper White (#fafdff), viền 1px Stone (#535862) dạng hairline, border-radius 32px, padding 40px. Chứa quote bằng Geist 16px weight 500, avatar tròn 48px, tên bằng Geist 14px weight 600 màu Midnight Ink, vai trò/công ty bằng Geist 12px màu Stone, và logo công ty căn phải. Không drop shadow — sự tách biệt đến từ viền."

    feature_callout_card_tinted:
      vai_trò: "Highlight card theo mã màu chủ đề"

      info: "Bề mặt tinted bằng một trong bốn lớp rửa pastel (Morning Tint, Lilac Mist, Sprout hoặc Veil), border-radius 32px, padding 24-40px. Chứa một illustration hoặc icon và mô tả ngắn. Tint là toàn bộ nhận diện thị giác — không border, không shadow."

    top_navigation_bar:
      vai_trò: "Header cố định với brand mark và utility links"

      info: "Trong suốt trên sky canvas, không background fill. Bên trái: diamond logomark Genie + wordmark màu Midnight Ink. Giữa: text links Geist 14px (How it works, Pricing) màu Stone. Phải: ghost dark button. Không border, không shadow — nav nổi."

    hero_headline_block:
      vai_trò: "Tuyên bố thị giác mở đầu"

      info: "Căn giữa, Aeonik 500 ở 72-148px, text Midnight Ink (#0a0d12), letter-spacing -1.44px, line-height 1.05-1.11. Điểm nhấn inline tùy chọn: nhân vật emoji minh họa màu Cornflower, Tangerine, Amethyst, Mustard thay thế một từ inline. Subtext Geist 18px weight 500 màu Stone bên dưới."

    icon_tile:
      vai_trò: "Container icon trang trí hoặc chức năng"

      info: "Border-radius 16px, hình vuông 24-32px, fill bằng một trong bốn màu accent hoặc tinted neutral. Dùng cho inline icons và làm anchor minh họa."

    avatar_group:
      vai_trò: "Avatar người dùng nhóm lại cho ngữ cảnh xã hội"

      info: "Avatar tròn 40-48px với overlap âm 4-8px, xen kẽ giữa bốn màu accent minh họa. Không border."

    section_divider_implicit:
      vai_trò: "Ngắt giữa các section trang"

      info: "Không có đường kẻ nhìn thấy — các section tách biệt qua khoảng cách dọc 64-80px và xử lý bề mặt xen kẽ (sky canvas → paper card → sky canvas). Khoảng trắng là divider."

    testimonial_grid_container:
      vai_trò: "Layout social proof nhiều cột"

      info: "Grid 3 cột với gap 24px, 3 card mỗi hàng, mỗi card radius 32px với border 1px Stone. Card căn chỉnh footer (avatar + tên + logo công ty) dọc theo một baseline nhất quán."

    brand_gradient_surface:
      vai_trò: "Khối accent cao cấp hoặc hero"

      info: "Được fill bằng Brand Blue Gradient (linear-gradient 135deg từ #479dff đến #0069e0). Dùng có chừng mực cho hero accents, premium tier cards hoặc nền brand mark. Kết hợp với text trắng bằng Geist 500."

    logo_mark:
      vai_trò: "Nhận diện thương hiệu trong nav và social cards"

      info: "Glyph hình thoi/hình thoi màu Midnight Ink, 24-32px, kết hợp với wordmark 'Genie' bằng Geist 500 16px. Mark lặp lại family radius card với các góc hơi mềm."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Pressed Charcoal (#181d27) cho primary action — đây là màu nút filled duy nhất trong hệ thống"
      - "Đặt mọi card, nút bấm và container lớn ở border-radius 32px — radius 32px là độ cong đặc trưng của hệ thống"
      - "Giữ page canvas ở Sky Wash (#ebf5ff); không mặc định dùng trắng tinh cho nền body"
      - "Kết hợp Aeonik 500 cho mọi display text với Geist 500/600 cho mọi UI text — không bao giờ trộn thêm family thứ ba"
      - "Chỉ dùng bốn accent minh họa (Cornflower, Tangerine, Amethyst, Mustard) cho decorative illustration, emoji characters và icon fills — không bao giờ dùng cho UI controls hoặc text"
      - "Áp dụng letter-spacing -0.02em cho mọi text Aeonik và -0.01em cho mọi text Geist để đảm bảo nhất quán typographic"
      - "Tách card khỏi canvas bằng border 1px Stone (#535862) thay vì drop shadow"

    không_nên_làm:
      - "Không dùng Signal Blue (#0099ff) hoặc Deep Cobalt (#0069e0) cho primary action buttons — màu action là Pressed Charcoal, không phải xanh"
      - "Không áp dụng drop shadow tối nặng; hệ thống chỉ dùng một lớp rửa xanh 8% opacity và hairline borders"
      - "Không dùng màu accent minh họa cho body text, headings hoặc functional UI states"
      - "Không dùng nhiều font family; Aeonik dành cho display, Geist dành cho mọi thứ khác"
      - "Không trộn radii — tránh dùng 4px, 12px hoặc 20px; scale là 8px (inner), 16px (icons/images), 24px (large cards) và 32px (mặc định)"
      - "Không fill trang bằng màu bão hòa; trải nghiệm thị giác chủ đạo là pastel sky với các điểm nhấn nhân vật thưa thớt"
      - "Không dùng trắng tinh (#ffffff) cho page canvas — dùng Sky Wash (#ebf5ff) hoặc Paper White (#fafdff) cho bề mặt"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Sky Canvas | `#ebf5ff` | Nền trang, tạo bầu không khí pastel thoáng đãng |"
    info: "| 1 | Paper Card | `#fafdff` | Bề mặt card và panel mặc định, nâng nội dung lên khỏi canvas |"
    info: "| 2 | Pure White Nest | `#ffffff` | Element lồng nhau, icon bên trong card và button text |"
    info: "| 3 | Tinted Chip | `#cce7ff` | Card có pha màu theo chủ đề và lớp rửa highlight mềm |"
    info: "| 4 | Veil | `#f6f7f8` | Bề mặt fill mờ cho khối inactive hoặc secondary |"

  elevation:

    - "**Cards và feature panels:** `rgba(4, 69, 144, 0.08) 0px 14px 20px 4px`"
    - "**Primary action buttons (active/pressed):** `rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px`"

  imagery:

    info: "Ngôn ngữ thị giác thiên về minh họa, không có nhiếp ảnh. Trang web dựa trên các nhân vật vẽ tay (blob mặt emoji bằng bốn màu accent), đạo cụ hình học đơn giản (mây, máy bay giấy, hoa, nấm) và motif UI nhỏ (phong bì, trái tim, ngôi sao) trôi nổi trên khoảng trống rộng rãi. Minh họa phẳng với fill mềm và outline tối thiểu, sử dụng đầy đủ bộ bốn Cornflower/Tangerine/Amethyst/Mustard. Lớp rửa gradient tinted (Buttery, Lilac, Sky, Sunset) làm nền mềm cho feature callouts. Thẩm mỹ là sticker-pack vui tươi — trẻ con nhưng chính xác, với các nhân vật rải rác như confetti thay vì sắp xếp trong grid."

  layout:

    info: "Full-bleed page trên container max-width 1200px, với các section chảy dọc theo khoảng cách 64-80px. Hero là stack một cột căn giữa: headline, nhân vật minh họa inline tùy chọn, subtext, primary button. Section thứ hai bỏ grid hoàn toàn để chuyển sang bố cục minh họa rải rác với một caption ngắn neo giữa. Các section tiếp theo quay lại grid có cấu trúc — testimonial grid 3 cột với gap 24px, sau đó feature bands 2 cột hoặc một cột. Nhịp điệu tổng thể xen kẽ giữa khoảng thở rộng rãi (section với 80%+ whitespace) và card grids dày đặc hơn. Navigation là top bar tối giản không background fill, và các section tách biệt qua whitespace thay vì divider hoặc màu nền xen kẽ."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0a0d12 (Midnight Ink)"
    - "background: #ebf5ff (Sky Wash)"
    - "surface/card: #fafdff (Paper White)"
    - "border: #535862 (Stone) ở 1px"
    - "accent: #4fbeff (Cornflower) chỉ dùng trang trí"
    - "primary action: #181d27 (filled action)"

    3_5_ví_dụ_component_prompts:

    - "**Hero Headline Block**: Căn giữa trên canvas Sky Wash (#ebf5ff). Headline bằng Aeonik 500 ở 72px, Midnight Ink (#0a0d12), letter-spacing -1.44px, line-height 1.11. Thay thế inline tùy chọn: ba avatar nhân vật tròn 48px màu Cornflower (#4fbeff), Tangerine (#f26110) và Amethyst (#9552e0). Subtext bằng Geist 500 ở 18px, Stone (#535862). Primary button: nền Pressed Charcoal (#181d27), text trắng, Geist 500 16px, radius 9999px, padding 12px 28px."

    - "**Testimonial Card**: Bề mặt Paper White (#fafdff), border 1px Stone (#535862), border-radius 32px, padding 40px. Quote text bằng Geist 500 ở 16px, Midnight Ink. Hàng footer: avatar tròn 48px (trái), tên bằng Geist 600 14px Midnight Ink + vai trò bằng Geist 500 12px Stone (giữa-trái), logo công ty (phải). Không shadow."

    - "**Feature Callout Card (Tinted)**: Fill Morning Tint (#cce7ff), radius 32px, padding 32px. Icon tile vuông 48px với radius 16px màu Cornflower (#4fbeff) ở góc trên trái. Headline bằng Aeonik 500 ở 24px, Midnight Ink. Mô tả bằng Geist 500 ở 14px, Stone. Không border, không shadow."

    - "**Top Navigation Bar**: Trong suốt trên Sky Wash canvas. Trái: diamond logomark 24px màu Midnight Ink + wordmark 'Genie' bằng Geist 500 16px. Giữa: links Geist 500 14px màu Stone với gap 24px. Phải: ghost dark button — fill Pressed Charcoal, text trắng, Geist 500 14px, radius 9999px, padding 8px 16px. Không border, không background."

    - "**Brand Gradient Hero Accent**: Khối rộng 400px được fill bằng Brand Blue Gradient (linear-gradient 135deg, #479dff → #0069e0), radius 32px, padding 40px. Text Geist 500 18px trắng căn giữa. Dùng một lần mỗi trang cho premium emphasis."

  similar_brands:

    - "**Figma** — Cùng canvas pastel mềm với whitespace rộng rãi, card bo tròn và một primary action tối duy nhất trên nền sáng"
    - "**Linear** — Cùng xử lý card viền mảnh, letter-spacing chặt trên sans hình học và triết lý một màu accent quyết định"
    - "**Pitch** — Cùng phong cách minh họa vui tươi theo nhân vật pha trộn với SaaS UI sạch sẽ và bề mặt card tinted pastel"
    - "**Notion** — Cùng layout thoáng đãng với border tối thiểu, bề mặt mềm và sẵn sàng để minh họa thở trên canvas"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-sky-wash: #ebf5ff;
          --color-paper-white: #fafdff;
          --color-cloud-veil: #f6f7f8;
          --color-pure-white: #ffffff;
          --color-midnight-ink: #0a0d12;
          --color-pressed-charcoal: #181d27;
          --color-stone: #535862;
          --color-fog: #93979f;
          --color-cornflower: #4fbeff;
          --color-tangerine: #f26110;
          --color-amethyst: #9552e0;
          --color-mustard: #bb9915;
          --color-signal-blue: #0099ff;
          --color-deep-cobalt: #0069e0;
          --color-morning-tint: #cce7ff;
          --color-lilac-mist: #f1e6ff;
          --color-sprout: #d3f6e3;
          --color-buttery-gradient: #fff2be;
          --gradient-buttery-gradient: linear-gradient(rgb(255, 249, 224) 0%, rgb(255, 236, 163) 100%);
          --color-lilac-gradient: #e4ccff;
          --gradient-lilac-gradient: linear-gradient(rgb(244, 235, 255) 0%, rgb(228, 204, 255) 100%);
          --color-sky-gradient: #c2e9ff;
          --gradient-sky-gradient: linear-gradient(rgb(229, 246, 255) 0%, rgb(194, 233, 255) 100%);
          --color-sunset-gradient: #ffd1b8;
          --gradient-sunset-gradient: linear-gradient(rgb(255, 242, 235) 0%, rgb(255, 209, 184) 100%);
          --color-brand-blue-gradient: #479dff;
          --gradient-brand-blue-gradient: linear-gradient(rgb(71, 157, 255) 11.43%, rgb(0, 105, 224) 78.2%);
        
          /* Typography — Font Families */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.14;
          --tracking-caption: -0.1px;
          --text-body: 14px;
          --leading-body: 1.35;
          --tracking-body: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.4px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.96px;
          --text-display: 72px;
          --leading-display: 1.11;
          --tracking-display: -1.44px;
        
          /* Typography — Weights */
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24-40px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 36px;
          --radius-full: 90px;
        
          /* Named Radii */
          --radius-cards: 32px;
          --radius-icons: 16px;
          --radius-pills: 9999px;
          --radius-images: 16px;
          --radius-buttons: 32px;
          --radius-cards-inner: 8px;
        
          /* Shadows */
          --shadow-lg: rgba(4, 69, 144, 0.08) 0px 14px 20px 4px;
          --shadow-subtle: rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-sky-canvas: #ebf5ff;
          --surface-paper-card: #fafdff;
          --surface-pure-white-nest: #ffffff;
          --surface-tinted-chip: #cce7ff;
          --surface-veil: #f6f7f8;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-sky-wash: #ebf5ff;
          --color-paper-white: #fafdff;
          --color-cloud-veil: #f6f7f8;
          --color-pure-white: #ffffff;
          --color-midnight-ink: #0a0d12;
          --color-pressed-charcoal: #181d27;
          --color-stone: #535862;
          --color-fog: #93979f;
          --color-cornflower: #4fbeff;
          --color-tangerine: #f26110;
          --color-amethyst: #9552e0;
          --color-mustard: #bb9915;
          --color-signal-blue: #0099ff;
          --color-deep-cobalt: #0069e0;
          --color-morning-tint: #cce7ff;
          --color-lilac-mist: #f1e6ff;
          --color-sprout: #d3f6e3;
          --color-buttery-gradient: #fff2be;
          --color-lilac-gradient: #e4ccff;
          --color-sky-gradient: #c2e9ff;
          --color-sunset-gradient: #ffd1b8;
          --color-brand-blue-gradient: #479dff;
        
          /* Typography */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.14;
          --tracking-caption: -0.1px;
          --text-body: 14px;
          --leading-body: 1.35;
          --tracking-body: -0.14px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --tracking-body-lg: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.4px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.17;
          --tracking-heading-lg: -0.96px;
          --text-display: 72px;
          --leading-display: 1.11;
          --tracking-display: -1.44px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 36px;
          --radius-full: 90px;
        
          /* Shadows */
          --shadow-lg: rgba(4, 69, 144, 0.08) 0px 14px 20px 4px;
          --shadow-subtle: rgba(10, 13, 18, 0.8) 0px 1px 2px 0px, rgb(10, 13, 18) 0px 0px 0px 1px;
        }