graza___style_reference:
  info: "> Quầy deli Địa Trung Hải ngập nắng, được xếp đặt bằng tay"

  theme: "light"

  info: "Graza mang chất của một quầy deli Địa Trung Hải tràn ngập ánh nắng — bề mặt kem ấm áp, mực olive đậm đọc như gỗ lâu năm, và những mảng xanh chanh bất chợt như rau củ dưới ánh đèn chợ. Typography mang trọng lượng editorial đầy tự tin: một typewriter serif đảm nhận phần hội thoại trong khi Garamond condensed lướt vào cho những khoảnh khắc display cỡ lớn. Màu sắc hoạt động như một gian hàng rau củ — canvas luôn ấm và trung tính, và những mảng xanh tươi xuất hiện dưới dạng section band full-bleed hoặc những điểm nhấn chức năng nhỏ, không bao giờ là chrome chồng chrome. Các component được giữ tối giản và đặt bằng tay: pill buttons, hairline borders, image radii 20px nhẹ nhàng, và hầu như không có shadow. Nhịp điệu luân phiên giữa hero plate ảnh full-bleed, editorial spread chỉ text trên nền màu đồng nhất, và bố cục text + ảnh chia đôi. Không có gì bị khóa cứng trong grid; whitespace và asymmetry làm tất cả công việc."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Olive Ink | `#3c422e` | `--color-olive-ink` | Text chính, nav links, borders, button outlines, icon strokes — gần như đen nhưng pha ánh olive, giúp trang không bị cảm giác vô trùng |"
    info: "| Linen Cream | `#fff4ec` | `--color-linen-cream` | Bề mặt nền phụ nhẹ cho background tinh tế và phân cách section. Không nâng lên làm màu CTA chính |"
    info: "| Buttery Peach | `#f6e6d9` | `--color-buttery-peach` | Bề mặt phụ và band tương phản ấm — đậm hơn Linen Cream một chút, dùng để ngắt các trang dài và lồng card |"
    info: "| Squeeze Bottle Green | `#9eef80` | `--color-squeeze-bottle-green` | Section band full-bleed, text treatment được tô sáng — xanh tươi như rau củ trên kệ, mang cả trang |"
    info: "| EVOO Yellow-Green | `#d1e030` | `--color-evoo-yellow-green` | Accent xanh phụ cho chi tiết trang trí và điểm nhấn tần suất thấp. Không nâng lên làm màu CTA chính |"
    info: "| Mustard Sun | `#fbd535` | `--color-mustard-sun` | Section band editorial full-bleed, lớp type trang trí lớn — phiên bản ấm hơn của EVOO Yellow-Green, đảm nhận những khoảnh khắc hero |"

  tokens___typography:

    gt_alpina_typewriter___workhorse_chính_cho_body_copy__nav__buttons__links__captions__input_fields__và_editorial_label_nhỏ__typewriter_serif_mang_đến_cho_thương_hiệu_giọng_nói_thủ_công__kiểu_quầy_bếp___những_letterform_hơi_bất_toàn_khiến_utility_text_trở_nên_editorial_thay_vì_giao_dịch_____font_gt_alpina_typewriter:
      - "**Thay thế:** IBM Plex Serif, Lora, hoặc Recoleta"
      - "**Weights:** 400, 500, 700"
      - "**Cỡ:** 12, 16, 18, 20"
      - "**Line height:** 1.0, 1.2, 1.25, 1.5"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Workhorse chính cho body copy, nav, buttons, links, captions, input fields, và editorial label nhỏ. Typewriter serif mang đến cho thương hiệu giọng nói thủ công, kiểu quầy bếp — những letterform hơi bất toàn khiến utility text trở nên editorial thay vì giao dịch."

    itc_garamond_condensed___chỉ_dùng_cho_display_và_hero_headlines___garamond_cao__hẹp_tương_phản_mạnh_với_body_typewriter__tạo_ra_hệ_thống_phân_cấp_kiểu_trang_bìa_tạp_chí__cỡ_120px_với_tracking__0_031em_là_dấu_ấn_đặc_trưng_của_thương_hiệu__sự_tự_tin_editorial_nuốt_trọn_trang_____font_itc_garamond_condensed:
      - "**Thay thế:** Playfair Display, Cormorant Garamond, hoặc DM Serif Display"
      - "**Weights:** 400"
      - "**Cỡ:** 46, 48, 72, 102, 120"
      - "**Line height:** 0.9, 1.0, 1.6"
      - "**Letter spacing:** -0.031em ở 120px, -0.030em ở 102px, -0.021em ở 46-48px"
      - "**Vai trò:** Chỉ dùng cho display và hero headlines — Garamond cao, hẹp tương phản mạnh với body typewriter, tạo ra hệ thống phân cấp kiểu trang bìa tạp chí. Cỡ 120px với tracking -0.031em là dấu ấn đặc trưng của thương hiệu: sự tự tin editorial nuốt trọn trang."

    apercu___badge_và_status_micro_label___một_geometric_sans_trung_tính_dùng_trong_các_tag_all_caps_chặt_như__back_in_stock__chỉ_xuất_hiện_trong_ngữ_cảnh_badge_để_tránh_cạnh_tranh_với_hệ_thống_serif_____font_apercu:
      - "**Thay thế:** Inter, Söhne, hoặc Work Sans"
      - "**Weights:** 400"
      - "**Cỡ:** 13"
      - "**Line height:** 1.0"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Badge và status micro-label — một geometric sans trung tính dùng trong các tag all-caps chặt như 'BACK IN STOCK'. Chỉ xuất hiện trong ngữ cảnh badge để tránh cạnh tranh với hệ thống serif."

    type_scale:

      info: "| Vai trò | Cỡ | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.25 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.2 | — | `--text-subheading` |"
      info: "| heading-sm | 46px | 1 | -0.97px | `--text-heading-sm` |"
      info: "| heading | 72px | 0.9 | -2.16px | `--text-heading` |"
      info: "| heading-lg | 102px | 0.9 | -3.06px | `--text-heading-lg` |"
      info: "| display | 120px | 0.9 | -3.72px | `--text-display` |"

  tokens___spacing___shapes:

    density: "spacious"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 35 | 35px | `--spacing-35` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| pills | 9999px |"
      info: "| images | 20px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"
      info: "| nav-capsule | 32px |"

    layout:

      - "**Section gap:** 64px"
      - "**Card padding:** 30px"
      - "**Element gap:** 20px"

  components:

    pill_nav_button:
      vai_trò: "Nút icon giỏ hàng và tài khoản trong header"

      info: "Oval capsule với radius 9999px, border 1px Olive Ink (#3c422e), fill Linen Cream (#fff4ec), padding ngang 10px, chứa icon nhỏ + text count. Nằm gọn trong cụm nav phía trên bên phải."

    nav_capsule:
      vai_trò: "Container nav bo tròn đặc biệt"

      info: "Container radius 32px chứa một icon đơn, dùng như phần tử utility nổi phía trên hàng nav chính."

    primary_filled_cta:
      vai_trò: "Trigger mua hàng hoặc hành động chính"

      info: "Nền EVOO Yellow-Green (#d1e030), text Olive Ink (#3c422e), radius 10px, padding dọc khoảng 20px và ngang 30px. GT Alpina Typewriter cỡ 16px weight 700, tracking all-caps. CTA duy nhất có màu bão hòa trong hệ thống."

    outline_ghost_button:
      vai_trò: "Hành động phụ, call-to-action editorial"

      info: "Nền trong suốt hoặc Linen Cream, border 1px Olive Ink (#3c422e), radius 10px, padding dọc 20px, padding ngang 30px. GT Alpina Typewriter 16px weight 500. Dùng cho các link kiểu 'Get The Chips'."

    carousel_arrow_control:
      vai_trò: "Điều hướng nội dung phân trang"

      info: "Pill nhỏ radius 10px, border 1px Olive Ink, fill Linen Cream, chứa glyph mũi tên trái/phải. Nằm căn giữa dưới các khối text hero."

    editorial_section_band:
      vai_trò: "Section nội dung màu full-bleed"

      info: "Khối cạnh kề cạnh với màu Mustard Sun (#fbd535) hoặc Squeeze Bottle Green (#9eef80). Không có max-width bên trong cho phần fill màu — nội dung bên trong được căn giữa lỏng lẻo với padding ngang 30px. Display headlines bằng ITC Garamond Condensed giảm xuống 72–120px."

    full_bleed_hero_plate:
      vai_trò: "Ảnh hero lifestyle/sản phẩm"

      info: "Ảnh tràn ra cả bốn cạnh, không radius. Headline và CTA overlay ở góc dưới bên trái bằng Olive Ink trên lớp gradient mờ hoặc trực tiếp trên ảnh ấm. Headline đặt bằng Garamond Condensed 46–72px."

    split_feature_block:
      vai_trò: "Highlight sản phẩm text + ảnh"

      grid_50_50_trên_editorial_band: "cột text bên trái (căn giữa theo chiều dọc, max ~480px rộng), cột ảnh bên phải với radius 20px và padding nhẹ bên trong. Headline 46–72px Garamond, body 16–18px Alpina."

    product_image_card:
      vai_trò: "Ảnh sản phẩm lifestyle trong layout editorial"

      info: "Ảnh với border-radius 20px, không shadow, không border. Thường đi kèm khối caption bên dưới bằng GT Alpina Typewriter 12–16px."

    status_badge:
      vai_trò: "Label inline như \"BACK IN STOCK\""

      info: "Không container — chỉ text bằng Apercu 13px, all-caps, weight 400, Olive Ink. Được bao quanh bởi glyph dấu hoa thị hoặc hoa nhỏ trang trí. Nằm căn giữa phía trên section headline."

    text_link_with_arrow:
      vai_trò: "Link editorial như \"MAKE THIS DISH →\""

      info: "GT Alpina Typewriter Olive Ink 16px weight 500, gạch chân hoặc theo sau bởi em-arrow. Không button chrome — đọc như cross-reference editorial."

    inline_recipe_card:
      vai_trò: "Caption công thức đi kèm ảnh món ăn"

      info: "Ảnh radius 20px ở trên, caption bên dưới bằng GT Alpina Typewriter 12–16px: 'Recipe: [tên]' weight 400, theo sau bởi text link arrow. Không card surface, không border — nổi trên màu section band."

    scattered_text_cluster:
      vai_trò: "Đám mây từ khóa bất đối xứng trên section xanh"

      info: "Các từ ITC Garamond Condensed lớn (Sear, Grill, Fry, Roast, Bake, Garnish, Knead) được đặt ở nhiều cỡ khác nhau (46–72px) và xoay nhẹ trong một band Squeeze Bottle Green full-bleed. Một từ được khoanh tròn bằng oval Olive Ink mảnh. Mang tính editorial, không chức năng."

    footer_olive_branch_photo:
      vai_trò: "Ảnh kết thúc tạo không khí"

      info: "Ảnh full-bleed của cành olive, không radius, không overlay text — đóng vai trò làm sạch bảng màu (palette cleanser) giữa các section nội dung và khoảnh khắc điều hướng tiếp theo."

  do_s_and_don_ts:

    nên_làm:
      - "Đặt display headlines bằng ITC Garamond Condensed ở 72–120px với tracking -0.03em — đường cong condensed là hình bóng đặc trưng của thương hiệu."
      - "Dùng Olive Ink (#3c422e) cho tất cả text và borders; không bao giờ dùng đen thuần hoặc xám trung tính. Ánh olive là bắt buộc."
      - "Để accent colors (Mustard Sun #fbd535, Squeeze Bottle Green #9eef80) chạy full-bleed dưới dạng section band thay vì chip UI nhỏ — nhiệm vụ của chúng là mang trang, không phải trang trí button."
      - "Áp dụng radius 20px cho tất cả ảnh sản phẩm và lifestyle; radius 10px cho buttons và inputs; 9999px cho cart/account pills."
      - "Căn giữa nội dung section editorial với padding ngang khoảng 30px thay vì khóa vào grid max-width; trang được thiết kế để cảm giác như đặt bằng tay."
      - "Ghép typewriter serif (GT Alpina Typewriter) với tất cả utility text — nav, buttons, inputs, body, captions — ở 12–20px weight 400–700."
      - "Chỉ dùng kiểu badge Apercu 13px cho status label all-caps được bao quanh bởi glyph trang trí nhỏ."

    không_nên_làm:
      - "Không dùng xám trung tính hệ thống hoặc đen thuần cho text hoặc borders — luôn dùng Olive Ink (#3c422e)."
      - "Không đặt body copy bằng ITC Garamond Condensed; display serif condensed chỉ dành cho headlines 46px trở lên."
      - "Không áp shadow cho cards, buttons, hoặc images. Hệ thống dựa vào color bands và radius, không phải elevation."
      - "Không dùng các màu xanh tươi làm button fill nhỏ hoặc chip background — chúng là section colors full-bleed hoặc type trang trí lớn, không phải chrome."
      - "Không khóa layout vào grid 12 cột cứng nhắc; các section editorial thở với text placement bất đối xứng và scattered keyword clusters."
      - "Không trộn nhiều accent color trong một section — mỗi section chỉ có một accent band (vàng HOẶC xanh), không bao giờ cả hai."
      - "Không thêm border hoặc divider xám trung tính khi một đường 1px Olive Ink đã đủ; màu border là một phần của hệ thống, không phải phương án dự phòng."

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Canvas | `#fff4ec` | Nền trang mặc định — linen trắng ấm cho hầu hết nội dung |"
    info: "| 1 | Warm Card | `#f6e6d9` | Bề mặt phụ và band nội dung xen kẽ — kem đào hơi đậm hơn |"
    info: "| 2 | Mustard Band | `#fbd535` | Nền section editorial full-bleed — vàng ấm cho các spread nổi bật |"
    info: "| 3 | Green Band | `#9eef80` | Nền section editorial full-bleed — xanh rau củ tươi cho các section công thức/từ khóa |"
    info: "| 4 | CTA Surface | `#d1e030` | Accent hành động — chỉ trên primary filled button, không phải section band |"

  elevation:

    info: "Hệ thống không có shadow vocabulary. Chiều sâu được truyền đạt thông qua các color band full-bleed chuyển từ kem sang vàng sang xanh, và qua image radius 20px. Components nằm trực tiếp trên canvas với hairline 1px Olive Ink khi cần phân cách. Không drop shadows, không glow, không floating cards."

  imagery:

    info: "Nhiếp ảnh là nội dung hình ảnh chủ đạo — ảnh đồ ăn và lifestyle tông ấm, ánh sáng tự nhiên cho thấy bàn tay đang phết, cắt, rót, và bày dầu olive. Ảnh là tight product crops hoặc medium shot của đồ ăn trong bối cảnh bếp gia đình, không phải studio dàn dựng. Xử lý: hero plates full-bleed không radius, product cards radius 20px trong layout editorial. Không illustrations, không icons ngoài line glyph tối giản, không 3D renders. Nhiếp ảnh mang câu chuyện màu sắc (kem ấm, rau củ xanh olive, dầu vàng) thay vì dựa vào graphic overlays. Dày đặc: một bức ảnh lớn thường chiếm 50–100% bất kỳ section nào."

  layout:

    info: "Mô hình trang full-bleed không có container max-width cứng — các section hoặc chạy cạnh kề cạnh trên màu đồng nhất hoặc có ảnh cạnh kề cạnh. Pattern hero: ảnh lifestyle full-viewport với headline overlay góc dưới bên trái. Nhịp section luân phiên giữa photographic plates và flat color bands (Mustard Sun → Squeeze Bottle Green), với nền kem ấm đan xen giữa chúng. Sắp xếp nội dung mang tính editorial và bất đối xứng: khối headline căn giữa trên color fields, khối text+ảnh chia 50/50, và scattered keyword clusters (Sear, Grill, Fry) cố tình phá vỡ grid. Không card grids, không pricing tables, không masonry. Navigation là top bar tối giản với brand wordmark bên trái, text links ở giữa-phải, và cart/account buttons hình pill ở ngoài cùng bên phải. Khoảng cách dọc rộng rãi — 35–64px giữa các section editorial — tạo nhịp điệu magazine-spread thay vì mật độ product-listing."

  agent_prompt_guide:

    quick_color_reference:
    - "text/border: #3c422e Olive Ink"
    - "background: #fff4ec Linen Cream"
    - "secondary surface: #f6e6d9 Buttery Peach"
    - "accent band: #fbd535 Mustard Sun (section editorial) hoặc #9eef80 Squeeze Bottle Green (section editorial)"
    - "primary action: không có màu CTA riêng biệt"
    info: "Không quan sát thấy màu primary action riêng biệt; hãy dùng các neutral button treatments đã trích xuất thay vì tự tạo màu CTA filled."

    example_component_prompts:
    - "Xây dựng một section Mustard Sun full-bleed: nền #fbd535 chạy cạnh kề cạnh không max-width. Nội dung căn giữa với padding ngang 30px. Badge Apercu 13px đọc 'BACK IN STOCK' được bao quanh bởi dấu hoa thị, sau đó headline Garamond Condensed 102px với tracking -3.06px, sau đó body Alpina Typewriter 16px, sau đó outline ghost button với border 1px Olive Ink radius 10px."
    - "Xây dựng split feature block 50/50 trên Squeeze Bottle Green (#9eef80) full-bleed: cột trái chứa headline Garamond Condensed 48px căn giữa và text link với em-arrow bằng Alpina Typewriter 16px weight 500. Cột phải chứa một ảnh sản phẩm radius 20px."
    - "Xây dựng scattered keyword cluster trên Squeeze Bottle Green: các từ 'Sear', 'Grill', 'Fry', 'Roast', 'Bake', 'Garnish', 'Knead' được đặt ở nhiều vị trí và cỡ khác nhau (46–72px Garamond Condensed), một từ được khoanh tròn bằng stroke oval 1px Olive Ink mảnh."
    - "Xây dựng top nav: brand wordmark 'GRAZA' bằng Garamond Condensed ~20px bên trái, text links 'Shop / Get Refills / About / Glog' bằng Alpina Typewriter 16px ở giữa-phải, và hai pill buttons (radius 9999px, border 1px Olive Ink, fill Linen Cream, ~10px padding) cho cart và account ở ngoài cùng bên phải."

  typography_pairing_philosophy:

    info: "Hệ thống là một cuộc đối thoại hai serif: GT Alpina Typewriter (serif hơi bất thường, mang tính nhân văn) xử lý mọi bề mặt chức năng — nav, buttons, inputs, body, captions — trong khi ITC Garamond Condensed (display serif cao, hẹp, tương phản cao) chỉ xuất hiện ở 46px trở lên cho editorial headlines. Apercu xuất hiện như giọng nói thứ ba cho micro-label all-caps (badges, status tags) ở 13px. Không bao giờ dùng Garamond Condensed cho body. Không bao giờ dùng Alpina cho display. Sự tương phản giữa typewriter hơi bất toàn và Garamond condensed sắc nét là thứ mang lại cho Graza sự tự tin editorial — utility cảm thấy ấm áp, display cảm thấy có kiến trúc."

  similar_brands:

    - "**Fly By Jing** — Cùng cách tiếp cận kem ấm + accent color band đậm cho food ecommerce, với editorial serif display headlines và ảnh lifestyle full-bleed"
    - "**Omsom** — Sử dụng vui tươi các section color full-bleed sống động (vàng, xanh, hồng của họ) trên nền trung tính ấm, với serif type tự tin và layout editorial đặt bằng tay"
    - "**Brightland** — Thương hiệu đồ ăn liên quan đến dầu olive với nền linen ấm, text olive đậm, và display headlines condensed serif đậm trên ảnh sản phẩm lifestyle"
    - "**Magic Spoon** — Thương hiệu đồ ăn DTC thiên về các khối màu accent đơn sắc tươi sáng và editorial headlines condensed serif lớn trên nền kem ấm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-olive-ink: #3c422e;
          --color-linen-cream: #fff4ec;
          --color-buttery-peach: #f6e6d9;
          --color-squeeze-bottle-green: #9eef80;
          --color-evoo-yellow-green: #d1e030;
          --color-mustard-sun: #fbd535;
        
          /* Typography — Font Families */
          --font-gt-alpina-typewriter: 'GT Alpina Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-condensed: 'ITC Garamond Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.25;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --text-heading-sm: 46px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.97px;
          --text-heading: 72px;
          --leading-heading: 0.9;
          --tracking-heading: -2.16px;
          --text-heading-lg: 102px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -3.06px;
          --text-display: 120px;
          --leading-display: 0.9;
          --tracking-display: -3.72px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-100: 100px;
        
          /* Layout */
          --section-gap: 64px;
          --card-padding: 30px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 32px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-pills: 9999px;
          --radius-images: 20px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
          --radius-nav-capsule: 32px;
        
          /* Surfaces */
          --surface-canvas: #fff4ec;
          --surface-warm-card: #f6e6d9;
          --surface-mustard-band: #fbd535;
          --surface-green-band: #9eef80;
          --surface-cta-surface: #d1e030;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-olive-ink: #3c422e;
          --color-linen-cream: #fff4ec;
          --color-buttery-peach: #f6e6d9;
          --color-squeeze-bottle-green: #9eef80;
          --color-evoo-yellow-green: #d1e030;
          --color-mustard-sun: #fbd535;
        
          /* Typography */
          --font-gt-alpina-typewriter: 'GT Alpina Typewriter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-itc-garamond-condensed: 'ITC Garamond Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu: 'Apercu', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.25;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --text-heading-sm: 46px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.97px;
          --text-heading: 72px;
          --leading-heading: 0.9;
          --tracking-heading: -2.16px;
          --text-heading-lg: 102px;
          --leading-heading-lg: 0.9;
          --tracking-heading-lg: -3.06px;
          --text-display: 120px;
          --leading-display: 0.9;
          --tracking-display: -3.72px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-35: 35px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-lg: 10px;
          --radius-2xl: 20px;
          --radius-3xl: 32px;
          --radius-full: 9999px;
        }