automate_supplier_payments___style_reference:
  info: "> butcher paper bakery ledger."

  info: "Không gian làm việc màu kem, ấm áp dưới ánh nắng — nơi slab type dày, pill buttons và một điểm nhấn vàng xe buýt trường học duy nhất làm tất cả công việc: không shadow, không gradient, chỉ có giấy ấm và mực đen tự tin."

  theme: "light"

  info: "Apron mang thẩm mỹ quầy bánh ấm áp: canvas buttercream, display type slab-serif dày, CTA hình pill màu vàng xe buýt rực rỡ, và chữ đen xương (bone-black) nổi bật trên nền kem. Logic thị giác là \"sổ cái trung thực trên giấy gói thịt\" — tự tin, hơi retro, bão hòa không hề e dè. Các bề mặt xếp chồng trong tông kem ấm (không phải xám lạnh), đường viền là hairline đen thay vì shadow mềm, và điểm nhấn màu duy nhất là một tông vàng mang nghĩa \"hành động ngay.\" Các component có cảm giác thủ công hơn là doanh nghiệp — card bo tròn, button chunky, và một display face tùy chỉnh (Champ) truyền tải brand voice trước khi ai kịp đọc bất kỳ copy nào."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|---------|"
    info: "| Buttercream | `#fff6d2` | `--color-buttercream` | Page canvas, bề mặt card, và background ấm — neutral chủ đạo tạo nhiệt độ ấm áp cho toàn bộ UI |"
    info: "| Marigold | `#ffd801` | `--color-marigold` | Primary CTA fill, brand accent — màu vàng xe buýt trường học, giọng màu duy nhất trong hệ thống, chỉ dành riêng cho bề mặt hành động |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, border, icon strokes, và structural outlines — sử dụng gần như toàn bộ, định nghĩa cảm giác sổ cái tương phản cao |"
    info: "| Bone White | `#ffffff` | `--color-bone-white` | Text đảo màu trên nền tối, surface inversion, và ghép cặp tương phản với đen |"
    info: "| Char | `#666664` | `--color-char` | Secondary surfaces và muted structural fills khi kem ấm quá nhạt để làm nền cho một khối |"
    info: "| Oat | `#cccbc7` | `--color-oat` | Neutral button borders và subtle dividers khi đen thuần quá nặng |"
    info: "| Fawn | `#dcdce6` | `--color-fawn` | Neutral pha lạnh nhẹ cho secondary surface layers và quiet dividers |"

  tokens___typography:

    sans_serif___sans_serif___được_phát_hiện_trong_dữ_liệu_trích_xuất_nhưng_không_được_ai_mô_tả____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.15"
      - "**Vai trò:** sans-serif — được phát hiện trong dữ liệu trích xuất nhưng không được AI mô tả"

    champ___display_and_headline_typeface___slab_serif_chunky_ở_weight_800_cho_hero_và_large_headings__weight_500_cho_sub_display_sizes__lineheight_chặt_1_01_ở_72px_và_tracking__0_01em_giúp_các_dòng_xếp_chồng_mạnh_mẽ__đây_là_brand_voice_carrier__headline_nên_có_cảm_giác_được_khắc__không_phải_được_typeset____font_champ:
      - "**Thay thế:** Roboto Slab, Zilla Slab, hoặc Bitter"
      - "**Weights:** 500, 800"
      - "**Sizes:** 26px, 38px, 54px, 72px"
      - "**Line height:** 1.01-1.40"
      - "**Letter spacing:** 0.01em ở mọi kích thước"
      - "**Vai trò:** Display and headline typeface — slab serif chunky ở weight 800 cho hero và large headings, weight 500 cho sub-display sizes. lineHeight chặt (1.01 ở 72px) và tracking +0.01em giúp các dòng xếp chồng mạnh mẽ. Đây là brand voice carrier; headline nên có cảm giác được khắc, không phải được typeset"

    dm_sans___body__ui_labels__buttons__và_small_interface_text___neutral_grotesque_làm_việc_chính__400_cho_body_copy__500_cho_labels__700_cho_emphasized_ui_text__negative_tracking__0_02em_ở_20px_siết_chặt_small_headings__positive_tracking_0_016em_ở_10px_thêm_không_gian_cho_micro_labels____font_dm_sans:
      - "**Thay thế:** Inter, Manrope, hoặc system-ui"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 10px, 16px, 20px"
      - "**Line height:** 1.00-2.33"
      - "**Letter spacing:** -0.0200em, 0.0100em, 0.0160em"
      - "**Vai trò:** Body, UI labels, buttons, và small interface text — neutral grotesque làm việc chính. 400 cho body copy, 500 cho labels, 700 cho emphasized UI text. Negative tracking (-0.02em) ở 20px siết chặt small headings, positive tracking (0.016em) ở 10px thêm không gian cho micro labels"

    dm_mono___monospaced_accent_cho_dữ_liệu_số_kiểu_sổ_cái__giá_cả__và_technical_callouts_nơi_monospaced_alignment_củng_cố_cảm_giác_tài_liệu_tài_chính____font_dm_mono:
      - "**Thay thế:** IBM Plex Mono hoặc JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 18px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.01em"
      - "**Vai trò:** Monospaced accent cho dữ liệu số kiểu sổ cái, giá cả, và technical callouts nơi monospaced alignment củng cố cảm giác tài liệu tài chính"

    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"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Vai trò:** Arial — đượ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 | 10px | 1.5 | 0.16px | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 26px | 1.2 | — | `--text-heading-sm` |"
      info: "| heading | 38px | 1.16 | — | `--text-heading` |"
      info: "| heading-lg | 54px | 1.01 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1.01 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    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: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 132 | 132px | `--spacing-132` |"
      info: "| 236 | 236px | `--spacing-236` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 20px |"
      info: "| inputs | 16px |"
      info: "| buttons | 9999px |"

    shadows:

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

    layout:

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

  components:

    pill_button___filled_marigold:
      vai_trò: "Primary CTA"

      info: "Background #ffd801, text #000000, border-radius 9999px (full pill), padding 20px 32px, DM Sans 16px weight 500. Button có màu duy nhất trong hệ thống. Dùng cho hành động quan trọng nhất trên mỗi màn hình."

    pill_button___outlined_black:
      vai_trò: "Secondary action hoặc navigation"

      info: "Background transparent, border 1.5px solid #000000, text #000000, border-radius 9999px, padding 12-20px 32px, DM Sans 16px weight 500. Dùng cho secondary CTA và nav bar actions như Sign In."

    pill_button___filled_black:
      vai_trò: "High-emphasis secondary CTA"

      info: "Background #000000, text #ffffff, border-radius 9999px, padding 20px 32px, DM Sans 16px weight 500. Đảo ngược của Marigold primary; dùng khi màu vàng primary đã xuất hiện và cần một hành động thứ hai có trọng lượng tương đương."

    card___surface:
      vai_trò: "Content container trên cream canvas"

      info: "Background #ffffff, border-radius 20px, padding 32px, tùy chọn soft shadow rgba(70,58,0,0.1) 0 4px 12px. Card tiêu chuẩn nằm như một hòn đảo trắng trên nền kem ấm."

    card___warm:
      vai_trò: "Feature hoặc content card hòa vào canvas"

      info: "Background #fff6d2 (giống canvas, hoặc biến thể tối hơn 1-2%), border-radius 20px, padding 32px, không border. Card thuộc về page thay vì nổi trên đó."

    navigation_bar:
      vai_trò: "Top-level site navigation"

      info: "Background #fff6d2, logo căn trái, nav links căn giữa (DM Sans 16px weight 400, #000000), action buttons căn phải. Chiều cao ~64px. Không border hay shadow — độ tương phản giữa kem và content là divider."

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

      info: "Background image full-viewport với dark scrim overlay. Headline căn giữa bằng Champ 72px weight 800, #ffffff. Subtext bằng DM Sans 18-20px, #ffffff. Marigold pill CTA căn giữa bên dưới. Scrim dùng tông tối ấm, không phải đen thuần, để duy trì sự gắn kết của palette."

    section_divider:
      vai_trò: "Phân cách thị giác giữa các content block"

      info: "Đường ngang 1px #000000, hoặc đơn giản là spacing gap 80px. Hệ thống ưu tiên khoảng trắng rộng rãi hơn divider nhìn thấy được."

    input_field:
      vai_trò: "Form input"

      info: "Background #ffffff, border 1.5px solid #cccbc7, border-radius 16px, padding 16px, DM Sans 16px weight 400, placeholder #666664. Focus state chuyển border sang #000000."

    feature_grid___3_column:
      vai_trò: "Feature hoặc benefit showcase"

      info: "Grid 3 cột card với gap 24px, mỗi card radius 20px với padding 32px. Heading bằng Champ 26px weight 800, body bằng DM Sans 16px weight 400. Card nằm trên cream canvas."

    tag___badge:
      vai_trò: "Category hoặc status label"

      info: "Background #fff6d2 hoặc #000000, text #000000 hoặc #ffffff, border-radius 9999px, padding 6px 16px, DM Sans 13-16px weight 500. Nhỏ gọn, hình pill, không icon."

    stat_callout:
      vai_trò: "Numerical proof point hoặc key metric"

      info: "Số lớn bằng Champ 54px weight 800, label bằng DM Sans 16px weight 400 #000000. Có thể dùng DM Mono 18px cho tiền tệ hoặc con số chính xác."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng Marigold (#ffd801) cho single primary CTA trên mỗi bề mặt — đây là giọng màu duy nhất trong hệ thống và sẽ mất sức nếu bị pha loãng"
      - "Đặt tất cả button ở border-radius 9999px (full pill) — button góc sắc hoặc bo tròn vừa phải phá vỡ cảm giác sổ cái thủ công"
      - "Dùng Champ weight 800 ở 38-72px cho tất cả display text và weight 500 ở 26px cho sub-display — không bao giờ dùng DM Sans cho headline"
      - "Xây dựng trên Buttercream (#fff6d2) canvas với card trắng (#ffffff) nổi bên trên — không bao giờ dùng xám lạnh cho bề mặt"
      - "Dùng hairline 1px #000000 border và 1.5px cho interactive elements — shadow chỉ dành cho floating UI (menu, popovers) ở rgba(70,58,0,0.1) 0 4px 12px"
      - "Ghép mỗi Marigold CTA với một black-outlined pill button làm secondary partner — sự tương phản giữa filled-yellow và outlined-black là khoảnh khắc đặc trưng"
      - "Giữ section gap ở 80px và element gap ở 24px — sự rộng rãi là thứ làm cho palette ấm có cảm giác bình yên thay vì choáng ngợp"

    không_nên_làm:
      - "Không dùng bất kỳ điểm nhấn màu xanh dương, xanh lá, hoặc đỏ nào — hệ thống là đơn sắc ngoại trừ Marigold; semantic colors nên được thể hiện qua form (border, icon) chứ không phải hue"
      - "Không áp shadow cho card hoặc content block — card nên nằm trên canvas nhờ tương phản màu sắc, không phải elevation"
      - "Không dùng sans-serif body text ở kích thước trên 24px — Champ chiếm toàn bộ display territory"
      - "Không đặt background là trắng thuần (#ffffff) cho page canvas — Buttercream là nền; trắng chỉ xuất hiện trên bề mặt card"
      - "Không trộn lẫn border-radius values trong cùng một component category — tất cả button là pill, tất cả card là 20px, tất cả input là 16px"
      - "Không dùng nhiều sắc thái vàng — Marigold (#ffd801) là màu vàng duy nhất; tông kem nhạt hơn là neutral, không phải accent"
      - "Không thêm gradient — hệ thống phẳng và ấm; chiều sâu đến từ xếp lớp màu (cream → white → ink), không phải gradient washes"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#fff6d2` | Base page background — buttercream ấm định nghĩa toàn bộ thẩm mỹ |"
    info: "| 1 | Card | `#ffffff` | Bề mặt trắng cho content card nâng cao trên cream canvas |"
    info: "| 2 | Oat | `#cccbc7` | Neutral block yên tĩnh cho muted UI sections |"
    info: "| 3 | Ink | `#000000` | Inverted dark surface cho footer, inverted sections, hoặc high-contrast blocks |"

  elevation:

    - "**Floating card hoặc menu:** `rgba(70, 58, 0, 0.1) 0px 4px 12px 0px`"

  imagery:

    info: "Photography mang tông ấm, phong cách tài liệu về đời sống — không gian làm việc thực, bàn tay đang làm việc, khoảnh khắc con người chân thật thay vì ảnh dàn dựng. Ảnh được xử lý với color grade ấm hòa vào palette kem. Hero photography nằm full-bleed phía sau text với dark overlay để dễ đọc. Product UI mockups xuất hiện dưới dạng card trắng sạch sẽ nằm trong cream sections. Không có illustration hay 3D renders — thương hiệu mang tính nhiếp ảnh và chất liệu."

  layout:

    info: "Full-bleed sections xen kẽ giữa cream canvas và white cards. Hero là full-viewport image với dark scrim và headline căn giữa. Navigation là top bar đơn giản với logo căn trái, nav links căn giữa, và cặp sign-in/get-started căn phải. Content sections xếp chồng dọc với gap 80px rộng rãi. Card được sắp xếp trong grid 2-3 cột với radius 20px. Layout căn giữa, đối xứng, không vội vã — spacing làm công việc thay vì các thủ thuật bố cục."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #000000"
    - "background: #fff6d2"
    - "surface/card: #ffffff"
    - "border: #000000 (structural), #cccbc7 (subtle)"
    - "accent/brand: #ffd801 (Marigold)"
    - "primary action: #ffd801 (filled action)"

    info: "Ví dụ Component Prompts:"

    - "Tạo Primary Action Button: background #ffd801, text #000000, radius 9999px, pill padding nhỏ gọn. Dùng filled treatment này cho main CTA."

    - "Tạo feature card grid 3 cột trên Buttercream (#fff6d2) background. Mỗi card: background trắng (#ffffff), radius 20px, padding 32px. Heading bằng Champ 26px weight 800, #000000. Body bằng DM Sans 16px weight 400, #000000. Gap 24px giữa các card. Section padding 80px trên và dưới."

    - "Tạo nav bar: background Buttercream (#fff6d2), chiều cao ~64px. Trái: brand name bằng Champ 26px weight 800. Giữa: 3 nav links bằng DM Sans 16px weight 400, #000000. Phải: ghost pill button (border 1.5px #000000, radius 9999px, padding 12px 32px, DM Sans 16px weight 500) và bên cạnh là Marigold (#ffd801) filled pill button với text #000000, radius 9999px, padding 20px 32px."

    - "Tạo input field: background trắng (#ffffff), border 1.5px #cccbc7, radius 16px, padding 16px, DM Sans 16px weight 400, placeholder text #666664. Khi focus, border chuyển sang #000000."

    - "Tạo stat block: số lớn bằng Champ 54px weight 800, #000000, với label bên dưới bằng DM Sans 16px weight 400, #000000. Nếu stat là con số tiền tệ, render số bằng DM Mono 18px weight 400 thay thế."

  color_temperature_philosophy:

    info: "Palette hoạt động trên một trục nhiệt độ ấm duy nhất. Mọi neutral — từ Buttercream canvas qua Oat và Char — đều mang một chút sắc ấm. Điều này có chủ đích: hệ thống từ chối quy ước xám lạnh của SaaS hiện đại để chọn sự ấm áp của giấy và mực, gợi lên một cuốn sổ cái vật lý hoặc phiếu đặt hàng của tiệm bánh. Bất kỳ màu mới nào thêm vào hệ thống phải được kiểm tra với độ ấm này. Một màu xanh dương đọc là lạnh sẽ phá vỡ toàn bộ logic thị giác. Khi nghi ngờ, hãy làm ấm nó lên."

  similar_brands:

    - "**Lemonade (Insurance)** — Cùng palette kem ấm + một điểm nhấn vàng rực rỡ với display type chunky và pill-shaped CTAs"
    - "**Ramp** — Light theme tông ấm với black text tương phản cao và một accent color duy nhất cho primary actions"
    - "**Brewdog / beverage DTC brands** — Cream canvas bơ với saturated yellow CTAs và rounded, friendly component shapes"
    - "**GoCardless** — Warm light palette với pill buttons và generous spacing, dù Apron đẩy xa hơn vào territory cream/yellow"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-buttercream: #fff6d2;
          --color-marigold: #ffd801;
          --color-ink-black: #000000;
          --color-bone-white: #ffffff;
          --color-char: #666664;
          --color-oat: #cccbc7;
          --color-fawn: #dcdce6;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-champ: 'Champ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.16px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.2;
          --text-heading: 38px;
          --leading-heading: 1.16;
          --text-heading-lg: 54px;
          --leading-heading-lg: 1.01;
          --text-display: 72px;
          --leading-display: 1.01;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* 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-36: 36px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-132: 132px;
          --spacing-236: 236px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 20px;
          --radius-inputs: 16px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(70, 58, 0, 0.1) 0px 4px 12px 0px;
        
          /* Surfaces */
          --surface-canvas: #fff6d2;
          --surface-card: #ffffff;
          --surface-oat: #cccbc7;
          --surface-ink: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-buttercream: #fff6d2;
          --color-marigold: #ffd801;
          --color-ink-black: #000000;
          --color-bone-white: #ffffff;
          --color-char: #666664;
          --color-oat: #cccbc7;
          --color-fawn: #dcdce6;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-champ: 'Champ', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.5;
          --tracking-caption: 0.16px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 26px;
          --leading-heading-sm: 1.2;
          --text-heading: 38px;
          --leading-heading: 1.16;
          --text-heading-lg: 54px;
          --leading-heading-lg: 1.01;
          --text-display: 72px;
          --leading-display: 1.01;
        
          /* 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-36: 36px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-120: 120px;
          --spacing-132: 132px;
          --spacing-236: 236px;
        
          /* Border Radius */
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-md: rgba(70, 58, 0, 0.1) 0px 4px 12px 0px;
        }