sweetgreen___style_reference:
  info: "> bảng phong cách farm-stand vào giờ vàng"

  theme: "light"

  info: "Hệ thống thiết kế của sweetgreen là một thẩm mỹ ấm áp, pha trộn giữa farm-stand và typography hiện đại: nền cream (#f4f3e7) bắt nguồn từ chất liệu tự nhiên, với deep forest green làm neo cấu trúc và electric lime (#e6ff55) làm màu hành động đơn lẻ, năng lượng cao. Nhiếp ảnh là yếu tố dẫn dắt thương hiệu — những shot đồ ăn overhead, bão hòa màu, trên nền gạch ấm, gốm sứ và bê tông — được xử lý như hero, không bao giờ là trang trí. Typography đảm nhận phần nặng trên chrome: một geometric sans tùy chỉnh (SweetSans) thể hiện các nhãn danh mục cỡ lớn và hero headline ở weight cực đoan (400 ở 70–80px, với line-height 0.85 khiến các chữ gần như chạm nhau), trong khi một display face siêu nhẹ thứ cấp (Grenette ở 200) tạo sự tương phản qua sự kiềm chế. Các component được thiết kế tối giản có chủ đích — pill-shaped buttons, ghost text links với mũi tên, product cards không badge — để đồ ăn và headline typography chiếm trọn mọi màn hình."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Deep Forest | `#00473c` | `--color-deep-forest` | Màu thương hiệu chính, nav logo, dark pill buttons, text accents, badge borders, link colors — màu xanh cấu trúc neo giữ bảng màu |"
    info: "| Lime Glow | `#e6ff55` | `--color-lime-glow` | Màu hành động xanh cho filled buttons, trạng thái điều hướng được chọn, và các thời điểm chuyển đổi tập trung. |"
    info: "| Sage Mist | `#d8e5d6` | `--color-sage-mist` | Nền section, card surfaces, content band xen kẽ — màu xanh thực vật nhẹ nhàng báo hiệu sự tươi mới mà không cạnh tranh với ảnh đồ ăn |"
    info: "| Warm Sand | `#e8dcc6` | `--color-warm-sand` | Accent surface cho các section band xen kẽ — màu be ấm kết hợp với ảnh đồ ăn và thêm sự đa dạng earthy vào bảng màu xanh chủ đạo |"
    info: "| Cream Canvas | `#f4f3e7` | `--color-cream-canvas` | Nền trang chính, màu trắng off-white ấm áp mang lại cho toàn bộ hệ thống cảm giác hữu cơ, không lâm sàng |"
    info: "| Forest Shadow | `#0e150e` | `--color-forest-shadow` | Màu text chính, borders, input strokes — gần như đen với một chút undertone xanh lá hầu như không thấy được, hài hòa với các màu xanh thương hiệu |"
    info: "| Pure Ink | `#000000` | `--color-pure-ink` | Text tương phản tối đa, hairlines, icon strokes — được dùng khi cần độ sắc nét tuyệt đối |"
    info: "| Warm Gray | `#8c8c82` | `--color-warm-gray` | Borders tương phản trung bình, control outlines, và structural separators. Không nâng cấp lên màu CTA chính |"
    info: "| Slate Gray | `#555555` | `--color-slate-gray` | Text thứ cấp trong các button context disabled hoặc low-emphasis |"

  tokens___typography:

    sweetsans___display_headlines__hero_text__large_category_labels___được_dùng_ở_kích_thước_cực_lớn_70_80px_với_leading_chặt_0_85_khiến_các_chữ_gần_như_chạm_nhau__weight_400_ở_kích_thước_này_là_lựa_chọn_signature__tạo_ra_một_thẩm_quyền_điềm_tĩnh_không_cần_la_hét____font_sweetsans:
      - "**Thay thế:** Dazzed, Supreme, hoặc NB Architekt như một geometric grotesque thay thế"
      - "**Weights:** 400"
      - "**Sizes:** 40px, 70px, 80px"
      - "**Line height:** 0.85–1.00"
      - "**Vai trò:** Display headlines, hero text, large category labels — được dùng ở kích thước cực lớn (70–80px) với leading chặt (0.85) khiến các chữ gần như chạm nhau; weight 400 ở kích thước này là lựa chọn signature, tạo ra một thẩm quyền điềm tĩnh không cần la hét"

    grenette___secondary_display_accent___ultra_thin_weight_với_extreme_negative_tracking_tạo_ra_một_điểm_nhấn_editorial_tinh_tế__đối_trọng_với_sweetsans_display_hình_học____font_grenette:
      - "**Thay thế:** Migra, Canela, hoặc Editorial New như một thin editorial serif/grotesque thay thế"
      - "**Weights:** 200"
      - "**Sizes:** 48px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.047em"
      - "**Vai trò:** Secondary display accent — ultra-thin weight với extreme negative tracking tạo ra một điểm nhấn editorial tinh tế, đối trọng với SweetSans display hình học"

    sweetsanstext___body_text__navigation__button_labels__card_descriptions__footers___positive_tracking_0_01_0_05em_cải_thiện_khả_năng_đọc_ở_kích_thước_nhỏ__weight_700_cho_labels_và_ctas__400_cho_body____font_sweetsanstext:
      - "**Thay thế:** Söhne, Inter, hoặc GT America như một geometric grotesque thay thế"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 20px, 24px"
      - "**Line height:** 1.20–1.38"
      - "**Letter spacing:** 0.01em ở 12–14px, 0.017em ở 16px, 0.03em ở 20px, 0.05em ở 24px"
      - "**Vai trò:** Body text, navigation, button labels, card descriptions, footers — positive tracking (0.01–0.05em) cải thiện khả năng đọc ở kích thước nhỏ; weight 700 cho labels và CTAs, 400 cho body"

    sweetsanstext_regular___small_ui_text__micro_labels__fine_print___biến_thể_regular_weight_cho_các_kích_thước_đọc_nhỏ_nhất____font_sweetsanstext_regular:
      - "**Thay thế:** Söhne, Inter"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px"
      - "**Line height:** 1.29–1.33"
      - "**Letter spacing:** 0.017em"
      - "**Vai trò:** Small UI text, micro-labels, fine print — biến thể regular-weight cho các kích thước đọc nhỏ nhất"

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | 0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | 0.24px | `--text-body-sm` |"
      info: "| body | 16px | 1.25 | 0.27px | `--text-body` |"
      info: "| body-lg | 18px | 1.33 | 0.54px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.2 | 0.6px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.21 | 1.2px | `--text-heading-sm` |"
      info: "| heading | 40px | 0.85 | — | `--text-heading` |"
      info: "| heading-lg | 48px | 1 | -2.26px | `--text-heading-lg` |"
      info: "| display | 70px | 0.85 | — | `--text-display` |"
      info: "| display-lg | 80px | 1 | — | `--text-display-lg` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| small | 4px |"
      info: "| badges | 20px |"
      info: "| images | 20px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| xl | `rgba(14, 21, 14, 0.4) 3px 3px 32px -10px` | `--shadow-xl` |"

    layout:

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

  components:

    pill_cta_button_lime_fill:
      vai_trò: "Primary action button — được dùng cho 'Order Now', 'Add to Bag', và bất kỳ hành động chuyển đổi nào"

      info: "Hình pill bo tròn hoàn toàn (9999px), nền #e6ff55, text #0e150 trong SweetSansText weight 700 ở 16–18px với tracking 0.017em, padding 16px 24px. Lớp fill lime trên nền cream tạo ra element chức năng có độ tương phản cao nhất trên mọi trang."

    pill_outline_button_forest_border:
      vai_trò: "Secondary hoặc navigation action — được dùng cho nav 'ORDER' pill, secondary CTAs"

      info: "Hình pill bo tròn hoàn toàn (9999px), fill trong suốt hoặc cream, border 2px #00473c, text #00473c trong SweetSansText weight 700 ở 16px, padding 12px 20px. Dạng outline thay vì filled để duy trì trọng lượng thị giác nhẹ hơn so với primary CTA."

    ghost_text_link:
      vai_trò: "Inline action link — được dùng cho 'Order now →' trên product cards, footer links, inline CTAs"

      info: "Không background, không border, text #0e150 trong SweetSansText weight 700 ở 16px, kèm glyph mũi tên phải. Chỉ có underline khi hover. Mũi tên là neo thị giác."

    navigation_bar:
      vai_trò: "Điều hướng cấp cao nhất — hiển thị trên mọi trang"

      info: "Thanh ngang trên nền #f4f3e7, logo 'sweetgreen' căn giữa trong #00473c ở 24–28px SweetSansText weight 700, các nav items hai bên trong SweetSansText weight 700 ở 14px với tracking 0.05em, all-caps. Item 'ORDER' bên phải được render dưới dạng Pill Outline Button trong #00473c."

    menu_category_tab:
      vai_trò: "Bộ lọc section cho việc duyệt menu — 'Salads', 'Warm Bowls', 'Sides'"

      info: "Tab chỉ có text lớn, không border, không thay đổi background giữa các trạng thái. Tab active: #0e150 trong SweetSans ở 40px weight 400 với một chấm tròn indicator nhỏ bên dưới. Tab inactive: #0e150 ở 40px không có indicator. Bản thân thang typography là tín hiệu điều hướng."

    product_card:
      vai_trò: "Hiển thị món trong menu — một card cho mỗi món ăn trong grid duyệt"

      trên_cùng: "ảnh đồ ăn hình vuông với border-radius 20px. Bên dưới ảnh: padding 24px, tên sản phẩm trong SweetSansText weight 700 ở 20px #0e150, gap 8px, mô tả trong SweetSansText weight 400 ở 16px #0e150 với line-height 1.25, gap 16px, Ghost Text Link 'Order now →'. Không có card background, không border, không shadow — bản thân bức ảnh LÀ bề mặt card."

    online_only_badge:
      vai_trò: "Chỉ báo khả năng có sẵn trên các sản phẩm kỹ thuật số độc quyền"

      info: "Định vị absolute ở góc trên bên trái của product card, nền #e6ff55, text #0e150 trong SweetSansText weight 700 ở 12px all-caps với tracking 0.05em, padding 4px 12px, border-radius 20px. Nhỏ, sáng, không thể bỏ qua."

    full_bleed_hero_with_text_overlay:
      vai_trò: "Landing page hero — tính năng sản phẩm đơn lẻ hoặc chiến dịch"

      info: "Ảnh full-viewport-width (không border-radius) làm lớp nền. Panel text overlay bán trong suốt trong cream (#f4f3e7 ở ~90% opacity) neo ở góc dưới bên trái, padding 40px, chứa: eyebrow text small-caps trong SweetSansText weight 700 ở 14px, gap 8px, tên sản phẩm trong SweetSans ở 70–80px weight 400 line-height 0.85, gap 24px, Pill CTA Button (Lime Fill)."

    split_content_section:
      vai_trò: "Nội dung tính năng/editorial — các phần catering, about, mission"

      info: "Bố cục hai cột trên nền section Sage Mist hoặc Warm Sand. Cột trái: chồng text với display headline lớn trong SweetSans ở 48–70px weight 400, gap 24px, các sub-section có cấu trúc với labels in đậm trong SweetSansText weight 700 ở 18px và body text weight 400 ở 16px. Cột phải: một ảnh full-bleed đơn lẻ với border-radius 20px. Padding dọc rộng rãi 80–120px."

    eyebrow_label:
      vai_trò: "Nhãn ngữ cảnh trước headline — 'SUNSHINE IN A SALAD', section identifiers"

      info: "All-caps, SweetSansText weight 700 ở 14px, tracking 0.05em, #0e150 hoặc #00473c. Định vị cách headline 16–24px phía trên. Hoạt động như một phụ đề typography thêm ngữ cảnh mà không có trọng lượng thị giác."

    food_photograph_standard:
      vai_trò: "Nhiếp ảnh sản phẩm và editorial"

      info: "Ảnh góc overhead hoặc 3/4, độ bão hòa cao, ánh sáng tự nhiên ấm áp. Bo góc 20px. Không overlay, không text chèn vào. Full-bleed trong container của chúng — đồ ăn là toàn bộ hình ảnh."

  do_s_and_don_ts:

    nên_làm:
      - "Dùng SweetSans ở 70–80px weight 400 với line-height 0.85 cho tất cả primary display headlines — tỷ lệ weight so với kích thước là giọng nói thương hiệu"
      - "Mặc định #f4f3e7 làm nền trang; chỉ dùng #d8e5d6 hoặc #e8dcc6 cho các content band full-width xen kẽ"
      - "Chỉ dùng fill #e6ff55 + text #0e150 cho primary action button — không bao giờ đảo ngược mối quan hệ"
      - "Render tất cả buttons dưới dạng pills bo tròn hoàn toàn (9999px radius) với padding 16px 24px và SweetSansText weight 700 ở 16px"
      - "Để ảnh đồ ăn lấp đầy container edge-to-edge với border-radius 20px — không frame, không border, không overlay xung quanh ảnh"
      - "Dùng 'Order now →' dưới dạng Ghost Text Link (không background, glyph mũi tên) cho tất cả secondary product actions"
      - "Áp dụng positive letter-spacing (0.01–0.05em) cho tất cả text dưới 24px trong SweetSansText để dễ đọc"

    không_nên_làm:
      - "Không dùng nhiều accent colors — bảng màu cố tình giới hạn ở một lime (#e6ff55) và một forest green (#00473c) cho hành động và thương hiệu"
      - "Không đặt headlines ở weight 700 trở lên — thẩm quyền thương hiệu đến từ sự tự tin điềm tĩnh của 400 ở kích thước lớn"
      - "Không thêm card backgrounds, borders, hoặc drop shadows vào product cards — bức ảnh chính là card"
      - "Không dùng lime (#e6ff55) cho bất kỳ thứ gì khác ngoài primary CTA fills và availability badges"
      - "Không dùng line-height trên 1.0 cho display type — leading chặt là thứ làm cho headlines có cảm giác hoành tráng"
      - "Không render buttons dưới dạng hình chữ nhật, capsule, hoặc với radii nhỏ — pill (9999px) là hình dạng button duy nhất"
      - "Không áp dụng gradient — hệ thống hoàn toàn là flat color, với hơi ấm đến từ cream canvas và ảnh bão hòa"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Cream Canvas | `#f4f3e7` | Nền trang cơ bản — trắng off-white ấm áp mang cảm giác hữu cơ thay vì lâm sàng |"
    info: "| 1 | Sage Mist Band | `#d8e5d6` | Các content section full-width xen kẽ với canvas — nền thực vật nhẹ nhàng cho nội dung text-forward hoặc split-layout |"
    info: "| 2 | Warm Sand Band | `#e8dcc6` | Nền section xen kẽ — tông màu earthy ấm áp để tạo biến thể nhịp điệu thị giác |"
    info: "| 3 | Lime Glow Highlight | `#e6ff55` | Accent surface cho badges và CTA fills — bề mặt màu sắc duy nhất thu hút sự chú ý chức năng |"
    info: "| 4 | Deep Forest Surface | `#00473c` | Accent surface tối cho nav pills, dark-mode content blocks, hoặc reversed text sections |"

  elevation:

    - "**Product cards, CTA buttons:** `rgba(14, 21, 14, 0.4) 3px 3px 32px -10px`"

  imagery:

    info: "Nhiếp ảnh là nội dung thị giác chính. Tất cả ảnh đều là ảnh đồ ăn độ bão hòa cao, góc overhead hoặc 3/4, được chụp trong ánh sáng tự nhiên ấm áp, trình bày trên các bề mặt hữu cơ (gạch men, bê tông, gỗ, vải lanh). Các xử lý là full-bleed trong container với border-radius 20px nhất quán — không frame, không border, không overlay trang trí. Không có illustration, không đồ họa trừu tượng, không 3D render, không ảnh stock lifestyle. Đồ ăn LÀ nội dung thị giác. Icons tối giản — line-based, single-weight strokes trong #0e150, chỉ dùng cho UI chức năng (mũi tên, đóng, quay lại). Badge 'ONLINE ONLY' là element UI duy nhất overlay trực tiếp lên ảnh."

  layout:

    info: "Hero photography full-bleed với panel text overlay góc dưới bên trái trên landing page. Max-width 1200px căn giữa cho tất cả content sections. Nhịp điệu section xen kẽ giữa canvas #f4f3e7 và các band full-width #d8e5d6 hoặc #e8dcc6 với padding dọc 80–120px. Menu grid sử dụng bố cục card 3 cột với ảnh sản phẩm hình vuông. Các editorial content sections sử dụng split 2 cột (text trái, một ảnh full-bleed phải). Navigation là một top bar đơn — không sidebar, không mega-menu, không sticky behavior ngoài nav. Whitespace rộng rãi giữa các section tạo ra nhịp điệu gallery điềm tĩnh, nơi đồ ăn và typography có thể thở."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #0e150e"
    - "background: #f4f3e7"
    - "border: #0e150e hoặc #00473c"
    - "accent: #e6ff55 (Lime Glow)"
    - "brand: #00473c (Deep Forest)"
    - "surface alt: #d8e5d6 (Sage Mist)"
    - "primary action: #e6ff55 (filled action)"

  example_component_prompts:

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

    - "**Product Card**: Ảnh đồ ăn hình vuông ở trên, border-radius 20px. Padding 24px bên dưới ảnh. Tên sản phẩm trong SweetSansText weight 700 ở 20px, #0e150e. Gap 8px. Mô tả trong SweetSansText weight 400 ở 16px, #0e150e, line-height 1.25. Gap 16px. Ghost text link 'Order now →' trong SweetSansText weight 700 ở 16px, #0e150e. Không card background, không border, không shadow."

    - "**Menu Category Tabs**: Hàng ngang các tab chỉ có text. Tab active: SweetSans weight 400 ở 40px, #0e150e, với chấm tròn indicator 4px bên dưới. Tab inactive: cùng kích thước và màu sắc, không có chấm tròn. Gap 40px giữa các tab. Không borders, không backgrounds, không underlines."

    - "**Split Feature Section**: Nền #d8e5d6 full-width, padding dọc 120px. Bố cục hai cột, max-width 1200px căn giữa. Cột trái (50%): display headline trong SweetSans weight 400 ở 48px, #0e150e, line-height 1.0. Gap 24px. Sub-labels in đậm trong SweetSansText weight 700 ở 18px, #0e150e. Body text trong SweetSansText weight 400 ở 16px, #0e150e. Cột phải (50%): một ảnh đơn lẻ với border-radius 20px."

    - "**Online Only Badge**: Định vị absolute góc trên bên trái của ảnh product card. Nền #e6ff55, text #0e150e 'ONLINE ONLY' trong SweetSansText weight 700 ở 12px, all-caps, tracking 0.05em, padding 4px 12px, border-radius 20px."

  similar_brands:

    - "**Cava** — Cùng chiến lược nhiếp ảnh food-first, nền neutral ấm áp, và pill-shaped CTAs với một màu accent sống động duy nhất"
    - "**Chobani** — Bảng màu earthy ấm áp tương tự với tông sage và cream, custom display typography cỡ lớn, và editorial food photography"
    - "**Whole Foods Market** — Cùng hơi ấm farm-stand trong bảng màu và cam kết để product photography chiếm ưu thế hơn UI chrome"
    - "**Goop** — Cùng cách tiếp cận xen kẽ các content band màu full-width với custom display type lớn và lifestyle photography"
    - "**Olipop** — Tương tự pill-shaped buttons, cream canvas, và large geometric display headlines kết hợp với saturated product photography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-deep-forest: #00473c;
          --color-lime-glow: #e6ff55;
          --color-sage-mist: #d8e5d6;
          --color-warm-sand: #e8dcc6;
          --color-cream-canvas: #f4f3e7;
          --color-forest-shadow: #0e150e;
          --color-pure-ink: #000000;
          --color-warm-gray: #8c8c82;
          --color-slate-gray: #555555;
        
          /* Typography — Font Families */
          --font-sweetsans: 'SweetSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-grenette: 'Grenette', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sweetsanstext: 'SweetSansText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sweetsanstext-regular: 'SweetSansText-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: 0.24px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: 0.27px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.33;
          --tracking-body-lg: 0.54px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: 1.2px;
          --text-heading: 40px;
          --leading-heading: 0.85;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.26px;
          --text-display: 70px;
          --leading-display: 0.85;
          --text-display-lg: 80px;
          --leading-display-lg: 1;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
          --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-40: 40px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-full: 1000px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-small: 4px;
          --radius-badges: 20px;
          --radius-images: 20px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        
          /* Shadows */
          --shadow-xl: rgba(14, 21, 14, 0.4) 3px 3px 32px -10px;
        
          /* Surfaces */
          --surface-cream-canvas: #f4f3e7;
          --surface-sage-mist-band: #d8e5d6;
          --surface-warm-sand-band: #e8dcc6;
          --surface-lime-glow-highlight: #e6ff55;
          --surface-deep-forest-surface: #00473c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-deep-forest: #00473c;
          --color-lime-glow: #e6ff55;
          --color-sage-mist: #d8e5d6;
          --color-warm-sand: #e8dcc6;
          --color-cream-canvas: #f4f3e7;
          --color-forest-shadow: #0e150e;
          --color-pure-ink: #000000;
          --color-warm-gray: #8c8c82;
          --color-slate-gray: #555555;
        
          /* Typography */
          --font-sweetsans: 'SweetSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-grenette: 'Grenette', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sweetsanstext: 'SweetSansText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sweetsanstext-regular: 'SweetSansText-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: 0.24px;
          --text-body: 16px;
          --leading-body: 1.25;
          --tracking-body: 0.27px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.33;
          --tracking-body-lg: 0.54px;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.6px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.21;
          --tracking-heading-sm: 1.2px;
          --text-heading: 40px;
          --leading-heading: 0.85;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.26px;
          --text-display: 70px;
          --leading-display: 0.85;
          --text-display-lg: 80px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-lg-2: 11px;
          --radius-2xl: 20px;
          --radius-3xl: 24px;
          --radius-full: 1000px;
        
          /* Shadows */
          --shadow-xl: rgba(14, 21, 14, 0.4) 3px 3px 32px -10px;
        }