square___style_reference:
  info: "> tín hiệu xanh trên thép trắng."

  theme: "mixed"

  info: "Hệ thống thiết kế của Square là một ngôn ngữ fintech tự tin trên nền canvas trắng, để một màu xanh duy nhất làm mọi nhiệm vụ. Giao diện gần như đơn sắc: bề mặt trắng, nền page xám nhẹ, chữ gần đen, và một màu Signal Blue (#006aff) duy nhất tạo điểm nhấn cho CTA, link và form đăng ký. Headline dùng một custom display face hình học ở kích thước gần display (50–86px) với line-height dày và negative tracking, tạo cảm giác uy quyền kiềm chế thay vì la hét. Các component phẳng và tối giản — button filled bo góc 4px, biến thể ghost, feature card nền xanh nhạt với ảnh bo góc 24px, và một dải footer tối màu sắc cạnh (hard-edged) duy nhất đảo ngược bảng màu thành đen với chữ trắng và cùng một màu xanh cho nút gửi. Elevation gần như không tồn tại: shadow 1px 16% đen trên button là độ sâu duy nhất hệ thống cho phép."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Signal Blue | `#006aff` | `--color-signal-blue` | Primary CTA, link text, nav active, nút submit, icon accent — giọng màu duy nhất trong một hệ thống gần như không màu |"
    info: "| Carbon | `#1a1a1a` | `--color-carbon` | Primary text, heading fill, dark icon stroke, nav label — gần đen nhưng đọc nhẹ hơn đen tuyền trên nền trắng |"
    info: "| Slate Gray | `#737373` | `--color-slate-gray` | Secondary text, helper copy, nav muted, placeholder tone |"
    info: "| Platinum | `#d9d9d9` | `--color-platinum` | Hairline border, input outline, divider mờ giữa các section |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Disabled text, metadata cấp ba, đường cấu trúc rất nhạt |"
    info: "| Cloud | `#f2f2f2` | `--color-cloud` | Page canvas bên dưới card trắng, nền section mềm, surface muted |"
    info: "| Paper | `#ffffff` | `--color-paper` | Bề mặt hỗ trợ sáng cho nền nhẹ và phân cách section. Không dùng làm màu CTA chính |"
    info: "| Obsidian | `#030303` | `--color-obsidian` | Nền footer tối, bề mặt inverted — điểm phá vỡ duy nhất khỏi màu trắng |"
    info: "| True Black | `#000000` | `--color-true-black` | Icon fill, graphic element đơn sắc, SVG illustration stroke |"

  tokens___typography:

    square_sans_display_vf___headline_và_display_copy_cỡ_lớn_ở_32_86px__việc_dùng_display_weight_regular_400_ở_kích_thước_display_là_lựa_chọn_đặc_trưng___hầu_hết_fintech_dùng_600_700_ở_scale_này__square_dùng_weight_nhẹ_hơn_với_negative_tracking_để_tạo_cảm_giác_kiến_trúc_thay_vì_hung_hăng__substitute_hệ_thống__inter_tight_hoặc_manrope_với_tracking_tương_ứng_____font_square_sans_display_vf:
      - "**Substitute:** Inter Tight"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16, 20, 24, 32, 50, 62, 86"
      - "**Line height:** 0.97, 1.10, 1.12, 1.19, 1.25, 1.30, 1.33, 1.42, 1.50"
      - "**Letter spacing:** -0.0120em"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Vai trò:** Headline và display copy cỡ lớn ở 32–86px; việc dùng display weight (regular 400) ở kích thước display là lựa chọn đặc trưng — hầu hết fintech dùng 600–700 ở scale này, Square dùng weight nhẹ hơn với negative tracking để tạo cảm giác kiến trúc thay vì hung hăng. Substitute hệ thống: Inter Tight hoặc Manrope với tracking tương ứng."

    square_sans_text_vf___body_copy__nav_label__footer_text__card_description_ở_12_16px_với_line_height_thoải_mái_1_5_1_75_để_dễ_đọc__cùng_họ_font_với_display_face_giữ_cho_giọng_văn_bản_liên_tục___chỉ_khác_về_kích_thước_và_tracking__substitute_hệ_thống__inter_hoặc_s_hne_____font_square_sans_text_vf:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500"
      - "**Sizes:** 12, 14, 16"
      - "**Line height:** 1.38, 1.43, 1.50, 1.71, 1.75, 2.00, 2.63"
      - "**Vai trò:** Body copy, nav label, footer text, card description ở 12–16px với line-height thoải mái 1.5–1.75 để dễ đọc. Cùng họ font với display face giữ cho giọng văn bản liên tục — chỉ khác về kích thước và tracking. Substitute hệ thống: Inter hoặc Söhne."

    cash_sans___button_label_và_in_line_cta_microcopy_ở_18px_medium___một_text_face_riêng_biệt_cho_hành_động_để_chúng_đọc_như_các_artifact_có_thể_tap__tách_biệt_khỏi_body_copy__substitute__cùng_họ_với_text_ở_weight_500__hoặc_dm_sans_medium_____font_cash_sans:
      - "**Substitute:** DM Sans Medium"
      - "**Weights:** 500"
      - "**Sizes:** 18"
      - "**Line height:** 1.00, 1.50"
      - "**Vai trò:** Button label và in-line CTA microcopy ở 18px medium — một text face riêng biệt cho hành động để chúng đọc như các artifact có thể tap, tách biệt khỏi body copy. Substitute: cùng họ với text ở weight 500, hoặc DM Sans Medium."

    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.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.25 | -0.29px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.19 | -0.38px | `--text-heading` |"
      info: "| heading-lg | 50px | 1.1 | -0.6px | `--text-heading-lg` |"
      info: "| display | 62px | 1 | -0.74px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|--------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 47 | 47px | `--spacing-47` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 113 | 113px | `--spacing-113` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|--------|"
      info: "| icons | 32px |"
      info: "| images | 24px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| pillButtons | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|-----|--------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.16) 0px 1px 4px 0px` | `--shadow-sm` |"

    layout:

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

  components:

    primary_filled_button:
      vai_trò: "Main CTA trên hero, feature card, footer form"

      info: "Nền Signal Blue (#006aff) đặc, chữ trắng Cash Sans 18px medium, bo góc 4px, padding dọc 10px × ngang 15px. Mang một shadow nhẹ rgba(0,0,0,0.16) 0 1px 4px — elevation duy nhất hệ thống cấp cho bất kỳ component nào. Không đổi màu hover, không border."

    ghost_outlined_button:
      vai_trò: "Secondary action đi kèm primary"

      info: "Fill trong suốt, border 1px Signal Blue (#006aff), chữ Signal Blue Cash Sans 18px, bo góc 4px, padding 10px × 15px. Luôn ghép ngang với primary filled button trên cùng baseline."

    header_nav:
      vai_trò: "Site navigation cấp cao nhất"

      info: "Nền trắng, logo trái (Carbon mark + Square wordmark), nav link Square Sans Text 14px Carbon, secondary action căn phải. Không border dưới nhìn thấy; nằm trên nền trắng và đọc qua whitespace thay vì đường kẻ chia."

    hero_headline_block:
      vai_trò: "Thông điệp chính phía trên fold"

      info: "Square Sans Display 62px / 1.0 line-height, Carbon (#1a1a1a), tracking -0.012em. Sub-copy Square Sans Text 16px Slate Gray (#737373) cách ~18px bên dưới. Hàng hai button với gap 10px. Căn trái, ghép với ảnh editorial bo góc 24px bên phải."

    feature_card:
      vai_trò: "Tổng quan giải pháp ba cột"

      info: "Card trắng với nền xanh rất nhạt (Signal Blue ở ~8% opacity), bo góc ảnh 24px cho visual chính, padding trong 24px, gap 20px giữa ảnh và headline. Title Square Sans Display 24px Carbon, body Square Sans Text 16px Carbon/Slate, link cuối Signal Blue 16px với mũi tên →."

    inverted_footer_section:
      vai_trò: "Email capture và contact band cuối trang"

      info: "Nền Obsidian (#030303) full-bleed, headline trắng Square Sans Display 50px, hàng link Signal Blue ngay bên dưới. Email input là trường trắng bo góc 4px với chữ Carbon và nút 'Enviar' Signal Blue filled gắn kèm. Bộ ba icon trắng (mail, paper plane, smiley) kích thước render 32px bên phải."

    email_input_with_attached_submit:
      vai_trò: "Newsletter capture trong footer tối"

      info: "Trường input trắng Paper (#ffffff), bo góc 4px, chữ Carbon Square Sans Text 16px, placeholder Slate Gray, không border nhìn thấy. Nút submit Signal Blue áp sát cạnh phải của trường, cùng bo góc 4px, label 'Enviar' trắng Cash Sans 18px."

    section_heading_with_link:
      vai_trò: "Giới thiệu subsection (ví dụ 'Empieza a vender al instante')"

      info: "Square Sans Display 50px / 1.10 Carbon, với link Signal Blue 16px ngay bên dưới, có tiền tố mũi tên nhỏ hoặc '→'. Heading và link cùng trục căn trái; không có decorative rules."

    lifestyle_photography_block:
      vai_trò: "Hero image và card imagery"

      info: "Ảnh editorial full-bleed với bo góc 24px trong ngữ cảnh card, cạnh sắc trên hero. Ảnh ấm áp, tự nhiên, cảnh khách hàng thật — tay, thiết bị, đồ ăn, quầy bán lẻ. Không duotone, không overlay tint, không xử lý đồ họa."

  do_s_and_don_ts:

    do:
      - "Chỉ dùng Signal Blue (#006aff) làm yếu tố màu duy nhất trong hệ thống — không bao giờ thêm màu thương hiệu thứ hai, secondary accent, hoặc gradient trang trí."
      - "Đặt headline ở Square Sans Display weight 400 với tracking -0.012em; dùng kích thước 50–86px với line-height từ 1.0 đến 1.19 để chữ có cảm giác kiến trúc, không cồng kềnh."
      - "Bo góc 24px cho tất cả ảnh editorial và card; để ảnh hero chảy edge-to-edge chỉ trên các section full-bleed."
      - "Ghép mỗi primary filled button với một ghost outlined variant cùng label, cách nhau 10px gap, trên cùng baseline."
      - "Dùng bo góc 4px cho tất cả button, input và nav element; dành riêng 20px cho pill-shaped button variant và 32px cho icon container."
      - "Để card nổi lên khỏi trang qua độ tương phản bề mặt #ffffff trên #f2f2f2 — không bao giờ thêm drop shadow vào card hoặc panel."
      - "Dùng Cash Sans 18px medium cho mọi button label để hành động đọc như một register typographic riêng biệt khỏi body copy."

    don_t:
      - "Không dùng Carbon (#1a1a1a) cho nền button — button luôn là Signal Blue filled, ghost blue outlined, hoặc trắng trên nền tối trong footer."
      - "Không thêm drop shadow vào card, feature panel hoặc ảnh — shadow duy nhất được phép là 1px 16% đen trên filled button."
      - "Không dùng weight 600 hoặc 700 trên display headline; hệ thống dựa vào weight 400 ở kích thước lớn với negative tracking cho giọng thị giác."
      - "Không đưa semantic color (xanh cho thành công, đỏ cho lỗi) vào giao diện neutral mặc định — accent chỉ là xanh."
      - "Không phá vỡ canvas trắng bằng gradient trang trí, colored section band hoặc pattern fill — để dark Obsidian footer là điểm đảo màu duy nhất."
      - "Không dùng border-radius ngoài bộ bốn token (4, 20, 24, 32) — radius không nhất quán làm vỡ kỷ luật hình học."
      - "Không dùng letter-spacing trên body copy; điều chỉnh tracking chỉ dành cho kích thước display từ 24px trở lên."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-----|-----|--------|----------|"
    info: "| 0 | Page Canvas | `#f2f2f2` | Nền trắng nhẹ tinh tế để card trắng nguyên chất nổi lên khỏi trang |"
    info: "| 1 | Card Surface | `#ffffff` | Bề mặt nội dung chính cho hero, feature card, input, nav |"
    info: "| 2 | Inverted Footer | `#030303` | Dải tối full-bleed cuối trang cho email capture và social |"

  elevation:

    - "**Primary Filled Button:** `rgba(0, 0, 0, 0.16) 0px 1px 4px 0px`"

  imagery:

    info: "Ngôn ngữ thị giác dẫn dắt bằng nhiếp ảnh: cảnh editorial ấm áp, tự nhiên của người bán và khách hàng tương tác với điện thoại và đầu đọc thẻ. Ánh sáng high-key, khung hình candid tay-và-đồ vật (khoai tây chiên trên giấy xanh, bàn gỗ, mặt quầy), không có độ bóng studio dàn dựng. Ảnh được cắt sát vào khoảnh khắc con người và thiết bị, không có cảnh rộng môi trường. Không có illustration, không 3D render, không abstract graphic. Ảnh nằm trong khung bo góc 24px bên trong feature card và chảy cạnh sắc vào hero. Nhiếp ảnh là nguồn ấm áp và màu sắc duy nhất trong hệ thống — UI tự nó có chủ đích lạnh và tối giản để ảnh cảm giác như ánh nắng trong căn phòng thép."

  layout:

    info: "Container căn giữa max-width ~1200px với padding ngang rộng rãi. Hero chia hai cột: headline căn trái + chồng hai button trên khoảng 45% chiều rộng, ảnh editorial bo góc 24px căn phải trên 55%. Bên dưới hero, lưới feature card ba cột bằng nhau với gutter ~24px, mỗi card xếp chồng ảnh → headline → body → blue link theo chiều dọc. Trang kết thúc bằng dải footer tối full-bleed trải dài edge-to-edge, phá vỡ lưới căn giữa. Nhịp dọc thoải mái và không vội — khoảng 96px giữa các section chính, 10–15px giữa các element trong một block. Navigation là một top bar trắng đơn, không sticky, không shadow. Không sidebar, không mega-menu — link là text ngang phẳng."

  agent_prompt_guide:

    info: "Tham chiếu màu nhanh:"
    - "text: #1a1a1a (Carbon)"
    - "background: #ffffff (Paper) trên nền #f2f2f2 (Cloud)"
    - "border: #d9d9d9 (Platinum) hairline"
    - "accent: #006aff (Signal Blue) cho link và icon"
    - "primary action: không có màu CTA riêng biệt"
    - "dark surface: #030303 (Obsidian) cho dải footer inverted"

    info: "Ví dụ Component Prompt:"
    - "Tạo một hero section: nền trắng #ffffff, căn giữa max-width 1200px. Cột trái chứa headline Square Sans Display 62px weight 400, màu #1a1a1a, line-height 1.0, letter-spacing -0.74px. Bên dưới cách 18px gap, sub-copy Square Sans Text 16px #737373. Sau đó là hàng button: button filled #006aff (bo góc 4px, padding 10px 15px, label trắng Cash Sans 18px 'Get started') cạnh button ghost (border 1px #006aff, fill trong suốt, chữ #006aff) với gap 10px. Cột phải chứa ảnh editorial bo góc 24px của người dùng điện thoại trên bàn."

    - "Tạo lưới feature card ba cột: mỗi card là #ffffff với nền xanh rất nhạt (~8% opacity của #006aff), padding trong 24px, ảnh sản phẩm bo góc 24px ở trên, sau đó gap 20px, rồi title Square Sans Display 24px #1a1a1a, body Square Sans Text 16px #1a1a1a, link #006aff 16px với mũi tên →. Gutter 24px giữa các card, không shadow."

    - "Tạo dải footer tối: nền #030303 full-bleed, headline trắng Square Sans Display 50px weight 400. Bên dưới, hàng link Signal Blue (#006aff) ở 16px. Email input: trường trắng bo góc 4px, chữ #1a1a1a, placeholder #737373, gắn với nút submit #006aff filled (bo góc 4px, label trắng Cash Sans 18px). Bên phải, ba icon trắng (mail, paper plane, smiley) kích thước render 32px với style stroke-only, không fill."

  blue_accent_discipline:

    info: "Signal Blue được phân bổ có kiểm soát, không rải rác. Nó xuất hiện ở: filled CTA button, ghost button border, inline text link, nút submit, icon accent trong card, và mũi tên subhead link. Nó không bao giờ xuất hiện dưới dạng card background tint ở độ bão hòa đầy đủ, không làm nền section, không làm decorative shape, không làm gradient stop. Hệ thống coi màu xanh như một từ vựng gồm ~3 chức năng (hành động, điều hướng, nhấn mạnh) và không gì khác — sự khan hiếm này là thứ mang lại sức mạnh cho một màu duy nhất."

  similar_brands:

    - "**Stripe** — Cùng cách tiếp cận single-accent-on-white với một màu xanh đậm và custom geometric display face ở kích thước lớn cho headline"
    - "**Linear** — Chia sẻ giọng typographic kiềm chế — weight 400 ở kích thước display, tracking chặt, một accent color làm mọi việc trên nền sáng sạch"
    - "**Plaid** — Cùng fintech editorial photography (tay, thiết bị, người bán thực) kết hợp với UI trắng tối giản và một link/accent color đơn sắc"
    - "**Notion** — Tương tự chữ gần đen (#1a1a1a) trên trắng, kỷ luật shadow tối thiểu, và feature card với surface tint mềm thay vì elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-blue: #006aff;
          --color-carbon: #1a1a1a;
          --color-slate-gray: #737373;
          --color-platinum: #d9d9d9;
          --color-ash: #b3b3b3;
          --color-cloud: #f2f2f2;
          --color-paper: #ffffff;
          --color-obsidian: #030303;
          --color-true-black: #000000;
        
          /* Typography — Font Families */
          --font-square-sans-display-vf: 'Square Sans Display VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-square-sans-text-vf: 'Square Sans Text VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cash-sans: 'Cash Sans', 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.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.29px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.6px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: -0.74px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-47: 47px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-113: 113px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96px;
          --card-padding: 24px;
          --element-gap: 10-15px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-icons: 32px;
          --radius-images: 24px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-pillbuttons: 20px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 4px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #f2f2f2;
          --surface-card-surface: #ffffff;
          --surface-inverted-footer: #030303;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-blue: #006aff;
          --color-carbon: #1a1a1a;
          --color-slate-gray: #737373;
          --color-platinum: #d9d9d9;
          --color-ash: #b3b3b3;
          --color-cloud: #f2f2f2;
          --color-paper: #ffffff;
          --color-obsidian: #030303;
          --color-true-black: #000000;
        
          /* Typography */
          --font-square-sans-display-vf: 'Square Sans Display VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-square-sans-text-vf: 'Square Sans Text VF', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cash-sans: 'Cash Sans', 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.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.25;
          --tracking-heading-sm: -0.29px;
          --text-heading: 32px;
          --leading-heading: 1.19;
          --tracking-heading: -0.38px;
          --text-heading-lg: 50px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.6px;
          --text-display: 62px;
          --leading-display: 1;
          --tracking-display: -0.74px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-10: 10px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-15: 15px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-33: 33px;
          --spacing-47: 47px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-113: 113px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 4px 0px;
        }