basehub___style_reference:
  info: "> midnight canvas, molten filament"

  theme: "dark"

  info: "BaseHub nói một thứ tiếng gần như đơn sắc: một canvas gần đen, thang xám cho text, và một điểm nhấn cam nóng chảy làm tất cả công việc của cả một hệ màu hoàn chỉnh. Sản phẩm là hero — những ảnh chụp màn hình editor không viền, kích thước lớn, nổi trên nền tối thay vì illustration, và một đường kẻ dọc cam mảnh ở mép trái neo mọi section như một margin note. Typography nén gọn và lặng lẽ: Geist semibold cho headline, regular cho body, với negative tracking chặt ở mọi kích cỡ để chữ có cảm giác được gia công bằng máy hơn là sắp chữ. Các surface phẳng và có viền mảnh thay vì đổ bóng, bán kính card 12px và button 4px giữ hình học sắc nét và quen thuộc với developer tool. Nốt ấm duy nhất là màu cam — dùng cho CTA, section tags, khung sản phẩm phát sáng, và chú thích vẽ tay — và một màu xanh mát (#55c2ff) chỉ dành riêng cho informational badges."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Ember Orange | `#ff6c02` | `--color-ember-orange` | Primary CTA, section tags, active nav, khung sản phẩm phát sáng, chú thích vẽ tay, và đường kẻ trang trí duy nhất ở lề trái — giọng ấm duy nhất trong một bảng màu lạnh |"
    info: "| Ember Glow | `linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81))` | `--color-ember-glow` | Gradient stop đi cùng Ember Orange cho các surface gradient hiếm hoi (ví dụ: thanh accent trên template card) |"
    info: "| Glacier Blue | `#55c2ff` | `--color-glacier-blue` | Accent xanh dương cho badges, validation surfaces, và status label ngắn. |"
    info: "| Bone White | `#f3f3f3` | `--color-bone-white` | Neutral form states, badge text, và UI feedback nhẹ nhàng nơi màu sắc nên giữ kín đáo. Không nâng lên làm màu CTA chính |"
    info: "| Ash Gray | `#dedede` | `--color-ash-gray` | Secondary text và icon stroke nhạt hơn trên surface tối |"
    info: "| Fog Gray | `#909090` | `--color-fog-gray` | Border tương phản trung bình, control outlines, và structural separators. |"
    info: "| Slate Gray | `#646464` | `--color-slate-gray` | Muted metadata text, timestamp labels, tertiary icon strokes |"
    info: "| Iron Border | `#303030` | `--color-iron-border` | Hairline dividers, code block borders, list separators nhẹ |"
    info: "| Charcoal Edge | `#252525` | `--color-charcoal-edge` | Card borders, frame edges nhẹ, input field borders |"
    info: "| Graphite | `#1b1b1b` | `--color-graphite` | High-contrast neutral action fill cho primary button trên surface sáng. |"
    info: "| Obsidian | `#121212` | `--color-obsidian` | Card surface — cao hơn canvas một bậc, dùng cho testimonial cards và elevated blocks |"
    info: "| Onyx | `#0c0c0c` | `--color-onyx` | Quote/testimonial card surface, link button background, elevated surface phổ biến nhất |"
    info: "| Void | `#040404` | `--color-void` | Page canvas — nền trang chủ đạo |"
    info: "| Black | `#000000` | `--color-black` | Surface sâu nhất dùng cho footer và image fill nơi cần đen tuyệt đối |"

  tokens___typography:

    geist___primary_ui_and_display_typeface__weight_600_cho_headline__500_cho_nav_và_sub_labels__400_cho_body__negative_tracking_chặt__0_05em_ở_60px_thắt_dần_xuống__0_03em_ở_16px_tạo_cho_chữ_cảm_giác_được_gia_công__hình_học___x_height_cao_và_open_apertures_của_geist_giữ_cho_body_text_nhỏ_dễ_đọc_trên_nền_040404_mà_không_cần_tăng_weight__display_sizes_dùng_lineheight_1_0_1_14_để_nén_editorial_____font_geist:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 11, 12, 13, 14, 16, 18, 24, 32, 48, 60"
      - "**Line height:** 1.0, 1.1, 1.14, 1.2, 1.23, 1.4, 1.5"
      - "**Letter spacing:** -0.05em ở 60px, -0.04em ở 48px, -0.03em ở 16–32px, normal ở 11–14px"
      - "**Role:** Primary UI and display typeface. Weight 600 cho headline, 500 cho nav và sub-labels, 400 cho body. Negative tracking chặt (-0.05em ở 60px thắt dần xuống -0.03em ở 16px) tạo cho chữ cảm giác được gia công, hình học — x-height cao và open apertures của Geist giữ cho body text nhỏ dễ đọc trên nền #040404 mà không cần tăng weight. Display sizes dùng lineHeight 1.0–1.14 để nén editorial."

    geist_mono___micro_copy_gần_code__version_tags__branch_labels__file_paths__inline_commit_ids__chỉ_dùng_ở_13px___400_với_cùng_tracking__0_03em_như_body_geist___sự_nhất_quán_này_làm_cho_mono_có_cảm_giác_bản_địa_thay_vì_một_phần_tử_ngoại_lai_____font_geist_mono:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 13"
      - "**Line height:** 1.5"
      - "**Letter spacing:** -0.03em"
      - "**Role:** Micro-copy gần code: version tags, branch labels, file paths, inline commit IDs. Chỉ dùng ở 13px / 400 với cùng tracking -0.03em như body Geist — sự nhất quán này làm cho mono có cảm giác bản địa thay vì một phần tử ngoại lai."

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| heading-sm | 18px | 1.4 | -0.54px | `--text-heading-sm` |"
      info: "| heading | 24px | 1.23 | -0.72px | `--text-heading` |"
      info: "| heading-lg | 32px | 1.2 | -0.96px | `--text-heading-lg` |"
      info: "| display | 48px | 1.14 | -1.92px | `--text-display` |"
      info: "| display-xl | 60px | 1.1 | -3px | `--text-display-xl` |"

  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: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| badges | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 4px |"
      info: "| imageCards | 21px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0....` | `--shadow-md` |"

    layout:

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

  components:

    primary_cta_button:
      vai_trò: "Hành động chuyển đổi chính (Get Started, Sign Up, Open in new tab)"

      info: "Fill Ember Orange (#ff6c02), text Bone White (#f3f3f3), Geist 500 ở 14px, radius 4px, padding 14px 16px. Không shadow. Button filled duy nhất trong hệ thống — nó nên có cảm giác như bật một công tắc trong căn phòng tối."

    secondary_outlined_button:
      vai_trò: "Hành động đi kèm với primary CTA (Schedule a Demo, Learn more)"

      info: "Nền trong suốt, border Fog Gray (#909090) 1px, text Fog Gray, Geist 500 ở 14px, radius 4px, padding 14px 16px. Nhẹ nhàng hơn primary về mặt thị giác để mắt đổ bộ vào màu cam trước."

    nav_login_button:
      vai_trò: "Hành động ít nhấn mạnh trong top navigation"

      info: "Fill Graphite (#1b1b1b), text Bone White, Geist 500 ở 14px, radius 4px, padding 6px 12px. Nằm cạnh nút Sign Up màu cam chính và giữ vai trò phụ thuộc."

    section_tag_pill:
      vai_trò: "Label nhỏ mở đầu một feature section (Editor, Branching, Playground)"

      info: "Fill trong suốt, border Ember Orange 1px, text Ember Orange, Geist 500 ở 12px, radius 9999px, padding 6px 12px. Đọc như một category marker hơn là một button."

    new_badge:
      vai_trò: "Chú thích gắn vào nav link chỉ nội dung mới"

      info: "Fill trong suốt, border Fog Gray 1px, text Fog Gray, Geist 500 ở 11px, radius 4px, padding 2px 6px. Nằm inline với link mà nó sửa đổi."

    info_badge:
      vai_trò: "Chỉ báo trạng thái hoặc môi trường (playground warnings, branch labels)"

      info: "Fill trong suốt, border Glacier Blue (#55c2ff) 1px, text Glacier Blue, Geist 500 ở 12px, radius 9999px, padding 4px 10px. Nơi duy nhất màu xanh xuất hiện — dành riêng cho ngữ cảnh thông tin."

    testimonial_card:
      vai_trò: "Block quote từ khách hàng, kèm thông tin tác giả"

      info: "Fill Onyx (#0c0c0c), không border, radius 12px, padding 24px. Icon dấu ngoặc kép màu Bone White ở trên, text quote màu Bone White ở 14px, tên tác giả màu Fog Gray với avatar bên phải. Surface phẳng — không shadow."

    template_card:
      vai_trò: "Template preview có thể chọn trong template gallery"

      info: "Fill Obsidian (#121212), border Charcoal Edge (#252525) 1px, radius 12px, padding trong 0px (ảnh phủ kín card). Thanh accent 2px ở trên cùng với màu thương hiệu (tím, cam, hoặc vàng từ chính template đó). Title Bone White 16px semibold bên dưới ảnh, description Fog Gray 14px regular."

    product_screenshot_frame:
      vai_trò: "Element hero bên dưới headline — bản xem trước trực tiếp của editor"

      info: "Fill Void (#040404), border Ember Orange 2px, outer radius 16px. Nội dung screenshot là ảnh chụp sản phẩm thật, không phải mockup. Ánh sáng viền cam là thứ làm nó có cảm giác như một cục than hồng trên canvas tối."

    feature_block_heading:
      vai_trò: "Tiêu đề section lớn cho mỗi feature explainer"

      info: "Text Bone White, Geist 600 ở 48px, lineHeight 1.14, letter-spacing -0.04em. Theo sau bởi description Fog Gray 14–16px regular. Luôn được đặt trước bởi một Section Tag Pill."

    logo_strip:
      vai_trò: "Hàng logo khách hàng để tạo bằng chứng xã hội"

      info: "Logo hiển thị bằng Fog Gray (#909090) ở chiều cao đồng nhất (~20px), cách đều nhau với gap 32px, căn trái trong page max width. Label 'Trusted by' Fog Gray 12px nằm phía trên."

    hand_drawn_annotation:
      vai_trò: "Chú thích vui tươi chỉ vào một tính năng trong product screenshot"

      info: "Ember Orange (#ff6c02), stroke mảnh, kiểu viết tay thân thiện, luôn đi kèm với mũi tên chỉ vào element UI liên quan. Dùng có chừng mực — tối đa một cái mỗi hero section — để thêm cá tính mà không làm rối bố cục editorial."

    decorative_left_margin_rule:
      vai_trò: "Đường dọc hướng dẫn neo bố cục trang"

      info: "Stroke Ember Orange 1px, chiều cao full viewport, đặt ở ~5% từ mép trái. Một chấm tròn Ember Orange nhỏ (4px) đánh dấu điểm bắt đầu section dọc theo đường kẻ. Đây là element thị giác liên tục duy nhất lặp lại trên tất cả các section."

    floating_chat_widget:
      vai_trò: "Điểm vào hỗ trợ thường trực ở góc dưới bên phải"

      info: "Hình tròn fill Ember Orange (#ff6c02), đường kính 48px, icon chat Bone White ở giữa. Fixed position, bottom 24px, right 24px. Drop shadow nhẹ để tách khỏi canvas."

  do_s_and_don_ts:

    nên:
      - "Dùng Ember Orange (#ff6c02) cho chính xác một element trên mỗi viewport: primary CTA, section tag, hoặc product frame border — không bao giờ dùng nhiều cùng lúc"
      - "Đặt heading ở Geist 600 với letter-spacing -0.04em ở 48px và -0.05em ở 60px; tracking chặt là thứ làm cho chữ có cảm giác được gia công"
      - "Dùng radius 12px cho cards và 4px cho buttons; 9999px chỉ dành cho tags, badges, và pills"
      - "Định nghĩa surface bằng border mảnh 1px #252525 hoặc #303030 thay vì shadow; trang nên đọc như hình học phẳng của code editor"
      - "Neo mọi section bằng một Section Tag Pill màu Ember Orange trước headline — đây là motif lặp lại của hệ thống"
      - "Để product screenshots phủ kín container edge-to-edge; viền cam là khung duy nhất chúng cần"
      - "Giữ body text ở 14–16px Fog Gray (#909090) và dành Bone White (#f3f3f3) cho headline và primary actions"

    không_nên:
      - "Không bao giờ thêm màu ấm thứ hai; cam là giọng ấm duy nhất và thêm đỏ, vàng, hoặc một màu gần cam khác sẽ làm loãng hệ thống một accent"
      - "Không dùng drop shadows trên cards, buttons, hoặc navigation; thiết kế từ chối elevation như một tín hiệu thị giác"
      - "Không đặt body text bằng Bone White (#f3f3f3) — dùng Fog Gray (#909090) cho đoạn văn để tạo bầu không khí product-canvas mờ"
      - "Tránh gradient trên surface lớn; gradient duy nhất là cặp cam→đào trên thanh accent của template card"
      - "Không dùng border radius lớn hơn 12px trên cards hoặc 4px trên buttons; radius lớn đọc như consumer app thân thiện, và đây không phải"
      - "Không bao giờ căn giữa body copy; BaseHub là editorial và căn trái xuyên suốt, bao gồm description và quote"
      - "Không dùng Glacier Blue (#55c2ff) cho bất cứ thứ gì ngoài informational badges và status chips"

  surfaces:

    info: "| Level | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|-------|"
    info: "| 0 | Void | `#040404` | Page canvas — nền chủ đạo mà mọi section nổi trên đó |"
    info: "| 1 | Black | `#000000` | Layer sâu nhất, dùng có chừng mực cho footer và image fills |"
    info: "| 2 | Onyx | `#0c0c0c` | Testimonial và quote card surface, cao hơn canvas một bậc |"
    info: "| 3 | Obsidian | `#121212` | Elevated product blocks và secondary card surface |"
    info: "| 4 | Graphite | `#1b1b1b` | Button fills và elevated surface cao nhất |"

  elevation:

    - "**Floating Chat Widget:** `0 4px 12px rgba(0, 0, 0, 0.4)`"

  imagery:

    info: "Product screenshots là toàn bộ ngôn ngữ thị giác. Hero là ảnh chụp editor không viền được đóng khung bằng stroke cam 2px, không phải stock photo hay illustration. Các section phụ dùng logo khách hàng (grayscale, một hàng) và template preview cards mà bản thân chúng cũng là product screenshots. Imagery trang trí duy nhất là chú thích cam vẽ tay ('PLAY WITH IT' với mũi tên cong) đặt chồng lên ảnh chụp sản phẩm — đây là cách thương hiệu thêm cá tính. Không có lifestyle photography, không 3D renders, không abstract gradients. Không gian thị giác bị chi phối bởi text và product UI, không phải bởi imagery."

  layout:

    info: "Container căn giữa max-width 1200px, canvas tối full-viewport phía sau. Hero là chồng text căn trái (version tag pill → 60px headline → 14px subhead → hàng button) chiếm khoảng nửa trái, với product screenshot chiếm nửa phải trên desktop. Đường kẻ lề trái trang trí ở ~5% từ mép là element duy nhất phá vỡ container. Các feature section bên dưới là một cột: section tag pill → 48px headline → 14px description → visual hỗ trợ, tất cả căn trái với gap dọc 80px. Template gallery là grid 3 cột với card có chiều rộng bằng nhau. Nhịp điệu section nhất quán — không có band xen kẽ, không chuyển đổi tối/sáng — toàn bộ trang là một surface tối liên tục."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "text: #f3f3f3 (primary), #909090 (body), #646464 (muted)"
    - "background: #040404 (canvas), #0c0c0c (card), #121212 (elevated)"
    - "border: #252525 (cards), #303030 (dividers), #1b1b1b (button fill)"
    - "accent: #ff6c02 (Ember Orange — giọng ấm duy nhất)"
    - "primary action: #ff6c02 (filled action)"

    3_ví_dụ_component_prompts:

    - "Tạo một Primary Action Button: nền #ff6c02, text #303030, radius 9999px, padding pill nhỏ gọn. Dùng filled treatment này cho CTA chính."

    - "*Feature block*: canvas #040404. Section tag pill màu #ff6c02 (giống như trên). Headline — Geist 600 ở 48px, #f3f3f3, letter-spacing -1.92px, line-height 1.14. Description — Geist 400 ở 16px, #909090, max-width 640px. Testimonial card bên dưới — fill #0c0c0c, không border, radius 12px, padding 24px, text quote #f3f3f3 14px, tác giả #909090 12px."

    - "*Template gallery*: grid 3 cột, gap 24px. Mỗi card — fill #121212, border #252525 1px, radius 12px, padding 0px. Thanh accent trên cùng — cao 2px, màu theo template (tím, cam, hoặc vàng). Template screenshot phủ kín thân card. Title bên dưới ảnh — Geist 600 ở 16px, #f3f3f3. Description — Geist 400 ở 14px, #909090."

  similar_brands:

    - "**Linear** — Cùng bầu không khí dark-mode editor-tool với một accent sống động duy nhất, tracking Geist chặt, hairline borders thay vì shadow, và product screenshots làm hero"
    - "**Vercel** — Canvas gần đen, thang xám cho text, một màu accent ấm làm tất cả công việc hành động, và cùng hệ thống elevation surface phẳng dựa trên border"
    - "**Resend** — Thẩm mỹ developer-tool với bảng màu đơn sắc, radii nhỏ gọn 4px/12px, letter-spacing chặt trên chữ kiểu Geist, và accent lề trái trang trí"
    - "**Notion** — Cách tiếp cận editor-screenshot-làm-hero, card radius 12px, và bố cục product-forward với trang trí tối thiểu"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-orange: #ff6c02;
          --color-ember-glow: #ff9b51;
          --gradient-ember-glow: linear-gradient(rgb(255, 108, 2), rgb(255, 155, 81));
          --color-glacier-blue: #55c2ff;
          --color-bone-white: #f3f3f3;
          --color-ash-gray: #dedede;
          --color-fog-gray: #909090;
          --color-slate-gray: #646464;
          --color-iron-border: #303030;
          --color-charcoal-edge: #252525;
          --color-graphite: #1b1b1b;
          --color-obsidian: #121212;
          --color-onyx: #0c0c0c;
          --color-void: #040404;
          --color-black: #000000;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.54px;
          --text-heading: 24px;
          --leading-heading: 1.23;
          --tracking-heading: -0.72px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.96px;
          --text-display: 48px;
          --leading-display: 1.14;
          --tracking-display: -1.92px;
          --text-display-xl: 60px;
          --leading-display-xl: 1.1;
          --tracking-display-xl: -3px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 21px;
          --radius-full: 96px;
          --radius-full-2: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-badges: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 4px;
          --radius-imagecards: 21px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0.02) -4px 6px 7px 0px, rgba(0, 0, 0, 0.02) -1px 1px 4px 0px;
        
          /* Surfaces */
          --surface-void: #040404;
          --surface-black: #000000;
          --surface-onyx: #0c0c0c;
          --surface-obsidian: #121212;
          --surface-graphite: #1b1b1b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-orange: #ff6c02;
          --color-ember-glow: #ff9b51;
          --color-glacier-blue: #55c2ff;
          --color-bone-white: #f3f3f3;
          --color-ash-gray: #dedede;
          --color-fog-gray: #909090;
          --color-slate-gray: #646464;
          --color-iron-border: #303030;
          --color-charcoal-edge: #252525;
          --color-graphite: #1b1b1b;
          --color-obsidian: #121212;
          --color-onyx: #0c0c0c;
          --color-void: #040404;
          --color-black: #000000;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.54px;
          --text-heading: 24px;
          --leading-heading: 1.23;
          --tracking-heading: -0.72px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.96px;
          --text-display: 48px;
          --leading-display: 1.14;
          --tracking-display: -1.92px;
          --text-display-xl: 60px;
          --leading-display-xl: 1.1;
          --tracking-display-xl: -3px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 21px;
          --radius-full: 96px;
          --radius-full-2: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.01) -10px 13px 10px 0px, rgba(0, 0, 0, 0.02) -4px 6px 7px 0px, rgba(0, 0, 0, 0.02) -1px 1px 4px 0px;
        }