aave_com___style_reference:
  info: "> violet neon xuyên qua chạng vạng — một buổi trưa oải hương nhạt tan dần vào bề mặt sản phẩm nửa đêm, và một tia violet điện duy nhất là màu sắc sống sót qua màn chuyển tiếp."

  theme: "mixed"

  info: "Aave vận hành như một hệ thống hai tông: một hero oải hương ngập nắng tan dần vào bề mặt sản phẩm gần như đen, với violet rực rỡ (#998eff) xuyên suốt cả hai nửa như điểm nhấn màu sắc duy nhất. Typography dùng một custom display family (Aave Repro) trong dải weight hẹp 400–500 — hierarchy đến từ những bước nhảy kích thước rộng và negative tracking mạnh, chứ không phải từ việc tăng đậm. Các component mềm mại và hình pill theo mặc định: 20px là corner radius chủ lực, 1584px đánh dấu CTA full-pill, và elevation gần như vắng mặt — chỉ một công thức soft shadow duy nhất xuất hiện trên các floating element. Kết quả là một ứng dụng fintech hấp thụ năng lượng điện tử của crypto và sự kiềm chế editorial của SaaS cùng lúc, trình bày cơ chế DeFi dày đặc qua một canvas tĩnh lặng, tương phản cao."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Aave Violet | `#998eff` | `--color-aave-violet` | Primary CTA fill, outlined action borders, category label accent, decorative icon strokes — sợi chỉ màu sắc duy nhất xuyên suốt các phần sáng và tối; đủ ấm để sống động trên nền đen mờ mà không trở nên hung hãn |"
    info: "| Obsidian | `#221d1d` | `--color-obsidian` | Dark surface chủ đạo, body text trong phần sáng, primary nav text — màu gần đen neo giữ các band Pro và Markets |"
    info: "| Inkwell | `#0f0f10` | `--color-inkwell` | Neutral action fill tương phản cao cho primary buttons trên surface sáng. |"
    info: "| Charcoal | `#000000` | `--color-charcoal` | Pure-black fallback cho fills, strokes và borders tương phản cao |"
    info: "| Iron | `#636161` | `--color-iron` | Body text, muted paragraph copy, secondary nav text — mang phần lớn khối lượng đọc trong phần sáng |"
    info: "| Graphite | `#858387` | `--color-graphite` | Helper text trung bình-neutral, secondary borders, placeholder fills |"
    info: "| Pewter | `#8f8e8e` | `--color-pewter` | Icon strokes, tertiary borders, disabled-state outlines |"
    info: "| Ash | `#bcbbbb` | `--color-ash` | Hairline dividers, subtle fills, SVG strokes mức thấp |"
    info: "| Bone | `#f6f7f4` | `--color-bone` | Card surface trắng ngà, light icon borders, tinted secondary background — màu neutral ấm phía sau badges và product pills |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, light button fills, text trong phần tối |"

  tokens___typography:

    aave_repro___brand_typeface_duy_nhất_cho_headlines__body__ui_và_nav___dải_400_450_500_được_giữ_hẹp_có_chủ_đích__vì_vậy_hierarchy_được_tạo_ra_qua_kích_thước_và_tracking_chặt_thay_vì_tương_phản_weight____font_aave_repro:
      - "**Thay thế:** Inter (gần về x-height và tính trung tính) hoặc General Sans cho cùng cảm giác tĩnh lặng, hình học"
      - "**Weights:** 400, 450, 500"
      - "**Kích thước:** 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 32px, 40px, 72px"
      - "**Line height:** 1.0–1.5"
      - "**Letter spacing:** -3.6px ở 72px, -1.24px ở 40px, -0.96px ở 32px, -0.6px ở 24px, -0.4px ở 20px, -0.16px ở 16px, -0.084px ở 14px, 0.13px ở 13px"
      - "**OpenType features:** `\"ss07\"`"
      - "**Vai trò:** Brand typeface duy nhất cho headlines, body, UI và nav — dải 400→450→500 được giữ hẹp có chủ đích, vì vậy hierarchy được tạo ra qua kích thước và tracking chặt thay vì tương phản weight"

    inter___reserve_typeface_cho_compact_nav_utility_labels_khi_aave_repro_chưa_được_load___xuất_hiện_như_fallback_chứ_không_phải_đối_trọng_phong_cách____font_inter:
      - "**Thay thế:** Inter"
      - "**Weights:** 400, 700"
      - "**Kích thước:** 10px, 14px"
      - "**Line height:** 0.8, 1.5"
      - "**Letter spacing:** -0.0060em"
      - "**OpenType features:** `\"ss07\"`"
      - "**Vai trò:** Reserve typeface cho compact nav utility labels khi Aave Repro chưa được load — xuất hiện như fallback chứ không phải đối trọng phong cách"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | 0.13px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.6px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.1 | -0.96px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.05 | -1.24px | `--text-heading-lg` |"
      info: "| display | 72px | 1 | -3.6px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 176 | 176px | `--spacing-176` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| badges | 8px |"
      info: "| inputs | 20px |"
      info: "| buttons | 1584px (full pill) |"
      info: "| nav-items | 8px |"
      info: "| cards-featured | 24px |"
      info: "| buttons-secondary | 50px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06)...` | `--shadow-lg` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64-96px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    primary_violet_pill_button:
      vai_trò: "Hero CTA và bất kỳ hành động chủ đạo nào trong một section"

      info: "Nền #998eff, text #ffffff, border-radius 1584px (dạng pill hoàn toàn), padding 14px 24px, Aave Repro 14–16px weight 500, leading icon tùy chọn. Dùng cho 'Download on iOS' và các hành động download/launch tương đương."

    dark_inverted_pill_button:
      vai_trò: "Primary action trong phần sáng (đối xứng với violet pill trên phần tối)"

      info: "Nền #0f0f10, text #ffffff, border-radius 1584px, padding 14px 24px, Aave Repro 14–16px weight 500. Nút nav 'Use Aave' và bất kỳ tương đương dark-mode nào của violet CTA."

    light_pill_button:
      vai_trò: "Primary action trên phần tối"

      info: "Nền #ffffff, text #221d1d, border-radius 50px, padding 14px 24px, Aave Repro 16px weight 500. CTA 'Get Started' trên dark band Aave Pro."

    ghost_outline_button:
      vai_trò: "Secondary action bên cạnh primary CTA"

      info: "Nền trong suốt, border 1px (#ffffff trên tối, #221d1d trên sáng), text cùng màu với border, border-radius 50px, padding 14px 24px. Nút ghép 'Learn More'."

    outlined_violet_button:
      vai_trò: "Tertiary action với điểm nhấn màu sắc"

      info: "Nền trong suốt, border 1px #998eff, text #998eff, border-radius 50px, padding 14px 24px. Dùng khi một hành động cần cảm giác on-brand nhưng thứ yếu so với violet CTA đã được fill."

    adaptive_navigation_bar:
      vai_trò: "Site navigation cấp cao nhất xuyên suốt các phần sáng và tối"

      info: "Thanh ngang với logo bên trái (Aave mark + wordmark màu #221d1d hoặc #ffffff tùy section), nhóm link trung tâm (Products, Resources, Developers, About) ở 14px Aave Repro 450, và một dark pill CTA bên phải. Nav item padding 8px 6px, link color theo section: #221d1d trong phần sáng, #ffffff trong phần tối."

    product_badge:
      vai_trò: "Section label giới thiệu một product band"

      info: "Pill chứa một violet icon nhỏ (16–20px) + label text ('Aave App', 'Aave Pro'). Nền #f6f7f4, text #221d1d, border-radius 8px, padding 8px 12px, 14px Aave Repro 450. Nổi giữa, phía trên section headlines."

    feature_card_dark:
      vai_trò: "Feature card ba cột trên các section Markets / Pro"

      info: "Nền #221d1d (nằm trên midnight band), border-radius 20px, padding 24px, không border, không shadow. Chứa một violet category label ở 14px Aave Repro 500 ('General purpose', 'Predictable', 'Strategy-specific'), một title trắng ở 20px weight 500, và một body paragraph ở 14px Iron (#636161 đảo ngược thành #bcbbbb trên nền tối)."

    app_screen_card_light:
      vai_trò: "Container mockup điện thoại hoặc bề mặt preview ứng dụng"

      info: "Surface trắng #ffffff, border-radius 20px, nằm trên lavender hero wash. Chứa iOS device render; không cần quan tâm padding bên trong vì device art chính là nội dung."

    input_field:
      vai_trò: "Form input trên Pro dashboard và bất kỳ ngữ cảnh form nào"

      info: "Nền #ffffff, border 1px #bcbbbb, border-radius 20px, padding 12px 16px, placeholder text 14px Aave Repro 400 màu #858387, focus state làm dày border thành #998eff."

    stat_highlight:
      vai_trò: "Hiển thị số lớn bên trong màn hình app và dashboard"

      info: "Display-weight numeral (40–72px Aave Repro 500) màu #221d1d hoặc #ffffff, kết hợp với một violet delta hoặc label nhỏ (ví dụ '6.50% APY' ở 14px weight 500 #998eff). Móc thị giác của mọi phone và dashboard mockup."

    section_divider_header:
      vai_trò: "Hàng title-CTA giới thiệu một content section"

      info: "Hàng hai cột bên trong container 1200px: bên trái chứa display-size heading (40px Aave Repro 500) và subhead một câu ở 18px Iron; bên phải chứa một ghost hoặc outlined action button. Dùng để mở band Markets."

  do_s_and_don_ts:

    do:
      - "Dùng border-radius 1584px cho bất kỳ filled CTA nào — hình pill là bất khả thương lượng và định nghĩa ngôn ngữ button của thương hiệu"
      - "Dành #998eff chỉ cho actions và accents; không bao giờ dùng cho body text, borders trên cards, hoặc background washes lớn ngoài hero lavender gradient"
      - "Đặt display text ở 72px / weight 500 / letter-spacing -3.6px — negative tracking mạnh ở kích thước lớn là thứ làm headlines cảm giác custom chứ không phải templated"
      - "Giữ hệ thống type ở weights 400–500; leo thang hierarchy qua kích thước và tracking trước khi dùng đến weight đậm hơn"
      - "Áp dụng radius 20px làm mặc định cho cards, inputs và secondary buttons; 8px dành riêng cho badges và nav items"
      - "Dùng lavender hero wash (#ffffff chuyển dần sang ~#ece6ff) chỉ ở đầu các marketing pages; product sections phải bắt đầu trên surface #221d1d"
      - "Ghép mỗi dark-section CTA group thành một filled white pill + một ghost outlined pill; không bao giờ dùng hai filled buttons trong cùng một cặp"

    don_t:
      - "Đừng thêm điểm nhấn màu sắc thứ hai — toàn bộ giao diện là monochrome cộng với #998eff, và thêm một hue khác sẽ phá vỡ hệ thống hai surface"
      - "Đừng dùng shadows trên cards hoặc buttons; shadow duy nhất được cho phép là công thức soft shadow 6px-blur trên floating nav elements"
      - "Đừng đặt body text lớn hơn 18px hoặc nhỏ hơn 14px; scale được thiết kế có chủ đích và khoảng cách giữa các kích thước mang nhịp điệu"
      - "Đừng phá vỡ chuỗi trang light → dark; mỗi trang phải chuyển qua một hard surface change giữa marketing hero và bất kỳ product detail nào"
      - "Đừng dùng bold (600+) weights; dải 400–500 là chữ ký, và weight nặng hơn đọc như off-brand ở mọi kích thước"
      - "Đừng dùng #998eff làm background fill cho bất cứ thứ gì lớn hơn button hoặc badge nhỏ — ở tỷ lệ lớn nó lấn át các dark surfaces và mất đi độ rõ của CTA"
      - "Đừng chỉ dùng màu sắc để báo hiệu state trong các phần tối; kết hợp violet emphasis với thay đổi weight hoặc kích thước để ý nghĩa tồn tại trong monochrome"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Nền phần sáng cơ bản, hero top wash |"
    info: "| 1 | Lavender Wash | `#ece6ff` | Hero backdrop — violet gradient mềm trải xuống dưới vào phone mockup band |"
    info: "| 2 | Warm Card | `#f6f7f4` | Secondary surface phần sáng, product badge backgrounds |"
    info: "| 3 | Midnight | `#221d1d` | Primary surface phần tối, feature card fill |"
    info: "| 4 | Abyss | `#0f0f10` | Inverted button fill, surface sâu nhất cho CTAs tương phản cao |"

  elevation:

    - "**Floating Nav / Dropdown:** `rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px`"

  imagery:

    info: "Imagery được dẫn dắt bởi product surface, không phải lifestyle. Hero neo vào ba iOS device render được sắp xếp thành cụm quạt chặt, mỗi cái hiển thị một stat highlight khác nhau (lãi suất, số dư hàng tuần, lợi suất dự kiến) trên màn hình trắng tinh. Section Pro dùng full browser chrome với dashboard UI — nav, search bar và markets table — được render dưới dạng ảnh chụp màn hình dark-mode phẳng. Không photography, không illustration, không decorative 3D: mọi hình ảnh đều là product capture thật hoặc UI mockup. Icons dạng line, stroke ~1.5px, monochrome (#998eff cho accents, #636161 hoặc #ffffff cho neutral). Sự kiềm chế có chủ đích — giao diện chính là hình ảnh."

  layout:

    info: "Container centered max-width 1200px với generous outer gutters. Hero là lavender wash full-bleed với headline, subhead, CTA pair và cụm phone xòe quạt bên dưới. Trang sau đó cắt cứng sang Pro band đen full-bleed: badge trung tâm, display heading, cặp button trắng/đen và ảnh chụp browser-mockup trung tâm. Band Markets tiếp tục dark surface với section header hai cột (title trái, ghost CTA phải) và grid feature card ba cột bên dưới. Vertical rhythm rộng — 64–96px giữa các band — và nội dung luôn centered, không bao giờ asymmetric. Navigation là flat top bar đổi màu từ dark-on-light sang light-on-dark khi người dùng scroll qua hero."

  agent_prompt_guide:

    quick_color_reference:
    - "text-primary-light: #221d1d"
    - "text-primary-dark: #ffffff"
    - "text-muted: #636161"
    - "border-default: #bcbbbb"
    - "accent: #998eff (Aave Violet)"
    - "surface-light: #ffffff"
    - "surface-dark: #221d1d"
    - "primary action: #998eff (filled action)"

    example_component_prompts:
    - "Tạo một Primary Action Button: nền #998eff, text #000000, radius 9999px, compact pill padding. Dùng filled treatment này cho CTA chính."

    - "Tạo một Ghost Outline Button: nền trong suốt, border 1px #221d1d, text #221d1d, radius 50px, padding 14px 24px, Aave Repro 16px weight 500. Dùng làm secondary action bên cạnh primary CTA."

    - "**Three-column feature card grid**: 3 cards trong một hàng, mỗi card radius 20px, nền #221d1d, padding 24px, không border hoặc shadow. Nội dung card: violet category label ở 14px Aave Repro weight 500 #998eff, title trắng ở 20px weight 500 #ffffff, body ở 14px #bcbbbb. Khoảng cách 24px giữa các card."

    - "**Input field**: Nền trắng #ffffff, border 1px #bcbbbb, radius 20px, padding 12px 16px. Placeholder text 14px Aave Repro weight 400 màu #858387. Khi focus, border chuyển thành #998eff."

    - "**Stats display bên trong màn hình điện thoại**: Numeral 40–56px Aave Repro weight 500 màu #221d1d, với violet label 14px Aave Repro weight 500 ('6.50% APY') ngay phía trên. Nằm bên trong màn hình điện thoại trắng trên lavender hero wash."

  dual_surface_architecture:

    info: "Aave cố tình chạy hai hệ thống màu song song: light canvas (#ffffff, #f6f7f4, text #221d1d) cho marketing/hero surfaces, và dark canvas (#221d1d, #0f0f10, text #ffffff) cho product surfaces. Cầu nối là #998eff — nó là màu duy nhất đúng trong cả hai ngữ cảnh, được dùng làm CTA fill, outlined-action border, category label và stat delta. Khi mở rộng hệ thống, không bao giờ thêm accent thứ hai; thay vào đó, tái sử dụng violet ở nhiều weight khác nhau (fill, stroke, text) trên cả hai surface. Đây là hệ thống."

  weight_restraint:

    info: "Custom typeface (Aave Repro) được giữ trong dải weight hẹp 400/450/500. Đây là lựa chọn chữ ký: thay vì nhảy lên 700 để nhấn mạnh, Aave dựa vào size jumps và letter-spacing chặt (xuống -0.05em ở 72px) để tạo hierarchy. Kết quả là một hệ thống mang cảm giác editorial hơn là hung hãn — phù hợp với sản phẩm tài chính nơi la hét làm suy yếu lòng tin."

  similar_brands:

    - "**Lido Finance** — Cùng kiến trúc section sáng và tối kép với một chromatic accent duy nhất, pill-shaped CTAs và display type custom hoặc gần custom tracking chặt trên bề mặt sản phẩm DeFi"
    - "**Compound Labs** — Chia sẻ văn pháp thị giác DeFi-product: dark product surfaces gần như phẳng, white pill CTAs bên trong dark bands và một accent màu kiềm chế duy nhất dùng tiết kiệm cho actions"
    - "**Linear** — Cùng type 400–500 weight chặt, negative tracking mạnh ở kích thước lớn và triết lý 'một accent làm mọi thứ' trên các layout marketing sáng/tối hỗn hợp"
    - "**Uniswap** — Chia sẻ sự kiềm chế pink-as-accent trên các bề mặt monochrome, cards góc bo mềm (dải 20px) và nhịp điệu band sáng-tối rõ ràng xuyên suốt các trang product và protocol"
    - "**Phantom Wallet** — Cùng accent nghiêng về violet, pill buttons và bộ ba phone-mockup hero phản chiếu band marketing app của Aave gần như từng nhịp"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aave-violet: #998eff;
          --color-obsidian: #221d1d;
          --color-inkwell: #0f0f10;
          --color-charcoal: #000000;
          --color-iron: #636161;
          --color-graphite: #858387;
          --color-pewter: #8f8e8e;
          --color-ash: #bcbbbb;
          --color-bone: #f6f7f4;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-aave-repro: 'Aave Repro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.24px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-176: 176px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-96px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 50px;
          --radius-full-2: 1584px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-badges: 8px;
          --radius-inputs: 20px;
          --radius-buttons: 1584px (full pill);
          --radius-nav-items: 8px;
          --radius-cards-featured: 24px;
          --radius-buttons-secondary: 50px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-lavender-wash: #ece6ff;
          --surface-warm-card: #f6f7f4;
          --surface-midnight: #221d1d;
          --surface-abyss: #0f0f10;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aave-violet: #998eff;
          --color-obsidian: #221d1d;
          --color-inkwell: #0f0f10;
          --color-charcoal: #000000;
          --color-iron: #636161;
          --color-graphite: #858387;
          --color-pewter: #8f8e8e;
          --color-ash: #bcbbbb;
          --color-bone: #f6f7f4;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-aave-repro: 'Aave Repro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', 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.13px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.6px;
          --text-heading: 32px;
          --leading-heading: 1.1;
          --tracking-heading: -0.96px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.24px;
          --text-display: 72px;
          --leading-display: 1;
          --tracking-display: -3.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-176: 176px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 50px;
          --radius-full-2: 1584px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        }