superr___style_reference:
  info: "> Cuốn vở học trò ấm áp dưới ánh nắng chiều nhẹ. Một trang giấy kem, một cây bút dạ màu cam chưa đậy nắp, và một xấp nhãn tên dán ép đang chờ được bóc ra."

  theme: "light"

  info: "Superr là một thẩm mỹ sân trường ấm áp được thể hiện dưới dạng kỹ thuật số: một canvas giấy kem, màu cam bút dạ là điểm nhấn màu duy nhất, và display type chunky viết thường mang phong cách nguệch ngoạc trong vở học trò — to và đầy cá tính. Sản phẩm được chụp ảnh như một vật thật — sổ tay bìa da, bút chì màu, nhãn tên dán ép — và chính những vật thể này, chứ không phải minh họa UI trừu tượng, mới là yếu tố thị giác chính. Các sticker minh họa vui nhộn (tia chớp, gấu, trái tim, ma) rải rác khắp layout như những điểm nhấn cá tính nhỏ, nhưng chúng là dấu câu trang trí, không phải icon hệ thống. Mọi bề mặt đều mờ và mềm: viền tối mảnh thay vì fill màu, bóng đổ tối thiểu, khoảng thở rộng rãi, và bo góc dừng ở 20px trước khi chuyển sang full-pill. Kết quả là một trang web có cảm giác như mở một quyển vở mới vào ngày đầu năm học — thong thả, xúc giác, và hơi tinh nghịch."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Cream Paper | `#fdfbf9` | `--color-cream-paper` | Canvas trang, bề mặt card, fill button — tông nền trắng ấm giúp viền tối và điểm nhấn cam trông như mực và bút dạ trên giấy |"
    info: "| Charcoal | `#171717` | `--color-charcoal` | Viền tối và đường phân cách cho bề mặt nâng cao và UI inverted |"
    info: "| Cocoa Ink | `#2b1a07` | `--color-cocoa-ink` | Màu headline, viền trang trí — màu tối ấm hơn, kế thừa tông da sổ tay thay vì đen tuyền |"
    info: "| True Black | `#000000` | `--color-true-black` | Dành riêng cho headline cần độ nhấn cao nhất và các trường hợp đặc biệt khi Charcoal quá mềm |"
    info: "| Dew Drop | `#f7efe9` | `--color-dew-drop` | Tông màu bề mặt phụ, lớp card ấm hơn một chút, nằm giữa canvas kem và các điểm nhấn màu |"
    info: "| Marker Orange | `#ff6f1e` | `--color-marker-orange` | Điểm nhấn đặc trưng cho chú thích viết tay, chú giải script, dải brand footer, và gạch chân nhấn mạnh bên dưới từ khóa — năng lượng của cây bút dạ chưa đậy nắp |"
    info: "| Burnt Sienna | `#ce500a` | `--color-burnt-sienna` | Sắc cam đậm hơn, dùng cho body-color và viền accent khi marker orange cần thêm trọng lượng trên nền kem |"
    info: "| Sky Sticker | `#3b82f6` | `--color-sky-sticker` | Điểm nhấn minh họa trang trí — xuất hiện trong sticker nhân vật, sparkle mark, và họa tiết bìa sổ. Không phải token UI; không dùng cho button hoặc link |"
    info: "| Bubblegum Sticker | `#ff66cf` | `--color-bubblegum-sticker` | Điểm nhấn minh họa trang trí — chỉ dùng cho sticker nhân vật và bìa sổ màu hồng. Không nâng cấp lên UI chức năng |"
    info: "| Sprout Sticker | `#22c55e` | `--color-sprout-sticker` | Điểm nhấn viền xanh cho tag, divider, và cạnh UI được focus |"
    info: "| Shadow Mist | `#bebcbb` | `--color-shadow-mist` | Màu nền bóng đổ — xám bão hòa thấp làm nền cho drop shadow của card và button |"

  tokens___typography:

    gelica___toàn_bộ_display__heading_và_body_text__gelica_custom_là_một_sans_bo_tròn__hơi_mềm_với_weight_nặng_ở_600___ở_104px__headline__meet_superrbook__trở_thành_một_vật_thể_xúc_giác__không_chỉ_là_tiêu_đề__viết_thường_là_mặc_định__kiểu_chữ_nói_nhẹ_nhàng_qua_kích_thước_và_trọng_lượng__không_qua_viết_hoa__font_thay_thế__recoleta__fraunces_tight_tracking__hoặc_dm_serif_display_cho_cảm_giác_display_bo_tròn_____font_gelica:
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 16, 20, 24, 28, 32, 36, 40, 46, 104"
      - "**Line height:** 1.08–1.50"
      - "**Letter spacing:** normal"
      - "**Vai trò:** Toàn bộ display, heading và body text. Gelica custom là một sans bo tròn, hơi mềm với weight nặng ở 600 — ở 104px, headline 'meet superrbook' trở thành một vật thể xúc giác, không chỉ là tiêu đề. Viết thường là mặc định; kiểu chữ nói nhẹ nhàng qua kích thước và trọng lượng, không qua viết hoa. Font thay thế: Recoleta, Fraunces (tight tracking), hoặc DM Serif Display cho cảm giác display bo tròn."

    geist___body_phụ__navigation_và_ui_labels__geist_xuất_hiện_có_chọn_lọc___cho_nav_items__chú_thích_chữ_nhỏ__và_bất_kỳ_đâu_cần_một_grotesque_sạch_sẽ_để_cắt_bớt_sự_ấm_áp_của_gelica__font_thay_thế__inter__s_hne__hoặc_general_sans_____font_geist:
      - "**Weights:** 400, 500"
      - "**Sizes:** 18, 20, 32"
      - "**Line height:** 1.50"
      - "**Vai trò:** Body phụ, navigation và UI labels. Geist xuất hiện có chọn lọc — cho nav items, chú thích chữ nhỏ, và bất kỳ đâu cần một grotesque sạch sẽ để cắt bớt sự ấm áp của gelica. Font thay thế: Inter, Söhne, hoặc General Sans."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 18px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 20px | 1.5 | — | `--text-body` |"
      info: "| subheading | 24px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 1.2 | — | `--text-heading` |"
      info: "| heading-lg | 46px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 104px | 1.08 | — | `--text-display` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 116 | 116px | `--spacing-116` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 20px |"
      info: "| cards | 12px |"
      info: "| footer | 56px |"
      info: "| inputs | 8px |"
      info: "| buttons | 20px |"

    shadows:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.06) 0px 2px 20px 0px` | `--shadow-lg` |"
      info: "| subtle | `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 12px"

  components:

    pill_action_button:
      vai_trò: "Bề mặt CTA chính — xuất hiện trong header và hero"

      info: "Fill kem (#fdfbf9), viền Charcoal 1.5px (#171717), pill radius 20px, padding ngang 28px / dọc 10-11px, gelica 16px weight 500 Charcoal text. Drop shadow nhẹ 1-2px rgba(0,0,0,0.25) tạo hiệu ứng nâng giấy. Không có fill state — bản sắc của button là viền tối, không phải nền."

    display_headline:
      vai_trò: "Tiêu đề hero và section mở"

      info: "gelica 104px / line-height 1.08, weight 600, viết thường, màu Cocoa Ink (#2b1a07). Xếp chồng hai dòng khít, không letter-spacing. Headline đọc như một đối tượng thị giác duy nhất — không bao giờ vượt quá 3 dòng, không bao giờ căn giữa sau dòng đầu tiên."

    handwritten_caption:
      vai_trò: "Chú thích dạng script dùng để ghi nhãn sản phẩm ('a big blue parchi', 'cute pinks', 'Like making')"

      info: "gelica 20-24px weight 400 màu Marker Orange (#ff6f1e), xoay nhẹ hoặc căn chỉnh theo mũi tên vẽ tay. Đi kèm với mũi tên cong SVG mảnh chỉ vào vật thể đang được ghi nhãn."

    marker_highlight:
      vai_trò: "Nhấn mạnh inline một từ duy nhất trong body copy ('actually!')"

      info: "Text hiển thị màu Marker Orange (#ff6f1e) với gạch chân vẽ tay thô cùng màu, stroke weight 2-3px, hơi nhấp nhô. Nằm inline trong câu body màu Cocoa Ink."

    product_notebook:
      vai_trò: "Tài sản sản phẩm hero — sổ tay da được chụp ảnh với nhãn tên dán"

      info: "Ảnh object full-bleed, corner radius 12-16px trên các cạnh sổ trong ảnh, nghiêng 5-8° so với trục. Mang nhãn dán trắng (Name / Class / Roll no.) trên bìa với gelica 16-20px text viết tay."

    name_label_sticker:
      vai_trò: "Nhãn tên dán ép nằm trên mỗi bìa sổ"

      info: "Thẻ trắng với viền Charcoal 1px, corner radius 8px, ba trường: Name (gelica 20px viết tay), Class (gelica 16px), Roll no. (gelica 16px). Mô phỏng nhãn học sinh thật — nhỏ, chức năng, duyên dáng."

    sticker_illustration:
      vai_trò: "Yếu tố cá tính trang trí rải rác khắp layout"

      info: "Nhân vật minh họa phẳng (tia chớp, gấu, trái tim có mắt, ma, mèo, sparkle) màu Sky Sticker xanh / Bubblegum hồng / Sprout xanh với viền tối 2px. Xoay 5-15° ngẫu nhiên, được xử lý như sticker thật đặt trên trang — không bao giờ căn chỉnh theo grid."

    hand_drawn_arrow:
      vai_trò: "Kết nối thị giác giữa chú thích và ảnh sản phẩm"

      info: "Mũi tên cong stroke Charcoal mảnh 1.5px, nét vẽ tay nhấp nhô, không fill đầu mũi tên. Xuất phát từ Handwritten Caption và kết thúc tại vật thể được ghi nhãn với một đường cong nhẹ."

    pre_order_info_block:
      vai_trò: "Chú thích nhỏ ngay dưới button chính"

      info: "gelica 16px weight 400, màu Cocoa Ink (#2b1a07), gap 8px bên dưới button. Hiển thị thông tin khả dụng/thời gian — không trang trí, không icon, chỉ một dòng text nhẹ nhàng."

    footer_brand_band:
      vai_trò: "Dải cuối trang với chữ ký cam"

      info: "Nền Marker Orange (#ff6f1e), corner radius bất đối xứng 56px ở cạnh trên, gelica text màu Charcoal hoặc kem. Hoạt động như điểm kết thương hiệu — một dải cam duy nhất nói rằng 'chúng tôi đã xong, và chúng tôi đã vui.'"

    top_left_brand_mark:
      vai_trò: "Logo site và anchor navigation"

      info: "Icon bàn tay/ngón trỏ minh họa nhỏ (~32px) màu Charcoal, margin 16px từ cạnh trên bên trái. Không có wordmark bên cạnh — icon chính là brand mark. Link về trang chủ."

    top_right_action:
      vai_trò: "CTA header cố định"

      info: "Cùng pattern Pill Action Button, đặt ở góc trên bên phải với margin 16px. Hiển thị trên mọi màn hình như một anchor chuyển đổi duy nhất."

  do_s_and_don_ts:

    nên_làm:
      - "Đặt headline ở gelica 600 tại 104px, viết thường, màu Cocoa Ink (#2b1a07), line-height 1.08"
      - "Chỉ dùng Marker Orange (#ff6f1e) cho chú thích viết tay, highlight nhấn mạnh inline, và dải brand footer"
      - "Dùng Charcoal (#171717) cho mọi text, viền, stroke button và cạnh cấu trúc — đây là màu 'mực' duy nhất"
      - "Bo tròn tất cả button và tag với pill radius 20px, tất cả card với 12px, và dành 56px cho cạnh trên bất đối xứng của footer"
      - "Giữ canvas ở Cream Paper (#fdfbf9) với Dew Drop (#f7efe9) là tông bề mặt phụ nhẹ, không bao giờ dùng trắng tinh"
      - "Dựa vào ảnh sản phẩm thật (sổ tay, bút chì, nhãn) làm nội dung thị giác chính — chúng là hero"
      - "Rải sticker minh họa ở góc xoay ngẫu nhiên từ 5-15° để duy trì cảm giác đặt bằng tay"

    không_nên_làm:
      - "Không dùng Sky Sticker xanh, Bubblegum hồng, hoặc Sprout xanh cho bất kỳ phần tử UI chức năng nào — chúng chỉ là trang trí"
      - "Không dùng button CTA có fill — ngôn ngữ hành động luôn là viền tối trên nền kem, không bao giờ là fill màu đặc"
      - "Không viết hoa headline hoặc áp dụng letter-spacing — viết thường + tracking normal là chữ ký"
      - "Không dùng drop shadow nặng hơn rgba(0,0,0,0.06) trên card hoặc rgba(0,0,0,0.25) trên button — độ nâng chỉ như thì thầm"
      - "Không căn giữa headline sau dòng đầu tiên; căn trái toàn bộ stack để giữ nhịp sổ tay viết tay"
      - "Không đưa gradient, glassmorphism, hoặc neon accent vào — bảng màu là mờ và ấm"
      - "Không dùng Geist cho headline — nó là grotesque hỗ trợ, gelica sở hữu mọi kích thước display"

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#fdfbf9` | Nền trang — giấy kem ấm |"
    info: "| 1 | Surface Tint | `#f7efe9` | Lớp card/panel phụ, ấm hơn canvas một chút |"
    info: "| 2 | Brand Band | `#ff6f1` | Dải accent footer — bề mặt bão hòa duy nhất |"

  elevation:

    - "**Card:** `rgba(0, 0, 0, 0.06) 0px 2px 20px 0px`"
    - "**Button:** `rgba(0, 0, 0, 0.25) 0px 1px 2px 0px`"

  imagery:

    thiên_về_nhiếp_ảnh: "ảnh sản phẩm thật của sổ tay bìa da với họa tiết bìa nâu, mây xanh và hồng phấn, mỗi cuốn được chụp kèm một cây bút chì màu đặt bên cạnh. Sticker được minh họa (phẳng, viền tối 2px, fill sống động) và được xử lý như vật thể thật đặt trên trang — xoay nhẹ, không bao giờ căn theo grid. Mũi tên SVG vẽ tay và chú thích script màu Marker Orange kết nối nhiếp ảnh với copy. Không có đồ họa trừu tượng, không 3D render, không stock photography — sản phẩm chính là imagery."

  layout:

    info: "Bất đối xứng và editorial. Hero là split hai cột: nửa trái chứa display headline, handwritten caption và pill CTA xếp lỏng lẻo; nửa phải chiếm bởi một ảnh sản phẩm lớn duy nhất của cuốn sổ nâu nghiêng. Bên dưới fold, layout xen kẽ giữa các khối ảnh sản phẩm và khoảnh khắc typographic căn giữa, với sticker minh họa làm cầu nối. Navigation tối giản — icon 32px ở góc trên trái, pill button ở góc trên phải, và không có gì ở giữa. Nội dung căn trái xuyên suốt; thiết kế kháng cự việc căn giữa như một cái nạng. Page max-width ~1200px nhưng ảnh hero thường phá vỡ container để cảm giác tự phát hơn."

  agent_prompt_guide:

    tham_chiếu_màu_nhanh:
    - "canvas: #fdfbf9 (Cream Paper)"
    - "text: #171717 (Charcoal) / #2b1a07 (Cocoa Ink cho headline)"
    - "border: #171717 (Charcoal)"
    - "accent: #ff6f1e (Marker Orange)"
    - "surface tint: #f7efe9 (Dew Drop)"
    - "primary action: không có màu CTA riêng biệt"

    ví_dụ_component_prompts:
    - "Xây dựng hero: Canvas Cream Paper (#fdfbf9), full page. Nửa trái: gelica 104px weight 600 viết thường 'meet superrbook' màu Cocoa Ink (#2b1a07), line-height 1.08. Bên dưới, Handwritten Caption gelica 20px Marker Orange (#ff6f1e) ghi 'Dear grownups,'. Bên dưới nữa, body text gelica 20px weight 400 Cocoa Ink với từ 'actually!' hiển thị màu Marker Orange và gạch chân stroke vẽ tay 2px. Bên dưới body, Pill Action Button: radius 20px, viền Charcoal 1.5px (#171717), fill kem, gelica 16px weight 500 text 'I call dibs!'. Dưới button, Pre-order Info Block gelica 16px Cocoa Ink: 'Pre-order starting April 2026.' Nửa phải: ảnh sổ tay da nâu nghiêng 5-8°, với sticker tia chớp Sky Sticker (#3b82f6) và nhân vật gấu Bubblegum (#ff66cf) nổi phía trên ở góc xoay ngẫu nhiên."

    - "Xây dựng hàng showcase sản phẩm: Canvas Cream Paper. Hai ảnh sổ tay cạnh nhau — sổ trái màu xanh với họa tiết mây trắng, sổ phải màu hồng phấn. Phía trên sổ xanh, Handwritten Caption màu Marker Orange 'a big blue parchi' với mũi tên cong Charcoal mảnh chỉ xuống sổ. Phía trên sổ hồng, Handwritten Caption 'cute pinks' với mũi tên tương ứng. Giữa chúng, căn giữa: chú thích script Marker Orange nhỏ 'Like making' phía trên gelica 36px weight 500 Cocoa Ink text 'Our SuperrBook. Our Way.'"

    - "Xây dựng pill button: Fill Cream Paper (#fdfbf9), viền Charcoal đặc 1.5px (#171717), border-radius 20px, padding ngang 28px và dọc 10px. gelica 16px weight 500 Charcoal text, căn giữa. Drop shadow: rgba(0,0,0,0.25) 0px 1px 2px 0px. Không thay đổi fill khi hover — giữ nền kem trên mọi state."

    - "Xây dựng footer band: Nền Marker Orange (#ff6f1e) full-width với border-radius 56px góc trên trái và trên phải (cap bất đối xứng). gelica 16-20px Charcoal hoặc kem text căn giữa hoặc căn trái. Hoạt động như điểm kết thương hiệu."

    - "Xây dựng cụm sticker minh họa: Nhân vật 2D phẳng (tia chớp Sky Sticker #3b82f6, trái tim có mắt Marker Orange, ma Charcoal) mỗi cái với viền tối 2px, đặt ở góc xoay ngẫu nhiên từ 5-15°, hơi chồng lên nhau. Không có drop shadow trên sticker — chúng nằm phẳng trên trang như sticker bóc-dán thật."

  similar_brands:

    - "**Are.na** — Cùng canvas kem ấm, cảm giác editorial thủ công, và display type viết thường tự tin với viền tối trên bề mặt sáng"
    - "**Gumroad** — Button outline hình pill trên nền kem, điểm nhấn minh họa vui nhộn rải rác trong layout thiên về sản phẩm"
    - "**Notion** — Bề mặt giấy mờ, viền tối mảnh định nghĩa mọi phần tử cấu trúc, và cá tính sticker/minh họa trên nền UI vốn dè dặt"
    - "**Croissant** — Từ vựng sticker gần kawaii kết hợp với editorial typography nghiêm túc và canvas trắng ngà ấm"
    - "**Craigslist redesigns (ví dụ của Patta)** — Cam bút dạ là điểm nhấn màu duy nhất trên nền giấy kem, với mũi tên vẽ tay và chú thích ghi nhãn ảnh sản phẩm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cream-paper: #fdfbf9;
          --color-charcoal: #171717;
          --color-cocoa-ink: #2b1a07;
          --color-true-black: #000000;
          --color-dew-drop: #f7efe9;
          --color-marker-orange: #ff6f1e;
          --color-burnt-sienna: #ce500a;
          --color-sky-sticker: #3b82f6;
          --color-bubblegum-sticker: #ff66cf;
          --color-sprout-sticker: #22c55e;
          --color-shadow-mist: #bebcbb;
        
          /* Typography — Font Families */
          --font-gelica: 'gelica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --text-body-sm: 18px;
          --leading-body-sm: 1.5;
          --text-body: 20px;
          --leading-body: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.4;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.4;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.2;
          --text-display: 104px;
          --leading-display: 1.08;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-116: 116px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 56px;
        
          /* Named Radii */
          --radius-tags: 20px;
          --radius-cards: 12px;
          --radius-footer: 56px;
          --radius-inputs: 8px;
          --radius-buttons: 20px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 2px 20px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #fdfbf9;
          --surface-surface-tint: #f7efe9;
          --surface-brand-band: #ff6f1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cream-paper: #fdfbf9;
          --color-charcoal: #171717;
          --color-cocoa-ink: #2b1a07;
          --color-true-black: #000000;
          --color-dew-drop: #f7efe9;
          --color-marker-orange: #ff6f1e;
          --color-burnt-sienna: #ce500a;
          --color-sky-sticker: #3b82f6;
          --color-bubblegum-sticker: #ff66cf;
          --color-sprout-sticker: #22c55e;
          --color-shadow-mist: #bebcbb;
        
          /* Typography */
          --font-gelica: 'gelica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.5;
          --text-body-sm: 18px;
          --leading-body-sm: 1.5;
          --text-body: 20px;
          --leading-body: 1.5;
          --text-subheading: 24px;
          --leading-subheading: 1.4;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.4;
          --text-heading: 36px;
          --leading-heading: 1.2;
          --text-heading-lg: 46px;
          --leading-heading-lg: 1.2;
          --text-display: 104px;
          --leading-display: 1.08;
        
          /* 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-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-116: 116px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 56px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.06) 0px 2px 20px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.25) 0px 1px 2px 0px;
        }