bella_kitchen_appliances___style_reference:
  info: "> Quầy bếp ngập nắng giờ golden hour — bề mặt kem ấm với một điểm nhấn san hô duy nhất."

  theme: "light"

  info: "bella là một thẩm mỹ bếp ấm cúng, mang cảm giác quầy bếp gia đình, xây dựng trên bảng màu kem-và-san hô, tạo cảm giác ngập nắng chứ không lạnh lẽo như phòng khám. Toàn bộ giao diện nằm trên nền canvas trắng kem ấm (#ebeadf) với các card beige ấm hơn một chút (#d5cec0) và các bề mặt trắng nổi lên phía trên — các lớp được phân biệt bằng nhiệt độ màu sắc, không phải độ tương phản mạnh. Một điểm nhấn san hô bão hòa duy nhất (#f04923) cung cấp toàn bộ năng lượng: tag bán chạy nhất, card khuyến mãi, điểm nhấn giá và trạng thái active. Typography sử dụng sans-serif hình học (Supreme LL TT) với tracking -0.05em đồng nhất ở mọi kích thước, mang lại cho heading dáng vẻ nhỏ gọn, hiện đại. Thiết kế tránh đổ bóng, thay vào đó là phân lớp nhiệt độ màu sắc và bo góc 12px; button và badge là full pill (999px). Tổng thể cảm giác dễ gần, kích thích sự thèm ăn và tập trung vào sản phẩm — nhiếp ảnh đảm nhận phần lớn công việc tạo bầu không khí trong khi UI vẫn tối giản và ấm áp."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Warm Canvas | `#ebeadf` | `--color-warm-canvas` | Nền trang — lớp nền trắng kem ấm mang lại cho toàn bộ giao diện cảm giác ngập nắng, gần gũi |"
    info: "| Pristine Surface | `#ffffff` | `--color-pristine-surface` | Bề mặt card nổi, thanh navigation, nền card sản phẩm, nền pill button |"
    info: "| Sand Beige | `#d5cec0` | `--color-sand-beige` | Bề mặt card phụ và các panel nền tông ấm để nhóm sản phẩm và các phần nổi bật |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, nét icon, đường viền mảnh và wordmark thương hiệu — định nghĩa toàn bộ hệ thống typography |"
    info: "| Coral Pulse | `#f04923` | `--color-coral-pulse` | Badge bán chạy nhất, nền card khuyến mãi, điểm nhấn giá và accent active — nguồn năng lượng ấm duy nhất phá vỡ tông đơn sắc kem |"

  tokens___typography:

    supreme_ll_tt___font_thương_hiệu_chính_dùng_cho_tất_cả_văn_bản_ui__heading__navigation__button_và_nhãn_sản_phẩm___sans_serif_hình_học_với_tracking__0_05em_đồng_nhất_mang_lại_nhịp_điệu_nhỏ_gọn__hiện_đại__weight_400_xử_lý_body_và_hầu_hết_label__weight_700_dành_cho_heading_và_tên_sản_phẩm____font_supreme_ll_tt:
      - "**Thay thế:** Inter, DM Sans, hoặc General Sans"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 13, 14, 16, 18, 22, 24, 40"
      - "**Line height:** 1.0–1.83"
      - "**Letter spacing:** -0.05em đồng nhất ở mọi kích thước"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Vai trò:** Font thương hiệu chính dùng cho tất cả văn bản UI, heading, navigation, button và nhãn sản phẩm — sans-serif hình học với tracking -0.05em đồng nhất mang lại nhịp điệu nhỏ gọn, hiện đại; weight 400 xử lý body và hầu hết label, weight 700 dành cho heading và tên sản phẩm"

    times___font_dự_phòng_hoặc_văn_bản_render_hệ_thống_khi_supreme_ll_tt_không_khả_dụng____font_times:
      - "**Thay thế:** Times New Roman, Liberation Serif"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 16, 32"
      - "**Line height:** 1.0"
      - "**Vai trò:** Font dự phòng hoặc văn bản render hệ thống khi Supreme LL TT không khả dụng"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | -0.65px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.8px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.9px | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.4 | -1.1px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.4 | -1.2px | `--text-heading` |"
      info: "| display | 40px | 1.1 | -2px | `--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: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 116 | 116px | `--spacing-116` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 12px |"
      info: "| badges | 999px |"
      info: "| buttons | 999px |"

    layout:

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

  components:

    top_navigation_bar:
      vai_trò: "Header chính của trang với brand mark, link danh mục và tìm kiếm"

      info: "Nền trắng (#ffffff), full-width, bo góc 12px trên container, chiều cao ~64px. Wordmark 'bella' màu đen Supreme LL TT 700 ở ~16px bên trái. Các link nav ở giữa (Shop, bella, bella PRO, Recipes, News, Made Better) bằng 16px Supreme LL TT 400 màu đen. Icon tìm kiếm ở ngoài cùng bên phải. Nằm bên trong một card trắng bo góc nổi trên nền warm canvas với khoảng cách ~16px từ mép viewport."

    product_card:
      vai_trò: "Item dạng grid cho danh sách sản phẩm với hình ảnh, nhãn và giá"

      info: "Nền trắng (#ffffff), bo góc 12px, padding trong 24px. Hình ảnh sản phẩm căn giữa ở trên (PNG trong suốt trên nền trắng, không khung). Tên sản phẩm bằng 16px Supreme LL TT 700 màu đen bên dưới hình ảnh. Nhãn 'Bestseller' màu san hô phía trên tên khi có. Giá bằng 14px Supreme LL TT 400 màu đen bên dưới tên. Nhịp dọc thoáng — ~32px giữa hình ảnh và văn bản."

    bestseller_badge:
      vai_trò: "Nhãn khuyến mãi chỉ sản phẩm bán chạy nhất"

      info: "Hình pill (radius 999px), nền san hô (#f04923), chữ trắng, padding dọc 12px / ngang 20px. Văn bản bằng 12–13px Supreme LL TT 700, viết hoa hoặc mixed-case tracking. Nằm ở góc trên bên trái của hình ảnh hoặc card sản phẩm."

    pill_button:
      vai_trò: "Button hành động chính cho shop, learn more và CTA navigation"

      info: "Full pill (radius 999px), padding dọc 12px / ngang 24px. Biến thể filled white: nền #ffffff, viền đen 1px, chữ đen 14px Supreme LL TT 700. Biến thể outlined ghost: nền trong suốt, viền đen 1px. Văn bản căn giữa theo chiều dọc. Chiều rộng tự động theo nội dung với min-height ~16px."

    featured_product_card:
      vai_trò: "Card sidebar khuyến mãi trong hero làm nổi bật sản phẩm bán chạy nhất"

      info: "Nền san hô (#f04923) toàn bộ, bo góc 12px, padding 24px. Badge bán chạy nhất (pill trắng) ở góc trên bên trái. Headline bằng 22–24px Supreme LL TT 700 màu trắng, tối đa 2 dòng. Hình ảnh sản phẩm căn giữa bên dưới headline. Button CTA pill trắng ở cạnh dưới — tạo độ tương phản màu-mạnh-với-trắng làm hành động cuối cùng."

    hero_banner:
      vai_trò: "Hero full-bleed giới thiệu chiến dịch thương hiệu"

      layout_chia_đôi_full_width: "bên trái ~65% là nền xanh da trời nhiếp ảnh với hình ảnh mây (nội dung, không phải màu UI), bên phải ~35% là Featured Product Card. Headline 'Fits-anywhere™ kitchenware' bằng ~40px Supreme LL TT 700 màu trắng trên nền ảnh bầu trời. Một sản phẩm (máy nướng bánh mì) nổi trong hero với bóng bay đỏ tạo nét vui tươi. Hero card có bo góc 12px và nằm lùi vào trong từ mép viewport."

    lifestyle_scene_section:
      vai_trò: "Section editorial full-bleed với text overlay trên ảnh bếp ấm áp"

      info: "Hình ảnh nhiếp ảnh full-width (cảnh bếp ấm áp) với một card văn bản trong suốt một phần hoặc trắng đè lên ở giữa. Text card: nền trắng hoặc kem ấm, radius 12px, padding 24px. Heading bằng 24px Supreme LL TT 700 màu đen. Subtitle bằng 16px Supreme LL TT 400 màu đen. Căn giữa theo chiều ngang, đặt ở vị trí giữa-trên của hình ảnh."

    product_grid_section:
      vai_trò: "Grid bốn cột trưng bày sản phẩm cho các vật dụng tiết kiệm không gian"

      info: "Nền warm canvas (#ebeadf). Section heading ở ~24–40px Supreme LL TT 700 màu đen, căn giữa. Grid 4 cột với khoảng cách 24px, mỗi cột chứa một Product Card. Grid căn giữa trong container max-width ~1200px."

    inspiration_feature_card:
      vai_trò: "Card khuyến mãi với nền xanh nhạt và CTA cho nội dung công thức/cảm hứng"

      info: "Nền xanh oải hương nhạt (accent phụ mềm mại, ~#b8c5e8), bo góc 12px, padding 24px. Văn bản eyebrow nhỏ bằng 12px Supreme LL TT 400. Headline 'Get inspired' bằng 24px Supreme LL TT 700. Hình ảnh sản phẩm (nồi chiên không dầu) ở bên phải. Button pill trắng 'Learn more' ở dưới cùng với chữ đen."

    category_link:
      vai_trò: "Link navigation nội tuyến dùng trong top nav và footer"

      info: "Văn bản đen 16px Supreme LL TT 400. Không gạch chân theo mặc định. Một chevron xuống nhỏ (‹) có thể đi kèm với link danh mục có sub-menu. Trạng thái active hoặc hover có thể chuyển weight sang 700 hoặc thêm gạch chân màu san hô."

    price_display:
      vai_trò: "Nhãn giá sản phẩm bên dưới mỗi tên sản phẩm"

      info: "Văn bản đen 14px Supreme LL TT 400, có tiền tố '$' (ví dụ '$59.99'). Căn giữa hoặc căn trái tùy theo layout card. Biến thể gạch ngang tùy chọn cho giá khuyến mãi với weight nhẹ hơn và accent san hô trên giá bán."

  do_s_and_don_ts:

    nên_làm:
      - "Sử dụng #ebeadf làm nền trang cho tất cả khu vực không phải card — lớp nền kem ấm là canvas làm cho card trắng và accent san hô trở nên có chủ đích"
      - "Sử dụng #f04923 độc quyền như một accent chức năng: badge bán chạy nhất, nền card khuyến mãi và điểm nhấn giá active — không bao giờ dùng làm nền lớn cho nội dung chính"
      - "Sử dụng Supreme LL TT với letter-spacing -0.05em ở mọi kích thước — tracking chặt là yếu tố bắt buộc để duy trì tính nhất quán thương hiệu"
      - "Sử dụng border-radius 999px cho tất cả button, badge và tag — hình pill là ngôn ngữ button"
      - "Sử dụng border-radius 12px cho tất cả card và container hình ảnh — đây là radius bề mặt phổ quát"
      - "Sử dụng padding trong 24px cho tất cả nội dung card — giữ cho product card, feature card và promotional card nhất quán"
      - "Xếp chồng ba cấp độ bề mặt để tạo chiều sâu: warm canvas (#ebeadf) → sand beige (#d5cec0) → pristine white (#ffffff) — định nghĩa độ cao bằng nhiệt độ màu sắc, không bao giờ dùng drop shadow"

    không_nên_làm:
      - "Không sử dụng trắng tinh (#ffffff) làm nền trang — lớp nền kem ấm là thứ mang lại cho bella đặc tính gia đình, ngập nắng"
      - "Không thêm drop shadow vào card — bella sử dụng phân lớp nhiệt độ màu sắc (canvas → beige → white) thay vì độ cao bằng bóng đổ"
      - "Không sử dụng nhiều màu accent — san hô (#f04923) là accent màu sắc duy nhất; thêm màu thương hiệu thứ hai làm loãng bản sắc ấm áp gia đình"
      - "Không sử dụng xanh lam làm màu UI — xanh da trời trong hero là nội dung nhiếp ảnh, không phải design token"
      - "Không sử dụng font serif cho UI — Supreme LL TT (hoặc font sans-serif hình học thay thế) là kiểu chữ duy nhất được chấp nhận cho tất cả văn bản giao diện"
      - "Không sử dụng góc nhọn (radius 0px) trên card hoặc container — mọi bề mặt nên có ít nhất 12px radius để tạo sự mềm mại"
      - "Không căn giữa body text hoặc sử dụng độ dài dòng quá lớn — giữ mô tả sản phẩm và body copy căn trái với max-width 60ch"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Warm Canvas | `#ebeadf` | Nền trang cơ bản — nền tảng trắng kem ấm |"
    info: "| 1 | Sand Beige | `#d5cec0` | Panel nhóm sản phẩm phụ và nền card tông ấm |"
    info: "| 2 | Pristine Surface | `#ffffff` | Product card nổi, navigation và pill button trắng |"

  imagery:

    info: "Nhiếp ảnh là ngôn ngữ hình ảnh chủ đạo và mang toàn bộ trọng lượng bầu không khí. Ảnh sản phẩm là cut-out sạch sẽ trên nền trắng hoặc kem — vật thể là hero, không có bối cảnh lifestyle. Hero image là một cảnh bầu trời siêu thực, đầy khát vọng (bầu trời xanh với mây, bóng bay đỏ nâng một chiếc máy nướng bánh mì) truyền tải sự tự do và nhẹ nhàng. Lifestyle scene sử dụng ảnh bếp ấm áp, gần gũi với gỗ tự nhiên, gạch, cây xanh và đồ gốm để gợi lên một không gian gia đình thực sự. Hình ảnh lấp đầy các section full-bleed với văn bản đè lên trong card trắng hoặc kem. Không có minh họa, không có icon ngoài UI chức năng — sản phẩm nhiếp ảnh CHÍNH LÀ bản sắc hình ảnh. Xử lý màu sắc tự nhiên và ấm áp, không bão hòa hay filter. Nặng về hình ảnh ở cấp độ section nhưng tập trung vào văn bản trong card và navigation."

  layout:

    info: "Trang có max-width 1200px căn giữa với padding ngoài ~16px tạo cảm giác card nổi trên nền warm canvas. Navigation là một thanh pill trắng full-width ở trên cùng. Hero là layout chia đôi: ~65% nền ảnh bầu trời với headline đè lên và sản phẩm nổi, ~35% card khuyến mãi san hô. Các section xen kẽ giữa khối nhiếp ảnh full-bleed và grid sản phẩm nền kem. Product grid là 4 cột trên desktop với khoảng cách 24px. Sắp xếp nội dung xen kẽ giữa các chồng văn bản căn giữa (cho section header) và hero chia đôi bất đối xứng. Nhịp điệu tổng thể là: hero ảnh full-bleed → section lifestyle căn giữa với text overlay → grid sản phẩm 4 cột → section cảm hứng chia đôi ảnh+card. Khoảng cách dọc thoáng (~80px) giữa các section tạo nhịp độ thoải mái, dễ thở. Navigation là một top bar tối giản với các link căn giữa."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "text: #000000"
    - "background: #ebeadf (kem ấm)"
    - "surface/card: #ffffff"
    - "secondary surface: #d5cec0 (sand beige)"
    - "border: #000000 (hairline 1px)"
    - "accent: #f04923 (san hô)"
    - "primary action: không có màu CTA riêng biệt"

    3_5_ví_dụ_component_prompts:

    - "*Tạo một product card cho grid thương mại điện tử:* Nền trắng (#ffffff), bo góc 12px, padding trong 24px. Hình ảnh sản phẩm căn giữa ở trên trên nền trong suốt/trắng. Tên sản phẩm bằng 16px Supreme LL TT weight 700, #000000, letter-spacing -0.8px. Giá bên dưới bằng 14px Supreme LL TT weight 400, #000000, letter-spacing -0.7px. Badge pill 'Bestseller' màu san hô (#f04923) tùy chọn (radius 999px, padding 12px 20px, chữ trắng 12px) phía trên tên sản phẩm. Khoảng cách ~32px giữa hình ảnh và văn bản."

    - "*Tạo một featured product card (hero sidebar):* Nền san hô (#f04923) toàn bộ, bo góc 12px, padding 24px. Badge bán chạy nhất (pill trắng) ở góc trên bên trái. Headline bằng 24px Supreme LL TT weight 700, #ffffff, letter-spacing -1.2px. Hình ảnh sản phẩm căn giữa bên dưới. Button pill trắng ở dưới cùng: nền #ffffff, viền 1px #000000, radius 999px, padding 12px 24px, chữ đen 14px Supreme LL TT weight 700."

    - "*Tạo một lifestyle section với text overlay:* Ảnh bếp ấm áp full-bleed. Text card căn giữa đè lên: nền trắng, bo góc 12px, padding 24px. Heading bằng 24px Supreme LL TT weight 700, #000000, letter-spacing -1.2px. Subtitle bằng 16px Supreme LL TT weight 400, #000000. Căn giữa theo chiều ngang, đặt ở vị trí giữa-trên của hình ảnh."

    - "*Tạo một product grid section 4 cột:* Nền warm canvas (#ebeadf). Section heading ở 40px Supreme LL TT weight 700, #000000, căn giữa. Grid 4 cột với khoảng cách cột 24px, max-width 1200px căn giữa. Mỗi ô grid là một Product Card (xem prompt 1)."

    - "*Tạo một top navigation bar:* Nền trắng (#ffffff), container bo góc 12px, full-width với lề ngoài 16px từ mép viewport, chiều cao ~64px. Wordmark 'bella' bằng 16px Supreme LL TT weight 700, #000000, ở bên trái. Link nav căn giữa: 16px Supreme LL TT weight 400, #000000. Icon tìm kiếm ở ngoài cùng bên phải. Padding ngang ~24px bên trong thanh nav."

  elevation_philosophy:

    info: "bella tránh hoàn toàn drop shadow. Độ cao được truyền đạt thông qua hệ thống nhiệt độ bề mặt ba cấp: warm canvas (#ebeadf) làm nền, sand beige (#d5cec0) làm panel trung gian và pristine white (#ffffff) làm bề mặt nổi. Cách tiếp cận này giữ cho giao diện cảm giác phẳng, ấm áp và gia đình — giống như các vật thể nằm trên quầy bếp ngập nắng chứ không trôi nổi trong không gian kỹ thuật số. Khi một bề mặt cần cảm giác 'ở trên', hãy làm nó trắng hơn; khi nó cần lùi lại, hãy làm nó be hơn. Không bao giờ sử dụng box-shadow cho card, modal hay popover."

  similar_brands:

    - "**Our Place** — Cùng thẩm mỹ canvas kem ấm với một màu accent ấm duy nhất (terracotta/san hô), button hình pill và ảnh sản phẩm tập trung trên nền trung tính"
    - "**Caraway** — Thương hiệu bếp gia đình sử dụng bề mặt trắng kem ấm, typography sans-serif tối giản và ảnh lifestyle với kết cấu gỗ tự nhiên và gốm sứ"
    - "**Muji** — Bảng màu trung tính ấm dè dặt với một accent duy nhất, khoảng trắng rộng rãi và ảnh sản phẩm để vật thể làm hero trên nền kem"
    - "**Great Jones** — Thương hiệu bếp vui tươi với nền be ấm, display type đậm và một màu accent sống động duy nhất dùng cho các khoảnh khắc khuyến mãi và badge"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-canvas: #ebeadf;
          --color-pristine-surface: #ffffff;
          --color-sand-beige: #d5cec0;
          --color-ink-black: #000000;
          --color-coral-pulse: #f04923;
        
          /* Typography — Font Families */
          --font-supreme-ll-tt: 'Supreme LL TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.65px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.8px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.9px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -1.1px;
          --text-heading: 24px;
          --leading-heading: 1.4;
          --tracking-heading: -1.2px;
          --text-display: 40px;
          --leading-display: 1.1;
          --tracking-display: -2px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --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-40: 40px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-116: 116px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 12px;
          --radius-badges: 999px;
          --radius-buttons: 999px;
        
          /* Surfaces */
          --surface-warm-canvas: #ebeadf;
          --surface-sand-beige: #d5cec0;
          --surface-pristine-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-canvas: #ebeadf;
          --color-pristine-surface: #ffffff;
          --color-sand-beige: #d5cec0;
          --color-ink-black: #000000;
          --color-coral-pulse: #f04923;
        
          /* Typography */
          --font-supreme-ll-tt: 'Supreme LL TT', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --tracking-caption: -0.65px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.8px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.9px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -1.1px;
          --text-heading: 24px;
          --leading-heading: 1.4;
          --tracking-heading: -1.2px;
          --text-display: 40px;
          --leading-display: 1.1;
          --tracking-display: -2px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-96: 96px;
          --spacing-116: 116px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-full: 999px;
        }