monad___style_reference:
  info: "> Tạp chí kỹ thuật monospaced trên giấy kem — nhẹ nhàng, chính xác, mang phong cách editorial."

  theme: "light"

  info: "Monad hiện ra như một tài liệu editorial nhẹ nhàng trên nền giấy ấm: canvas màu kem, mực than, và một bề mặt card màu oải hương gần như xám duy nhất mang toàn bộ UI. Điểm nhấn đặc trưng là typography — một serif nhân văn (humanist serif) ở weight 400 cho headline, kết hợp với font monospaced cho gần như toàn bộ UI text, tạo cảm giác technical-journal hiếm thấy trong B2B SaaS. Màu sắc gần như hoàn toàn vắng bóng trong giao diện; các tông màu đào, oải hương và bạc hà chỉ xuất hiện trong sơ đồ luồng dữ liệu (data-flow diagram) ở hero, nơi chúng hoạt động như những mảng màu khí quyển mềm mại chứ không phải điểm nhấn thương hiệu. Các component phẳng và tự tin: pill buttons 100px, cards border-radius 40px, viền mảnh (hairline) gần như đen, và một bóng đổ mềm duy nhất — không có gì nặng nề, không có gì bóng bẩy. Nhịp điệu tổng thể là khoảng thở rộng rãi, các khối text căn giữa, và các đường flow ngang gợi ý chuyển động mà không cần animation."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Cream | `#f6f3f1` | `--color-parchment-cream` | Canvas trang, nền nav, bề mặt badge — nền off-white ấm áp khiến toàn bộ giao diện có cảm giác như giấy thay vì màn hình |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, icon strokes, viền mảnh (hairline borders), và màu viền chủ đạo trên nav, cards, và divider |"
    info: "| Charcoal | `#242424` | `--color-charcoal` | Nền primary action button, viền badge, bề mặt nâng cao — filled CTAs hơi lệch khỏi đen tuyền để tạo độ mềm thị giác |"
    info: "| Graphite | `#4e4d4d` | `--color-graphite` | Body và heading text ở độ tương phản thấp hơn, viền card phụ, muted UI elements |"
    info: "| Slate Shadow | `#3d3d3d` | `--color-slate-shadow` | Viền cấp ba và các nét trang trí nơi màu đen tuyền sẽ quá nặng |"
    info: "| Warm Stone | `#797776` | `--color-warm-stone` | Muted helper text, gạch chân link, và label ít quan trọng |"
    info: "| Lavender Mist | `#cfdaf5` | `--color-lavender-mist` | Màu nền card surface — màu bề mặt duy nhất không phải thang xám, dùng như một lớp wash nhẹ để phân tách nội dung nâng cao khỏi canvas kem |"
    info: "| Peach to Periwinkle Wash | `linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%)` | `--color-peach-to-periwinkle-wash` | Gradient trang trí ở điểm cuối trong sơ đồ luồng dữ liệu — màu khí quyển mềm mại, không bao giờ dùng làm điểm nhấn UI |"
    info: "| Mint to Periwinkle Wash | `linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205))` | `--color-mint-to-periwinkle-wash` | Gradient trang trí trong aura của sơ đồ luồng dữ liệu — xuất hiện như một lớp phát sáng xanh lục mềm quanh node xử lý trung tâm |"

  tokens___typography:

    untitled_serif___tất_cả_headline_và_display_text__phản_quy_tắc__weight_400_không_phải_600_700_để_các_đường_nét_serif_thì_thầm___uy_quyền_đến_từ_tỷ_lệ_nhân_văn_humanist_proportions_của_typeface_và_tracking_âm_rộng_rãi__chứ_không_từ_độ_đậm_____font_untitled_serif:
      - "**Thay thế:** Source Serif 4, Lora, hoặc PT Serif"
      - "**Weights:** 400"
      - "**Kích cỡ:** 24px, 28px, 32px, 40px, 80px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.0200em"
      - "**Vai trò:** Tất cả headline và display text. Phản quy tắc: weight 400 (không phải 600-700) để các đường nét serif thì thầm — uy quyền đến từ tỷ lệ nhân văn (humanist proportions) của typeface và tracking âm rộng rãi, chứ không từ độ đậm."

    abc_diatype_mono___body_text__navigation__buttons__badges__tags__và_tất_cả_functional_ui_copy__việc_xử_lý_monospaced_cho_text_không_phải_code_là_lựa_chọn_đặc_biệt_nhất_của_hệ_thống___nó_mang_lại_cho_mọi_label_trọng_lượng_thị_giác_của_một_chú_thích_đã_được_sắp_chữ__củng_cố_ẩn_dụ_technical_journal_____font_abc_diatype_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, hoặc Berkeley Mono"
      - "**Weights:** 400, 500"
      - "**Kích cỡ:** 12px, 14px, 16px, 18px, 20px, 28px"
      - "**Line height:** 1.30-1.35"
      - "**Letter spacing:** -0.0200em"
      - "**Vai trò:** Body text, navigation, buttons, badges, tags, và tất cả functional UI copy. Việc xử lý monospaced cho text không phải code là lựa chọn đặc biệt nhất của hệ thống — nó mang lại cho mọi label trọng lượng thị giác của một chú thích đã được sắp chữ, củng cố ẩn dụ technical-journal."

    untitled_sans___body_text_phụ_dự_phòng___xuất_hiện_tối_thiểu__có_thể_dùng_cho_đoạn_văn_dài_nơi_monospaced_character_widths_sẽ_gây_mất_tập_trung____font_untitled_sans:
      - "**Thay thế:** Inter, Söhne, hoặc system-ui"
      - "**Weights:** 400"
      - "**Kích cỡ:** 16px"
      - "**Line height:** 1.35"
      - "**Letter spacing:** -0.0200em"
      - "**Vai trò:** Body text phụ dự phòng — xuất hiện tối thiểu, có thể dùng cho đoạn văn dài nơi monospaced character widths sẽ gây mất tập trung"

    type_scale:

      info: "| Vai trò | Kích cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|-------------|----------------|-------|------|"
      info: "| caption | 12px | 1.3 | -0.24px | `--text-caption` |"
      info: "| body-sm | 14px | 1.35 | -0.28px | `--text-body-sm` |"
      info: "| body | 16px | 1.35 | -0.32px | `--text-body` |"
      info: "| subheading | 18px | 1.35 | -0.36px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.64px | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | -0.8px | `--text-heading-lg` |"
      info: "| display | 80px | 1.2 | -1.6px | `--text-display` |"

  tokens___spacing___shapes:

    đơn_vị_cơ_bản: "8px"

    mật_độ: "thoải mái (comfortable)"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 200 | 200px | `--spacing-200` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 40px |"
      info: "| inputs | 8px |"
      info: "| buttons | 100px |"

    shadows:

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

    layout:

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

  components:

    filled_cta_button:
      vai_trò: "Primary action trigger trong nav và hero"

      info: "Nền Charcoal (#242424), text Parchment Cream (#f6f3f1), ABC Diatype Mono 14px weight 500, border-radius 100px, padding dọc 10px × ngang 24px, không shadow. Bao gồm một mũi tên chevron nhỏ màu kem."

    ghost_outline_button:
      vai_trò: "Secondary action trigger đi kèm với filled CTA"

      info: "Nền trong suốt, viền 1px Ink Black (#000000), text Ink Black, ABC Diatype Mono 14px weight 500, border-radius 100px, padding dọc 10px × ngang 24px."

    navigation_bar:
      vai_trò: "Navigation cấp cao nhất cố định (sticky)"

      info: "Nền Parchment Cream, viền dưới dạng hairline 1px Ink Black, logo bên trái, nav links mono ở giữa, filled và ghost CTAs bên phải. Links là ABC Diatype Mono 14px, implied uppercase tracking nhờ mono character width."

    announcement_bar:
      vai_trò: "Dải quảng cáo đầu trang"

      info: "Nền Ink Black full-width, text Parchment Cream bằng ABC Diatype Mono 12-14px, inline CTA pill button màu kem với text đen. Có thể đóng bằng icon close."

    source_destination_tag:
      vai_trò: "Label hình pill trong sơ đồ luồng dữ liệu"

      info: "Nền trắng hoặc Parchment, viền 1px Ink Black, border-radius 100px, icon căn trái + label ABC Diatype Mono 12-14px, padding 8px 16px. Các tag này nổi trên các đường kết nối trong hero diagram."

    feature_card:
      vai_trò: "Content card trong phần 'How Monad Works'"

      info: "Nền Lavender Mist (#cfdaf5), không viền, border-radius 40px, padding 40px, bóng đổ mềm (rgba(0,0,0,0.1) 0 0 10px). Chứa một icon nhỏ, serif heading, và mono body text. Phía bên phải thường có một decorative gradient illustration (đào/oải hương/bạc hà)."

    faq_accordion_item:
      vai_trò: "Hàng câu hỏi có thể mở rộng trong phần FAQ"

      info: "Không nền, không border-radius, viền dưới dạng hairline 1px Ink Black ở độ mờ 20-30%, text câu hỏi ABC Diatype Mono 16px màu Ink Black, icon cộng/trừ căn phải. Trạng thái mở rộng hiển thị body text bên dưới màu Graphite."

    data_flow_diagram:
      vai_trò: "Visualization trong hero thể hiện sources → processing → destinations"

      info: "Bố cục full-width trải dài bên dưới hero text. Cột bên trái xếp chồng các source tags (ANY SOURCE, CLOUD LOGS, VULNERABILITIES, IAM ACTIVITY, EDR ALERTS, SAAS AUDIT LOGS, ASSET INVENTORY). Trung tâm chứa một vùng phát sáng hình tròn màu xanh bạc hà mềm với một processing node và các status badges nhỏ (EVENT, INGEST, ROUTE, NORMALIZE). Cột bên phải xếp chồng các destination tags (SIEM, CLOUD STORAGE, XDR, DATA LAKE, ANY DESTINATION). Các đường kết nối mảnh nối sources đến trung tâm đến destinations."

    processing_status_badge:
      vai_trò: "Label inline nhỏ trong sơ đồ luồng dữ liệu"

      info: "Pill tags nhỏ (border-radius 100px) với mono text cỡ 10-12px. Trạng thái success có tiền tố chấm tròn xanh nhạt; trạng thái neutral có chấm tròn xám. Không nền, chỉ có viền mảnh (hairline)."

    decorative_gradient_panel:
      vai_trò: "Minh họa bên phải trong feature cards"

      info: "Gradient mờ, trong suốt pha trộn đào (#ff9473), oải hương (#a0b5eb), bạc hà (#a7fccd), và hổ phách (#e2c161) ở độ mờ 60-80%. Luôn nằm gọn trong card radius 40px. Không bao giờ dùng làm CTA hoặc interactive element."

    footer_link_group:
      vai_trò: "Footer navigation dạng cột"

      info: "Section headings bằng ABC Diatype Mono 12px weight 500 với tracking dương (0.050em), viết hoa. Links bên dưới bằng mono 14px weight 400, màu Graphite, row gap 12px."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng Untitled Serif weight 400 cho tất cả headline — không bao giờ dùng bold, không bao giờ dùng black-weight."
      - "Dùng ABC Diatype Mono cho mọi functional UI label: buttons, nav, tags, badges, và short body text."
      - "Áp dụng border-radius 100px cho tất cả buttons, tags, và pill-shaped elements."
      - "Áp dụng border-radius 40px cho tất cả card và panel surfaces."
      - "Giữ canvas là Parchment Cream (#f6f3f1) — không bao giờ chuyển sang trắng tinh, vì điều đó sẽ phá vỡ sự ấm áp editorial."
      - "Dùng soft ambient shadow (rgba(0,0,0,0.1) 0 0 10px) một cách tiết kiệm — chỉ trên elevated cards, không bao giờ trên buttons hoặc nav."
      - "Giới hạn tất cả màu sắc (chromatic color) trong decorative gradient illustrations; bản thân UI vẫn ở gần thang xám."

    không_nên_làm:
      - "Không dùng bold hoặc semibold weights cho serif headlines — weight 400 là đặc trưng."
      - "Không dùng proportional sans-serif cho body text hoặc nav — mono là bản sắc của hệ thống."
      - "Không thêm saturated brand colors làm điểm nhấn, gạch chân, hoặc trạng thái active — bảng màu được cố tình hạn chế."
      - "Không dùng góc vuông hoặc corner radii 4-8px trên interactive elements — pills (100px) và bo tròn rộng rãi (40px) là bắt buộc."
      - "Không đặt gradient màu phía sau text hoặc dùng làm nền section — chúng chỉ thuộc về decorative illustration panels."
      - "Không dùng heavy drop shadows hoặc layered elevation — hệ thống chỉ dùng một bóng đổ ambient 10px tinh tế."
      - "Không phá vỡ canvas kem bằng các bề mặt trắng hoặc gần trắng — sự ấm áp phải duy trì trên mọi cấp độ trang."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#f6f3f1` | Nền trang — off-white kem ấm xác định cảm giác giấy editorial |"
    info: "| 1 | Lavender Card | `#cfdaf5` | Bề mặt card nâng cao — tông oải hương gần xám tinh tế phân tách khối nội dung khỏi canvas |"
    info: "| 2 | Charcoal Surface | `#242424` | Bề mặt tối nâng cao cho CTAs và badges — bề mặt không ấm duy nhất trong hệ thống |"

  elevation:

    - "**Feature Card:** `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`"

  imagery:

    info: "Ngôn ngữ hình ảnh của Monad gần như hoàn toàn là diagrammatic và typographic — không có photography, không có product screenshots, không có lifestyle imagery. Hero tập trung vào một sơ đồ luồng dữ liệu: source tags hình pill bên trái, một processing node phát sáng ở trung tâm (được bao quanh bởi một lớp wash hình tròn màu xanh bạc hà mềm), và destination tags bên phải, tất cả được kết nối bằng các đường flow ngang mảnh. Feature cards kết hợp một khối text với một decorative gradient panel ở bên phải — các panel này sử dụng gradient đào, oải hương, bạc hà và hổ phách mờ với các hình dạng hình học trừu tượng (hình tròn, hình vuông bo tròn, các chấm như chòm sao). Icons xuyên suốt là minimal line-art glyphs màu Ink Black với stroke weight nhất quán. Mật độ tổng thể là text-dominant; hình ảnh đóng vai trò là điểm nhấn khí quyển hơn là nội dung."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000 (Ink Black)"
    - "background: #f6f3f1 (Parchment Cream)"
    - "card surface: #cfdaf5 (Lavender Mist)"
    - "border / hairline: #000000 at 1px"
    - "muted text: #4e4d4d (Graphite)"
    - "primary action: không có màu CTA riêng biệt"

  example_component_prompts:

    info: "Không quan sát thấy màu primary action riêng biệt; sử dụng các button neutral đã trích xuất thay vì phát minh ra màu filled CTA."

    - "**Feature Card**: Nền Lavender Mist (#cfdaf5), border-radius 40px, padding 40px, shadow rgba(0,0,0,0.1) 0 0 10px. Cột trái: icon nhỏ, sau đó heading bằng Untitled Serif 24px weight 400, sau đó body bằng ABC Diatype Mono 16px màu #4e4d4d. Cột phải: decorative gradient panel (đào đến oải hương, độ mờ 60-80%) nằm gọn trong card radius."

    - "**Pill Source Tag**: Nền trắng hoặc trong suốt, viền 1px #000000, border-radius 100px, padding 8px/16px. Icon 14px căn trái màu #000000, sau đó label bằng ABC Diatype Mono 12px weight 400 màu #000000, gap 8px giữa icon và text."

    - "**FAQ Accordion Row**: Hàng full-width, không nền, viền dưới 1px #000000 ở độ mờ 20%. Text câu hỏi bằng ABC Diatype Mono 16px màu #000000. Icon cộng/trừ căn phải, stroke 1.5px màu #000000. Padding dọc 24px."

    - "**Announcement Bar**: Nền #000000 full-width, cao 48px, nội dung căn giữa. Text bằng ABC Diatype Mono 13px màu #f6f3f1. Inline link hoặc pill button màu #f6f3f1 với text #000000, border-radius 100px."

  similar_brands:

    - "**Linear** — Cùng bảng màu gần như đơn sắc, hạn chế, với một dark filled CTA pill duy nhất và ghost outline secondary — nhưng Monad tiến xa hơn với kem ấm và cặp serif/mono."
    - "**Stripe** — Cùng sự tự tin trong việc sử dụng whitespace rộng rãi, các khối text căn giữa, và pill buttons 100px cho CTAs; cả hai hệ thống đều dựa vào độ chính xác của layout hơn là màu sắc để tạo hierarchy."
    - "**Vercel** — Chia sẻ cách tiếp cận minimal-chrome, hairline-border, single-shadow với UI đơn sắc — Monad khác biệt bằng cách dùng kem ấm và serif headlines thay vì thang xám thuần túy và geometric sans của Vercel."
    - "**Resend** — Cả hai đều dùng font monospaced cho functional UI text, canvas off-white ấm, và bảng màu hạn chế — một cảm quan technical-editorial chung."
    - "**Cursor** — Cùng pill-shaped CTAs, hero layout sạch sẽ căn giữa, và sự tự tin khi dùng gần như không màu trong giao diện cốt lõi trong khi để illustrations mang các điểm nhấn màu sắc."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-cream: #f6f3f1;
          --color-ink-black: #000000;
          --color-charcoal: #242424;
          --color-graphite: #4e4d4d;
          --color-slate-shadow: #3d3d3d;
          --color-warm-stone: #797776;
          --color-lavender-mist: #cfdaf5;
          --color-peach-to-periwinkle-wash: #ff9473;
          --gradient-peach-to-periwinkle-wash: linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%);
          --color-mint-to-periwinkle-wash: #a7fccd;
          --gradient-mint-to-periwinkle-wash: linear-gradient(rgb(160, 181, 235), rgb(167, 252, 205));
        
          /* Typography — Font Families */
          --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.35;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.35;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.8px;
          --text-display: 80px;
          --leading-display: 1.2;
          --tracking-display: -1.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-200: 200px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 40px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 100px;
          --radius-full-2: 2000px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 40px;
          --radius-inputs: 8px;
          --radius-buttons: 100px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        
          /* Surfaces */
          --surface-parchment-canvas: #f6f3f1;
          --surface-lavender-card: #cfdaf5;
          --surface-charcoal-surface: #242424;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-cream: #f6f3f1;
          --color-ink-black: #000000;
          --color-charcoal: #242424;
          --color-graphite: #4e4d4d;
          --color-slate-shadow: #3d3d3d;
          --color-warm-stone: #797776;
          --color-lavender-mist: #cfdaf5;
          --color-peach-to-periwinkle-wash: #ff9473;
          --color-mint-to-periwinkle-wash: #a7fccd;
        
          /* Typography */
          --font-untitled-serif: 'Untitled Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-abc-diatype-mono: 'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.24px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.35;
          --tracking-body-sm: -0.28px;
          --text-body: 16px;
          --leading-body: 1.35;
          --tracking-body: -0.32px;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.36px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.48px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.64px;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -0.8px;
          --text-display: 80px;
          --leading-display: 1.2;
          --tracking-display: -1.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-200: 200px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-3xl: 40px;
          --radius-full: 100px;
          --radius-full-2: 2000px;
        
          /* Shadows */
          --shadow-md: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
        }