atlassian___style_reference:
  info: "> Bản thiết kế kỹ thuật viền confetti. Một enterprise canvas trắng tinh khiết bị ngắt quãng bởi các editorial panel xanh navy đậm, được đóng khung trong hình học rách màu sắc — tím violet rực rỡ, vàng taxi, xanh dương điện, xanh lá — như những sơ đồ chính xác được ghim giữa các vách ngăn lem sơn."

  theme: "light"

  info: "Atlassian vận hành như một enterprise workshop khoác lên mình vẻ tự tin giản dị: một canvas trắng nơi giao diện sản phẩm dày đặc gặp những khoảnh khắc editorial táo bạo, đầy màu sắc. Hệ thống thị giác phân chia giữa các bề mặt chức năng yên tĩnh (trắng, xám nhạt, xanh dương nhẹ) và các dark hero block biểu cảm (navy gần như đen) được đóng khung bởi confetti hình học rời rạc với các màu tím violet, vàng, xanh dương và xanh lá rực rỡ. Typography là cặp custom sans — Charlie Text cho UI dày đặc, Charlie Display cho editorial headline có thể lên tới 80px với tracking thắt chặt. Các component lớn, bo tròn và không viền — pill cho action, border-radius 20px rộng rãi cho card, hầu như không có shadow. Màu sắc có kỷ luật: một màu xanh dương điện duy nhất điều khiển mọi primary action và link, trong khi năng lượng màu sắc chỉ tồn tại ở các cạnh trang trí và section divider, không bao giờ tràn vào functional UI."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Atlassian Blue | `#1868db` | `--color-atlassian-blue` | Primary action buttons, active links, focus states, icon accents — màu action duy nhất trong toàn bộ hệ thống, mang lại sự rõ ràng về hướng đi trên các bề mặt đơn sắc |"
    info: "| Midnight Navy | `#101214` | `--color-midnight-navy` | Primary text, heading fills trên bề mặt sáng, nền dark hero panel, link text — màu mực chủ đạo |"
    info: "| Carbon Edge | `#292a2e` | `--color-carbon-edge` | Card borders trên bề mặt sáng, body text, input borders, secondary heading text |"
    info: "| Slate Current | `#1c2b42` | `--color-slate-current` | Outlined action borders, icon strokes, list dividers, tertiary text — màu gần xám pha xanh lam gợi nhắc thương hiệu mà không cam kết màu sắc |"
    info: "| Muted Indigo | `#42526e` | `--color-muted-indigo` | Helper text, form labels, info badges, icon tints, secondary metadata |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, button text trên dark fills, nền dark-section nơi độ tương phản yêu cầu |"
    info: "| Fog White | `#f0f1f2` | `--color-fog-white` | Muted button backgrounds, secondary surface fills, hairline section dividers |"
    info: "| Ash Gray | `#b7b9be` | `--color-ash-gray` | Disabled borders, subtle list separators, card shadow tints |"
    info: "| Taxicab Yellow | `#fca700` | `--color-taxicab-yellow` | Sporadic CTA alternative (đăng ký sự kiện), decorative fill trong geometric confetti, accent punctuation trong dark banners |"
    info: "| Lavender Wash | `#eed7fc` | `--color-lavender-wash` | Nền section tím nhạt, highlight bands, decorative geometric fills |"
    info: "| Confetti Gradient | `conic-gradient(rgb(191, 99, 243) 170deg, rgb(252, 167, 0) 171deg, rgb(252, 167, 0) 230deg, rgb(77, 140, 237) 231deg, rgb(77, 140, 237) 360deg)` | `--color-confetti-gradient` | Decorative geometric borders xung quanh video và hero blocks — conic gradient quét từ tím violet → vàng → xanh dương |"

  tokens___typography:

    charlie_display___editorial_headlines__hero_text__section_titles___mở_rộng_từ_24px_sub_headings_đến_80px_display__weight_400_500_tạo_ra_sự_ấm_áp_nhân_văn_hiếm_thấy_trong_enterprise_tools__letter_spacing_thắt_chặt_xuống_0_012em_ở_kích_thước_lớn_để_hiệu_chỉnh_quang_học_____font_charlie_display:
      - "**Thay thế:** Manrope"
      - "**Weights:** 400, 500, 700, 800"
      - "**Kích thước:** 14, 24, 28, 32, 40, 44, 48, 70, 80"
      - "**Line height:** 1.00, 1.10, 1.14, 1.17, 1.19, 1.20, 1.25, 1.43"
      - "**Letter spacing:** 0.0120em ở 40px+; 0.0300em ở kích thước display nhỏ"
      - "**Vai trò:** Editorial headlines, hero text, section titles — mở rộng từ 24px sub-headings đến 80px display. Weight 400-500 tạo ra sự ấm áp nhân văn hiếm thấy trong enterprise tools; letter-spacing thắt chặt xuống 0.012em ở kích thước lớn để hiệu chỉnh quang học."

    charlie_text___body_copy__ui_labels__navigation__button_text__input_fields__footer_text__weight_400_cho_body__500_cho_emphasized_labels__700_dành_riêng_cho_inline_strong_elements__tight_line_heights_1_20_1_25_ở_kích_thước_ui_tối_đa_hóa_mật_độ_thông_tin_mà_không_gây_cảm_giác_chật_chội_____font_charlie_text:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 500, 700"
      - "**Kích thước:** 13, 14, 16, 20, 24"
      - "**Line height:** 1.20, 1.25, 1.29, 1.40, 1.50"
      - "**Vai trò:** Body copy, UI labels, navigation, button text, input fields, footer text. Weight 400 cho body, 500 cho emphasized labels, 700 dành riêng cho inline strong elements. Tight line-heights (1.20-1.25) ở kích thước UI tối đa hóa mật độ thông tin mà không gây cảm giác chật chội."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.29 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 48px | 1.14 | — | `--text-heading-lg` |"
      info: "| display | 80px | 1 | 0.012px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "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: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 2px |"
      info: "| tags | 10000px |"
      info: "| cards | 20px |"
      info: "| images | 5px |"
      info: "| inputs | 8px |"
      info: "| buttons | 28px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(9, 30, 66, 0.31) 0px 0px 1px 0px, rgba(9, 30, 66, 0....` | `--shadow-subtle` |"

    layout:

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

  components:

    primary_action_button:
      vai_trò: "High-emphasis CTA — đăng ký, bắt đầu, chuyển đổi chính"

      info: "Nền #1868db, chữ #ffffff bằng Charlie Text 16px weight 500. Pill radius 28px (hoặc 10000px cho full pill). Padding 10px 22px. Không viền. Phẳng, không shadow — màu sắc tự làm nhiệm vụ."

    secondary_action_button:
      vai_trò: "Tertiary CTA — tìm hiểu thêm, xem chương trình, điều hướng tiếp"

      info: "Nền trong suốt, chữ #101214 hoặc #ffffff (đảo ngược trên nền tối), Charlie Text 16px weight 500. Tùy chọn gạch chân mảnh khi hover. Nằm cạnh primary action như một text-link counterpart."

    ghost_button:
      vai_trò: "Low-emphasis interactive — filter chips, toggle controls"

      info: "Viền 1px #101214 hoặc #ffffff, fill trong suốt, cùng thông số chữ như primary. Pill radius."

    dark_hero_banner:
      vai_trò: "Quảng bá sự kiện/chiến dịch đầu trang"

      info: "Nền #101214 full-width, được đóng khung trái/phải bởi các hình dạng màu sắc hình học lởm chởm (tím violet #bf63f3, vàng #fca700, xanh dương #1868db, xanh lá confetti). Charlie Display 80px weight 400-500 headline màu trắng, căn trái với body text hỗ trợ màu #ffffff ở 16px. Primary button màu vàng rực (#fca700) để tương phản với nền tối — đây là nơi duy nhất yellow CTA xuất hiện."

    product_screenshot_card:
      vai_trò: "Trình diễn UI sản phẩm nhúng (Jira board, Confluence, v.v.)"

      info: "Ảnh chụp màn hình đặt trên nền xanh dương đặc #1868db, hơi lệch/nghiêng. Ảnh có góc bo ~5px. Hoạt động như một lớp showcase giữa các section nội dung trắng. Không viền, không shadow — nền xanh dương CHÍNH LÀ khung."

    video_player_block:
      vai_trò: "Nội dung video nhúng với khung thương hiệu"

      container_video_16: "9, thumbnail làm tối đến ~60% opacity, nút play trắng căn giữa (hình tròn, ~64px). Được bao quanh bởi các hình dạng màu sắc hình học bất đối xứng màu tím/vàng/xanh dương/xanh lá phá vỡ khung hình chữ nhật — thiết bị editorial đặc trưng."

    lavender_feature_band:
      vai_trò: "Section divider editorial với nội dung"

      info: "Nền #eed7fc full-width, Charlie Display heading căn giữa 32-40px weight 400 màu #101214, body copy màu #101214 ở 16px. Không có card container — text nổi trên bề mặt tinted. Phá vỡ nhịp điệu thị giác giữa các section trắng."

    inverted_dark_section:
      vai_trò: "Block nổi bật bộ sưu tập sản phẩm hoặc tính năng"

      info: "Nền #101214 trải rộng toàn chiều rộng, nửa trái chứa nội dung chữ trắng (heading + body), nửa phải chứa hình minh họa hoặc hình ảnh sản phẩm đầy màu sắc. Charlie Display 40-48px weight 500 headline, Charlie Text 16px body."

    top_navigation_bar:
      vai_trò: "Điều hướng chính của trang"

      info: "Thanh trắng sticky, nền #ffffff, viền dưới 1px #f0f1f2 hoặc 2px hairline. Atlassian wordmark + logo tam giác xanh bên trái. Menu items bằng Charlie Text 14px weight 400 #101214, dropdown hiện ra khi hover. Sign in link căn phải màu #1868db. Chiều cao ~56px."

    centered_editorial_headline:
      vai_trò: "Mở đầu section cho các trang marketing"

      info: "Charlie Display căn giữa 40-48px weight 500 màu #101214, với một đường gạch chân nguệch ngoạc màu vàng vẽ tay bên dưới các từ khóa (thiết bị editorial đặc trưng). Subhead bằng Charlie Text 16px #42526, max-width 600px căn giữa."

    info_badge:
      vai_trò: "Thẻ metadata, status indicators, category labels"

      info: "Hình pill (10000px radius), padding nhỏ 4-6px ngang, Charlie Text 13px weight 500. Sử dụng chữ #42526 trên nền #f0f1f2, hoặc chữ #1868db trên nền #e9f2fe cho các biến thể pha màu thương hiệu."

    card_container:
      vai_trò: "Card nội dung chung — tính năng, bài blog, resource tiles"

      info: "Nền #ffffff, border-radius 20px, internal padding 24px, viền tối thiểu (1px #f0f1f2) hoặc micro-shadow pha navy. Không có drop shadow ở quy mô lớn — radius và khoảng trắng làm tất cả công việc."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng #1868db cho mọi primary action button, link và focus state — đây là màu action có sắc độ duy nhất trong hệ thống"
      - "Đặt card radius là 20px và button radius là 28px (hoặc 10000px cho full pill) — sự phẳng là điểm mấu chốt"
      - "Kết hợp Charlie Display weight 400-500 với Charlie Text weight 400-500; chỉ dành weight 700+ cho inline emphasis"
      - "Đóng khung dark hero panels với geometric confetti shapes màu tím (#bf63f3), vàng (#fca700), xanh dương (#1868db) và xanh lá — không bao giờ sử dụng các màu này làm fill bên trong functional UI"
      - "Sử dụng #eed7fc lavender cho editorial section dividers giữa các block trắng; không bao giờ dùng cho buttons hoặc interactive elements"
      - "Sử dụng stack shadow pha navy (rgba(9, 30, 66, ...)) khi cần bất kỳ elevation nào — không bao giờ dùng neutral black shadows"
      - "Đặt headlines ở 40-80px với letter-spacing thắt chặt 0.012em; body ở 16px với line-height 1.50 để có nhịp đọc thoải mái"

    không_nên_làm:
      - "Không thêm các accent color bổ sung cho UI — vàng, tím và xanh lá chỉ mang tính trang trí và không bao giờ được xuất hiện trên buttons, links hoặc form controls"
      - "Không sử dụng heavy drop shadows hoặc elevation stacks — hệ thống cố tình phẳng; chiều sâu đến từ sự đảo ngược màu sắc và radius"
      - "Không sử dụng góc nhọn trên cards hoặc images — luôn áp dụng 20px radius cho cards và ít nhất 5px cho images"
      - "Không trộn lẫn weights của hai font family một cách tùy tiện — Charlie Text xử lý UI (13-24px), Charlie Display xử lý editorial (24-80px)"
      - "Không sử dụng đen (#000000) làm nền hoặc large fill — nó chỉ xuất hiện dưới dạng mực chữ và viền; dark panels sử dụng #101214"
      - "Không đặt chữ trắng trên nền lavender hoặc xanh dương — các cặp tương phản chỉ là dark-on-light hoặc white-on-navy"
      - "Không lặp lại hoặc xếp tile confetti gradient — nó là một thiết bị khung trang trí đơn lẻ, không phải pattern hay texture"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Nền trang chính cho các section nội dung |"
    info: "| 1 | Soft Surface | `#f0f1f2` | Muted buttons, subtle section bands, low-emphasis fills |"
    info: "| 2 | Tinted Surface | `#e9f2fe` | Blue-tinted highlight wash, feature card backgrounds |"
    info: "| 3 | Lavender Band | `#eed7fc` | Editorial accent sections, decorative dividers |"
    info: "| 4 | Dark Panel | `#101214` | Hero banners, product feature blocks, inverted sections |"

  elevation:

    - "**Feature card:** `rgba(9, 30, 66, 0.31) 0px 0px 1px 0px, rgba(9, 30, 66, 0.25) 0px 1px 1px 0px`"

  imagery:

    info: "Imagery được chia thành hai chế độ riêng biệt. Chức năng: ảnh chụp màn hình sản phẩm (Jira boards, Confluence pages) được hiển thị nguyên bản trên nền màu đặc, hơi nghiêng để tạo năng lượng. Editorial: các hình dạng hình học phẳng đầy màu sắc — hình chữ nhật rách, thanh góc cạnh, mảnh confetti — trong một bảng màu cố định gồm tím violet rực rỡ, vàng taxi, xanh dương điện và xanh lá, đóng khung các hero banners và video blocks. Không có nhiếp ảnh, không có 3D renders, không có lifestyle imagery. Minh họa (khi có, ví dụ trong Teamwork Collection block) là phẳng, mang màu thương hiệu và hướng đến nhân vật — các nhân vật cách điệu trong các fill đặc. Năng lượng thị giác đến hoàn toàn từ các mảnh màu hình học này, không phải từ nội dung nhiếp ảnh."

  layout:

    info: "Các dải full-width của các section trắng và lavender (#eed7fc) xen kẽ, với các dark navy panel (#101214) full-bleed thỉnh thoảng phá vỡ nhịp điệu. Nội dung được căn giữa max-width 1200px trong mỗi dải. Hero là một dark panel full-bleed với chữ căn trái và thẻ quảng cáo bên phải, được đóng khung bởi geometric confetti tràn ra ngoài mép trang. Bên dưới hero, các section xen kẽ giữa các editorial headline căn giữa với CTA đơn, và bố cục hai cột (text-trái/visual-phải hoặc visual-trái/text-phải) cho các tính năng sản phẩm. Product showcases sử dụng ảnh chụp màn hình nghiêng trên nền xanh dương đặc (#1868db) như các yếu tố chuyển tiếp. Navigation là một thanh top sticky đơn với dropdown mega-menus. Nhịp điệu dọc: 64-80px giữa các section chính, 24-40px trong section. Trang thở thoải mái nhưng mật độ thông tin vẫn cao trong các product blocks."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #101214"
    - "background: #ffffff"
    - "border: #292a2e"
    - "accent: #1868db"
    - "primary action: #1868db (filled action)"
    - "dark panel: #101214"

  example_component_prompts:

    - "Tạo một Primary Action Button: nền #1868db, chữ #ffffff, radius 9999px, compact pill padding. Sử dụng filled treatment này cho CTA chính."

    - "**Tạo một product screenshot card**: Đặt ảnh chụp màn hình Jira/Confluence UI (tỷ lệ 16:10) ở góc xoay nhẹ 3° trên nền #1868db đặc. Ảnh có corner radius 5px. Không viền, không shadow. Canvas xung quanh là #ffffff với padding trên/dưới 64px."

    - "**Tạo một lavender feature band**: Nền #eed7fc full-width, padding dọc 64px. Charlie Display căn giữa 32px weight 400 màu #101214, theo sau là Charlie Text 16px body màu #101214. Không có card container — text nằm trực tiếp trên bề mặt tinted."

    - "**Tạo một navigation bar**: Thanh top sticky, nền #ffffff, viền dưới 1px #f0f1f2. Logo tam giác xanh Atlassian + wordmark bên trái. Menu items (Products, Solutions, Why Atlassian, Resources, Enterprise) bằng Charlie Text 14px weight 400 #101214 với dropdown chevrons. 'Sign in' căn phải màu #1868db, 14px. Chiều cao 56px, padding ngang 16px cho menu items."

  confetti_decorative_system:

    info: "Thiết bị thị giác đặc trưng là màu sắc hình học rời rạc — các hình dạng hình chữ nhật rách bất đối xứng và thanh góc cạnh trong một bảng màu bốn màu cố định (tím violet #bf63f3, vàng taxi #fca700, xanh dương điện #1868db, xanh lá) tràn ra ngoài các cạnh của dark hero panels và video blocks. Các hình dạng này là flat fills, không gradient, không shadow, không stroke. Chúng hoạt động như dấu câu thị giác — ồn ào, vui tươi và cố tình không trau chuốt so với UI enterprise chính xác xung quanh. Chúng chỉ xuất hiện như các yếu tố đóng khung xung quanh các bề mặt tối, không bao giờ ở bên trong các section nội dung trắng, và không bao giờ chồng lên các functional UI components. Conic gradient (tím → vàng → xanh dương) được dành riêng cho khung nổi bật nhất, thường là xung quanh video hoặc hero imagery."

  similar_brands:

    - "**Notion** — Cùng thẩm mỹ SaaS light-canvas với khoảng trắng rộng rãi, một accent color duy nhất và editorial headline lớn kết hợp với ảnh chụp màn hình sản phẩm"
    - "**Linear** — Cùng hệ thống single-accent-color có kỷ luật với custom sans typography, dark hero panels và triết lý shadow tối thiểu"
    - "**Figma** — Cùng cách sử dụng hình dạng hình học đầy màu sắc làm trang trí editorial xung quanh các section tối, kết hợp với product showcases trắng sạch"
    - "**GitHub** — Enterprise developer-tool sensibility với cặp custom sans, dark navigation panels và functional monochrome product surfaces"
    - "**Slack** — Thương hiệu đồng hành gần gũi sử dụng cùng DNA thiết kế Atlassian — accent color rực rỡ, custom humanist sans, flat rounded components, shadow tối thiểu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-atlassian-blue: #1868db;
          --color-midnight-navy: #101214;
          --color-carbon-edge: #292a2e;
          --color-slate-current: #1c2b42;
          --color-muted-indigo: #42526e;
          --color-pure-white: #ffffff;
          --color-fog-white: #f0f1f2;
          --color-ash-gray: #b7b9be;
          --color-taxicab-yellow: #fca700;
          --color-lavender-wash: #eed7fc;
          --color-confetti-gradient: #bf63f3;
          --gradient-confetti-gradient: conic-gradient(rgb(191, 99, 243) 170deg, rgb(252, 167, 0) 171deg, rgb(252, 167, 0) 230deg, rgb(77, 140, 237) 231deg, rgb(77, 140, 237) 360deg);
        
          /* Typography — Font Families */
          --font-charlie-display: 'Charlie Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-charlie-text: 'Charlie Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.29;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: 0.012px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 40px;
          --radius-full: 10000px;
        
          /* Named Radii */
          --radius-nav: 2px;
          --radius-tags: 10000px;
          --radius-cards: 20px;
          --radius-images: 5px;
          --radius-inputs: 8px;
          --radius-buttons: 28px;
        
          /* Shadows */
          --shadow-subtle: rgba(9, 30, 66, 0.31) 0px 0px 1px 0px, rgba(9, 30, 66, 0.25) 0px 1px 1px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-soft-surface: #f0f1f2;
          --surface-tinted-surface: #e9f2fe;
          --surface-lavender-band: #eed7fc;
          --surface-dark-panel: #101214;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-atlassian-blue: #1868db;
          --color-midnight-navy: #101214;
          --color-carbon-edge: #292a2e;
          --color-slate-current: #1c2b42;
          --color-muted-indigo: #42526e;
          --color-pure-white: #ffffff;
          --color-fog-white: #f0f1f2;
          --color-ash-gray: #b7b9be;
          --color-taxicab-yellow: #fca700;
          --color-lavender-wash: #eed7fc;
          --color-confetti-gradient: #bf63f3;
        
          /* Typography */
          --font-charlie-display: 'Charlie Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-charlie-text: 'Charlie Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.29;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.14;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: 0.012px;
        
          /* 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-60: 60px;
          --spacing-64: 64px;
          --spacing-68: 68px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 5px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 40px;
          --radius-full: 10000px;
        
          /* Shadows */
          --shadow-subtle: rgba(9, 30, 66, 0.31) 0px 0px 1px 0px, rgba(9, 30, 66, 0.25) 0px 1px 1px 0px;
        }