kobu___style_reference:
  info: "> Travel gazette đơn sắc trên nền giấy ấm"

  theme: "light"

  info: "Kobu hoạt động như một editorial travel portfolio: nền cream ấm áp, gần như không có tạp âm màu sắc, và nhiếp ảnh là yếu tố màu duy nhất. Wordmark display khổng lồ KOBU trải dài gần như edge-to-edge — chính tên thương hiệu là tuyên bố thị giác, không phải một logo mark. Mọi thứ khác đều lùi lại: Gill Sans nhân văn tạo giọng văn văn chương, mang phong cách guidebook, trong khi Fira Mono xử lý các label uppercase nhỏ đọc như thẻ bảo tàng in ấn. Cards nằm sát mép trang với hairline borders, không shadow, không fill, và badges bo tròn 5px nổi ở góc trên bên trái mỗi bức ảnh. Hệ thống có chủ đích tối giản — không CTA, không accent color, không gradient — để kiến trúc và cảnh quan trong ảnh trở thành yếu tố biểu cảm duy nhất trên màn hình."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#242429` | `--color-obsidian` | Primary text, icon strokes, hairline borders toàn hệ thống — màu tối chủ lực thay thế pure black để đọc ấm hơn một chút |"
    info: "| Parchment | `#f9f5f2` | `--color-parchment` | Page canvas, hero và footer backgrounds — off-white ấm báo hiệu giấy editorial thay vì digital mặc định |"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Card surfaces, image borders, badge backgrounds — màu trung tính sáng hơn dùng để nâng nội dung khỏi nền parchment |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Headings, navigation borders, và các khoảnh khắc typographic tương phản cao cần độ đậm tối đa |"
    info: "| Graphite | `#3e3e3e` | `--color-graphite` | Body text, card metadata, và list items — mềm hơn Obsidian cho bản sao đọc thứ cấp |"
    info: "| Ash Gray | `#919191` | `--color-ash-gray` | Muted heading accent và de-emphasized text — màu trung tính nhẹ nhất, dùng cho location subtitles và tertiary labels |"
    info: "| Charcoal Deep | `#070707` | `--color-charcoal-deep` | Dành riêng cho các display headlines nặng nhất khi cần độ đậm hơn Ink Black một chút |"

  tokens___typography:

    gill_sans___typeface_chính_cho_mọi_editorial_copy_và_headings__sự_ấm_áp_nhân_văn_của_gill_sans_là_signature___những_nét_vẽ_hữu_cơ_nhẹ_và_tính_cách_sách_vở_mang_giọng_văn_tạp_chí_du_lịch_văn_chương__weight_400_xử_lý_body_và_nav__weight_500_thêm_độ_đậm_cho_sub_headings_và_card_titles__thiết_lập_64px_1_00_tạo_nên_wordmark_kobu_hoành_tráng__nơi_line_height_khớp_với_font_size_để_các_chữ_cái_tràn_ra_____font_gill_sans:
      - "**Substitute:** Avenir, Proxima Nova, hoặc Museo Sans"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 15px, 33px"
      - "**Line height:** 1.00–1.43"
      - "**Vai trò:** Typeface chính cho mọi editorial copy và headings. Sự ấm áp nhân văn của Gill Sans là signature — những nét vẽ hữu cơ nhẹ và tính cách sách vở mang giọng văn tạp chí du lịch văn chương. Weight 400 xử lý body và nav; weight 500 thêm độ đậm cho sub-headings và card titles. Thiết lập 64px/1.00 tạo nên wordmark KOBU hoành tráng, nơi line-height khớp với font-size để các chữ cái tràn ra."

    fira_mono___monospace_cho_small_uppercase_labels___badges__navigation__và_category_tags__hình_học_fixed_width_và_letter_spacing_rộng_0_167em_0_183em_trên_10_12px_đọc_như_thẻ_bảo_tàng_in_ấn__biến_các_label_chức_năng_thành_chi_tiết_typographic_thay_vì_ui_chrome_____font_fira_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10px, 11px, 12px, 14px"
      - "**Line height:** 1.25–2.00"
      - "**Letter spacing:** 0.167em–0.183em trên small labels (10–12px)"
      - "**OpenType features:** `\"tnum\" on, \"ss01\" on`"
      - "**Vai trò:** Monospace cho small uppercase labels — badges, navigation, và category tags. Hình học fixed-width và letter-spacing rộng (0.167em–0.183em trên 10–12px) đọc như thẻ bảo tàng in ấn, biến các label chức năng thành chi tiết typographic thay vì UI chrome."

    gill_sans_mt_pro___gill_sans_mt_pro___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_gill_sans_mt_pro:
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 16px, 21px, 24px, 32px, 64px"
      - "**Line height:** 1, 1.25"
      - "**Vai trò:** Gill Sans MT Pro — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| label | 10px | 1.5 | 0.183px | `--text-label` |"
      info: "| caption | 12px | 1.43 | 0.167px | `--text-caption` |"
      info: "| body-sm | 15px | 1.43 | — | `--text-body-sm` |"
      info: "| subheading | 21px | 1.25 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | — | `--text-heading-sm` |"
      info: "| heading-lg | 33px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 64px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 34 | 34px | `--spacing-34` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 110 | 110px | `--spacing-110` |"
      info: "| 119 | 119px | `--spacing-119` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 5px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 60-80px"
      - "**Card padding:** 0px"
      - "**Element gap:** 10-15px"

  components:

    navigation_bar:
      vai_trò: "Site navigation đầu trang"

      info: "Full-width bar không có background fill — text nằm trực tiếp trên Parchment canvas. Category links căn trái (HOTELS, VILLAS, RETREATS, PROPERTIES, JOURNAL) bằng Fira Mono 12px, uppercase, letter-spacing 0.167em, màu Obsidian. Wordmark KOBU căn giữa bằng Gill Sans 14px weight 500. Search icon căn phải. Một đường hairline 1px Obsidian chạy dọc cạnh dưới."

    display_wordmark:
      vai_trò: "Brand identifier và hero anchor"

      info: "Text KOBU đặt bằng Gill Sans 64px, weight 500 (hoặc 400), line-height 1.00, màu Obsidian. Trải dài để lấp đầy toàn bộ viewport width, biến tên thương hiệu thành yếu tố thị giác chủ đạo. Không background, không container — type nằm trực tiếp trên Parchment."

    section_heading:
      vai_trò: "Giới thiệu các nhóm nội dung"

      info: "Gill Sans 33px, line-height 1.20, weight 400, màu Obsidian. Theo sau bởi một đoạn mô tả tùy chọn bằng Graphite body copy 16px. Không có underline hoặc ornament trang trí — kích thước type và weight tự đảm nhiệm."

    property_card:
      vai_trò: "Đơn vị nội dung chính cho hotels, villas, và properties"

      info: "Layout ưu tiên hình ảnh. Ảnh full-bleed không border-radius, nằm trên Parchment. Bên dưới ảnh: tên property bằng Gill Sans 21px weight 500, location subtitle bằng Fira Mono 12px (Ash Gray, uppercase, tracked), và price anchor căn phải cùng style monospace. Không card background, không shadow, không border — chỉ whitespace ngăn cách ảnh với text."

    featured_badge:
      vai_trò: "Gắn thẻ cho card đầu tiên trong một collection"

      info: "Fira Mono 10px, weight 500, uppercase, letter-spacing 0.183em. White background, Obsidian text, border-radius 5px. Đặt ở góc trên bên trái, inset 10px từ mép ảnh, có prefix là ký tự dot nhỏ. Một đường hairline 1px Obsidian bao quanh badge."

    new_badge:
      vai_trò: "Đánh dấu properties mới thêm"

      info: "Cấu trúc giống hệt Featured Badge — Fira Mono 10px weight 500, uppercase, white fill, Obsidian text, radius 5px, hairline border — chỉ khác biệt ở từ NEW."

    price_tag:
      vai_trò: "Chỉ báo giá căn phải trên property cards"

      info: "Fira Mono 12px, weight 400, uppercase, letter-spacing 0.071em, màu Obsidian. Căn phải cạnh dòng text của card. Không background, không border — thuần dấu câu typographic."

    back_to_top_button:
      vai_trò: "Floating scroll-return control"

      info: "Circular surface button (đường kính khoảng 40px), white fill với hairline border 1px Obsidian, chứa icon chevron hướng lên. Cố định ở cạnh dưới bên phải viewport. Không shadow."

    view_all_link:
      vai_trò: "Collection overflow link"

      info: "Gill Sans 21px weight 400, màu Obsidian, với glyph mũi tên đuôi (↗). Không underline. Căn phải ở cuối một nhóm card. Hoạt động như hành động điều hướng duy nhất trong hệ thống."

    body_paragraph:
      vai_trò: "Editorial description copy"

      info: "Gill Sans 16px, line-height 1.25, weight 400, màu Graphite. Max-width giới hạn khoảng 480px để đọc thoải mái. Không first-line indent, không drop cap."

    search_icon:
      vai_trò: "Trigger tìm kiếm property"

      info: "Kính lúp vẽ bằng line đơn giản màu Obsidian, 16px, không background hoặc border. Nằm ở góc trên bên phải navigation bar."

    footer:
      vai_trò: "Bottom-of-page closing band"

      info: "Full-width Parchment band với top border 1px Obsidian. Chứa type tối giản bằng Fira Mono 12px, weight 400, uppercase, tracked. Không CTA buttons, không newsletter form, không decorative graphics."

  do_s_and_don_ts:

    do:
      - "Đặt wordmark KOBU ở 64px với line-height 1.00 để type lấp đầy viewport — đây là hero element, không phải logo trong góc."
      - "Dùng Fira Mono với letter-spacing 0.167em–0.183em cho mọi badge, label, và navigational item — tracked monospace là điểm nhấn typographic duy nhất của hệ thống."
      - "Đặt ảnh property card full-bleed với zero border-radius và dùng whitespace, không phải borders hay shadows, để phân cách các element."
      - "Để ảnh property là nguồn màu sắc duy nhất — giữ mọi UI surface trong dải trung tính Parchment/Gallery White và không bao giờ thêm accent hue."
      - "Dùng gap 10–15px giữa các card elements và 60–80px giữa các section để duy trì nhịp đọc editorial, không vội vã."
      - "Căn phải prices và View All links để tạo tension thị giác so với titles căn trái."
      - "Xử lý borders là hairline 1px Obsidian — chúng xác định cấu trúc mà không thêm trọng lượng thị giác."

    don_t:
      - "Không bao giờ thêm colored CTA button, filled accent, hoặc gradient — Kobu không có primary action color; điều hướng xảy ra qua text và links."
      - "Không bao giờ áp dụng border-radius lớn hơn 5px cho bất kỳ element nào — hệ thống sắc cạnh, không mềm mại."
      - "Không bao giờ dùng shadows hoặc elevation để phân cách surface — sự phân cách đến từ whitespace và độ tương phản surface Parchment vs Gallery White."
      - "Không bao giờ đặt heading dưới weight 400 hoặc trên weight 500 — typography có chủ đích kiềm chế và không bao giờ nên la hét."
      - "Không bao giờ thêm icon fills, illustrations, hoặc decorative graphics vào UI — nhiếp ảnh là nội dung thị giác duy nhất được phép ngoài typography."
      - "Không bao giờ dùng sans-serif khác Gill Sans cho headings hoặc body, hoặc monospace khác Fira Mono cho labels — cặp đôi này là bất khả thương lượng."
      - "Không bao giờ thêm màu trung tính hoặc chromatic mới vào palette; kỷ luật đơn sắc chính là thương hiệu."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Parchment Canvas | `#f9f5f2` | Base page background — cream ấm hiển thị trong hero, footer, và khoảng thở giữa các khối nội dung |"
    info: "| 2 | Gallery White | `#ffffff` | Elevated content surfaces — card backgrounds, image frames, badge fills |"

  elevation:

    info: "Kobu cố tình tránh shadows và elevation effects. Sự phân cách giữa các surface đạt được qua độ tương phản Parchment (#f9f5f2) vs Gallery White (#ffffff), hairline borders 1px bằng Obsidian (#242429), và whitespace rộng rãi. Dấu hiệu chiều sâu duy nhất là sự chênh lệch tông màu nhẹ giữa page canvas và card surface — không drop shadows, không glow effects, không layered panels. Cách xử lý phẳng này củng cố thẩm mỹ in ấn editorial, nơi nội dung nằm trên một trang giấy thay vì nổi trong giao diện kỹ thuật số."

  imagery:

    info: "Nhiếp ảnh là yếu tố biểu cảm duy nhất trong hệ thống Kobu — UI có chủ đích đơn sắc để kiến trúc, nội thất và cảnh quan trở thành màu sắc. Ảnh lớn, full-bleed, và khung hình editorial: ngoại thất resort giờ vàng, chi tiết nội thất với ánh sáng tungsten ấm, và cây xanh nhiệt đới tươi tốt bên cạnh bê tông hiện đại. Xử lý tự nhiên và không filter — không overlay, không duotone, không vignette. Cards trình bày ảnh đơn lẻ không có cropping masks hoặc rounded corners. Mối quan hệ là gallery-catalogue: mỗi ảnh là một artifact trưng bày trên giấy da, không phải thumbnail trong product grid. Không illustrations, không icons ngoài line glyphs đơn giản, không abstract graphics — nhiếp ảnh CHÍNH LÀ ngôn ngữ thị giác."

  layout:

    info: "Full-width, full-bleed layout không có centered max-width container cho hero — wordmark KOBU trải dài đến mép viewport. Bên dưới hero, nội dung được giới hạn lỏng lẻo ở max-width khoảng 1200–1440px với side margins rộng. Navigation là một top bar mỏng đơn (không sticky theo bằng chứng) với text-only links. Property grid có chủ đích bất đối xứng: cards thay đổi width và vertical position, tạo cảm giác editorial collage thay vì grid đồng nhất. Card đầu tiên trong mỗi collection rộng hơn đáng kể (full content-width) và mang badge FEATURED; các card tiếp theo nhỏ hơn và lệch vị trí. Sections được phân cách bằng whitespace thay vì divider, với một hairline border duy nhất dưới navigation và trước footer. Density comfortable — ảnh lớn chiếm ưu thế, text thưa thớt. Không sidebar, không mega-menu, không sticky elements ngoài back-to-top button."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #242429 (Obsidian)"
    - "background: #f9f5f2 (Parchment)"
    - "surface: #ffffff (Gallery White)"
    - "border: #242429 (Obsidian hairline)"
    - "muted text: #3e3e3e (Graphite) / #919191 (Ash Gray)"
    - "primary action: không có distinct CTA color"

    example_component_prompts:

    - "Tạo navigation bar: full-width, không background fill, Parchment canvas (#f9f5f2). Links căn trái bằng Fira Mono 12px, uppercase, letter-spacing 0.167em, màu Obsidian (#242429). KOBU căn giữa bằng Gill Sans 14px weight 500. Search icon căn phải. Bottom border: 1px solid #242429."

    - "Tạo property card: ảnh full-bleed (không border-radius) làm element trên cùng. Bên dưới: tên property bằng Gill Sans 21px weight 500, màu Obsidian (#242429). Location bằng Fira Mono 12px uppercase, letter-spacing 0.167em, màu Ash Gray (#919191). Price căn phải bằng Fira Mono 12px, uppercase, màu Obsidian (#242429). Không card background, không shadow, không border. Gap 10px giữa tên và location."

    - "Tạo featured badge: Fira Mono 10px weight 500, uppercase, letter-spacing 0.183em. White (#ffffff) background, Obsidian (#242429) text, border-radius 5px, hairline border 1px Obsidian. Padding 5px 10px. Đặt ở góc trên bên trái của ảnh, inset 10px. Prefix bằng ký tự dot nhỏ."

    - "Tạo section heading: Gill Sans 33px, line-height 1.20, weight 400, màu Obsidian (#242429). Đoạn hỗ trợ tùy chọn bên dưới bằng Gill Sans 16px, line-height 1.25, màu Graphite (#3e3e3e), max-width 480px. Khoảng cách 60px bên dưới heading trước khi nội dung bắt đầu."

    - "Tạo footer band: full-width Parchment (#f9f5f2) background. Top border: 1px solid Obsidian (#242429). Nội dung bằng Fira Mono 12px, weight 400, uppercase, letter-spacing 0.071em, màu Obsidian. Không buttons, không forms, không decorative elements."

  typographic_discipline:

    info: "Typography của Kobu tuân theo hệ thống hai-family nghiêm ngặt. Gill Sans đảm nhiệm mọi editorial voice — sự ấm áp nhân văn của nó, thể hiện qua chữ 'o' cong và serifs có dấu ngoặc của các chữ hoa, tạo giọng văn tạp chí du lịch văn chương. Fira Mono xử lý mọi functional labeling — dạng monospace hình học của nó, đặt uppercase với tracking mạnh (0.167em–0.183em), đọc như thẻ bảo tàng in ấn thay vì UI chrome. Thiết lập display 64px (line-height 1.00) được dành riêng cho wordmark KOBU. Không element nào khác nên tiếp cận tỷ lệ này. Sự chuyển tiếp từ display sang body đi qua 33px → 24px → 21px → 16px, một editorial gradient mượt mà không có bước nhảy đột ngột. Body text không bao giờ xuống dưới 14px, và micro-labels (badges) giới hạn ở 10px."

  surface___border_language:

    hệ_thống_surface_là_nhị_phân: "Parchment (#f9f5f2) cho page canvas, Gallery White (#ffffff) cho content surfaces. Không có tier thứ ba — không modal overlay color, không hover state shade. Borders độc quyền là 1px solid Obsidian (#242429), dùng làm hairlines để xác định cấu trúc (navigation bottom, card frames, badge outlines). Không element nào dùng border-radius lớn hơn 5px (chỉ badges). Không element nào có shadow. Kết quả là cách xử lý surface phẳng, giống in ấn, nơi chiều sâu được gợi ý qua typographic scale và whitespace thay vì hiệu ứng thị giác."

  similar_brands:

    - "**Mr & Mrs Smith** — Cùng ngôn ngữ editorial hotel-collection — warm cream canvas, humanist sans gần serif cho headings, ảnh property full-bleed, và palette đơn sắc không có colored CTAs"
    - "**Cereal Magazine** — Chung thẩm mỹ in ấn quiet-luxury — warm off-white paper background, typography kiềm chế, editorial photography lớn làm yếu tố thị giác chính, và tracked monospace labels"
    - "**The Audo** — Cùng cách tiếp cận architectural-gallery — single warm neutral canvas, humanist typeface gần Gill Sans, nhiếp ảnh được trình bày như curated artifacts thay vì product thumbnails"
    - "**Ace Hotel** — Song song minimalism travel-brand — text-only navigation, nhấn mạnh wordmark lớn, monochrome interface để nhiếp ảnh táo bạo mang giọng thương hiệu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #242429;
          --color-parchment: #f9f5f2;
          --color-gallery-white: #ffffff;
          --color-ink-black: #000000;
          --color-graphite: #3e3e3e;
          --color-ash-gray: #919191;
          --color-charcoal-deep: #070707;
        
          /* Typography — Font Families */
          --font-gill-sans: 'Gill Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fira-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gill-sans-mt-pro: 'Gill Sans MT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label: 10px;
          --leading-label: 1.5;
          --tracking-label: 0.183px;
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: 0.167px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.43;
          --text-subheading: 21px;
          --leading-subheading: 1.25;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading-lg: 33px;
          --leading-heading-lg: 1.2;
          --text-display: 64px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-28: 28px;
          --spacing-34: 34px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-110: 110px;
          --spacing-119: 119px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 60-80px;
          --card-padding: 0px;
          --element-gap: 10-15px;
        
          /* Border Radius */
          --radius-md: 5px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 5px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #f9f5f2;
          --surface-gallery-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #242429;
          --color-parchment: #f9f5f2;
          --color-gallery-white: #ffffff;
          --color-ink-black: #000000;
          --color-graphite: #3e3e3e;
          --color-ash-gray: #919191;
          --color-charcoal-deep: #070707;
        
          /* Typography */
          --font-gill-sans: 'Gill Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-fira-mono: 'Fira Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gill-sans-mt-pro: 'Gill Sans MT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-label: 10px;
          --leading-label: 1.5;
          --tracking-label: 0.183px;
          --text-caption: 12px;
          --leading-caption: 1.43;
          --tracking-caption: 0.167px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.43;
          --text-subheading: 21px;
          --leading-subheading: 1.25;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --text-heading-lg: 33px;
          --leading-heading-lg: 1.2;
          --text-display: 64px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-28: 28px;
          --spacing-34: 34px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-110: 110px;
          --spacing-119: 119px;
        
          /* Border Radius */
          --radius-md: 5px;
        }