ragged_edge___style_reference:
  info: "> Editorial brutalism trên nền đá cẩm thạch trắng. Hãy tưởng tượng sự tự tin về typography của Vogue kết hợp với sự kiềm chế màu sắc của một gallery Berlin — toàn mực và khoảng không, với một mảng màu duy nhất dùng như dấu chấm than, không phải trang trí."

  theme: "light"

  info: "Ragged Edge là một website tư vấn thương hiệu đầy tự tin, vận hành dựa trên kỷ luật gần như đơn sắc hoàn toàn: mực gần-đen trên nền trắng, với một chút violet bão hòa được dùng rất tiết kiệm làm accent viền, và một hero gradient full-bleed duy nhất — sự kiện màu sắc duy nhất trên homepage. Typography là toàn bộ cá tính — một display face chữ hoa dãn cực rộng (ABCDiatypeExpanded) đảm nhiệm vai trò \"hét to\", trong khi một serif tinh tế (Grit) đảm nhiệm vai trò \"nói chuyện\", tạo ra sự căng thẳng giữa typography tạp chí editorial và letterforms display brutalism. Layout mang tính maximalist về tỷ lệ (hero full-bleed, khoảng cách section 180px) nhưng minimal về bảng màu, và mọi bề mặt tương tác đều có dạng pill với bán kính trong khoảng 40–64px, tạo cho mọi button và nav item một dạng capsule mềm mại tương phản với kiểu chữ expanded góc cạnh."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian Ink | `#181f1f` | `--color-obsidian-ink` | Primary text, đường viền mảnh (hairline), action buttons dạng fill — màu gần-đen chủ đạo chiếm 90% giao diện |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Canvas nền, inverted text trên khối tối, viền nav/button |"
    info: "| Fog | `#d1d2d2` | `--color-fog` | Đường phân cách nhẹ và viền phụ nơi Obsidian quá nặng |"
    info: "| Ash | `#a3a5a5` | `--color-ash` | Helper text mờ, viền button không hoạt động, metadata phụ |"
    info: "| Graphite | `#374151` | `--color-graphite` | Secondary body text và icon strokes nhẹ nơi cần đen nhạt hơn |"
    info: "| True Black | `#000000` | `--color-true-black` | Đường phân cách navigation và surface backing cho một số khối |"
    info: "| Mint Wash | `#eaf7f3` | `--color-mint-wash` | Bề mặt pha màu nhẹ cho nền nav và các section thở — màu xanh lá thoáng qua để làm ấm canvas trắng |"
    info: "| Deep Teal | `#1f3233` | `--color-deep-teal` | Khối surface tối dùng làm khung case study và panel phủ ảnh |"
    info: "| Iris Voltage | `#516fea` | `--color-iris-voltage` | Chỉ dùng làm viền action outlined — accent màu sắc duy nhất; xuất hiện dưới dạng vòng violet quanh secondary call-to-action buttons trên nền đơn sắc |"
    info: "| Solar Bloom | `linear-gradient(0deg, rgba(255, 194, 64, 0), rgb(255, 194, 64) 25%, rgb(255, 196, 244) 50%, rgb(150, 235, 235) 75%, rgba(150, 235, 235, 0) 100%)` | `--color-solar-bloom` | Điểm dừng gradient hero — vàng ấm neo ở đầu gradient wash full-bleed |"

  tokens___typography:

    abcdiatypeexpanded_bold___display__brand_logo__section_headings__project_titles__và_nav_labels__các_letterforms_expanded_cực_rộng_letter_spacing__0_02em_ở_78_82px_là_yếu_tố_đặc_trưng___chữ_hoa__không_bao_giờ_đặt_nhỏ_dưới_10px__và_chỉ_dành_cho_những_khoảnh_khắc_đòi_hỏi_trọng_lượng_thị_giác__kích_thước_78_82px_lấp_đầy_toàn_bộ_chiều_rộng_canvas_hero__weight_giữ_ở_400_vì_độ_dãn_expansion_đã_cung_cấp_đủ_trọng_lượng__nếu_đậm_hơn_sẽ_làm_méo_tỷ_lệ_hình_học_____font_abcdiatypeexpanded_bold:
      - "**Thay thế:** Druk Wide, Antonio Expanded, Bebas Neue (chỉ dùng fallback — không có substitute nào khớp chính xác độ dãn)"
      - "**Weights:** 400"
      - "**Kích thước:** 10px, 12px, 16px, 20px, 40px, 78px, 82px"
      - "**Line height:** 1.10–1.20 cho display, 2.00 cho dùng dọc/xoay"
      - "**Letter spacing:** -0.02em ở kích thước display (78–82px), -0.01em ở kích thước trung bình (20–40px), normal ở 10–16px"
      - "**OpenType features:** `\"kern\"`"
      - "**Vai trò:** Display, brand logo, section headings, project titles, và nav labels. Các letterforms expanded cực rộng (letter-spacing -0.02em ở 78–82px) là yếu tố đặc trưng — chữ hoa, không bao giờ đặt nhỏ dưới 10px, và chỉ dành cho những khoảnh khắc đòi hỏi trọng lượng thị giác. Kích thước 78–82px lấp đầy toàn bộ chiều rộng canvas hero. Weight giữ ở 400 vì độ dãn (expansion) đã cung cấp đủ trọng lượng; nếu đậm hơn sẽ làm méo tỷ lệ hình học."

    grit_regular___tất_cả_body_copy__paragraph_text__mô_tả__và_mid_weight_headings__một_serif_đương_đại_với_kết_cấu_tinh_tế___mang_lại_trọng_lượng_editorial_đối_trọng_với_display_sans_expanded__weight_400_cho_running_text__500_cho_cụm_từ_nhấn_mạnh_và_sub_headings__kích_thước_56px_với_line_height_1_25_tạo_ra_các_editorial_pull_quotes_ấn_tượng__kết_hợp_với_abcdiatypeexpanded_bằng_cách_tương_phản_sự_ấm_áp_của_serif_với_sự_lạnh_lùng_hình_học_____font_grit_regular:
      - "**Thay thế:** Söhne (serif alternative), GT Sectra, Tiempos Text, Lora"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 14px, 16px, 20px, 30px, 56px"
      - "**Line height:** 1.43 cho body, 1.20–1.25 cho headings, 2.60 cho lead paragraphs rộng rãi"
      - "**Letter spacing:** normal"
      - "**OpenType features:** `\"kern\"`"
      - "**Vai trò:** Tất cả body copy, paragraph text, mô tả, và mid-weight headings. Một serif đương đại với kết cấu tinh tế — mang lại trọng lượng editorial đối trọng với display sans expanded. Weight 400 cho running text, 500 cho cụm từ nhấn mạnh và sub-headings. Kích thước 56px với line-height 1.25 tạo ra các editorial pull-quotes ấn tượng. Kết hợp với ABCDiatypeExpanded bằng cách tương phản sự ấm áp của serif với sự lạnh lùng hình học."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.25 | — | `--text-subheading` |"
      info: "| heading | 30px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.15 | -0.4px | `--text-heading-lg` |"
      info: "| display | 56px | 1.25 | -0.56px | `--text-display` |"
      info: "| hero | 80px | 1.1 | -1.6px | `--text-hero` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 180 | 180px | `--spacing-180` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 64px |"
      info: "| cards | 40px |"
      info: "| inputs | 54px |"
      info: "| buttons | 64px |"
      info: "| body-blocks | 40px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 180px"
      - "**Card padding:** 32px"
      - "**Element gap:** 16px"

  components:

    hero_gradient_banner:
      vai_trò: "Mở đầu toàn viewport"

      info: "Gradient full-bleed (vàng → hồng → cyan, 0deg, với đầu trong suốt) lấp đầy toàn bộ viewport. Wordmark 'RAGGED EDGE' đặt giữa bằng ABCDiatypeExpanded-Bold màu trắng ở 80px với -0.02em tracking, kéo dài gần như edge-to-edge. Không shadow, không overlay — gradient chính là bề mặt."

    pill_navigation_button:
      vai_trò: "Navigation chính và utility navigation"

      info: "Radius 64px bo tròn, padding dọc 12px / ngang 32px, nền Mint Wash (#eaf7f3) với viền Obsidian Ink (#181f1f) 1px. Label bằng ABCDiatypeExpanded-Bold ở 10–12px, chữ hoa. Nhóm nav pills bên trái, utility pills ('Join', 'Contact') bên phải. Các pill phụ bên phải không có fill — nằm trong suốt trên gradient."

    outlined_accent_button:
      vai_trò: "Secondary call-to-action với điểm nhấn màu sắc"

      info: "Pill radius 54px, padding ngang 34px, viền 1.5px Iris Voltage (#516fea), fill trắng, label text Obsidian Ink. Viền màu duy nhất trong toàn bộ hệ thống — dành riêng cho các action cần tách biệt khỏi trường nav/button đơn sắc."

    editorial_headline:
      vai_trò: "Câu mở đầu section"

      info: "Grit-Regular weight 500 ở 56px, Obsidian Ink, line-height 1.25, -0.01em tracking. Thường được theo sau bởi một serif body paragraph ở 20–30px / 1.43 line-height với top margin 180px rộng rãi ngăn cách với section trước đó."

    case_study_split_block:
      vai_trò: "Trình diễn dự án với layout text-trái, ảnh-phải"

      info: "Grid hai cột tỷ lệ ~5/7. Cột trái: tên dự án bằng ABCDiatypeExpanded-Bold ở 20–40px, sau đó mô tả ngắn Grit-Regular serif (20px / 1.43), sau đó tagline sans-serif đậm và chi tiết địa điểm bằng Grit weight 500 ở 14px. Cột phải: ảnh full-bleed hoặc panel màu khối (ví dụ: khối maroon Free Soul) với tên dự án xoay 90° bằng ABCDiatypeExpanded màu trắng."

    vertical_project_mark:
      vai_trò: "Nhận diện phủ trên ảnh"

      info: "ABCDiatypeExpanded-Bold màu trắng ở 16–20px, xoay -90°, đặt giữa trong một khối ảnh màu đồng nhất. Hoạt động như label dạng watermark trên hình ảnh case study."

    image_block_panel:
      vai_trò: "Hình ảnh case study full-bleed"

      info: "Bề mặt media hình chữ nhật lớn, không border-radius ở các cạnh ngoài (chảy sát container), chứa ảnh chụp hoặc màu brand đồng nhất (maroon, deep teal, v.v.). Padding bên trong bằng 0 — type đè trực tiếp lên ảnh."

    section_divider:
      vai_trò: "Ngắt ngang mảnh giữa các dải nội dung"

      info: "Hairline 1px màu Fog (#d1d2d2) hoặc Obsidian Ink (#181f1f) ở độ mờ rất thấp, trải dài toàn bộ chiều rộng nội dung. Tối giản — khoảng cách dọc 180px rộng rãi đã làm hầu hết công việc phân cách."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng ABCDiatypeExpanded-Bold ở 10px trở lên; dưới mức đó các dạng expanded trở nên khó đọc."
      - "Ghép Grit-Regular body text với ABCDiatypeExpanded-Bold headings — không bao giờ dùng hai serif hoặc hai expanded sans trong cùng một khối."
      - "Dành khoảng cách section 180px cho các phân chia nội dung chính; dùng 80px cho ngắt trong section."
      - "Áp radius 64px cho tất cả bề mặt nav và button; 40–54px cho khối nội dung body."
      - "Chỉ dùng Iris Voltage (#516fea) làm viền 1.5px trên outlined buttons — không bao giờ dùng làm fill, không bao giờ dùng trên text."
      - "Để hero gradient là bề mặt màu sắc duy nhất trên bất kỳ trang nào; tất cả section tiếp theo giữ trên nền trắng hoặc mint."
      - "Đặt hero display text ở 78–82px với -0.02em tracking để đạt hiệu ứng brand mark edge-to-edge."

    don_t:
      - "Không thêm accent colors phụ — hệ thống 98% đơn sắc; một màu sắc thứ hai phá vỡ kỷ luật."
      - "Không áp box-shadows ở bất kỳ đâu — chiều sâu đến từ sự chuyển tông bề mặt, không phải độ cao."
      - "Không dùng ABCDiatypeExpanded cho body copy dài hơn 4–5 từ; đây là display face, không phải running-text face."
      - "Không căn giữa khối body text; layout editorial đọc căn trái với left margin rộng rãi."
      - "Không dùng border-radius dưới 40px trên bất kỳ container nào — góc sắc xung đột với hệ thống pill-button."
      - "Không đặt Iris Voltage trên nền tối; nó mất vai trò accent trên bề mặt tương phản cao."
      - "Không đặt hero gradient ở hướng trên 0deg hoặc thay đổi số điểm dừng; luồng hướng là một phần của đặc trưng."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper White | `#ffffff` | Canvas trang chính và hầu hết các section nội dung |"
    info: "| 2 | Mint Wash | `#eaf7f3` | Nền section pha màu, đế nav pill — thêm ấm áp tinh tế |"
    info: "| 3 | Deep Teal | `#1f3233` | Khung ảnh/panel tối cho các khối case study |"
    info: "| 4 | Obsidian Ink | `#181f1f` | Bề mặt tối cao nhất — hero overlay, footer |"

  elevation:

    info: "Không có shadows. Chiều sâu đạt được thông qua tương phản tông màu (trắng → mint → teal → obsidian) và khoảng cách rộng rãi, không phải drop-shadows. Giao diện đọc như ấn phẩm editorial phẳng, không phải UI skeuomorphic."

  imagery:

    hình_ảnh_do_case_study_dẫn_dắt: "ảnh chụp hình chữ nhật lớn và ảnh brand màu đồng nhất chảy sát mép container với zero border-radius ở ranh giới ngoài. Ảnh case study không mang bối cảnh lifestyle — chúng là crop sản phẩm, bao bì, hoặc ảnh chụp môi trường brand lấp đầy khung hình. Một động tác đặc trưng là xoay tên dự án 90° bằng ABCDiatypeExpanded màu trắng dưới dạng watermark dọc phủ trực tiếp lên panel màu đồng nhất (maroon, teal, v.v.). Không có illustrations, không icon ngoài chevron và mũi tên đơn giản. Hình ảnh 'trang trí' duy nhất là hero gradient full-bleed — một wash vàng sang hồng sang cyan chảy, hoạt động như khoảnh khắc màu sắc duy nhất của site. Xử lý ảnh mang phong cách editorial: tương phản cao, thường mang cảm giác duotone, luôn full-bleed trong khối của nó."

  layout:

    info: "Hero full-bleed với wordmark display căn giữa, sau đó các section trắng và mint xen kẽ cách nhau bởi khoảng cách dọc 180px. Layout dưới fold chuyển sang split 2 cột: text-trái ở ~5/12 chiều rộng, ảnh-phải ở ~7/12 chiều rộng, cho các khối case study. Không có sidebar navigation. Navigation cấp cao nhất là một hàng ngang duy nhất gồm các pill buttons nằm trực tiếp trên hero gradient. Mật độ nội dung thấp — mỗi section có toàn bộ chiều cao viewport để thở. Case studies xếp chồng dọc với text/ảnh đổi bên khi trang cuộn. Nhịp điệu tổng thể là tạp chí editorial: headline, khoảng không rộng, ảnh, headline, khoảng không, ảnh — không bao giờ có card grids hoặc feature blocks dày đặc."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #181f1f (Obsidian Ink)"
    - "background: #ffffff (Paper White)"
    - "border: #d1d2d2 (Fog) cho nhẹ, #181f1f cho mạnh"
    - "accent: #516fea (Iris Voltage) — chỉ outlined, không bao giờ làm fill"
    - "tinted surface: #eaf7f3 (Mint Wash)"
    - "primary action: #181f1f (filled action)"

    example_component_prompts:

    - "*Tạo một hero section*: Nền gradient full-bleed `linear-gradient(0deg, rgba(255,194,64,0), rgb(255,194,64), rgb(255,196,244), rgb(150,235,235), rgba(150,235,235,0))`. Wordmark display căn giữa bằng ABCDiatypeExpanded-Bold màu trắng ở 82px, line-height 1.10, letter-spacing -1.6px, kéo dài edge-to-edge. Không có button trong hero — nav là riêng biệt."

    - "Tạo một Primary Action Button: Nền #181f1f, text #ffffff, radius 9999px, padding pill nhỏ gọn. Dùng dạng fill này cho CTA chính."

    - "*Tạo một case study split block*: Grid hai cột (5fr 7fr). Trái: tên dự án bằng ABCDiatypeExpanded-Bold 20px, sau đó Grit-Regular 20px/1.43 body text màu Obsidian Ink, sau đó chi tiết địa điểm bằng Grit 500 ở 14px màu Graphite (#374151). Phải: panel màu đồng nhất full-bleed (dùng #1f3233 Deep Teal làm mặc định) với tên dự án xoay -90° bằng ABCDiatypeExpanded-Bold màu trắng 20px, căn giữa."

    - "*Tạo một outlined accent button*: border-radius 54px, padding ngang 34px, padding dọc 11px, viền 1.5px Iris Voltage (#516fea), fill trắng, label Grit-Regular 14px Obsidian Ink. Dùng tiết kiệm — đây là UI element màu sắc duy nhất."

    - "*Tạo một editorial section header*: Grit-Regular weight 500 ở 56px, Obsidian Ink, line-height 1.25, letter-spacing -0.56px. Theo sau bởi một serif body paragraph ở 20px/1.43, max-width 720px, với margin-top 180px từ section trước đó."

  typography_pairing_rules:

    info: "Site vận hành trên hệ thống hai font nghiêm ngặt và sự tương phản chính là bản sắc: ABCDiatypeExpanded-Bold là dấu chấm than thị giác — hình học, rộng, chữ hoa, đặt lớn. Grit-Regular là lời thì thầm editorial — serif, ấm áp, dễ đọc, đặt ở kích thước con người. Không bao giờ dùng ABCDiatypeExpanded cho câu dài hơn 4–5 từ. Không bao giờ đặt Grit ở kích thước display (56px+) mà không có line-height rộng (1.25+). Letter-spacing của font expanded thắt chặt khi kích thước tăng: -0.01em ở 20–40px, -0.02em ở 78–82px. Grit giữ tracking normal ở mọi kích thước. Cả hai font đều dùng kerning (tính năng \"kern\")."

  similar_brands:

    - "**Pentagram** — Cùng kỷ luật editorial-đơn sắc với bold display typography và ảnh case study full-bleed — cả hai đều coi type là tài sản thương hiệu chính"
    - "**Manual (design agency)** — Giống hệt thẩm mỹ pill-button navigation, khoảng cách section rộng rãi, và sự căng thẳng serif/sans trong layout case study"
    - "**Locomotive (MTL)** — Cùng cách tiếp cận: một chromatic gradient hero duy nhất trên nền site gần như hoàn toàn đơn sắc bên dưới, với bold expanded display type"
    - "**Bureau Cool** — Chung sự tự tin về typography — oversized display headings, bảng màu kiềm chế, khoảng trắng editorial, và capsule buttons siêu bo tròn"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-ink: #181f1f;
          --color-paper-white: #ffffff;
          --color-fog: #d1d2d2;
          --color-ash: #a3a5a5;
          --color-graphite: #374151;
          --color-true-black: #000000;
          --color-mint-wash: #eaf7f3;
          --color-deep-teal: #1f3233;
          --color-iris-voltage: #516fea;
          --color-solar-bloom: #ffc240;
          --gradient-solar-bloom: linear-gradient(0deg, rgba(255, 194, 64, 0), rgb(255, 194, 64) 25%, rgb(255, 196, 244) 50%, rgb(150, 235, 235) 75%, rgba(150, 235, 235, 0) 100%);
        
          /* Typography — Font Families */
          --font-abcdiatypeexpanded-bold: 'ABCDiatypeExpanded-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-grit-regular: 'Grit-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.4px;
          --text-display: 56px;
          --leading-display: 1.25;
          --tracking-display: -0.56px;
          --text-hero: 80px;
          --leading-hero: 1.1;
          --tracking-hero: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 180px;
          --card-padding: 32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 54px;
          --radius-full-2: 64px;
        
          /* Named Radii */
          --radius-nav: 64px;
          --radius-cards: 40px;
          --radius-inputs: 54px;
          --radius-buttons: 64px;
          --radius-body-blocks: 40px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-mint-wash: #eaf7f3;
          --surface-deep-teal: #1f3233;
          --surface-obsidian-ink: #181f1f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-ink: #181f1f;
          --color-paper-white: #ffffff;
          --color-fog: #d1d2d2;
          --color-ash: #a3a5a5;
          --color-graphite: #374151;
          --color-true-black: #000000;
          --color-mint-wash: #eaf7f3;
          --color-deep-teal: #1f3233;
          --color-iris-voltage: #516fea;
          --color-solar-bloom: #ffc240;
        
          /* Typography */
          --font-abcdiatypeexpanded-bold: 'ABCDiatypeExpanded-Bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-grit-regular: 'Grit-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-heading: 30px;
          --leading-heading: 1.2;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.15;
          --tracking-heading-lg: -0.4px;
          --text-display: 56px;
          --leading-display: 1.25;
          --tracking-display: -0.56px;
          --text-hero: 80px;
          --leading-hero: 1.1;
          --tracking-hero: -1.6px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-180: 180px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 54px;
          --radius-full-2: 64px;
        }