airtable___style_reference:
  info: "> workshop ấm áp với các chương được mã hóa bằng màu sắc"

  theme: "light"

  info: "Airtable hiện lên như một không gian làm việc ấm áp, mang phong cách editorial, thay vì một dashboard SaaS lạnh lẽo. Canvas là nền giấy da kem mềm mại (#faf5e8) — không bao giờ trắng tinh — mang lại cho toàn bộ trang web cảm giác như giấy, gần như in ấn. Typography đậm và không hề nao núng: một custom display face với font-weight gần 900 cho hero headline kết hợp với một sans-serif đa năng cho body và UI. Các button màu đen tuyền, không phải màu xanh thương hiệu như mong đợi, mang lại cho trang web một sự tự tin mang tính kiến trúc, gần như ấn phẩm in. Điểm nhấn đặc trưng là các feature card được mã hóa bằng màu sắc — mỗi use case có một màu bão hòa riêng (terracotta, xanh dương đậm, xanh rừng, đào, hồng) hoạt động như các dải phân cách chương trong một catalog trực quan. Hiệu ứng tổng thể là một cuốn sổ tay studio sáng tạo: ấm áp, có tổ chức, có cá tính và mang tính con người."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#faf5e8` | `--color-parchment-cream` | Canvas trang — nền trắng ngà ấm áp định hình toàn bộ bầu không khí của site, thay thế nền trắng tinh tiêu chuẩn |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Bề mặt sáng nhẹ hỗ trợ cho nền tinh tế và phân cách section. Không nâng cấp nó thành màu CTA chính |"
    info: "| Frost White | `#f8fafc` | `--color-frost-white` | Bề mặt sáng thay thế cho các phần tử lồng nhau, nền navigation tinh tế |"
    info: "| Onyx | `#181d26` | `--color-onyx` | Màu trung tính hỗ trợ cho UI phụ, divider và label mờ. Không nâng cấp nó thành màu CTA chính |"
    info: "| Charcoal | `#333840` | `--color-charcoal` | Body text, secondary text, border accent — màu trung tính đậm đa năng |"
    info: "| Graphite | `#525965` | `--color-graphite` | Muted text, sub-label, body copy ít nổi bật |"
    info: "| Steel | `#9297a0` | `--color-steel` | Placeholder text, trạng thái disabled, label ít nhấn mạnh |"
    info: "| Silver Border | `#e0e2e6` | `--color-silver-border` | Divider mảnh, card border, phân cách cấu trúc tinh tế |"
    info: "| Midnight Indigo | `#040e20` | `--color-midnight-indigo` | Heading text đậm nhất, gần đen với thiên hướng lạnh để tạo trọng lượng editorial tối đa |"
    info: "| Cobalt Blue | `#1b61c9` | `--color-cobalt-blue` | Accent xanh hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. Không nâng cấp nó thành màu CTA chính |"
    info: "| Sapphire | `#254fad` | `--color-sapphire` | Accent tím hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |"
    info: "| Terracotta | `#aa2d00` | `--color-terracotta` | Accent cam hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |"
    info: "| Burnt Sienna | `#912e1f` | `--color-burnt-sienna` | Biến thể terracotta đậm cho nền card và text trên section ấm |"
    info: "| Peach Glow | `#fcab79` | `--color-peach-glow` | Lớp phủ ấm mềm mại cho highlight panel, nền accent |"
    info: "| Forest Ink | `#0a2e0e` | `--color-forest-ink` | Accent xanh lá hỗ trợ cho chi tiết trang trí và nhấn mạnh tần suất thấp. |"
    info: "| Moss | `#214224` | `--color-moss` | Green text phụ và border accent trên section chủ đề xanh lá |"
    info: "| Petal Pink | `#fa91e0` | `--color-petal-pink` | Accent vui tươi cho tag, category chip, màu minh họa |"
    info: "| Marigold | `#fcb42a` | `--color-marigold` | Accent ấm cho badge, tag chip, category highlight |"
    info: "| Pale Sky | `#c7e5f2` | `--color-pale-sky` | Bề mặt sáng hỗ trợ cho nền tinh tế và phân cách section |"

  tokens___typography:

    haas_groot_disp___display_headlines___custom_serif_slab_face_dùng_cho_hero_statement_và_section_title_lớn__dùng_font_weight_900_để_tạo_trọng_lượng_editorial____font_haas_groot_disp:
      - "**Thay thế:** GT Sectra Display, Tiempos Headline, hoặc Roboto Slab 900"
      - "**Weights:** 400, 900"
      - "**Kích thước:** 20px, 48px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Display headlines — custom serif/slab face dùng cho hero statement và section title lớn, dùng font-weight 900 để tạo trọng lượng editorial"

    haas___body__nav__buttons__subheading__ui_label___workhorse_sans_serif_với_weight_400_cho_body__500_cho_nhấn_mạnh__600_cho_button_và_label__tracking_dương_nhẹ_mở_rộng_ở_kích_thước_lớn____font_haas:
      - "**Thay thế:** Inter, Söhne, hoặc Neue Haas Grotesk"
      - "**Weights:** 400, 500, 600"
      - "**Kích thước:** 14px, 16px, 18px, 20px, 24px, 32px, 40px"
      - "**Line height:** 1.15, 1.20, 1.25, 1.30, 1.35, 1.50"
      - "**Letter spacing:** 0.0050em ở 14px, 0.0060em ở 16px, 0.0070em ở 18px, 0.0100em ở 20px, 0.0110em ở 24px, 0.0200em ở 32px+"
      - "**Vai trò:** Body, nav, buttons, subheading, UI label — workhorse sans-serif với weight 400 cho body, 500 cho nhấn mạnh, 600 cho button và label; tracking dương nhẹ mở rộng ở kích thước lớn"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.35 | 0.07px | `--text-caption` |"
      info: "| body-sm | 16px | 1.3 | 0.096px | `--text-body-sm` |"
      info: "| body | 18px | 1.35 | 0.126px | `--text-body` |"
      info: "| subheading | 20px | 1.3 | 0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | 0.264px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | 0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.15 | 0.8px | `--text-heading-lg` |"
      info: "| display | 48px | 1.5 | — | `--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: "| 64 | 64px | `--spacing-64` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 32px |"
      info: "| cards | 16px |"
      info: "| buttons | 12px |"
      info: "| featureCards | 24px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) ...` | `--shadow-subtle` |"
      info: "| lg | `rgba(15, 48, 106, 0.05) 0px 0px 20px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính"

      info: "Nền #181d26 (Onyx) đặc, chữ trắng, Haas 600 ở 16px, border-radius 12px, padding dọc 16px và ngang 24px. Nằm trên nền cream với shadow nhiều lớp xanh lam tinh tế tạo chiều sâu."

    secondary_ghost_button:
      vai_trò: "Hành động phụ hoặc CTA thay thế"

      info: "Nền #ffffff trắng, border 1px #181d26, chữ đen, Haas 600 ở 16px, border-radius 12px, padding giống primary. Dùng cho hành động 'Book demo' đi kèm với primary CTA."

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

      info: "Nền #ffffff trắng với drop shadow xanh lam tinh tế (rgba(15,48,106,0.05) 0px 0px 20px). Logo trái (Airtable mark), nav link ở giữa với Haas 400 ở 16px kèm chevron dropdown, bên phải là ghost button 'Book Demo' và primary button 'Sign up for free' cùng text link 'Log in'."

    hero_section:
      vai_trò: "Value proposition màn hình đầu tiên"

      info: "Canh giữa trên nền parchment cream, headline Haas Groot Disp 900 ở 48px màu #040e20, subtext Haas 400 ở 18px màu #333840, dual CTA (primary + ghost) canh giữa bên dưới, tiếp theo là container ảnh chụp màn hình sản phẩm màu #181d26 đậm với radius 16px hiển thị giao diện app."

    logo_trust_bar:
      vai_trò: "Bằng chứng xã hội và uy tín"

      info: "Một hàng logo khách hàng đơn sắc muted trên nền parchment, phía trước là caption nhỏ 'Trusted by 500,000 leading teams' ở Haas 400."

    tabbed_feature_section:
      vai_trò: "Trình bày chuyên sâu khả năng sản phẩm"

      bố_cục_hai_cột: "cột trái có danh sách tab được đánh số (01–04) ở Haas 500, tab active màu #181d26 weight 600, tab inactive màu muted #9297a0. Cột phải là khối màu bão hòa lớn (ví dụ #aa2d00 Terracotta) với card trắng bên trong chứa heading, body text và ghost button 'Learn more'."

    color_coded_feature_card:
      vai_trò: "Trình diễn use case"

      info: "Card lớn với radius 24px, nền màu bão hòa (Terracotta, Sapphire, Forest, Pale Sky), panel trắng bên trong hiển thị ảnh chụp màn hình app hoặc dữ liệu. Mỗi use case có màu sắc riêng — terracotta cho campaigns, sapphire cho opportunities, forest cho localization, pale sky cho danh sách người tham dự."

    product_screenshot_frame:
      vai_trò: "Container xem trước app tối"

      info: "Container nền #181d26 với radius 16px, chứa ảnh chụp màn hình UI app đầy đủ với dark theme gốc, tạo độ tương phản với nền cream ấm."

    prompt_input_bar:
      vai_trò: "Tương tác AI prompt"

      info: "Input pill trắng bo tròn trên bề mặt sản phẩm tối, chứa prompt text ở Haas 400, nút submit tròn tối ở cuối với icon mũi tên."

    category_chip___tag:
      vai_trò: "Label hoặc chỉ báo filter"

      info: "Hình pill, border-radius 32px, text nhỏ ở Haas 500, nền màu rực rỡ (Marigold, Petal Pink) với text tương phản — dùng cho status, category và filter label."

    announcement_banner:
      vai_trò: "Dải quảng cáo đầu trang"

      info: "Thanh mỏng full-width ở đầu trang, nền sáng, text canh giữa ở Haas 400 với inline link màu Cobalt Blue (#1b61c9) và nút đóng dismiss bên phải."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Parchment Cream (#faf5e8) làm canvas nền — không bao giờ dùng #ffffff tinh khiết cho nền toàn trang"
      - "Luôn ghép mỗi primary CTA đặc với một ghost button viền là hành động phụ"
      - "Dùng border-radius 12px cho tất cả button và 24px cho feature card lớn để tạo cảm giác bo tròn nhưng vẫn mang tính kiến trúc"
      - "Gán cho mỗi section use case chính một màu sắc bão hòa riêng (terracotta, sapphire, forest, peach, pink)"
      - "Dùng Haas Groot Disp 900 cho hero và section headline, chỉ dùng ở kích thước 40px+"
      - "Áp dụng đơn vị cơ bản 8px nhất quán: 8, 16, 24, 32, 40, 64 cho padding, gap và nhịp điệu section"
      - "Neo các phần tử tương tác bằng Onyx (#181d26) thay vì màu đặc trưng thương hiệu"

    không_nên_làm:
      - "Không dùng #ffffff tinh khiết làm nền trang — luôn dùng Parchment Cream (#faf5e8) cho canvas"
      - "Không dùng brand-blue hoặc màu chromatic cho CTA button — Onyx đen là quy ước"
      - "Không áp dụng letter-spacing cho display headline ở Haas Groot Disp — custom face được thiết kế với tracking chặt"
      - "Không dùng góc nhọn (0px radius) trên bất kỳ phần tử tương tác hoặc card nào — tối thiểu 12px"
      - "Không trộn quá 2 text weight trong một đoạn body — chỉ dùng 400 hoặc 500"
      - "Không đặt card trắng trực tiếp lên nền cream mà không có padding — luôn có padding trong 16-24px"
      - "Không dùng màu feature card bão hòa cho text body hoặc UI element nhỏ — chúng chỉ dành cho bề mặt cấp section"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#faf5e8` | Nền ấm toàn trang tạo giọng điệu editorial |"
    info: "| 1 | White Card | `#ffffff` | Bề mặt card chính nằm trên nền parchment |"
    info: "| 2 | Frost White | `#f8fafc` | Bề mặt thay thế tinh tế cho phần tử lồng nhau |"
    info: "| 3 | Pale Sky | `#c7e5f2` | Bề mặt pha màu để phân biệt section nhẹ nhàng |"
    info: "| 4 | Onyx Frame | `#181d26` | Container ảnh chụp màn hình sản phẩm tối và nền CTA tối |"

  elevation:

    - "**Primary CTA Button:** `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset`"
    - "**Top Navigation:** `rgba(15, 48, 106, 0.05) 0px 0px 20px 0px`"

  imagery:

    info: "Ảnh chụp màn hình sản phẩm chiếm ưu thế làm nội dung hình ảnh chính — khung UI app dark mode đầy đủ được nhúng trong trang cream sáng tạo độ tương phản mạnh. Ảnh chụp màn hình hiển thị data table, kanban board, calendar view và AI prompt input ở độ trung thực cao. Hình ảnh hỗ trợ bao gồm crop sản phẩm nhỏ nội tuyến (ảnh giày thể thao, ảnh chân dung) trong feature card. Không có lifestyle photography, không có minh họa trừu tượng. Logo bar dùng logo khách hàng đơn sắc muted. Ngôn ngữ hình ảnh là product-showcase: giao diện app CHÍNH LÀ hero, được đóng khung bởi typography editorial ấm áp."

  layout:

    info: "Cột nội dung canh giữa, max-width 1200px trên nền cream ấm. Hero là chồng text canh giữa phía trên ảnh chụp màn hình sản phẩm tối tràn xuống dưới mép nội dung. Các section chảy theo chiều dọc với gap 64px nhất quán, xen kẽ giữa section editorial thiên về text và section demo sản phẩm thiên về hình ảnh. Khu vực feature dùng mẫu 2 cột: bên trái có danh sách tab dọc được đánh số (01–04), bên phải có khối màu bão hòa lớn. Section cuối dùng grid 2 cột gồm các use-case card được mã hóa màu, mỗi card chiếm khoảng nửa chiều rộng. Navigation là top bar sạch với logo trái, link giữa và CTA phải. Kiến trúc thông tin dày đặc được tránh — các section có khoảng trắng rộng rãi, mỗi khối phục vụ một mục đích duy nhất."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #181d26 (Onyx)"
    - "background: #faf5e8 (Parchment Cream)"
    - "border: #e0e2e6 (Silver Border)"
    - "accent: #1b61c9 (Cobalt Blue) cho link"
    - "primary action: không có màu CTA riêng biệt"
    - "section accents: #aa2d00 (Terracotta), #254fad (Sapphire), #0a2e0e (Forest), #fcab79 (Peach)"

    ví_dụ_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; dùng các button trung tính đã trích xuất thay vì tự tạo màu CTA đặc."

    - "Tạo một color-coded feature card: border-radius 24px, nền #aa2d00 (Terracotta), panel trắng #ffffff bên trong với padding 16px chứa heading 24px Haas weight 600 #181d26, body text 16px Haas weight 400 #333840 và ghost button (nền trắng, border 1px #181d26, radius 12px) có nhãn 'Learn more'."

    - "Tạo một tabbed feature section: bố cục 2 cột. Cột trái có tab đánh số (01–04) ở Haas 500, tab active màu #181d26 weight 600 với thanh chỉ báo trái, tab inactive màu #9297a0 weight 400. Cột phải là khối #aa2d00 (Terracotta) lớn với card trắng bên trong chứa nội dung feature và ghost button 'Learn more'."

    - "Tạo một announcement banner: dải full-width, nền #f8fafc, padding dọc 12px, text canh giữa ở Haas 400 14px #333840 với inline link màu #1b61c9 (Cobalt Blue) và nút dismiss '×' nhỏ ở phía xa bên phải."

  similar_brands:

    - "**Notion** — Cùng cách tiếp cận nền trung tính ấm, cùng khoảng trắng rộng rãi, cùng mẫu hero-can-giữa-với-ảnh-chụp-màn-hình, dù Notion thiên về đơn sắc hơn"
    - "**Linear** — Typography editorial sạch sẽ tương tự và cách dùng màu gần đen tự tin cho primary action, nhưng Linear ưu tiên dark-mode và mang tính hình học hơn"
    - "**Webflow** — Mẫu chung của các feature/use-case section được mã hóa màu với khối accent bão hòa, dù Webflow dùng tím làm neo thương hiệu đơn lẻ mạnh hơn"
    - "**Figma** — Chiến lược hình ảnh product-screenshot-as-hero tương tự và hệ thống accent đa sắc thay vì một màu thương hiệu duy nhất"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #faf5e8;
          --color-pure-white: #ffffff;
          --color-frost-white: #f8fafc;
          --color-onyx: #181d26;
          --color-charcoal: #333840;
          --color-graphite: #525965;
          --color-steel: #9297a0;
          --color-silver-border: #e0e2e6;
          --color-midnight-indigo: #040e20;
          --color-cobalt-blue: #1b61c9;
          --color-sapphire: #254fad;
          --color-terracotta: #aa2d00;
          --color-burnt-sienna: #912e1f;
          --color-peach-glow: #fcab79;
          --color-forest-ink: #0a2e0e;
          --color-moss: #214224;
          --color-petal-pink: #fa91e0;
          --color-marigold: #fcb42a;
          --color-pale-sky: #c7e5f2;
        
          /* Typography — Font Families */
          --font-haas-groot-disp: 'Haas Groot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas: 'Haas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.35;
          --tracking-caption: 0.07px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: 0.096px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: 0.126px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: 0.264px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: 0.8px;
          --text-display: 48px;
          --leading-display: 1.5;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-tags: 32px;
          --radius-cards: 16px;
          --radius-buttons: 12px;
          --radius-featurecards: 24px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset;
          --shadow-lg: rgba(15, 48, 106, 0.05) 0px 0px 20px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #faf5e8;
          --surface-white-card: #ffffff;
          --surface-frost-white: #f8fafc;
          --surface-pale-sky: #c7e5f2;
          --surface-onyx-frame: #181d26;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #faf5e8;
          --color-pure-white: #ffffff;
          --color-frost-white: #f8fafc;
          --color-onyx: #181d26;
          --color-charcoal: #333840;
          --color-graphite: #525965;
          --color-steel: #9297a0;
          --color-silver-border: #e0e2e6;
          --color-midnight-indigo: #040e20;
          --color-cobalt-blue: #1b61c9;
          --color-sapphire: #254fad;
          --color-terracotta: #aa2d00;
          --color-burnt-sienna: #912e1f;
          --color-peach-glow: #fcab79;
          --color-forest-ink: #0a2e0e;
          --color-moss: #214224;
          --color-petal-pink: #fa91e0;
          --color-marigold: #fcb42a;
          --color-pale-sky: #c7e5f2;
        
          /* Typography */
          --font-haas-groot-disp: 'Haas Groot Disp', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-haas: 'Haas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.35;
          --tracking-caption: 0.07px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.3;
          --tracking-body-sm: 0.096px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: 0.126px;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: 0.264px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: 0.8px;
          --text-display: 48px;
          --leading-display: 1.5;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset;
          --shadow-lg: rgba(15, 48, 106, 0.05) 0px 0px 20px 0px;
        }