analogue___style_reference:
  info: "> Đường hầm ánh sáng xuyên qua khoảng không"

  theme: "dark"

  info: "Analogue hoạt động như một khoảng không điện ảnh với một điểm sáng tập trung duy nhất: chữ trắng trên nền đen gần như tuyệt đối, chỉ bị ngắt quãng bởi một tia sáng xanh-trắng từ ảnh chụp. Hệ thống hoàn toàn achromatic — không có điểm nhấn màu sắc, không bóng đổ, không gradient trang trí — vì vậy mọi cảm xúc phải đến từ typography, nhiếp ảnh và khoảng trống âm bản. Type nằm ở khoảng body 11–18px nén chặt với tracking siêu khít (-0.05em ở display) và line-height điện ảnh siêu chặt (1.00–1.05 ở display 40–60px), khiến headline có cảm giác như tiêu đề phim hơn là heading web. Font LCD dot xuất hiện như một điểm nhấn kỹ thuật số hiếm hoi — dấu câu kỹ thuật số trong một hệ thống nhân văn. Navigation là một pill nổi mờ, buttons là outline hoặc ghost achromatic, và kiến trúc trang (border, surface, divider) phẳng đến mức biến mất, buộc nhiếp ảnh và type phải đảm nhận mọi công việc."

  tokens___colors:

    info: "| Name | Value | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Ink | `#000000` | `--color-ink` | Đen nguyên chất — neo cấu trúc, dùng cho hairline, border stroke và lớp surface sâu nhất bên dưới hình ảnh |"
    info: "| Graphite | `#1c1c1c` | `--color-graphite` | Văn bản chính và foreground UI chủ đạo — body copy, heading, và tông gần đen làm mềm màu đen nguyên chất cho các đoạn type dài |"
    info: "| Paper | `#ffffff` | `--color-paper` | Canvas trang chính và bề mặt card trắng |"
    info: "| Mist | `#ededed` | `--color-mist` | Lớp phủ surface nhẹ cho card và panel nâng cao — bước nhẹ nhàng nhất từ Paper, dùng khi panel cần được nhận biết mà không gây chú ý |"
    info: "| Ash | `#b8b8b8` | `--color-ash` | Surface cấp ba và nền fill muted — chỉ hiện rõ làm nền yên tĩnh cho trạng thái không hoạt động hoặc khối ít ưu tiên |"
    info: "| Steel | `#7a7a7a` | `--color-steel` | Văn bản thứ cấp và UI border nhẹ — metadata, timestamp, copy hỗ trợ, màu xám trung gian nối Graphite và Ash |"
    info: "| Pewter | `#a6a6a6` | `--color-pewter` | Văn bản cấp ba và divider yên tĩnh nhất — label, tag text, bất cứ nơi nào type cần lùi vào surface |"

  tokens___typography:

    graphik_medium___typeface_chính_cho_mọi_body__heading_và_link__graphik_tùy_chỉnh_mang_hơi_ấm_nhân_văn_giúp_bảng_màu_đơn_sắc_không_bị_lạnh_lẽo___kết_hợp_với_negative_tracking_mạnh__0_05em_ở_60px_nó_nén_headline_thành_một_dòng_duy_nhất_giống_credit_phim__chỉ_dùng_weight_400_và_500__không_có_bước_nhảy_bold__chỉ_có_chuyển_tông_giữa_regular_và_medium_____font_graphik_medium:
      - "**Thay thế:** Inter (gần nhất miễn phí), General Sans, hoặc Manrope"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 11px, 13px, 17px, 18px, 40px, 60px"
      - "**Line height:** 1.00–1.30 (chặt kiểu điện ảnh ở display, thoáng hơn ở caption)"
      - "**Letter spacing:** -0.0500em, -0.0400em, -0.0350em, -0.0310em, -0.0270em"
      - "**Vai trò:** Typeface chính cho mọi body, heading và link. Graphik tùy chỉnh mang hơi ấm nhân văn giúp bảng màu đơn sắc không bị lạnh lẽo — kết hợp với negative tracking mạnh (-0.05em ở 60px) nó nén headline thành một dòng duy nhất giống credit phim. Chỉ dùng weight 400 và 500; không có bước nhảy bold, chỉ có chuyển tông giữa regular và medium."

    lcddot_tr___điểm_nhấn_kỹ_thuật_số_hiếm_hoi___một_display_face_pixel_dot_matrix_dùng_cho_tối_đa_một_hoặc_hai_element_mỗi_trang_bộ_đếm__timestamp__label_glitch__positive_tracking__0_025em_đến__0_04em_và_cấu_trúc_grid_cứng_nhắc_tạo_ra_một_khoảnh_khắc_duy_nhất_của_giọng_nói_máy_móc_trong_một_hệ_thống_nhân_văn__giống_như_màn_hình_kỹ_thuật_số_hiện_ra_trong_căn_phòng_tối_____font_lcddot_tr:
      - "**Thay thế:** VT323, DSEG7 Classic, hoặc Major Mono Display"
      - "**Weights:** 400"
      - "**Kích thước:** 20px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.0250em – 0.0400em (positive; hiếm gặp trong hệ thống bị chi phối bởi negative tracking)"
      - "**Vai trò:** Điểm nhấn kỹ thuật số hiếm hoi — một display face pixel/dot-matrix dùng cho tối đa một hoặc hai element mỗi trang (bộ đếm, timestamp, label glitch). Positive tracking (+0.025em đến +0.04em) và cấu trúc grid cứng nhắc tạo ra một khoảnh khắc duy nhất của giọng nói máy móc trong một hệ thống nhân văn, giống như màn hình kỹ thuật số hiện ra trong căn phòng tối."

    system_sans_serif___micro_text_dự_phòng___copy_tiện_ích__label_render_bởi_trình_duyệt__hoặc_dự_phòng_khi_custom_font_không_tải_được____font_system_sans_serif:
      - "**Thay thế:** system-ui"
      - "**Weights:** 400"
      - "**Kích thước:** 12px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Micro-text dự phòng — copy tiện ích, label render bởi trình duyệt, hoặc dự phòng khi custom font không tải được"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|---------|------------|-------------|----------------|-------|"
      info: "| micro | 11px | 1.3 | -0.297px | `--text-micro` |"
      info: "| caption | 13px | 1.25 | -0.351px | `--text-caption` |"
      info: "| subheading | 18px | 1.1 | -0.558px | `--text-subheading` |"
      info: "| heading | 40px | 1.05 | -1.6px | `--text-heading` |"
      info: "| display | 60px | 1 | -3px | `--text-display` |"

  tokens___spacing___shapes:

    mật_độ: "compact"

    spacing_scale:

      info: "| Name | Giá trị | Token |"
      info: "|------|---------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 70 | 70px | `--spacing-70` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|---------|"
      info: "| cards | 10px |"
      info: "| links | 13px |"
      info: "| images | 10px |"
      info: "| buttons | 100px |"
      info: "| navPill | 1000px |"

    layout:

      - "**Section gap:** 60-70px"
      - "**Card padding:** 20-30px"
      - "**Element gap:** 10px"

  components:

    floating_navigation_pill:
      vai_trò: "Navigation chính của site — một element nổi duy nhất ở trên cùng giữa mỗi trang"

      info: "1000px border-radius, căn giữa theo chiều ngang, fixed position. Nền mờ (rgba(255,255,255,0.15) với backdrop-blur) để đọc được trên cả hero imagery tối và sáng. Ba phân đoạn: nav link trái (WORK), wordmark ở giữa (analogue, Graphik Medium 500, weight lớn hơn), nav link phải (ABOUT). Tất cả text ở Graphik 13px, màu trắng. Internal padding ~5px 20px. Độ trong suốt của pill là bản sắc của nó — nó phải có cảm giác như thủy tinh lơ lửng trên trang, không phải một thanh đặc."

    hero_headline_overlay:
      vai_trò: "Tuyên bố mở đầu đặt trực tiếp trên hero ảnh full-bleed"

      info: "Display 60px Graphik Medium weight 500, color #ffffff, letter-spacing -3.0px, line-height 1.00 — text phải vừa trên một dòng hình ảnh duy nhất ở desktop widths. Căn giữa theo chiều ngang, neo dọc vào giữa viewport. Không drop shadow, không background plate; hero image tự cung cấp độ tương phản. Headline nên đọc như một suy nghĩ duy nhất, không phải một đoạn văn xuống dòng."

    text_fragment_node:
      vai_trò: "Các element text có thể định vị lại riêng lẻ dùng trong chuỗi hoạt ảnh/kích hoạt bằng scroll"

      info: "13–18px Graphik Medium, Graphite trên surface sáng / trắng trên nền tối. Không container, không background, không border — mỗi fragment là type trần được đặt tuyệt đối hoặc qua flex/grid. Opacity dao động từ 0.15 đến 1.0 để tạo chiều sâu trong các hiệu ứng reveal có hoạt ảnh. Nhiều fragment tạo thành một câu hoàn chỉnh khi đọc theo thứ tự."

    ghost_navigation_link:
      vai_trò: "Link chỉ-text bên trong nav pill (WORK, ABOUT)"

      info: "Graphik Medium 13px, weight 400, color #ffffff ở opacity 0.6 (resting) → 1.0 (hover). Không underline, không background, không border. Letter-spacing -0.351px khớp với caption scale. Hover transition chỉ opacity, 200ms ease."

    outlined_link_button:
      vai_trò: "Hành động thứ cấp — hình dạng button duy nhất của hệ thống"

      info: "Graphik Medium 13px, weight 500, Graphite text trên nền trong suốt, 1px border màu Graphite, 100px border-radius (hình pill), padding 10px 20px. Hover đảo ngược: nền Graphite, text Paper. Không shadow ở bất kỳ trạng thái nào."

    project_card:
      vai_trò: "Tile công việc dẫn đầu bằng hình ảnh trong grid case-study"

      info: "10px border-radius trên ảnh (bản thân container không có border hoặc background). Caption bên dưới ở 13px Graphik Medium 400, màu Steel, không có title styling phía trên ảnh — ảnh mang bản sắc của tác phẩm. Gap giữa ảnh và caption: 10px. Bề mặt card trong suốt trên canvas Paper."

    lcd_digital_readout:
      vai_trò: "Điểm nhấn pixel-font hiếm hoi cho timestamp, bộ đếm hoặc glitch text"

      info: "LCDDot TR 20px, line-height 1.00, letter-spacing +0.5px đến +0.8px (positive — ngược lại với phần còn lại của hệ thống). Màu: trắng trên section tối, Graphite trên section sáng. Padding 5px 10px trong container 10px-radius không có border, dùng như một điểm nhấn biên tập duy nhất, không bao giờ là button hoặc control chức năng."

    hairline_divider:
      vai_trò: "Element kiến trúc vô hình — phân cách section mà không tự tuyên bố"

      info: "1px height, full container width, màu Ink (#000000) ở opacity 0.08, hoặc Steel (#7a7a7a) ở opacity 0.3 trên surface sáng. Không margin trên/dưới — nằm gọn trong nhịp điệu dọc của section. Dùng tiết kiệm; hầu hết section nên phân cách hoàn toàn qua whitespace."

    image_thumbnail:
      vai_trò: "Hình ảnh inline trong case study và trang chi tiết"

      info: "10px border-radius, full-bleed trong container (không padding bên trong radius). Xử lý màu theo nguồn — không filter, không duotone, không overlay. Hình ảnh là nguồn màu sắc và độ tương phản duy nhất trong hệ thống và nên được giữ nguyên không chỉnh sửa."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng màu từ thang achromatic bảy bước — Paper đến Ink — không có điểm nhấn màu sắc ở bất kỳ điểm nào"
      - "Đặt display headline ở 60px với letter-spacing -3.0px và line-height 1.00 để chúng đọc như một dòng type chặt duy nhất"
      - "Neo nav dưới dạng pill nổi 1000px-radius với nền kính mờ; không bao giờ dùng solid-bar hoặc sidebar nav"
      - "Dùng 10px làm element gap mặc định; chỉ dành 40–70px cho khoảng thở giữa các section"
      - "Áp dụng 10px radius cho ảnh và card, 13px cho inline link, 100px cho button, 1000px cho nav — radius là tín hiệu vai trò, không phải lựa chọn phong cách"
      - "Triển khai font LCD dot tối đa một lần mỗi trang ở 20px accent; coi nó như một khoảnh khắc gián đoạn kỹ thuật số trong hệ thống nhân văn"
      - "Để nhiếp ảnh mang toàn bộ màu sắc và độ tương phản; không bao giờ áp dụng duotone, thay đổi saturation hoặc color overlay lên hình ảnh"

    không_nên_làm:
      - "Không đưa vào bất kỳ màu sắc nào — không xanh, đỏ, xanh lá, tím — hệ thống được xác định bởi kỷ luật achromatic tuyệt đối"
      - "Không thêm shadow vào card, button hoặc surface nội dung; chiều sâu đến từ sự thay đổi tông surface, không phải elevation"
      - "Không dùng weight bold hoặc semibold — hệ thống chỉ ở 400 và 500, với sự thay đổi weight thay thế màu sắc làm công cụ phân cấp"
      - "Không xuống dòng display headline thành nhiều dòng ở desktop widths; cài đặt 60px / -3.0px / 1.00 được thiết kế cho tuyên bố điện ảnh một dòng"
      - "Không dùng radius 0px, 4px hoặc 8px — mọi container trong hệ thống nằm ở 10px, 13px, 100px hoặc 1000px"
      - "Không thêm underline vào link; dùng opacity (0.6 → 1.0) hoặc chuyển đổi border 1px"
      - "Không dùng font LCD dot cho body copy, label hoặc UI chức năng — chỉ dành riêng cho các khoảnh khắc biên tập/kỹ thuật số"

  surfaces:

    info: "| Cấp độ | Name | Giá trị | Mục đích |"
    info: "|--------|------|---------|----------|"
    info: "| 0 | Void | `#000000` | Trường hero photography, lớp base sâu nhất |"
    info: "| 1 | Graphite | `#1c1c1c` | Gần đen cho section tối, background text đảo ngược |"
    info: "| 2 | Paper | `#ffffff` | Canvas trang chính |"
    info: "| 3 | Mist | `#ededed` | Bề mặt card, panel nâng cao, lớp phủ section nhẹ |"

  elevation:

    - "**Floating Navigation Pill:** `0 1px 0 rgba(0,0,0,0.05), 0 8px 32px rgba(0,0,0,0.08) — chiều sâu kính mờ gần như không thấy, đủ để nâng pill lên khỏi hero mà không phá vỡ thẩm mỹ phẳng`"

  imagery:

    info: "Ngôn ngữ hình ảnh của Analogue bị chi phối bởi một motif nhiếp ảnh lặp lại duy nhất: một tia sáng tương phản cao tỏa ra từ điểm trung tâm trên nền gần đen — tương đương về mặt thị giác với việc nhìn chằm chằm vào đường hầm ánh sáng, một siêu tân tinh, hoặc đèn flash máy ảnh lấp đầy khoảng không. Hình ảnh được xử lý full-bleed không overlay, không border, không bo góc trên hero (sắc nét, điện ảnh, lấp đầy thế giới). Đây không phải minh họa hay product photography; nó là bầu không khí, cảm xúc thị giác thuần túy, và là màu sắc duy nhất trong một hệ thống achromatic (một dải xanh-trắng lạnh trên nền đen). Hình ảnh hỗ trợ, nếu có trong case study, được giữ nguyên không filter — không duotone, không thay đổi saturation. Hệ thống không chứa bộ icon ở bất kỳ kích thước nào, không minh họa, không 3D render. Nhiếp ảnh là công cụ thị giác duy nhất, và nó được triển khai một lần, ở tỷ lệ lớn, như một hero — không bao giờ là trang trí."

  layout:

    info: "Mỗi trang mở đầu bằng một hero tối full-viewport (100vw × 100vh) chứa hình ảnh tia sáng đơn và một white display headline căn giữa. Floating nav pill nằm absolute ở trên cùng giữa, ngoài luồng document. Bên dưới hero, các section nội dung nằm trên canvas Paper (#ffffff) ở full width với max-width căn giữa bên trong (không có grid cứng nhắc — các khối nội dung được đặt lỏng lẻo, thường trải dài 6–10 cột của cảm giác 12 cột). Section gaps rộng rãi (60–70px) nhưng body type vẫn nén ở 11–18px, vì vậy mật độ thay đổi giữa các khối biên tập giàu văn bản và các break ảnh rộng. Không có card grid nhất quán — case study xuất hiện dưới dạng trang biên tập xếp chồng dọc với ảnh full-width, không phải tile đồng nhất. Navigation là một global pill duy nhất; không sidebar, không secondary nav, không footer menu hiển thị. Nhịp điệu trang tổng thể là: mở đầu điện ảnh tối → một hoặc nhiều section biên tập sáng → kết thúc tối hoặc dẫn đầu bằng hình ảnh."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #1c1c1c (Graphite) trên nền sáng / #ffffff (Paper) trên nền tối"
    - "background: #ffffff (Paper) — canvas chính"
    - "border: #000000 (Ink) ở opacity thấp, hoặc #1c1c1c (Graphite) để nhấn mạnh"
    - "accent: không có — hệ thống hoàn toàn achromatic"
    - "secondary text: #7a7a7a (Steel)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:

    - "**Xây dựng floating nav pill**: 1000px border-radius, căn giữa theo chiều ngang ở đầu viewport, fixed position. Nền mờ rgba(255,255,255,0.15) với backdrop-blur(20px). Ba item inline: link trái \"WORK\" ở Graphik 13px weight 400 trắng opacity 0.6; wordmark giữa \"analogue\" ở Graphik 13px weight 500 trắng opacity 1.0; link phải \"ABOUT\" giống bên trái. Padding 5px 20px. Shadow nhẹ 0 8px 32px rgba(0,0,0,0.08)."

    - "**Xây dựng hero headline trên ảnh tối**: Nền ảnh full-bleed 100vw × 100vh (tia sáng trung tâm trên nền gần đen). Text display trắng căn giữa: 60px Graphik Medium weight 500, color #ffffff, letter-spacing -3.0px, line-height 1.00, text-align center. Một dòng duy nhất. Không background plate, không overlay, không shadow trên text."

    - "**Xây dựng outlined ghost button**: Graphik Medium 13px weight 500, color #1c1c1c, nền trong suốt, 1px solid #1c1c1c border, 100px border-radius, padding 10px 20px. Hover: đổi sang nền #1c1c1c với text #ffffff. Không shadow ở bất kỳ trạng thái nào."

    - "**Xây dựng project image card**: Container trong suốt trên canvas #ffffff. Ảnh lấp đầy container với 10px border-radius. 10px gap bên dưới ảnh. Caption: Graphik Medium 13px weight 400, color #7a7a7a, letter-spacing -0.351px. Không title phía trên ảnh. Không card border hoặc background."

    - "**Xây dựng LCD digital readout accent**: 20px LCDDot TR (hoặc VT323 thay thế), color #ffffff trên surface tối, container 10px border-radius không border, padding 5px 10px. Dùng tiết kiệm — tối đa một lần mỗi trang, chỉ như dấu câu biên tập."

  similar_brands:

    - "**Active Theory** — Cùng hero tối immersive full-bleed với một điểm sáng tập trung duy nhất và giao diện đơn sắc tối giản"
    - "**Locomotive** — Cùng type họ Graphik nén, surface gần như phẳng, và thẩm mỹ agency điện ảnh trên nền đen"
    - "**Resn** — Cùng ngôn ngữ agency đơn sắc thử nghiệm với một khoảnh khắc thị giác ấn tượng duy nhất mang cả trang"
    - "**Ueno** — Cùng body type chặt 13–17px với negative tracking mạnh và bảng màu hoàn toàn achromatic"
    - "**Aristide Benoist** — Cùng display headline cỡ lớn căn giữa trên trường ảnh tối với nav nổi tối giản"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #000000;
          --color-graphite: #1c1c1c;
          --color-paper: #ffffff;
          --color-mist: #ededed;
          --color-ash: #b8b8b8;
          --color-steel: #7a7a7a;
          --color-pewter: #a6a6a6;
        
          /* Typography — Font Families */
          --font-graphik-medium: 'Graphik Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lcddot-tr: 'LCDDot TR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'system sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 11px;
          --leading-micro: 1.3;
          --tracking-micro: -0.297px;
          --text-caption: 13px;
          --leading-caption: 1.25;
          --tracking-caption: -0.351px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.558px;
          --text-heading: 40px;
          --leading-heading: 1.05;
          --tracking-heading: -1.6px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-20: 20px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-100: 100px;
        
          /* Layout */
          --section-gap: 60-70px;
          --card-padding: 20-30px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 20px;
          --radius-full: 100px;
          --radius-full-2: 1000px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-links: 13px;
          --radius-images: 10px;
          --radius-buttons: 100px;
          --radius-navpill: 1000px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-graphite: #1c1c1c;
          --surface-paper: #ffffff;
          --surface-mist: #ededed;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #000000;
          --color-graphite: #1c1c1c;
          --color-paper: #ffffff;
          --color-mist: #ededed;
          --color-ash: #b8b8b8;
          --color-steel: #7a7a7a;
          --color-pewter: #a6a6a6;
        
          /* Typography */
          --font-graphik-medium: 'Graphik Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lcddot-tr: 'LCDDot TR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'system sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 11px;
          --leading-micro: 1.3;
          --tracking-micro: -0.297px;
          --text-caption: 13px;
          --leading-caption: 1.25;
          --tracking-caption: -0.351px;
          --text-subheading: 18px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.558px;
          --text-heading: 40px;
          --leading-heading: 1.05;
          --tracking-heading: -1.6px;
          --text-display: 60px;
          --leading-display: 1;
          --tracking-display: -3px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-13: 13px;
          --spacing-20: 20px;
          --spacing-29: 29px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
          --spacing-70: 70px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-xl: 13px;
          --radius-2xl: 20px;
          --radius-full: 100px;
          --radius-full-2: 1000px;
        }