flecto___style_reference:
  info: "> Nhà kính thực vật kiểu botanical greenhouse. Một conservatory với tường kem ấm áp, nơi những chậu cây teal đậm chứa cây non mint sáng — phẳng, bo tròn, tràn đầy sắc xanh, không bóng đổ."

  theme: "mixed"

  info: "Flecto là một aesthetic cho nền tảng cho thuê theo phong cách botanical ấm áp: cream canvas (#fffbec) thay thế cho trắng tinh, deep forest teal (#004737) làm neo cho hero sections và đường viền, và mint tươi (#56f09f) tạo điểm nhấn cho các tương tác. Typography chỉ dùng Aeonik weight 400 — không bold, không light — dùng negative letter-spacing (-0.043em ở display sizes) để tạo tương phản qua độ tight thay vì weight. Hệ thống flat, dùng border và color-block: các bề mặt bo tròn lớn (40–60px radius) màu teal đậm đặt trực tiếp trên nền kem ấm, với các đường viền màu mảnh (chromatic borders) chịu phần lớn trọng lượng cấu trúc thay vì shadow. Mint xuất hiện tiết kiệm như accent chức năng trên filled buttons, icons, và decorative shapes, không bao giờ dùng làm bề mặt lớn."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Forest Ink | `#004737` | `--color-forest-ink` | Bề mặt brand chủ đạo — hero panels, section backgrounds, đường viền cấu trúc dày, nav header, footer blocks. Teal đậm hút trang và làm cho chữ kem phát sáng |"
    info: "| Mint Pulse | `#56f09f` | `--color-mint-pulse` | Accent viền xanh cho tags, dividers, và cạnh UI được focus. Không nâng cấp nó thành màu CTA chính |"
    info: "| Mint Mist | `#d4ffe8` | `--color-mint-mist` | Accent xanh cho đường viền action dạng outlined, linked labels, và điểm nhấn tương tác nhẹ. Không nâng cấp nó thành màu CTA chính |"
    info: "| Cream Canvas | `#fffbec` | `--color-cream-canvas` | Nền trang — off-white ấm thay thế trắng tinh. Màu border trên teal sections, card fills trên vùng sáng, heading text trên bề mặt tối |"
    info: "| Deep Loam | `#032019` | `--color-deep-loam` | Màu chữ trên bề mặt kem, đường viền tối nhẹ. Gần đen với sắc xanh lá hài hòa với màu brand Forest Ink |"
    info: "| Sage Whisper | `#99b5af` | `--color-sage-whisper` | Body text nhẹ và đường viền phụ — xanh-xám bão hòa thấp, lùi về phía sau trên nền kem nhưng vẫn giữ tông màu với bảng brand |"
    info: "| Stone Mist | `#ccdad7` | `--color-stone-mist` | Hairline dividers, icon borders, nền tint nhẹ cho cards trong sections sáng |"
    info: "| Bone | `#faf2d5` | `--color-bone` | Nền card ấm mềm — ấm và bão hòa hơn cream canvas một chút, dùng để nâng các content blocks cụ thể mà không phá vỡ tonal family |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Body text và đường viền button tiêu chuẩn trong ngữ cảnh trung tính. Dùng khi chromatic text không phù hợp |"
    info: "| Iris Spark | `#8f37ff` | `--color-iris-spark` | Accent viền tím cho tags, dividers, và cạnh UI được focus. |"

  tokens___typography:

    aeonik___universal_typeface___headings__body__ui_labels__buttons__single_weight_400_trên_toàn_bộ_hệ_thống__tương_phản_đạt_được_qua_kích_thước_và_negative_letter_spacing__không_phải_weight__đây_là_lựa_chọn_đặc_trưng__một_geometric_sans_monoweight_nơi_display_headlines_ở_56_74px_được_siết_chặt_đến__0_043em_trong_khi_body_text_ở_14_16px_nằm_ở_tracking_normal_hoặc_hơi_dương__tabular_numerals__tnum__được_bật_cho_mọi_trường_hợp_____font_aeonik:
      - "**Thay thế:** Inter, Satoshi, General Sans"
      - "**Weights:** 400"
      - "**Sizes:** 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 19px, 20px, 24px, 26px, 28px, 32px, 33px, 36px, 56px, 60px, 64px, 66px, 74px"
      - "**Line height:** 1.00–2.88 (theo ngữ cảnh)"
      - "**Letter spacing:** -0.0430em ở 56px+ (display), -0.0300em ở 32–36px (heading), -0.0100em ở 18–24px (subheading), normal đến +0.0200em ở 8–14px (caption/label)"
      - "**OpenType features:** `\"tnum\" on`"
      - "**Vai trò:** Universal typeface — headings, body, UI labels, buttons. Single weight 400 trên toàn bộ hệ thống; tương phản đạt được qua kích thước và negative letter-spacing, không phải weight. Đây là lựa chọn đặc trưng: một geometric sans monoweight nơi display headlines ở 56–74px được siết chặt đến -0.043em trong khi body text ở 14–16px nằm ở tracking normal hoặc hơi dương. Tabular numerals ('tnum') được bật cho mọi trường hợp."

    roobert___secondary_body_face___dùng_cho_đoạn_văn_mô_tả_dài_hơn__list_items__và_hero_subtext__ấm_áp_và_nhân_văn_hơn_aeonik__mang_lại_sự_đa_dạng_về_tông_màu_trong_văn_bản_dài_trong_khi_vẫn_nằm_trong_cùng_một_họ_geometric__single_weight_____font_roobert:
      - "**Thay thế:** Inter, Söhne, Untitled Sans"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 16px"
      - "**Line height:** 1.40–1.87"
      - "**Vai trò:** Secondary body face — dùng cho đoạn văn mô tả dài hơn, list items, và hero subtext. Ấm áp và nhân văn hơn Aeonik, mang lại sự đa dạng về tông màu trong văn bản dài trong khi vẫn nằm trong cùng một họ geometric, single-weight."

    arial___arial___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — đượ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: "| caption | 10px | 1.4 | 0.1px | `--text-caption` |"
      info: "| body | 14px | 1.4 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.2 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.15 | -1.08px | `--text-heading` |"
      info: "| heading-lg | 56px | 1.1 | -2.4px | `--text-heading-lg` |"
      info: "| display | 74px | 1 | -3.18px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      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: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 19 | 19px | `--spacing-19` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 19px |"
      info: "| pills | 9999px |"
      info: "| buttons | 40px |"
      info: "| small-chips | 10px |"
      info: "| icon-squares | 5.76px |"
      info: "| large-panels | 60px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.04) 0px 3px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-80px"
      - "**Card padding:** 12-20px"
      - "**Element gap:** 10-12px"

  components:

    filled_mint_button:
      vai_trò: "Primary call-to-action (Login, Start)"

      info: "Nền #56f09f, chữ Deep Loam (#032019), Aeonik 14px weight 400, padding 10px 24px, border-radius 40px. Không border. Nằm trên bề mặt trắng hoặc kem."

    outlined_dark_button:
      vai_trò: "Secondary action (Book a Demo)"

      info: "Nền trong suốt, border 1px solid #222222, chữ #222222, Aeonik 14px weight 400, padding 10px 20px, border-radius 40px. Đảo màu thành kem-trên-teal khi nằm trên dark hero panels."

    ghost_pill_button:
      vai_trò: "Tertiary action hoặc filter"

      info: "Nền #d4ffe8, chữ #004737, không border, Aeonik 12px weight 400, padding 6px 14px, border-radius 9999px. Dùng cho các action dạng tag và active filter states."

    hero_panel:
      vai_trò: "Full-bleed dark section"

      info: "Nền #004737, border-radius 0 ở cạnh nhưng 19–60px trên inner cards, padding dọc rộng 80–120px, headline căn giữa ở 56–74px Aeonik weight 400 màu #fffbec."

    light_card:
      vai_trò: "Content card trên cream canvas"

      info: "Nền #ffffff hoặc #faf2d5, border 1px solid #ccdad7, border-radius 19px, padding 20px. Shadow rgba(0,0,0,0.04) 0px 3px 2px 0px khi không có border."

    tinted_feature_card:
      vai_trò: "Content block được làm nổi bật"

      info: "Nền #d4ffe8, không border, border-radius 19px, padding 24px, heading ở 28px màu #004737."

    language_selector:
      vai_trò: "Compact utility dropdown"

      info: "Nền trắng, border 1px solid #ccdad7, border-radius 10px, padding 6px 12px, chữ 12px Aeonik, icon chevron màu Sage Whisper."

    navigation_bar:
      vai_trò: "Top-level site nav"

      info: "Nền trắng, chiều cao ~64px, horizontal flex: logo trái, nav links trái-giữa, utility buttons phải. Không border dưới — sự tách biệt với hero đạt được qua tương phản màu sắc."

    decorative_shape_module:
      vai_trò: "Yếu tố minh họa brand"

      info: "Vector shapes phẳng màu #56f09f trên dark teal hero — hình chữ nhật bo tròn, đường nối, họa tiết key/branch hữu cơ. Không gradient, không shadow, 100% opacity mint."

    footer_section_block:
      vai_trò: "Dark footer column"

      info: "Nền #004737, chữ #fffbec ở 14px, section headings ở 20px, padding rộng 40px, border-radius 0 (full-bleed)."

    icon_glyph:
      vai_trò: "Hệ thống icon UI"

      info: "Outlined 1.5px stroke, kích thước 16–20px, màu Sage Whisper (#99b5af) trên nền kem hoặc #fffbec trên nền teal. Rounded line caps. Biến thể filled màu #56f09f cho active states."

    circular_action_button:
      vai_trò: "Floating utility (download, scroll)"

      info: "Hình tròn 40px, border 1px solid #ccdad7, nền trắng, icon căn giữa, không shadow."

  do_s_and_don_ts:

    do:
      - "Dùng Aeonik weight 400 cho mọi chữ — không bao giờ thêm bold hay light weights; để kích thước và negative tracking tạo hierarchy"
      - "Áp dụng -0.043em letter-spacing ở 56px trở lên; siết chặt đến -0.030em ở 32–36px; nới ra đến +0.020em ở caption sizes 8–12px"
      - "Dùng Forest Ink (#004737) cho hero backgrounds và primary structural borders; không bao giờ dùng nó làm accent nhỏ — nó là màu bề mặt"
      - "Chỉ dùng Mint Pulse (#56f09f) trên filled buttons, active icons, và decorative shapes; sự hiếm hoi của nó chính là hệ thống"
      - "Đặt borders ở 1–2px dùng Forest Ink trên dark sections và Stone Mist (#ccdad7) trên light sections thay vì thêm shadows"
      - "Đặt page background là Cream Canvas (#fffbec) — không bao giờ dùng #ffffff tinh khiết cho base canvas"
      - "Dùng border-radius 40px trên mọi buttons, 19px trên cards, và 9999px trên pill tags"

    don_t:
      - "Đừng thêm font weights khác — monoweight system là đặc trưng"
      - "Đừng dùng Mint Pulse (#56f09f) làm bề mặt lớn — nó mất sức mạnh; giữ nó ở kích thước button và icon"
      - "Đừng thêm drop shadows ngoài rgba(0,0,0,0.04) 0px 3px 2px 0px — tính phẳng là có chủ đích"
      - "Đừng dùng #ffffff tinh khiết làm nền trang — độ ấm của cream là yếu tố chịu lực cho cảm giác botanical"
      - "Đừng áp dụng gradient — hệ thống hoàn toàn là flat color blocks"
      - "Đừng dùng #8f37ff (Iris Spark) làm màu chức năng — nó chỉ mang tính trang trí và nên xuất hiện hiếm hoi"
      - "Đừng căn giữa body copy hay lists — chỉ headlines; body text giữ căn trái để duy trì nhịp đọc"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Page Canvas | `#fffbec` | Nền cơ bản cho mọi light sections — warm cream thay thế trắng tinh |"
    info: "| 1 | Card Lift | `#faf2d5` | Bề mặt card ấm hơn một chút trong cream pages — tách biệt nhẹ mà không cần border cứng |"
    info: "| 2 | Tinted Highlight | `#d4ffe8` | Bề mặt tint mint cho các card được chọn, tag backgrounds, pill highlights |"
    info: "| 3 | Dark Hero Panel | `#004737` | Dark teal sections full-bleed — hero, footer blocks, feature panels |"

  elevation:

    - "**Card:** `rgba(0, 0, 0, 0.04) 0px 3px 2px 0px`"

  imagery:

    info: "Trang web dùng minh họa geometric phẳng thay vì ảnh chụp. Hero có một sơ đồ key-and-branch hữu cơ màu mint đặc (#56f09f) trên nền teal đậm — các hình chữ nhật bo tròn được nối bằng đường dày, gợi lên một cây đang phát triển hoặc mạng lưới. Không có product screenshots, không lifestyle photography, không 3D renders. Iconography là outlined 1.5px stroke theo một phong cách nhất quán. Imagery mang tính trang trí, tạo bầu không khí hơn là nội dung giải thích; brand dựa vào ngôn ngữ màu sắc và hình khối thay vì ảnh chụp."

  layout:

    info: "Mô hình trang là max-width 1200px căn giữa, với các dark teal sections full-bleed đột phá ra ngoài. Hero là một dải teal đậm cao bằng viewport với headline căn giữa và minh họa trang trí. Navigation là thanh trắng trên cùng với logo trái, links trái-giữa, và utility actions (language, book demo, login) căn phải. Sections xen kẽ giữa cream canvas và forest-teal panels, cách nhau bằng khoảng trống dọc rộng 40–80px. Nội dung trong light sections chủ yếu là chữ căn trái trong một cột duy nhất với max width 600–800px. Cards dùng radius 19px và xuất hiện trong grid 1 hoặc 3 cột. Nhịp điệu tổng thể là khoảng thở rộng giữa các sections, mật độ thông tin gọn nhẹ bên trong chúng."

  agent_prompt_guide:

  quick_color_reference:
    - "Page background: #fffbec (Cream Canvas)"
    - "Primary text trên cream: #032019 (Deep Loam)"
    - "Dark hero surface: #004737 (Forest Ink)"
    - "Text trên dark: #fffbec"
    - "Filled button / accent: #56f09f (Mint Pulse)"
    - "Outlined chromatic action: #d4ffe8 border (Mint Mist ghost pill); primary action: #004737 (outlined action border)"

  example_component_prompts:
    - "**Hero Section**: Nền #004737 full-bleed, border-radius 0, padding dọc 120px. Headline căn giữa ở 74px Aeonik weight 400, màu #fffbec, letter-spacing -3.18px. Subtext ở 16px Aeonik weight 400, màu #99b5af. Bên dưới: một bố cục decorative shape phẳng màu mint (#56f09f) — hình chữ nhật bo tròn 40–60px radius, được nối bằng đường 4px dày, 100% opacity, không gradient hay shadow."

    - "**Navigation Bar**: Nền trắng (#ffffff), chiều cao 64px, horizontal flex với container max-width 1200px. Trái: Flecto wordmark bằng Aeonik 20px #004737. Trái-giữa: nav link 'About' ở 14px Aeonik #222222. Nhóm phải: language pill (12px, border 1px #ccdad7, 10px radius), outlined 'Book a Demo' button (border 1px #222222, 40px radius, padding 10px 20px), filled 'Login' button (nền #56f09f, chữ #032019, 40px radius, padding 10px 24px)."

    - "**Feature Card (Light)**: Nền #ffffff, border 1px solid #ccdad7, border-radius 19px, padding 24px. Heading ở 28px Aeonik weight 400, màu #004737, letter-spacing -0.56px. Body ở 14px roobert, màu #032019, line-height 1.40. Không shadow."

    - "**Ghost Pill Tag**: Nền #d4ffe8, không border, border-radius 9999px, padding 6px 14px. Chữ ở 12px Aeonik weight 400, màu #004737, letter-spacing +0.024em."

    - "**Footer Column Block**: Nền #004737 full-bleed, padding 60px trên. Section heading ở 20px Aeonik #fffbec. Links ở 14px roobert #99b5af, row gap 10px."

  similar_brands:

    - "**Linear** — Cùng monoweight sans-serif (Aeonik/Inter ở single weight) với negative letter-spacing trên display sizes và flat color-block hero sections"
    - "**Arc browser** — Cream/warm canvas với một màu accent sống động duy nhất, bề mặt bo tròn, và flat illustration thay vì photography"
    - "**Notion** — Nền kem nhạt, border-radius rộng, và tách biệt bằng border thay vì shadow nặng"
    - "**Mercury** — Dark brand-color hero panels với chữ kem/off-white, bề mặt phẳng, và các khoảnh khắc tương tác single-accent-color"
    - "**Pitch** — Monoweight geometric sans, warm off-white canvas, và soft geometry dẫn dắt bằng border-radius mà không có gradient hay shadow"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-ink: #004737;
          --color-mint-pulse: #56f09f;
          --color-mint-mist: #d4ffe8;
          --color-cream-canvas: #fffbec;
          --color-deep-loam: #032019;
          --color-sage-whisper: #99b5af;
          --color-stone-mist: #ccdad7;
          --color-bone: #faf2d5;
          --color-charcoal: #222222;
          --color-iris-spark: #8f37ff;
        
          /* Typography — Font Families */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roobert: 'roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.1px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.56px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -1.08px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.4px;
          --text-display: 74px;
          --leading-display: 1;
          --tracking-display: -3.18px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-38: 38px;
          --spacing-40: 40px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-80px;
          --card-padding: 12-20px;
          --element-gap: 10-12px;
        
          /* Border Radius */
          --radius-md: 3.36px;
          --radius-md-2: 5.76px;
          --radius-lg: 10px;
          --radius-xl: 14.4px;
          --radius-2xl: 19px;
          --radius-3xl: 25.4118px;
          --radius-3xl-2: 28.8px;
          --radius-3xl-3: 37px;
          --radius-3xl-4: 40px;
          --radius-3xl-5: 46px;
          --radius-full: 60px;
        
          /* Named Radii */
          --radius-cards: 19px;
          --radius-pills: 9999px;
          --radius-buttons: 40px;
          --radius-small-chips: 10px;
          --radius-icon-squares: 5.76px;
          --radius-large-panels: 60px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 3px 2px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #fffbec;
          --surface-card-lift: #faf2d5;
          --surface-tinted-highlight: #d4ffe8;
          --surface-dark-hero-panel: #004737;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-ink: #004737;
          --color-mint-pulse: #56f09f;
          --color-mint-mist: #d4ffe8;
          --color-cream-canvas: #fffbec;
          --color-deep-loam: #032019;
          --color-sage-whisper: #99b5af;
          --color-stone-mist: #ccdad7;
          --color-bone: #faf2d5;
          --color-charcoal: #222222;
          --color-iris-spark: #8f37ff;
        
          /* Typography */
          --font-aeonik: 'Aeonik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-roobert: 'roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.1px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-body-lg: 16px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.56px;
          --text-heading: 36px;
          --leading-heading: 1.15;
          --tracking-heading: -1.08px;
          --text-heading-lg: 56px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.4px;
          --text-display: 74px;
          --leading-display: 1;
          --tracking-display: -3.18px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-19: 19px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-38: 38px;
          --spacing-40: 40px;
        
          /* Border Radius */
          --radius-md: 3.36px;
          --radius-md-2: 5.76px;
          --radius-lg: 10px;
          --radius-xl: 14.4px;
          --radius-2xl: 19px;
          --radius-3xl: 25.4118px;
          --radius-3xl-2: 28.8px;
          --radius-3xl-3: 37px;
          --radius-3xl-4: 40px;
          --radius-3xl-5: 46px;
          --radius-full: 60px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 3px 2px 0px;
        }