swimclub___style_reference:
  info: "> Hồ sơ lâm sàng ẩn sau màn hình LCD pixel"

  theme: "mixed"

  info: "SwimClub vận hành một hệ thống thị giác mang phong cách tạp chí lâm sàng: gần như hoàn toàn achromatic (trắng, đen, xám lạnh) với một màu cam rực duy nhất (#ff9e00) được dùng làm điểm nhấn full-bleed thay vì màu nút. Typography đảm nhiệm vai trò chính — một geometric grotesque (Px Grotesk) cho body và headline, một monospace (Apercu Mono) cho data labels và navigation micro-copy, và một custom pixelated display face (Swimclub) chỉ dành cho logo và các con số thống kê cỡ lớn trông giống như màn hình LCD. Các bề mặt xen kẽ giữa nền canvas trắng ngà lạnh, thẻ sản phẩm trắng tinh, hero block xanh navy đậm với ảnh sản phẩm, và các panel thống kê cam bão hòa. Giao diện mang cảm giác như một hồ sơ y tế được nhìn qua màn hình arcade retro: lâm sàng, biên tập, hơi vui tươi, với các góc 0px sắc cạnh và đường viền đứt nét mảnh (hairline dashed borders) giúp mọi thứ đọc giống như biểu đồ hơn là trang trí."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Tabloid Orange | `#ff9e00` | `--color-tabloid-orange` | Nền section full-bleed (announcement bar, statistic panels) — màu thương hiệu có sắc độ duy nhất, dùng ở độ bão hòa tối đa để phá vỡ dòng chảy đơn sắc |"
    info: "| Deep Capsule Navy | `linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%)` | `--color-deep-capsule-navy` | Màu gradient cuối của hero và nền ảnh sản phẩm — gần như đen với tông xanh lam, không phải đen thuần |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Văn bản chính, đường viền mảnh, navigation dividers, đường viền thẻ, chữ trên nút — màu cấu trúc chủ đạo trên toàn bộ giao diện |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Nền trang, bề mặt thẻ, overlay ảnh sản phẩm, nền nút và chữ trên panel tối hoặc cam |"
    info: "| Cool Gray | `#d2dce1` | `--color-cool-gray` | Bề mặt UI mờ dành cho controls bị vô hiệu hóa, panel ít nhấn mạnh và placeholder blocks |"
    info: "| Iron Gray | `#666666` | `--color-iron-gray` | Văn bản phụ và đường viền ít nhấn mạnh — tông trung của thang màu trung tính |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Đường viền cấp ba, đường viền trạng thái vô hiệu hóa, nét icon mờ |"
    info: "| Smoke | `#cccccc` | `--color-smoke` | Dividers, đường viền đứt nét trên feature cards, đường phân cách tinh tế |"

  tokens___typography:

    px_grotesk___kiểu_chữ_chính___body_copy_ở_15_17px_400__subheadings_ở_21_31px_700__display_headlines_ở_52_74px_700__geometric_grotesque_với_đầu_chữ_vuông_tạo_cảm_giác_lâm_sàng__giống_biểu_đồ__trọng_lượng_hero_74px_được_đặt_rất_khít_1_05_để_headline_nhiều_dòng_xếp_chồng_thành_một_khối_đặc_____font_px_grotesk:
      - "**Thay thế:** Inter, Space Grotesk, hoặc DM Sans"
      - "**Trọng lượng:** 400, 700"
      - "**Cỡ chữ:** 12, 15, 16, 17, 21, 31, 37, 52, 74"
      - "**Chiều cao dòng:** 1.05, 1.10, 1.30, 1.70"
      - "**Vai trò:** Kiểu chữ chính — body copy ở 15–17px/400, subheadings ở 21–31px/700, display headlines ở 52–74px/700. Geometric grotesque với đầu chữ vuông tạo cảm giác lâm sàng, giống biểu đồ. Trọng lượng hero 74px được đặt rất khít (1.05) để headline nhiều dòng xếp chồng thành một khối đặc."

    apercu_mono_pro___monospace_micro_copy___navigation_links__section_labels__input_placeholders__danh_sách_thành_phần_và_chú_thích_dữ_liệu_nhỏ__đặt_ở_cỡ_nhỏ_15_17px_với_letter_spacing_dương_0_02em_để_chuỗi_chữ_in_hoa_đọc_giống_như_tem_in_hoặc_nhãn_mẫu_thay_vì_văn_bản_chạy_____font_apercu_mono_pro:
      - "**Thay thế:** IBM Plex Mono, JetBrains Mono, hoặc Space Mono"
      - "**Trọng lượng:** 400"
      - "**Cỡ chữ:** 15, 17"
      - "**Chiều cao dòng:** 1.10, 1.20"
      - "**Letter spacing:** 0.02em"
      - "**Vai trò:** Monospace micro-copy — navigation links, section labels, input placeholders, danh sách thành phần và chú thích dữ liệu nhỏ. Đặt ở cỡ nhỏ (15–17px) với letter-spacing dương 0.02em để chuỗi chữ in hoa đọc giống như tem in hoặc nhãn mẫu thay vì văn bản chạy."

    swimclub_custom_pixel_bitmap_face___signature_display_face_chỉ_dùng_cho_wordmark_và_ba_con_số_thống_kê_khổng_lồ_60__50__1_4__cấu_trúc_blocky__pixel_làm_cho_các_con_số_trông_giống_màn_hình_lcd_hoặc_7_segment___một_sự_tương_phản_retro_digital_có_chủ_đích_với_body_grotesque_sạch_sẽ__không_bao_giờ_đặt_dưới_90px__bản_sắc_của_nó_phụ_thuộc_vào_tỷ_lệ_____font_swimclub_custom_pixelbitmap_face:
      - "**Thay thế:** VT323, Press Start 2P, hoặc custom bitmap font"
      - "**Trọng lượng:** 400"
      - "**Cỡ chữ:** 96, 105"
      - "**Chiều cao dòng:** 1.00"
      - "**Vai trò:** Signature display face chỉ dùng cho wordmark và ba con số thống kê khổng lồ (60%, 50%, 1/4). Cấu trúc blocky, pixel làm cho các con số trông giống màn hình LCD hoặc 7-segment — một sự tương phản retro-digital có chủ đích với body grotesque sạch sẽ. Không bao giờ đặt dưới 90px; bản sắc của nó phụ thuộc vào tỷ lệ."

    type_scale:

      info: "| Vai trò | Cỡ chữ | Chiều cao dòng | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | — | `--text-caption` |"
      info: "| body-sm | 15px | 1.7 | — | `--text-body-sm` |"
      info: "| subheading | 21px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 31px | 1.1 | — | `--text-heading-sm` |"
      info: "| heading | 37px | 1.1 | — | `--text-heading` |"
      info: "| heading-lg | 52px | 1.05 | — | `--text-heading-lg` |"
      info: "| display | 74px | 1.05 | — | `--text-display` |"
      info: "| stat-numeral | 105px | 1 | — | `--text-stat-numeral` |"

  tokens___spacing___shapes:

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

    mật_độ: "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: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Giá trị |"
      info: "|---------|-------|"
      info: "| tags | 0px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 120px"
      - "**Card padding:** 32px"
      - "**Element gap:** 4px"

  components:

    announcement_bar:
      vai_trò: "Dải trên cùng toàn trang"

      info: "Thanh full-bleed #ff9e00, cao ~32px, chữ Apercu Mono Pro in hoa canh giữa ở 12px, màu đen. Liều cam duy nhất ở trên cùng — luôn hiện diện, luôn là thứ đầu tiên mắt chạm vào."

    top_navigation:
      vai_trò: "Navigation chính của trang"

      bố_cục_ba_vùng_trên_nền_trắng: "SHOP và ABOUT US bên trái, wordmark pixel Swimclub ở giữa, ACCOUNT và CART (0) bên phải. Tất cả link ở Apercu Mono Pro 12–15px in hoa, letter-spacing 0.02em, màu đen. Không nền, không viền — navigation chỉ là sự kiềm chế về typography nổi trên nền trắng."

    hero_block:
      vai_trò: "Giới thiệu phía trên fold"

      info: "Gradient tối full-bleed (#6a90b0 → #020507, từ trên trái xuống dưới phải) với ảnh sản phẩm viên nang vàng ở bên phải và khối văn bản ở bên trái. Headline ở 74px Px Grotesk weight 700, màu trắng, line-height 1.05. Subtext ở 16–17px Px Grotesk weight 400, màu trắng. Padding trái 64px, khoảng không gian thoáng rộng rãi từ navigation."

    outlined_cta_button_hero:
      vai_trò: "Call-to-action chính trên nền tối"

      info: "Viền trắng 1px, chữ trắng, không fill, radius 0px, cao ~32px, Apercu Mono Pro 15px in hoa với letter-spacing 0.02em. Nút 'GET STARTED' nằm trên hero tối — outlined trắng là hình dạng khả thi duy nhất ở đây. Nằm bên trong một hình chữ nhật viền đen, tạo cảm giác như tem in."

    outlined_cta_button_light_surface:
      vai_trò: "Call-to-action chính trên nền sáng"

      info: "Viền đen 1px, chữ đen, không fill, radius 0px, padding 32px (16px ngang, 8px dọc). Apercu Mono Pro 15px in hoa. Mẫu ghost/outlined nhất quán — nút không bao giờ được tô màu."

    media_credibility_bar:
      vai_trò: "Dải chứng minh xã hội"

      info: "Hàng ngang gồm bốn logo báo chí/lâm sàng (GQ, Stanford clinician, Clinicians' Choice badge, số lượng bác sĩ lâm sàng) trên nền trắng, được phân cách bằng các đường kẻ dọc đen mảnh. Mỗi ô chứa một hình ảnh nhỏ hoặc icon kèm chú thích body text ngắn. Không có nền thẻ — chỉ có dividers và chữ."

    centered_headline_band:
      vai_trò: "Mở đầu section"

      info: "Dải nền trắng hoặc #d2dce1, headline canh giữa ở 31–37px Px Grotesk weight 700, theo sau là subtext một dòng ở 15–17px weight 400. Canh giữa khít, padding dọc 120px trên và dưới. Đóng vai trò như một khoảng dừng thở giữa các khối dày đặc."

    orange_statistic_panel:
      vai_trò: "Trưng bày dữ liệu"

      info: "Dải full-bleed #ff9e00, chia thành 2–4 cột bằng nhau bằng các đường dọc trắng mảnh. Mỗi cột mang một label Apercu Mono Pro in hoa nhỏ (ví dụ: 'THE STATE OF MEN'S REPRODUCTIVE HEALTH') và một chữ số pixel Swimclub khổng lồ ở 96–105px màu đen. Font pixel trên nền cam bão hòa là khoảnh khắc thị giác đặc biệt nhất của trang."

    dashed_border_feature_card:
      vai_trò: "Liệt kê lợi ích sản phẩm"

      info: "Thẻ trắng với viền đứt nét 1px #cccccc, radius 0px, padding 32px. Bên trái: icon nhỏ (tinh trùng, phân tử, glyph DNA) màu đen. Ở giữa: heading Px Grotesk 21px đậm với sub-label 15px weight 400 bên dưới. Bên phải: icon dấu trừ/nét gạch nhỏ màu đen đóng vai trò là chỉ báo thu gọn. Viền đứt nét báo hiệu 'mục nhập biểu đồ' thay vì 'thẻ sản phẩm'."

    product_image_block:
      vai_trò: "Ảnh sản phẩm full-bleed"

      info: "Khối đen thuần (#020507), chiều rộng toàn container, chiều cao thay đổi, với chú thích Apercu Mono Pro in hoa màu trắng chồng lên (ví dụ: 'OPTIMAL COUNT'). Không văn bản, không UI — chỉ có canvas tối và sản phẩm, tạo ra một khoảng dừng điện ảnh."

    ingredient_tag_list:
      vai_trò: "Danh sách thành phần bổ sung"

      info: "Chuỗi inline các token Apercu Mono Pro in hoa (COQ10, LYCOPENE, VITAMIN D3, VITAMIN E, OMEGA-3S, NAC, L-CARNITINE) cách nhau bằng khoảng trắng, đặt ở 15px. Được giới thiệu bằng một label in hoa nhỏ 'TARGETED WITH'. Đọc giống như nhãn mẫu vật."

    icon_set:
      vai_trò: "Glyph chức năng"

      info: "Icon một màu đen được vẽ với độ dày nét mảnh nhất quán. Phong cách là geometric/kỹ thuật (phân tử kim cương, dạng tinh trùng đơn giản hóa, chuỗi DNA) — không bao giờ mang tính trang trí. Luôn đi kèm với một label ngắn, không bao giờ đứng một mình."

  do_s_and_don_ts:

    nên_làm:
      - "Chỉ dùng #ff9e00 làm nền panel full-bleed cho announcement bar và statistic sections — không bao giờ dùng làm fill nút, tô màu icon hoặc viền."
      - "Dành font pixel Swimclub cho wordmark và chữ số thống kê ở 90px hoặc lớn hơn; nó mất đi đặc tính nếu dưới tỷ lệ đó."
      - "Đặt Px Grotesk headlines khít — line-height 1.05 ở 52–74px để nhiều dòng xếp chồng đọc như một khối đặc, không phải chữ thoáng."
      - "Dùng Apercu Mono Pro cho mọi label in hoa, mục navigation và chuỗi dữ liệu nhỏ; dành Px Grotesk cho body và headings."
      - "Giữ tất cả góc ở 0px radius — các cạnh sắc là bản sắc của hệ thống. Dùng viền đứt nét 1px màu đen hoặc #cccccc để phân cách các section."
      - "Xen kẽ các mức bề mặt có chủ đích: trắng → #d2dce1 → #ff9e00 → #020507 để tạo nhịp điệu biên tập."
      - "Dùng padding dọc 120px giữa các section chính và 32px bên trong thẻ."

    không_nên_làm:
      - "Không bo tròn góc trên thẻ, nút, tag hoặc ảnh — radius là 0px trên toàn hệ thống."
      - "Không dùng màu cam cho nút, link hoặc icon — nó chỉ thuộc về nền section full-bleed."
      - "Không đặt font pixel Swimclub dưới 90px hoặc dùng cho body copy — nó sẽ trở nên khó đọc."
      - "Không dùng shadow hoặc hiệu ứng độ cao — hệ thống dựa vào bề mặt phẳng và đường viền mảnh, không phải chiều sâu."
      - "Không trộn lẫn monospace và pixel fonts trong cùng dải kích thước — Apercu Mono dành cho micro-labels (12–17px), Swimclub dành cho readouts khổng lồ (90px+)."
      - "Không tô màu CTA buttons — giữ chúng ở dạng outlined (viền đen trên nền sáng, viền trắng trên nền tối) với nền trong suốt."
      - "Không thêm màu sắc mới — hệ thống có chủ đích là đơn sắc cộng với một màu cam."

  surfaces:

    info: "| Cấp độ | Tên | Giá trị | Mục đích |"
    info: "|-------|------|---------|---------|"
    info: "| 0 | Canvas Gray | `#d2dce1` | Nền trang ngoài cùng giữa các section chính, footer band — xám xanh lạnh tạo tâm trạng lâm sàng |"
    info: "| 1 | Paper | `#ffffff` | Bề mặt nội dung chính — thẻ sản phẩm, media bar, feature blocks, body sections |"
    info: "| 2 | Orange Panel | `#ff9e00` | Bề mặt nhấn full-bleed cho announcement bar và statistic panel — phá vỡ dòng chảy đơn sắc |"
    info: "| 3 | Capsule Black | `#020507` | Nền hero và ảnh sản phẩm — sân khấu tương phản cao cho hình ảnh viên nang vàng |"

  elevation:

    info: "Thiết kế cố tình không có shadow. Hệ thống phân cấp được tạo ra thông qua tương phản bề mặt (trắng → #d2dce1 → cam → đen), viền 1px mảnh và khoảng trắng, không bao giờ thông qua drop shadows hoặc blur. Điều này giữ cho giao diện đọc giống như một tài liệu in phẳng hoặc biểu đồ lâm sàng thay vì một ứng dụng skeuomorphic."

  imagery:

    info: "Nhiếp ảnh chỉ dành cho sản phẩm: viên nang màu hổ phách-vàng và softgel pills được chụp trên nền gradient xanh đậm đến đen với ánh sáng studio ấn tượng. Xử lý là tương phản cao, u ám và chỉ có sản phẩm — không có ảnh lối sống, không có người, không có bối cảnh. Viên thuốc là những anh hùng, luôn bị cô lập, luôn phát sáng. Hình ảnh chiếm khoảng 50% hero block và các dải ảnh sản phẩm chuyên dụng; phần còn lại của trang là văn bản và dữ liệu."

  layout:

    info: "Trang là một chồng dọc các dải full-bleed thay vì luồng container max-width. Hero là full-bleed tối; các section tiếp theo xen kẽ giữa nội dung canh giữa max-width-1200px (trắng hoặc #d2dce1) và các panel nhấn edge-to-edge (cam, đen). Navigation là một dải typography mỏng — không có thanh nền, không shadow, không viền. Hero là split 50/50: khối văn bản bên trái, ảnh sản phẩm bên phải trên gradient. Bên dưới fold, mẫu là: centered headline band → 4-column media bar → centered headline band → 4-column orange stat panel → 2-column feature list với ảnh sản phẩm tối ở giữa. Section gaps là 120px; card padding là 32px. Navigation tối thiểu chỉ ở trên cùng, không có hành vi sticky rõ ràng."

  agent_prompt_guide:

    info: "Tham khảo màu nhanh:"
    - "text: #000000"
    - "background: #ffffff"
    - "section wash: #d2dce1"
    - "dark surface: #020507"
    - "accent panel: #ff9e00"
    - "primary action: không có màu CTA riêng biệt"

    info: "Ví dụ Component Prompts:"

    info: "Không quan sát thấy màu primary action riêng biệt; hãy sử dụng các xử lý nút trung tính đã trích xuất thay vì tự tạo màu CTA đã tô."

    - "Tạo orange statistic panel: nền full-bleed #ff9e00, chia thành ba cột bằng nhau bằng các đường dọc trắng 1px. Mỗi cột: label Apercu Mono Pro in hoa 12px ở trên cùng màu đen, sau đó là chữ số pixel Swimclub ở 105px màu đen, sau đó là chú thích body ngắn ở Px Grotesk 15px weight 400 bên dưới."

    - "Tạo dashed-border feature card: nền #ffffff, viền đứt nét 1px #cccccc, radius 0px, padding 32px. Bên trái: icon hình học nhỏ màu đen. Ở giữa: heading Px Grotesk 21px weight 700 với sub-label 15px weight 400 bên dưới. Bên phải: icon thu gọn dấu trừ/nét gạch nhỏ màu đen."

    - "Tạo centered headline band: nền #d2dce1, padding 120px trên và dưới, heading Px Grotesk 37px weight 700 canh giữa màu #000000, theo sau là subtext 16px weight 400 màu #000000, max-width 720px."

    - "Tạo top nav: nền #ffffff, padding dọc 32px, ba flex zones. Bên trái: SHOP và ABOUT US ở Apercu Mono Pro 12px in hoa, #000000, letter-spacing 0.02em. Ở giữa: wordmark pixel Swimclub ở 21px. Bên phải: ACCOUNT và CART (0) cùng phong cách monospace. Không viền, không thanh nền, không shadow."

  similar_brands:

    - "**Athletic Greens / AG1** — Cùng ngôn ngữ biên tập bổ sung lâm sàng: canvas đơn sắc, một màu nhấn full-bleed duy nhất, data labels monospace, chữ số thống kê cỡ lớn làm hero thị giác"
    - "**Ritual Vitamins** — Cùng bảng màu đơn sắc tối giản với một điểm nhấn ấm, viền mảnh, danh sách thành phần monospace và ảnh sản phẩm chiếm ưu thế trên hero tối"
    - "**Brilliant (brilliant.org)** — Cùng xử lý pixel/digital display cho thống kê và body grotesque sạch sẽ — sự tương phản giữa sans-serif lâm sàng và chữ số retro-bitmap là một signature chung"
    - "**WHOOP** — Cùng hero tối full-bleed với headline trắng canh giữa, body achromatic và một điểm nhấn bão hòa duy nhất (cam cho SwimClub, đỏ cho WHOOP) được dùng làm dấu câu section thay vì màu nút"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-tabloid-orange: #ff9e00;
          --color-deep-capsule-navy: #020507;
          --gradient-deep-capsule-navy: linear-gradient(rgb(106, 144, 176), rgb(65, 115, 158) 30%, rgb(18, 58, 92) 97%, rgb(2, 5, 7) 139%);
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-cool-gray: #d2dce1;
          --color-iron-gray: #666666;
          --color-ash: #b3b3b3;
          --color-smoke: #cccccc;
        
          /* Typography — Font Families */
          --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading-sm: 31px;
          --leading-heading-sm: 1.1;
          --text-heading: 37px;
          --leading-heading: 1.1;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.05;
          --text-display: 74px;
          --leading-display: 1.05;
          --text-stat-numeral: 105px;
          --leading-stat-numeral: 1;
        
          /* Typography — Weights */
          --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-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 120px;
          --card-padding: 32px;
          --element-gap: 4px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas-gray: #d2dce1;
          --surface-paper: #ffffff;
          --surface-orange-panel: #ff9e00;
          --surface-capsule-black: #020507;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-tabloid-orange: #ff9e00;
          --color-deep-capsule-navy: #020507;
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-cool-gray: #d2dce1;
          --color-iron-gray: #666666;
          --color-ash: #b3b3b3;
          --color-smoke: #cccccc;
        
          /* Typography */
          --font-px-grotesk: 'Px Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-apercu-mono-pro: 'Apercu Mono Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-swimclub-custom-pixelbitmap-face: 'Swimclub (custom pixel/bitmap face)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --text-body-sm: 15px;
          --leading-body-sm: 1.7;
          --text-subheading: 21px;
          --leading-subheading: 1.3;
          --text-heading-sm: 31px;
          --leading-heading-sm: 1.1;
          --text-heading: 37px;
          --leading-heading: 1.1;
          --text-heading-lg: 52px;
          --leading-heading-lg: 1.05;
          --text-display: 74px;
          --leading-display: 1.05;
          --text-stat-numeral: 105px;
          --leading-stat-numeral: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-120: 120px;
          --spacing-140: 140px;
        }