eclipse___style_reference:
  info: "> Cel-shaded neon comic strip — nghĩ tới bảng hiệu kiểu Akira nhưng được render thành giao diện tài chính."

  theme: "mixed"

  info: "Eclipse vận hành trên nền canvas đơn sắc với một xung neon xanh lục duy nhất — ngữ pháp thị giác của nó gần với cel anime thập niên 90 hơn là một blockchain dashboard. Headline dùng GT Alpina Condensed ở hairline weights (100–200), nét serif mỏng nhất có thể nhưng vẫn đọc được thành chữ, kết hợp với Barlow Condensed cho UI chrome gọn nhẹ. Token màu duy nhất (#a1fea0) hoạt động như một chiếc bút dạ quang tô lên bản phác thảo mực trên giấy: border, button fill, hình minh họa đám mây, và hiệu ứng glow đều dùng chung một màu xanh tươi đó trên nền đen và trắng tuyệt đối. Bề mặt phẳng — không shadow, không gradient, không thủ thuật tạo chiều sâu. Button là dạng pill dày (25px radius), label là chữ in hoa kiểu máy chữ có tracking, illustration đảm nhận không khí còn type làm công việc cấu trúc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Eclipse Green | `#a1fea0` | `--color-eclipse-green` | Primary action fill, active nav state, decorative border accents, cloud và glow illustration fills, investor-card spotlight — token màu duy nhất trong hệ thống, được dùng tiết kiệm để mỗi lần xuất hiện đều có cảm giác như một nét bút dạ quang |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Body và heading text, hairline borders trên card/badge/button, footer rules, outlined button stroke — màu trung tính chủ đạo mang tất cả các đường nét cấu trúc |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces, button text trên nền tối, nav backgrounds, image backdrop — lớp nền cơ bản mà mọi thứ nằm trên đó |"

  tokens___typography:

    barlow_condensed___ui_chrome__nav_links__buttons__badges__secondary_headlines__marquee_strips__tỷ_lệ_condensed_giữ_cho_copy_ngang_gọn_bên_trong_pill_buttons_và_ticker_bars__700_để_nhấn_mạnh__500_cho_nav__400_cho_body_ui__letter_spacing_nới_ra_trên_label_chữ_in_hoa_nhỏ_0_1_0_2em_và_siết_lại_trên_display_size_lớn__0_02_đến__0_03em_____font_barlow_condensed:
      - "**Substitute:** Barlow Condensed (Google Fonts native)"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 12px, 16px, 32px, 44px, 48px, 80px, 96px, 120px, 182px"
      - "**Line height:** 0.83–1.60"
      - "**Letter spacing:** 0.1em đến 0.2em cho small caps labels, -0.02em đến -0.03em cho large display"
      - "**Vai trò:** UI chrome, nav links, buttons, badges, secondary headlines, marquee strips. Tỷ lệ condensed giữ cho copy ngang gọn bên trong pill buttons và ticker bars. 700 để nhấn mạnh, 500 cho nav, 400 cho body UI. Letter-spacing nới ra trên label chữ in hoa nhỏ (0.1–0.2em) và siết lại trên display size lớn (-0.02 đến -0.03em)."

    gt_alpina_condensed___display_và_hero_headlines___giọng_nói_đặc_trưng__hairline_weights_100_200_đẩy_serif_đến_gần_dạng_wireframe_của_glyph__khiến_chữ_có_cảm_giác_được_đóng_dấu_hơn_là_được_sắp_chữ__letter_spacing_siết_lại_khi_size_tăng___0_01em_ở_24px_lên_đến__0_06em_ở_masthead_562px__substitutes__cormorant_garamond_condensed_light__eb_garamond_200_____font_gt_alpina_condensed:
      - "**Substitute:** Cormorant Garamond Condensed Light"
      - "**Weights:** 100, 200"
      - "**Sizes:** 24px, 33px, 44px, 46px, 61px, 64px, 88px, 120px, 562px"
      - "**Line height:** 0.80–1.20 (tight, display-driven)"
      - "**Letter spacing:** -0.01em ở 24px, -0.03em ở 44px, -0.04em ở 64px, -0.06em ở 88px+"
      - "**Vai trò:** Display và hero headlines — giọng nói đặc trưng. Hairline weights 100–200 đẩy serif đến gần dạng wireframe của glyph, khiến chữ có cảm giác được đóng dấu hơn là được sắp chữ. Letter-spacing siết lại khi size tăng: -0.01em ở 24px lên đến -0.06em ở masthead 562px. Substitutes: Cormorant Garamond Condensed Light, EB Garamond 200."

    atlas_typewriter___eyebrow_labels__section_tags__small_body_annotations___giọng__máy_làm_nhãn__luôn_đặt_ở_uppercase_với_0_2em_tracking__hoạt_động_như_dấu_thời_gian_hoặc_chương_mục__substitutes__ibm_plex_mono__space_mono__jetbrains_mono_____font_atlas_typewriter:
      - "**Substitute:** Space Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 16px, 18px"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** 0.2em (nhất quán qua các size)"
      - "**Vai trò:** Eyebrow labels, section tags, small body annotations — giọng 'máy làm nhãn'. Luôn đặt ở uppercase với 0.2em tracking, hoạt động như dấu thời gian hoặc chương mục. Substitutes: IBM Plex Mono, Space Mono, JetBrains Mono."

    math___math___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_math:
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.2"
      - "**Vai trò:** math — đượ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ò | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | 0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.6 | 0.2px | `--text-body` |"
      info: "| body-lg | 18px | 1.56 | 0.2px | `--text-body-lg` |"
      info: "| subheading | 32px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 48px | 1 | -0.03px | `--text-heading-sm` |"
      info: "| heading | 80px | 0.9 | -0.04px | `--text-heading` |"
      info: "| heading-lg | 120px | 0.83 | -0.06px | `--text-heading-lg` |"
      info: "| display | 182px | 0.8 | -0.06px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 25px |"
      info: "| pills | 100px |"
      info: "| badges | 25px |"
      info: "| buttons | 25px |"

    layout:

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

  components:

    primary_pill_button_eclipse_green_fill:
      vai_trò: "Main CTA — 'Start Building', 'Build on Eclipse'"

      info: "Nền fill #a1fea0, chữ Ink Black. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Border 1px solid Ink Black. Radius 25px (pill). Không shadow. Khi hover, nền đậm hơn và border dày lên 2px."

    secondary_pill_button_black_outline:
      vai_trò: "Companion CTA — 'Bridge to Eclipse'"

      info: "Nền trắng, chữ Ink Black và border 1px. Barlow Condensed 500, 16px, uppercase, 0.1em tracking. Padding 10px 24px. Radius 25px. Icon mũi tên trailing (→) màu Ink Black. Đặt cạnh primary green button để tạo hệ thống phân cấp hai bước 'mềm hơn / mạnh hơn'."

    top_navigation_bar:
      vai_trò: "Site-wide navigation"

      info: "Nền trắng, trong suốt cho đến khi scroll. Bên trái: text nav links bằng Barlow Condensed 500, 16px, uppercase (ABOUT, BUILDERS, CAREERS, ECOSYSTEM) kèm caret dropdown. Giữa: Eclipse wordmark bằng Barlow Condensed 700. Phải: cụm icon social (Instagram, YouTube, Discord, X) + pill 'Start Building' CTA radius 100px nền Ink Black chữ Paper White."

    hero_display_headline:
      vai_trò: "Above-the-fold brand statement"

      info: "Bố cục ba dòng xếp chồng. Dòng 1 'SOLANA' bằng GT Alpina Condensed 200, 120–182px, line-height 0.80, -0.06em tracking, Paper White trên nền Ink Black. Dòng 2 'ON' ở 80px regular, đóng vai trò connector. Dòng 3 'ETHEREUM' giống dòng 1. Eyebrow 'ECLIPSE IS' bằng Atlas Typewriter 12px, 0.2em tracking, nằm phía trên. Căn giữa. Không drop cap, không trang trí — type tự làm công việc của nó."

    section_eyebrow_label:
      vai_trò: "Section identifier phía trên headline"

      info: "Atlas Typewriter 12px, weight 400, uppercase, 0.2em tracking, Ink Black. Căn giữa. Khoảng cách 16px đến headline bên dưới. Ví dụ: 'ECLIPSE IS', 'BACKED BY', 'ETHEREUM'S FIRST SVM L2'."

    investor_spotlight_card:
      vai_trò: "Backer logo grid item với trạng thái highlight"

      info: "Card trắng, border 1px Ink Black, radius 25px, padding 32px. Tên serif (ví dụ 'Portal Ventures') bằng GT Alpina Condensed 100–200, 24–33px, căn giữa. Trạng thái active: fill #a1fea0 thay thế nền trắng, chữ vẫn Ink Black, và một soft green glow halo kéo dài ~20px ra ngoài mép card (một green ellipse mờ phía sau card). Trạng thái inactive: trắng tinh."

    full_bleed_hero_illustration_panel:
      vai_trò: "Animated hero visual + video entry point"

      info: "Nền Ink Black, vòng trăng lưỡi liềm Paper White (Eclipse), hình minh họa đám mây xanh ở chân, và một nhân vật/phương tiện minh họa ở 1/3 dưới. Nút play căn giữa: vòng tròn 80px, border 1px Paper White, không fill, kèm icon tam giác Paper White. Không drop shadow trên illustration — chiều sâu đến từ lớp mây xanh nằm dưới nhân vật."

    marquee_strip:
      vai_trò: "Ticker banner các value props"

      info: "Một dòng ngang duy nhất cuộn edge-to-edge. Barlow Condensed 700, 48–80px, uppercase, Ink Black trên Paper White. Các mục cách nhau bằng em-dashes và khoảng cách 32px. Không thay đổi màu nền — dựa vào weight và scale để nhấn mạnh."

    footer___social_footer:
      vai_trò: "Bottom anchor và social links"

      info: "Dải nền Ink Black. Chữ và icon trắng. Barlow Condensed 500, 16px, uppercase cho danh sách link. Social icons 24px, stroke 1px, Paper White. Top padding rộng 80px."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng #a1fea0 cho primary CTAs, active states, và investor-card spotlight — không bao giờ dùng làm body text color hoặc page background."
      - "Đặt display headlines bằng GT Alpina Condensed ở weight 100 hoặc 200, không phải 300+; hairline serif là signature."
      - "Áp dụng radius 25px cho tất cả buttons, badges, và cards, và radius 100px chỉ cho nav-pill CTA."
      - "Đặt tất cả eyebrows và section labels bằng Atlas Typewriter, uppercase, 0.2em tracking, 12px."
      - "Giữ border #000000 ở 1px; chỉ dày lên 2px khi hover trên buttons."
      - "Phân cách các section với ít nhất 80px khoảng cách dọc; thiết kế thở giữa các dải."
      - "Đặt primary green button cạnh secondary button outline đen trong mọi nhóm CTA."

    don_t:
      - "Đừng thêm bất kỳ màu nào khác ngoài #a1fea0, #000000, và #ffffff — hệ thống cố tình là bichromatic-plus-one."
      - "Đừng dùng GT Alpina Condensed trên weight 200 — weight nặng hơn phá vỡ hairline signature."
      - "Đừng áp drop shadows cho cards, buttons, hoặc illustrations; ngôn ngữ ink-outline phẳng là phong cách."
      - "Đừng đặt body copy bằng typewriter face; chỉ dành Atlas Typewriter cho labels và eyebrows ở 12–18px."
      - "Đừng dùng radius 4px, 8px, hoặc 12px — tất cả góc phải là 25px hoặc 100px."
      - "Đừng đặt chữ xanh trên nền trắng hoặc chữ trắng trên nền xanh ở body sizes; tỷ lệ tương phản 1.2:1 không đạt accessibility."
      - "Đừng phá vỡ cột 1200px của page với nội dung edge-bleed; chỉ hero và footer được phép tràn ra ngoài."

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 1 | Paper White | `#ffffff` | Default page và card canvas |"
    info: "| 2 | Eclipse Green | `#a1fea0` | Accent wash — investor spotlight, decorative blob, active highlight |"
    info: "| 3 | Ink Black | `#000000` | Hero và footer inversion band |"

  elevation:

    - "**Investor Card (active glow):** `0 0 40px 10px rgba(161, 254, 160, 0.5)`"

  imagery:

    info: "Illustration-first, phong cách anime/cel-shaded với đường viền mực dày và màu fill phẳng. Nhân vật (người cưỡi bò trên xe máy, xe turbo) được vẽ theo phong cách anime thập niên 90. Môi trường kết hợp không gian âm đen tuyệt đối với các khối mây xanh phẳng — không gradient, không atmospheric perspective. Nhiếp ảnh vắng mặt; product UI được thể hiện qua illustration và video. Icons là line icons stroke tối giản, mono (Ink Black hoặc Paper White), weight 1px, không bao giờ filled. Imagery được giới hạn — không bao giờ full-bleed ngoại trừ bên trong hero band — và luôn nằm trên một trường màu phẳng, không bao giờ được ghép lên ảnh."

  layout:

    info: "Cột căn giữa max-width 1200px với dark hero full-bleed ở trên cùng. Hero là một vertical stack thuần túy: eyebrow label → stacked display headline → dual pill CTAs → illustration neo ở giữa-dưới cùng. Bên dưới hero, page xen kẽ giữa các section Paper White (investor grid, feature blocks) và các marquee strips mỏng, với khoảng cách section 80px rộng rãi. Investor grid là bố cục 3 cột thu gọn theo chiều dọc trên màn hình hẹp. Footer là dải Ink Black full-bleed. Navigation là thanh trắng cố định với wordmark căn giữa và cụm social + CTA căn phải."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "accent / decorative: #a1fea0"
    - "primary action: #a1fea0 (filled action)"
    - "inversion band: #000000 background, #ffffff text"

    info: "Example Component Prompts"
    - "Hero Display Headline: nền #000000 full-bleed. Eyebrow 'ECLIPSE IS' bằng Atlas Typewriter 12px, 0.2em tracking, #ffffff, căn giữa. Sau đó là headline ba dòng xếp chồng: 'SOLANA' / 'ON' / 'ETHEREUM' bằng GT Alpina Condensed weight 200, 120px, line-height 0.80, -0.06em letter-spacing, #ffffff, căn giữa. Bên dưới, khoảng cách 16px, sau đó hai pill buttons cạnh nhau: outlined black 'Bridge to Eclipse →' và filled #a1fea0 'Build on Eclipse', cả hai radius 25px, Barlow Condensed 500, 16px, uppercase, 0.1em tracking, padding 10px 24px, border 1px solid #000000."

    - "Investor Spotlight Card: parent max-width 1200px, grid 3 cột. Mỗi card padding 32px, border 1px solid #000000, radius 25px, nền #ffffff. Tên bằng GT Alpina Condensed 200, 24px, căn giữa. Card active đổi nền sang #a1fea0 và thêm green outer glow 40px (#a1fea0 ở alpha 50%). Eyebrow 'BACKED BY' / 'GREAT INVESTORS & ANGELS' bằng Atlas Typewriter 12px phía trên grid."

    - "Marquee Strip: dải full-bleed, cao 80px, nền #ffffff. Copy một dòng cuộn bằng Barlow Condensed 700, 48px, uppercase, #000000, với dấu em-dash ngăn cách và khoảng cách 32px giữa các mục (ví dụ 'FASTEST LAYER 2 — POWERED BY SVM — ETHEREUM'S FASTEST LAYER 2')."

    - "Footer Band: nền #000000 full-bleed, top padding 80px. Layout hai cột bên trong, max-width 1200px, chữ #ffffff. Trái: danh sách link Barlow Condensed 500, 16px, uppercase. Phải: hàng social icons 24px, stroke 1px, #ffffff."

    - "Section Header Pair: một eyebrow Atlas Typewriter 12px (#000000, 0.2em tracking, căn giữa) với khoảng cách 16px, sau đó heading Barlow Condensed 700, 48px bên dưới — ghép cặp này bất cứ khi nào section cần tiêu đề mà không dùng display serif."

  similar_brands:

    - "**Berachain** — Cùng kỷ luật mono-plus-one-accent với một màu thương hiệu tươi sáng duy nhất trên nền đen/trắng, cộng với pill-shaped CTAs và display type condensed nặng."
    - "**Blur (blur.io)** — Cel-illustration kết hợp crypto dashboard — bề mặt đen/trắng phẳng với một neon token, chữ in hoa letter-spacing chặt, và pill buttons."
    - "**Phantom Wallet** — Dark hero inversion trên nền site trắng, cặp pill CTA outlined-vs-filled, và một accent bão hòa duy nhất dùng làm spotlight chứ không phải chrome."
    - "**Azuki** — Ngôn ngữ illustration anime/cel-shaded áp dụng cho thương hiệu công nghệ, với display type siêu condensed và bề mặt ink-on-white tương phản cao."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-eclipse-green: #a1fea0;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
        
          /* Typography — Font Families */
          --font-barlow-condensed: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-atlas-typewriter: 'Atlas Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-math: 'math', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: 0.2px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: 0.2px;
          --text-subheading: 32px;
          --leading-subheading: 1.2;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.03px;
          --text-heading: 80px;
          --leading-heading: 0.9;
          --tracking-heading: -0.04px;
          --text-heading-lg: 120px;
          --leading-heading-lg: 0.83;
          --tracking-heading-lg: -0.06px;
          --text-display: 182px;
          --leading-display: 0.8;
          --tracking-display: -0.06px;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 10-16px;
        
          /* Border Radius */
          --radius-3xl: 25px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 25px;
          --radius-pills: 100px;
          --radius-badges: 25px;
          --radius-buttons: 25px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-eclipse-green: #a1fea0;
          --surface-ink-black: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-eclipse-green: #a1fea0;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
        
          /* Typography */
          --font-barlow-condensed: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-alpina-condensed: 'GT Alpina Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-atlas-typewriter: 'Atlas Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-math: 'math', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 16px;
          --leading-body: 1.6;
          --tracking-body: 0.2px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: 0.2px;
          --text-subheading: 32px;
          --leading-subheading: 1.2;
          --text-heading-sm: 48px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.03px;
          --text-heading: 80px;
          --leading-heading: 0.9;
          --tracking-heading: -0.04px;
          --text-heading-lg: 120px;
          --leading-heading-lg: 0.83;
          --tracking-heading-lg: -0.06px;
          --text-display: 182px;
          --leading-display: 0.8;
          --tracking-display: -0.06px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-52: 52px;
          --spacing-60: 60px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-3xl: 25px;
          --radius-full: 100px;
        }