travelperk___style_reference:
  info: "> Vôi xanh trên giấy da ấm — xanh CTA điện tử trên nền kem giấy cũ, không đổ bóng, mọi thứ đều bo tròn ở chính xác 26px."

  theme: "light"

  info: "Perk tỏa ra năng lượng có kiểm soát — một trường đen-và-kem nạp đầy vôi xanh, nơi màu điện #beff50 xuyên thủng các bề mặt gần-đen và trắng ấm. Nền hero trắng ấm (#f5f5eb) mang cảm giác như giấy cũ bên cạnh vôi xanh điện tử, khiến bảng màu trở nên xúc giác hơn là kỹ thuật số. Một custom sans duy nhất, OTSono, đảm nhận mọi công việc ở mọi tỉ lệ từ label UI 10px đến glyph display 200px, với leading chặt 0.89-0.90 và tracking -0.03em ở kích thước display khiến các headline cỡ lớn trông nén chặt và có chủ đích. Radius 26px là ngôn ngữ hình khối chủ đạo của hệ thống — được áp dụng đồng nhất cho buttons, cards và image frames — tạo sự nhất quán bo tròn làm mềm bảng màu tương phản cao đen/vôi xanh/kem. Không đổ bóng, không gradient — các bề mặt chỉ khác nhau bởi giá trị nền, với dark cards #14140f, white cards #ffffff và warm-cream cards #f5f5eb đều dùng chung radius 26px và không có phép ẩn dụ độ cao."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Electric Lime | `#beff50` | `--color-electric-lime` | Primary CTA buttons, active UI chips, icon accent fills — điểm nhấn màu duy nhất bùng nổ trên mọi bề mặt (gần-đen, trắng và kem), tạo cảm giác cấp bách mà không cần báo động đỏ |"
    info: "| Near Black | `#14140f` | `--color-near-black` | Màu chữ chính, nền dark card, nav borders — màu đen ấm (không phải #000000 thuần) kết hợp với kem tạo cảm giác hơi analog |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Chữ tương phản cao, icon fills, button borders ở độ tương phản tối đa |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Nền card, overlay surfaces, chữ button inverted |"
    info: "| Warm Cream | `#f5f5eb` | `--color-warm-cream` | Nền hero trang, section fills — màu trắng ấm khiến Electric Lime trông tự nhiên hơn là neon |"
    info: "| Parchment Card | `#fafaf5` | `--color-parchment-card` | Bề mặt card phụ, nền panel lồng nhau |"
    info: "| Stone | `#d2d2c8` | `--color-stone` | Borders, disabled states, circular icon-only buttons ở trạng thái inactive |"
    info: "| Graphite | `#6e6e64` | `--color-graphite` | Body text, supporting labels, card subtext — màu xám trung tính ấm giữ sự ấm áp nhất quán trên toàn thang achromatic |"
    info: "| Charcoal | `#30302a` | `--color-charcoal` | Nền dark surface card, secondary dark mode elements |"
    info: "| Slate Border | `#919183` | `--color-slate-border` | Dividers, subtle borders trên bề mặt sáng |"
    info: "| Signal Blue | `#144fcc` | `--color-signal-blue` | SVG icon fills — chỉ dành cho brand-category transport icons |"
    info: "| Coral Alert | `#eb3131` | `--color-coral-alert` | Status badges — chỉ trạng thái destructive 'Needs Approval' |"
    info: "| Mint Confirm | `#1dc479` | `--color-mint-confirm` | Status badges — chỉ trạng thái positive 'Confirmed' |"

  tokens___typography:

    otsono___kiểu_chữ_duy_nhất_trên_mọi_ngữ_cảnh___navigation__badges__body__hero___giúp_thiết_kế_dễ_đọc_hoàn_toàn_thông_qua_sự_khác_biệt_về_weight_và_kích_thước_thay_vì_chuyển_đổi_font__ở_80_200px__line_height_0_89_xếp_chồng_headline_chặt_hơn_cap_height__tạo_khối_slab_nén__tracking__0_03em_ở_kích_thước_display_và__0_10em_ở_small_caps_labels_bao_phủ_toàn_bộ_vốn_từ_vựng_letter_spacing_của_hệ_thống_____font_otsono:
      - "**Thay thế:** Cabinet Grotesk, Geist, hoặc General Sans (đầu tròn, x-height cao grotesque)"
      - "**Weights:** 400, 500"
      - "**Kích thước:** 10px, 12px, 13px, 14px, 16px, 17px, 18px, 20px, 22px, 24px, 30px, 32px, 40px, 64px, 80px, 90px, 200px"
      - "**Line height:** 0.89–1.50 (display: 0.89–0.90, body: 1.40–1.50, headings: 1.00–1.20)"
      - "**Letter spacing:** -0.03em ở kích thước display (80px, 90px, 200px); +0.10em ở kích thước small label/badge"
      - "**OpenType features:** `Không phát hiện rõ ràng`"
      - "**Vai trò:** Kiểu chữ duy nhất trên mọi ngữ cảnh — navigation, badges, body, hero — giúp thiết kế dễ đọc hoàn toàn thông qua sự khác biệt về weight và kích thước thay vì chuyển đổi font. Ở 80–200px, line-height 0.89 xếp chồng headline chặt hơn cap-height, tạo khối slab nén. Tracking -0.03em ở kích thước display và +0.10em ở small caps/labels bao phủ toàn bộ vốn từ vựng letter-spacing của hệ thống."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 40px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 64px | 1 | -1.92px | `--text-heading-lg` |"
      info: "| display | 90px | 0.89 | -2.7px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    mật_độ: "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: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 26px |"
      info: "| badges | 8px |"
      info: "| images | 26px |"
      info: "| buttons | 26px |"
      info: "| pillTabs | 26px |"
      info: "| iconButtons | 50% |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính — 'Book a demo', 'Get started'"

      info: "Background #beff50, text #14140f, border 1px solid #14140f, border-radius 26px, padding 16px 16px. OTSono 16px weight 500. Không đổ bóng. Lớp nền vôi xanh làm đây là element nổi bật nhất trên mọi bề mặt — dùng có chừng mực, tối đa 2 cái mỗi page section."

    ghost_button___dark:
      vai_trò: "Hành động phụ trên nền sáng"

      info: "Background transparent, text #14140f, border 1px solid #14140f, border-radius 26px, padding 16px 12px–16px. OTSono 16px weight 400. Dùng cho 'Learn more', 'Show all features' trên nền kem/trắng."

    ghost_button___light:
      vai_trò: "Hành động phụ trên nền tối"

      info: "Background transparent, text #ffffff, border 1px solid #ffffff, border-radius 26px, padding 16px. OTSono 16px weight 400. Dùng khi button nằm trên dark card #14140f hoặc dark section."

    circular_icon_button___filled:
      vai_trò: "Play, pause, nav arrows"

      info: "Background #d2d2c8, text #000000, border 1px solid #000000, border-radius 50%, padding 0px (kích thước icon nội tại). Dùng cho video player controls và carousel navigation."

    circular_icon_button___ghost:
      vai_trò: "Hành động chỉ icon thay thế"

      info: "Background transparent, text #000000, border 1px solid #14140f, border-radius 50%, padding 0px. Xuất hiện cùng filled circular variant cho các điều khiển ghép đôi."

    white_feature_card:
      vai_trò: "Card xem trước UI sản phẩm, overlay thông tin nổi trên hero"

      info: "Background #ffffff, border-radius 26px, không box-shadow, padding nội tại thay đổi. Nổi trên nền hero kem. Chứa profile chips, thông tin chuyến bay, hoặc UI workflow phê duyệt. Text: #14140f chính, #6e6e64 phụ."

    cream_feature_card:
      vai_trò: "Khối feature section trên các layout xen kẽ"

      info: "Background #fafaf5, border-radius 26px, không đổ bóng, padding 24-40px. Chứa illustrations và feature copy. Text #14140f chính, #6e6e64 body."

    dark_feature_card:
      vai_trò: "Feature highlight tương phản cao, khối trích dẫn"

      info: "Background #14140f, border-radius 26px, không đổ bóng, padding 24-40px. Text và headline màu #ffffff. Electric Lime accents (#beff50) có thể xuất hiện dưới dạng icon fills hoặc highlight chips bên trong."

    lime_accent_card:
      vai_trò: "Feature callout hero — khối highlight 'Real-time visibility'"

      info: "Background #beff50, border-radius 26px, không đổ bóng, padding 24-40px. Text màu #14140f hoặc #000000. Bề mặt card duy nhất dùng brand accent — dùng một lần mỗi section để chỉ định insight nổi bật chính."

    text_badge___status_chip:
      vai_trò: "Label 'On time', 'Expense submitted', 'Confirmed', 'Needs Approval'"

      info: "Background #ffffff, text #14140f, border-radius 8px, padding 2px 8px. OTSono 12-13px weight 500. Các variant trạng thái đổi background hoặc text thành #1dc479 (confirmed) hoặc #eb3131 (needs approval)."

    announcement_banner:
      vai_trò: "Dải thông báo toàn cầu đầu trang"

      info: "Full-width, background #beff50, text #14140f, OTSono 14px weight 400. Chứa inline link 'Learn more' gạch chân và icon ✕ dismiss. Bề mặt vôi xanh toàn cầu duy nhất tồn tại — củng cố brand color trước khi hero tải."

    tab_pill_selector:
      vai_trò: "Toggle section 'Automate / Control / Support'"

      trạng_thái_active: "background #14140f, text #ffffff, border-radius 26px, padding 8px 16px. Trạng thái inactive: background transparent, text #14140f. OTSono 14-16px weight 500. Container background là #d2d2c8 với radius 26px."

    navigation_bar:
      vai_trò: "Sticky top nav"

      info: "Background #f5f5eb hoặc #ffffff, không đổ bóng. Logo căn trái. Nav links bằng OTSono 16px weight 400, màu #14140f. Cụm bên phải: globe icon + ghost button 'Book a demo' + CTA vôi xanh 'Get started' + user icon + hamburger. Bottom border 1px solid #d2d2c8."

  do_s_and_don_ts:

    do:
      - "Dùng #beff50 làm CTA fill độc quyền — tối đa một lime button và một lime surface element mỗi viewport; không bao giờ đổ đầy hai container liền kề bằng vôi xanh"
      - "Áp dụng border-radius 26px cho tất cả cards, buttons và image frames bất kể loại nội dung — giá trị radius duy nhất CHÍNH LÀ ngôn ngữ hình khối"
      - "Đặt display headlines (64px+) ở line-height 0.89–1.00 với letter-spacing -0.03em để các dòng xếp chồng tạo thành khối typographic nén"
      - "Giữ mọi bề mặt trên thang achromatic ấm: #14140f / #30302a / #fafaf5 / #f5f5eb / #ffffff — không bao giờ đưa vào xám lạnh hoặc trung tính pha xanh"
      - "Dùng #6e6e64 cho tất cả supporting body text và card subtext, chỉ dành #14140f cho primary labels và headlines"
      - "Phân biệt hệ thống phân cấp card chỉ bằng giá trị nền: trắng (#ffffff) → kem (#fafaf5) → kem ấm (#f5f5eb) → tối (#14140f) — không cần đổ bóng, không cần borders"
      - "OTSono là kiểu chữ duy nhất — dùng kích thước và weight (400 vs 500) làm điểm khác biệt duy nhất giữa body và emphasis"

    don_t:
      - "Không bao giờ dùng box-shadow hoặc drop-shadow trên bất kỳ card hay button nào — độ cao đạt được thông qua tương phản màu nền, không phải độ sâu đổ bóng"
      - "Không bao giờ dùng quá hai giá trị border-radius trong một layout: 26px cho tất cả cards/buttons/images, 8px cho badges/chips, 50% cho icon-only circles — không có radii nào khác"
      - "Không bao giờ đặt chữ Electric Lime (#beff50) trên nền trắng — vôi xanh chỉ là màu nền; chữ trên vôi xanh phải là #14140f hoặc #000000"
      - "Không bao giờ đưa vào kiểu chữ thứ hai — OTSono xử lý mọi tỉ lệ từ label UI 10px đến display 200px; chuyển đổi font phá vỡ bản sắc một giọng nói"
      - "Không bao giờ dùng xám lạnh (#9ca3af, #6b7280 v.v.) — tất cả trung tính phải mang undertone ấm của thang #f5f5eb → #6e6e64 → #14140f"
      - "Không bao giờ xếp chồng hai dark cards (#14140f) mà không có bề mặt kem hoặc trắng ở giữa — sự xen kẽ tối/sáng định nghĩa nhịp điệu trang"
      - "Không bao giờ áp dụng radius 26px cho inline text links, dividers, hoặc table rows — radius chỉ thuộc về bounded box elements"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Page Ground | `#f5f5eb` | Nền hero và page fill chính — kem ấm khiến vôi xanh cảm thấy hữu cơ không phải neon |"
    info: "| 1 | Section Surface | `#fafaf5` | Feature cards và nền section xen kẽ — sáng hơn page ground một bậc |"
    info: "| 2 | Elevated Card | `#ffffff` | White cards nổi trên nền kem — độ tương phản tạo cảm giác 'nâng lên' mà không cần đổ bóng |"
    info: "| 3 | Dark Surface | `#14140f` | Dark feature cards và announcement strip — tương phản tối đa với mọi bề mặt sáng |"

  elevation:

    info: "Hệ thống zero shadow — không có box-shadow nào xuất hiện trên bất kỳ card hay interactive element nào. Hệ thống phân cấp được truyền đạt hoàn toàn thông qua màu nền: dark cards #14140f nằm 'trên' nền kem về mặt thị giác không phải qua độ sâu đổ bóng mà qua khối lượng tương phản. White cards (#ffffff) dường như nổi trên các section #f5f5eb hoàn toàn nhờ sự khác biệt giá trị. Cách tiếp cận bề mặt phẳng này khiến Electric Lime accent (#beff50) mang mọi trọng lượng thị giác mà đổ bóng lẽ ra cung cấp."

  imagery:

    info: "Ảnh chụp màn hình UI sản phẩm hiển thị dưới dạng floating cards trên nền hero, được cắt với radius 26px để khớp với hệ thống card. Một bàn tay thật cầm điện thoại (product mockup) neo giữa hero — lifestyle-adjacent nhưng tập trung vào sản phẩm, không phải editorial. Section thứ hai có video embed full-bleed (không autoplay) với overlay pill button 'Watch full video', sử dụng footage phong cách motion documentary. Illustrations bên trong feature cards là flat, line-based, geometric — hai màu (đen line trên nền vôi xanh hoặc kem), khớp chính xác với brand palette. Icons trong toàn bộ UI có stroke weight 1.5px, monochrome (#14140f hoặc #ffffff tùy bề mặt). Không có photography nào ngoài hero hand shot và video. Tỉ lệ image-to-text thấp — thiết kế chủ yếu là text và UI-screenshot."

  layout:

    info: "Max-width ~1200px canh giữa trên nền hero warm cream (#f5f5eb) full-bleed. Hero full-viewport với headline text canh giữa (OTSono 80-90px) và floating product UI cards sắp xếp theo z-pattern lỏng lẻo xung quanh phone mockup trung tâm. Bên dưới hero: các dải trắng và kem xen kẽ, mỗi dải có padding dọc 60px. Feature sections dùng horizontal scroll card row (4 cards hiển thị, điều hướng bằng mũi tên) thay vì grid tĩnh. Tab-switched feature sections (Automate / Control / Support) hiển thị card layout 3 cột trong hộp max-width có giới hạn. Logo bar (social proof) chạy full-width trên nền kem. Navigation là sticky, top bar, tối giản — không có mega-menu. Section transitions liền mạch (không có visual dividers, chỉ chuyển màu nền thuần túy). Mật độ tổng thể rộng rãi — khoảng trắng hào phóng giữa display type lớn và card elements."

  agent_prompt_guide:

    tham_khảo_màu_nhanh:
    - "Nền trang: #f5f5eb (warm cream)"
    - "Chữ chính: #14140f (near-black)"
    - "Chữ phụ: #6e6e64 (warm graphite)"
    - "CTA button fill: #beff50 (electric lime)"
    - "Bề mặt card (sáng): #ffffff"
    - "Border / stone: #d2d2c8"

    ví_dụ_component_prompts:

    - "Hero section: Background #f5f5eb full-bleed. Headline canh giữa 'The intelligent platform for travel and spend' ở 90px OTSono weight 500, #14140f, line-height 0.89, letter-spacing -0.03em. Bên dưới: hai button cạnh nhau — 'Book a demo' (background #beff50, text #14140f, border 1px solid #14140f, border-radius 26px, padding 16px) và 'Get started' (background transparent, text #14140f, border 1px solid #14140f, border-radius 26px, padding 16px). Thả nổi ba white cards (#ffffff) với radius 26px xung quanh phone mockup trung tâm."

    - "Feature card (lime highlight): Background #beff50, border-radius 26px, padding 32px. Headline 'Real-time visibility & actionable insights' ở 24px OTSono weight 500, #14140f. Body text 16px OTSono weight 400, #14140f, line-height 1.5. Illustration hai màu phẳng (đen lines trên nền vôi xanh) ở phần trên."

    - "Dark feature card: Background #14140f, border-radius 26px, padding 32px. Headline 'Role-based permissions & controls' ở 30px OTSono weight 500, #ffffff, line-height 1.1. Body 16px OTSono weight 400, #6e6e64."

    - "Announcement banner: Full-width background #beff50. Text 'Focus on your next breakthrough. We'll handle the shadow work.' OTSono 14px weight 400, #14140f. Inline link 'Learn more' gạch chân, #14140f. Icon ✕ close căn phải, #14140f."

    - "Navigation bar: Background #f5f5eb. Logo 'perk+' bên trái, OTSono 18px weight 500 #14140f. Nav links ở giữa: OTSono 16px weight 400 #14140f, gap 24px. Cụm bên phải: ghost button 'Book a demo' (border 1px solid #14140f, radius 26px, padding 12px 16px) + CTA 'Get started' (background #beff50, border 1px solid #14140f, radius 26px, padding 12px 16px). Bottom border 1px #d2d2c8."

  similar_brands:

    - "**Ramp** — Cùng cách xen kẽ dark/light card tương phản cao với một màu nhấn sống động duy nhất trên CTA buttons trên nền bảng màu achromatic"
    - "**Notion** — Hệ thống một kiểu chữ duy nhất làm mọi công việc phân cấp thông qua kích thước/weight, nền trang off-white ấm thay vì trắng tinh"
    - "**Linear** — Hệ thống card bề mặt phẳng không đổ bóng — độ cao qua tương phản màu nền"
    - "**Vercel** — Bảng màu chỉ đen/trắng/accent với cards bo tròn 26px và cặp ghost+filled button trên cùng nav"
    - "**Monzo** — Brand accent một tông màu điện (coral/vôi xanh) đấm xuyên qua gần-đen và trắng trong bối cảnh fintech travel-adjacent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-lime: #beff50;
          --color-near-black: #14140f;
          --color-pure-black: #000000;
          --color-pure-white: #ffffff;
          --color-warm-cream: #f5f5eb;
          --color-parchment-card: #fafaf5;
          --color-stone: #d2d2c8;
          --color-graphite: #6e6e64;
          --color-charcoal: #30302a;
          --color-slate-border: #919183;
          --color-signal-blue: #144fcc;
          --color-coral-alert: #eb3131;
          --color-mint-confirm: #1dc479;
        
          /* Typography — Font Families */
          --font-otsono: 'OTSono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.92px;
          --text-display: 90px;
          --leading-display: 0.89;
          --tracking-display: -2.7px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 24-40px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 18px;
          --radius-3xl: 26px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        
          /* Named Radii */
          --radius-cards: 26px;
          --radius-badges: 8px;
          --radius-images: 26px;
          --radius-buttons: 26px;
          --radius-pilltabs: 26px;
          --radius-iconbuttons: 50%;
        
          /* Surfaces */
          --surface-page-ground: #f5f5eb;
          --surface-section-surface: #fafaf5;
          --surface-elevated-card: #ffffff;
          --surface-dark-surface: #14140f;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-lime: #beff50;
          --color-near-black: #14140f;
          --color-pure-black: #000000;
          --color-pure-white: #ffffff;
          --color-warm-cream: #f5f5eb;
          --color-parchment-card: #fafaf5;
          --color-stone: #d2d2c8;
          --color-graphite: #6e6e64;
          --color-charcoal: #30302a;
          --color-slate-border: #919183;
          --color-signal-blue: #144fcc;
          --color-coral-alert: #eb3131;
          --color-mint-confirm: #1dc479;
        
          /* Typography */
          --font-otsono: 'OTSono', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.2;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -1.92px;
          --text-display: 90px;
          --leading-display: 0.89;
          --tracking-display: -2.7px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 18px;
          --radius-3xl: 26px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        }