nike_com___style_reference:
  info: "> monochrome gallery of athletic performance — tường trắng, sản phẩm như tác phẩm nghệ thuật, chrome tan vào nền."

  theme: "mixed"

  info: "Nike.com vận hành như một gallery đơn sắc lấy sản phẩm làm trung tâm: UI gần như vô hình để ảnh sản phẩm dẫn dắt mọi màn hình. Toàn bộ giao diện được xây dựng từ đen, trắng và ba sắc thái xám — không có màu nhấn, không gradient trang trí, không brand chrome ấm áp. Bản sắc Nike sống trong swoosh và ảnh chụp, không bao giờ xuất hiện trong UI. Typography gọn nhẹ và thực dụng, dựa trên custom Helvetica Now family ở 12-20px với một khoảnh khắc Nike Futura ND cỡ lớn 76px cho hero headlines. Các component tối giản: pill-shaped buttons với radius 30px, flat product cards, hairline borders, gần như không có elevation. Trang web xen kẽ giữa bề mặt sản phẩm trắng tinh và các editorial hero section tối full-bleed, tạo nhịp điệu qua tương phản thay vì trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#111111` | `--color-obsidian` | Neutral tối hỗ trợ cho text, icon và độ tương phản mạnh. Không dùng làm màu CTA chính |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt card, text button trên nền tối, icon strokes — canvas mặc định cho product grids và category sections |"
    info: "| Concrete Gray | `#e5e5e5` | `--color-concrete-gray` | Borders, dividers, hairline separators giữa các grid section, input outlines nhẹ |"
    info: "| Soft Mist | `#f5f5f5` | `--color-soft-mist` | Nền tint nhẹ cho secondary surfaces, nav search field fill, tag backgrounds |"
    info: "| Steel | `#707072` | `--color-steel` | Secondary text, muted helper copy, icon outlines ở kích thước nhỏ, breadcrumb labels, footer link separators |"
    info: "| Faint Gray | `#9e9ea0` | `--color-faint-gray` | Disabled icon strokes, tertiary UI affordances, border ít ưu tiên nhất |"

  tokens___typography:

    helvetica_now_text_medium___helvetica_now_text_medium___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_helvetica_now_text_medium:
      - "**Weights:** 500"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.5, 1.75, 1.86"
      - "**Vai trò:** Helvetica Now Text Medium — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    helvetica_now_text___primary_ui_body_và_interface_text___nav_links__button_labels__card_titles__product_names__footer_lists__tất_cả_running_copy____font_helvetica_now_text:
      - "**Thay thế:** Inter hoặc Helvetica Neue"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 20px"
      - "**Line height:** 1.50, 1.75, 1.86"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Primary UI body và interface text — nav links, button labels, card titles, product names, footer lists, tất cả running copy"

    helvetica_now_display_medium___section_headings__card_category_labels__medium_scale_titles___medium_weight_ở_20_24px_là_signature_của_non_hero_headings_của_nike__không_bao_giờ_bold__luôn_điềm_tĩnh____font_helvetica_now_display_medium:
      - "**Thay thế:** Inter Medium hoặc Helvetica Neue Medium"
      - "**Weights:** 500"
      - "**Sizes:** 20px, 24px"
      - "**Line height:** 1.20, 1.50"
      - "**Vai trò:** Section headings, card category labels, medium-scale titles — medium weight ở 20-24px là signature của non-hero headings của Nike: không bao giờ bold, luôn điềm tĩnh"

    nike_futura_nd___hero_scale_editorial_headlines___dùng_ở_full_display_size_với_line_height_cố_định_1_0_để_tối_đa_tác_động__khoảnh_khắc_duy_nhất_nike_dùng_custom_display_face_thay_vì_helvetica_now____font_nike_futura_nd:
      - "**Thay thế:** Futura PT Medium"
      - "**Weights:** 500"
      - "**Sizes:** 76px"
      - "**Line height:** 1.00"
      - "**Vai trò:** Hero-scale editorial headlines — dùng ở full display size với line-height cố định 1.0 để tối đa tác động; khoảnh khắc duy nhất Nike dùng custom display face thay vì Helvetica Now"

    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, 700"
      - "**Sizes:** 16px"
      - "**Line height:** 1.75"
      - "**Vai trò:** Arial — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    helvetica_neue___helvetica_neue___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_helvetica_neue:
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px"
      - "**Line height:** 1"
      - "**Vai trò:** Helvetica Neue — đượ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 | 12px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.75 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.75 | — | `--text-body` |"
      info: "| subheading | 20px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | — | `--text-heading-sm` |"
      info: "| display | 76px | 1 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| nav | 24px |"
      info: "| tags | 30px |"
      info: "| cards | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 30px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 48px"
      - "**Card padding:** 12px"
      - "**Element gap:** 8px"

  components:

    pill_button_primary:
      vai_trò: "Kiểu button tương tác duy nhất — dùng cho Comprar, Comprar todo và mọi call-to-action"

      info: "Obsidian (#111111) fill, text trắng, Helvetica Now Text Medium 16px/1.5, border-radius 30px (full pill), padding 6px dọc / 8px ngang. Không border, không shadow, không hiệu ứng hover ngoài opacity."

    category_hero_card:
      vai_trò: "Ảnh sản phẩm full-bleed trong grid 2x2 bên dưới hero"

      info: "Container không border, không radius, không shadow. Ảnh sản phẩm phủ kín cạnh (edge-to-edge). Text overlay nằm dưới cùng bên trái màu trắng: category label Helvetica Now Text 16px nhỏ phía trên headline Helvetica Now Display Medium 20-24px. Pill buttons (nền trắng, text đen) nằm dưới headline."

    product_card:
      vai_trò: "Ô sản phẩm riêng lẻ trong grid cuộn 3 cột"

      info: "Nền trắng, không border, không radius, không shadow. Ảnh sản phẩm căn giữa phần trên. Product name label xuất hiện dưới dạng pill trắng nhỏ (Obsidian fill, text trắng, radius 30px, Helvetica Now Text Medium 12-16px) overlay trên hoặc dưới ảnh. Không có giá, mô tả hay CTA bên trong card."

    top_navigation_bar:
      vai_trò: "Header toàn trang với category access, search và account actions"

      bố_cục_hai_tầng: "thanh utility bar mỏng phía trên (search, help, login) bằng Helvetica Now Text 12px Obsidian trên nền trắng, sau đó là main nav row với swoosh Nike bên trái, category links (Novedad, Hombre, Mujer, Niño/a, Deporte, NikeSKiMS) ở giữa bằng Helvetica Now Text Medium 16px, rồi search field + wishlist heart + bag icon bên phải. Search field màu #f5f5f5 với radius 24px. Không có background fill trên nav — nằm trực tiếp trên nền trắng."

    editorial_hero_section:
      vai_trò: "Dark hero full-viewport với một sản phẩm duy nhất và headline cỡ lớn"

      info: "Nền gần đen hoặc gradient tối full-bleed. Sản phẩm được chụp lớn, căn giữa hoặc ba phần tư. Headline bằng Nike Futura ND 76px trắng, line-height 1.0, đặt dưới cùng bên trái. Sub-copy bằng Helvetica Now Text 16px trắng bên dưới. Một pill button trắng duy nhất (fill trắng, text đen) là CTA duy nhất. Không có yếu tố trang trí, không có carousel indicators."

    footer_link_grid:
      vai_trò: "Multi-column resource và help links ở cuối trang"

      nền_trắng__bốn_cột: "Recursos, Ayuda, Empresa, Descuentos de la comunidad. Column headers bằng Helvetica Now Display Medium 16-20px Obsidian bold. Links bằng Helvetica Now Text 16px Steel (#707072) với row-gap 12px. Region selector (España) căn phải trong header row. Không dividers, không background fills."

    search_field:
      vai_trò: "Inline search input trong main nav"

      info: "Nền #f5f5f5, border-radius 24px, không border, placeholder text Helvetica Now Text 16px Obsidian. Search icon màu Steel (#707072) căn trái. Padding compact 6px dọc / 8px ngang."

    icon_system:
      vai_trò: "Utility icons cho wishlist, bag, search và account"

      info: "Stroke-based outlined icons, stroke weight 1.5-2px, Obsidian (#111111) ở trạng thái mặc định, Steel (#707072) cho secondary actions. Không có filled variants, không có multicolor icons. Kích thước 16-20px."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng monochrome palette: Obsidian (#111111), Paper White (#ffffff), Concrete Gray (#e5e5e5), Soft Mist (#f5f5f5) và Steel (#707072). Không có màu nhấn trong UI — ảnh sản phẩm cung cấp mọi chromatic interest."
      - "Đặt tất cả interactive buttons với border-radius 30px để tạo hình pill; đây là button geometry duy nhất trong hệ thống."
      - "Dùng Helvetica Now Text Medium 16px làm mặc định cho nav links, button labels và product names; không bao giờ đặt body text trên 20px hoặc dưới 12px."
      - "Để ảnh sản phẩm phủ kín container edge-to-edge với zero border-radius và zero border — hình ảnh chính là thiết kế, không phải yếu tố đóng khung."
      - "Dùng Nike Futura ND 76px riêng cho hero headlines với line-height cố định 1.0; heading nhỏ hơn dùng Helvetica Now Display Medium 20-24px."
      - "Phân cách surface layers bằng Concrete Gray (#e5e5e5) hairline borders hoặc whitespace — không bao giờ dùng shadow hoặc background màu."
      - "Giữ nav trong suốt trên nền trắng: không background fill, không shadow, không sticky blur effect."

    không_nên_làm:
      - "Không đưa bất kỳ màu nhấn hoặc brand color nào vào UI — không có fill xanh, đỏ, xanh lá hay vàng trên buttons, links, badges hay icons. Màu sắc duy nhất trong giao diện đến từ ảnh sản phẩm."
      - "Không dùng bold hoặc semibold weights; type system của Nike chỉ gồm 400 và 500. Weight nặng hơn phá vỡ giọng điệu điềm tĩnh, kiềm chế."
      - "Không thêm box-shadows vào cards, buttons hoặc nav elements. Elevation trong hệ thống này được truyền tải qua sự xen kẽ section tối/sáng, không phải shadow."
      - "Không bo góc card corners. Product và category cards là các tile full-bleed cạnh sắc — yếu tố bo tròn duy nhất là buttons (30px), search field (24px) và top utility bar (24px)."
      - "Không dùng nhiều hơn một CTA color treatment mỗi trang. Pill button luôn là Obsidian trên nền trắng hoặc trắng trên Obsidian — không bao giờ có biến thể thứ ba."
      - "Không thêm decorative gradients, patterns hoặc background imagery phía sau text. Mọi section hoặc là trắng tinh hoặc là ảnh sản phẩm full-bleed."
      - "Không dùng display typography dưới 20px hoặc trên 76px. Nike Futura ND chỉ sống ở hero scale; Helvetica Now Display xử lý mọi thứ ở giữa."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper White | `#ffffff` | Nền trang mặc định cho product grids, category sections và footer |"
    info: "| 2 | Soft Mist | `#f5f5f5` | Search field fill, nền section tint nhẹ, tag pill backgrounds |"
    info: "| 3 | Concrete Gray | `#e5e5e5` | Borders, dividers, separator lines giữa các grid section |"

  elevation:

    info: "Design system của Nike cố tình tránh hoàn toàn box-shadows. Elevation được truyền tải qua ba cơ chế duy nhất: (1) sự xen kẽ rõ rệt giữa editorial hero section tối full-bleed và product grids trắng, (2) hairline Concrete Gray (#e5e5e5) borders giữa các section, và (3) whitespace rộng rãi. Thẩm mỹ phẳng giữ sự tập trung vào ảnh sản phẩm và củng cố ẩn dụ 'gallery' — không có gì trong UI đổ bóng lên sản phẩm."

  imagery:

    info: "Nhiếp ảnh là yếu tố thị giác chủ đạo và mang toàn bộ brand identity. Hệ thống dùng ảnh sản phẩm full-bleed độ phân giải cao: giày thể thao được chụp cô lập trên nền tối hoặc gradient, crop đủ chặt để lấp đầy khung hình mà không có bối cảnh lifestyle. Lifestyle imagery xuất hiện trong category tiles thể hiện chân và cẳng chân vận động viên đang chuyển động. Xử lý ảnh có độ tương phản cao và màu bão hòa — giày đỏ trên nền đen, neon accents trên đế trắng, ánh sáng ấm và lạnh để làm nổi bật chất liệu. Không có illustration, không abstract graphics, không 3D renders. Ảnh luôn có cạnh sắc (không bo góc trên photo containers), luôn full-bleed trong tile của chúng, và luôn đi kèm text overlay tối thiểu. Iconography hoàn toàn chức năng: outlined stroke icons cho search, wishlist, bag và account màu Obsidian hoặc Steel."

  layout:

    info: "Trang web theo nhịp editorial full-bleed: hero tối ấn tượng chiều cao viewport với một sản phẩm duy nhất và headline cỡ lớn, tiếp theo là grid 2x2 category tiles full-bleed, rồi product card grid cuộn ngang 3 cột, rồi footer multi-column dày đặc. Tất cả content blocks trải dài toàn bộ chiều rộng viewport không có max-width container; max-width 1440px chỉ áp dụng cho nav và footer link grid. Chuyển tiếp section rõ rệt: hero đen → category grid trắng → product grid trắng → footer trắng, với Concrete Gray hairline borders là đường nối thị giác duy nhất. Nav là thanh hai tầng tối giản (utility links trên, main categories giữa) không có sticky behavior, không background fill, không shadow. Content density compact trong product grids (card padding chặt) và rộng rãi trong hero (full viewport)."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #111111 (Obsidian)"
    - "background: #ffffff (Paper White)"
    - "border: #e5e5e5 (Concrete Gray)"
    - "accent: không có — không có UI accent color; mọi màu sắc đến từ ảnh sản phẩm"
    - "secondary text: #707072 (Steel)"
    - "primary action: không có màu CTA riêng biệt"

    example_component_prompts:

    - "Tạo một dark hero full-bleed: nền gần đen (#111111) lấp đầy viewport. Ảnh sản phẩm giày chạy bộ màu đỏ căn giữa, góc ba phần tư, chiếm 60% chiều rộng. Text overlay dưới cùng bên trái: Nike Futura ND weight 500 ở 76px, trắng, line-height 1.0, letter-spacing normal, text 'POTENCIA TOTAL'. Bên dưới là subhead Helvetica Now Text 16px trắng, sau đó pill button (fill trắng, text Obsidian, radius 30px, padding 6px dọc / 8px ngang)."

    - "Tạo grid category card 2x2 bên dưới hero: bốn tile full-bleed, không gap giữa các tile, không border-radius, không border. Mỗi tile lấp đầy 50% chiều rộng viewport và 50vh. Overlay dưới cùng bên trái trên mỗi tile: category label Helvetica Now Text 16px trắng phía trên headline Helvetica Now Display Medium 20px trắng. Hai pill buttons (fill trắng, text Obsidian, radius 30px) xếp chồng bên dưới headline."

    - "Tạo product card row cuộn ngang 3 cột: nền trắng, ba card trong một hàng, mỗi card rộng 33%, không border, không radius, không shadow. Ảnh sản phẩm căn giữa trong card, nền trắng. Pill label nhỏ ở cuối mỗi ảnh: Obsidian fill, text trắng, Helvetica Now Text Medium 12px, radius 30px, padding 6px. Không có giá, không mô tả bên trong card."

    - "Tạo top navigation bar: nền trắng, không fill, không shadow, không border. Bên trái: Nike swoosh SVG màu Obsidian. Giữa: sáu nav links bằng Helvetica Now Text Medium 16px Obsidian với gap 24px. Bên phải: search field Soft Mist (#f5f5f5) với radius 24px, padding 6px dọc / 8px ngang, placeholder Helvetica Now Text 16px Obsidian, search icon màu Steel (#707072), sau đó wishlist heart icon và bag icon màu Obsidian."

    - "Tạo footer link grid: nền trắng, bốn cột bằng nhau. Column headers bằng Helvetica Now Display Medium 16-20px Obsidian. Links bằng Helvetica Now Text 16px Steel (#707072) với row-gap 12px. Region selector 'España' căn phải trong header row. Không dividers, không background fills, không social icons."

  similar_brands:

    - "**Apple** — Cả hai site đều dùng monochrome UI palette (chỉ đen/trắng/xám) với zero accent color, để ảnh sản phẩm full-bleed mang toàn bộ trọng lượng chromatic và cảm xúc"
    - "**Allbirds** — Cùng thẩm mỹ card phẳng với ảnh sản phẩm full-bleed cạnh sắc và chrome tối giản — sản phẩm là hero, UI vô hình"
    - "**Adidas** — Cấu trúc editorial giống hệt: dark hero full-bleed với headline cỡ lớn, tiếp theo grid tile category 2x2, rồi product card row 3 cột với pill labels"
    - "**SSENSE** — Cùng cách tiếp cận editorial e-commerce tương phản cao với whitespace rộng rãi, navigation tối giản, và hình ảnh sản phẩm được xem như nghệ thuật trên tường gallery trắng"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #111111;
          --color-paper-white: #ffffff;
          --color-concrete-gray: #e5e5e5;
          --color-soft-mist: #f5f5f5;
          --color-steel: #707072;
          --color-faint-gray: #9e9ea0;
        
          /* Typography — Font Families */
          --font-helvetica-now-text-medium: 'Helvetica Now Text Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-now-display-medium: 'Helvetica Now Display Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nike-futura-nd: 'Nike Futura ND', 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;
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.75;
          --text-body: 16px;
          --leading-body: 1.75;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-display: 76px;
          --leading-display: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-48: 48px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 48px;
          --card-padding: 12px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
        
          /* Named Radii */
          --radius-nav: 24px;
          --radius-tags: 30px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 30px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-soft-mist: #f5f5f5;
          --surface-concrete-gray: #e5e5e5;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #111111;
          --color-paper-white: #ffffff;
          --color-concrete-gray: #e5e5e5;
          --color-soft-mist: #f5f5f5;
          --color-steel: #707072;
          --color-faint-gray: #9e9ea0;
        
          /* Typography */
          --font-helvetica-now-text-medium: 'Helvetica Now Text Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica-now-display-medium: 'Helvetica Now Display Medium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nike-futura-nd: 'Nike Futura ND', 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;
          --font-helvetica-neue: 'Helvetica Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body-sm: 14px;
          --leading-body-sm: 1.75;
          --text-body: 16px;
          --leading-body: 1.75;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --text-display: 76px;
          --leading-display: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-48: 48px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 30px;
        }