miti_navi___style_reference:
  info: "> Tuscan sea-view chapbook on raw linen"

  theme: "light"

  info: "Miti Navi vận hành như một editorial canvas ấm áp, tông giấy — hãy tưởng tượng một tạp chí du thuyền hạng sang được in trên giấy kraft chưa tẩy trắng. Toàn bộ giao diện được xây dựng trên nền cát-be (#e6dece) với typography đen mực đậm, mang lại cảm giác thủ công, như in tay. Kiểu chữ monospaced (GT Pressura Mono) đảm nhận toàn bộ UI chức năng — nav, button, body — tạo độ chính xác kỹ thuật tương phản với serif lãng mạn, uốn lượn (Voyage) dành riêng cho các dòng display editorial. Một đường gạch chân màu peach ấm duy nhất (#ffdead) là điểm nhấn màu sắc duy nhất, được dùng rất tiết chế để đánh dấu các tương tác. Ảnh hero được che bởi một vòm cong ấn tượng, navigation chia thành ba cụm cân bằng quanh wordmark ở giữa, và một vertical sticky side tab nằm ở cạnh phải với chữ xoay — tất cả đều gợi một cuốn sách nghệ thuật hơn là một trang sản phẩm."

  tokens___colors:

    info: "| Tên | Giá trị | Token | Vai trò |"
    info: "|------|-------|-------|------|"
    info: "| Linen | `#e6dece` | `--color-linen` | Canvas trang, bề mặt card, nền section — nền giấy chưa tẩy trắng ấm áp chứa toàn bộ nội dung |"
    info: "| Deep Ink | `#000e13` | `--color-deep-ink` | Text chính, navigation, border cấu trúc, logo lockup — gần như đen với một chút undertone lạnh rất nhẹ |"
    info: "| Carbon | `#232323` | `--color-carbon` | Body text, icon strokes, secondary heading, hairline rules, card borders — màu tối đa năng cho các UI element dày đặc |"
    info: "| Soft Ash | `#999999` | `--color-soft-ash` | Helper text mờ, nav items không active, divider nhẹ, secondary metadata |"
    info: "| Warm Apricot | `#ffdead` | `--color-warm-apricot` | Interactive link underlines, outlined action borders, điểm nhấn màu duy nhất — dùng dưới dạng 1px rule bên dưới element active để báo hiệu affordance mà không tạo thêm trọng lượng |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Đen tuyền cho heading tương phản tối đa và icon fills khi Carbon đọc lên có vẻ ấm |"

  tokens___typography:

    gt_pressura_mono___toàn_bộ_ui_chức_năng__top_navigation__body_copy__button__link__card__breadcrumb__icon_label__cỗ_máy_monospaced_vận_hành_toàn_bộ_giao_diện__tracking_mở_rộng_ở_kích_thước_lớn_hơn__0_71px_ở_10px__1_0px_ở_12px__1_4px_ở_14px__1_6px_ở_16px___letterspacing_càng_rộng_khi_kích_thước_tăng_lên_tạo_cho_chữ_một_nhịp_thở_có_chủ_đích__thoáng_đãng__phù_hợp_với_register_editorial_____font_gt_pressura_mono:
      - "**Thay thế:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400"
      - "**Kích thước:** 10px, 12px, 14px, 16px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 0.71px ở 10px, 1.0px ở 12px, 1.4px ở 14px, 1.6px ở 16px"
      - "**Vai trò:** Toàn bộ UI chức năng: top navigation, body copy, button, link, card, breadcrumb, icon label. Cỗ máy monospaced vận hành toàn bộ giao diện. Tracking mở rộng ở kích thước lớn hơn: 0.71px ở 10px, 1.0px ở 12px, 1.4px ở 14px, 1.6px ở 16px — letterspacing càng rộng khi kích thước tăng lên tạo cho chữ một nhịp thở có chủ đích, thoáng đãng, phù hợp với register editorial."

    voyage___hero_và_section_display_lines__các_kích_thước_cực_lớn_130px__180px_kết_hợp_với_leading_tight_0_90_0_94_tạo_ra_headline_editorial_cỡ_lớn__thoáng_đãng__chiếm_ưu_thế_trên_trang__chỉ_wordmark_adjacent_và_16px_dùng_leading_bình_thường__đây_là_một_custom_display_serif_tương_phản_cao_với_các_đường_cong_kịch_tính___nó_mang_giọng_thương_hiệu_lãng_mạn_____font_voyage:
      - "**Thay thế:** Playfair Display, Cormorant Garamond, DM Serif Display"
      - "**Weights:** 400"
      - "**Kích thước:** 16px, 46px, 72px, 130px, 180px"
      - "**Line height:** 0.90–0.94"
      - "**Vai trò:** Hero và section display lines. Các kích thước cực lớn (130px, 180px) kết hợp với leading tight 0.90–0.94 tạo ra headline editorial cỡ lớn, thoáng đãng, chiếm ưu thế trên trang. Chỉ wordmark-adjacent và 16px dùng leading bình thường. Đây là một custom display serif tương phản cao với các đường cong kịch tính — nó mang giọng thương hiệu lãng mạn."

    gtsectradisplay___subheading_editorial_mid_weight__làm_cầu_nối_giữa_ui_type_monospaced_và_voyage_display_khổng_lồ__một_transitional_serif_với_hơi_ấm_kiểu_old_style__dùng_rất_tiết_chế_cho_paragraph_level_headings_bên_trong_content_blocks_____font_gtsectradisplay:
      - "**Thay thế:** Cormorant Garamond, EB Garamond, Lora"
      - "**Weights:** 400"
      - "**Kích thước:** 26px"
      - "**Line height:** 1.20"
      - "**Vai trò:** Subheading editorial mid-weight, làm cầu nối giữa UI type monospaced và Voyage display khổng lồ. Một transitional serif với hơi ấm kiểu old-style, dùng rất tiết chế cho paragraph-level headings bên trong content blocks."

    times___eyebrow_labels_uppercase_cực_nhỏ_0_2860em_letterspacing___4px___tracking_0_28em_là_mặc_định_của_hệ_thống__chỉ_dùng_cho_các_tag_all_caps_ngắn_phía_trên_headline__thay_thế_bằng_một_serif_thật_khi_có_sẵn_____font_times:
      - "**Thay thế:** Times New Roman, EB Garamond"
      - "**Weights:** 400"
      - "**Kích thước:** 14px"
      - "**Line height:** 1.40"
      - "**Letter spacing:** 4.0px ở 14px"
      - "**Vai trò:** Eyebrow labels uppercase cực nhỏ (0.2860em letterspacing = 4px) — tracking 0.28em là mặc định của hệ thống; chỉ dùng cho các tag all-caps ngắn phía trên headline. Thay thế bằng một serif thật khi có sẵn."

    type_scale:

      info: "| Vai trò | Kích thước | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.4 | 0.71px | `--text-caption` |"
      info: "| eyebrow | 14px | 1.4 | 4px | `--text-eyebrow` |"
      info: "| body-lg | 16px | 1.4 | 1.6px | `--text-body-lg` |"
      info: "| subheading | 26px | 1.2 | — | `--text-subheading` |"
      info: "| heading | 46px | 0.94 | — | `--text-heading` |"
      info: "| heading-lg | 72px | 0.92 | — | `--text-heading-lg` |"
      info: "| display | 130px | 0.9 | — | `--text-display` |"
      info: "| display-xl | 180px | 0.9 | — | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Tên | Giá trị | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 60 | 60px | `--spacing-60` |"

    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:** 60px"
      - "**Card padding:** 24px"
      - "**Element gap:** 16px"

  components:

    arched_hero_image:
      vai_trò: "Ảnh du thuyền full-bleed với curved mask đặc trưng"

      info: "Ảnh được che bởi một vòm/lớp dome lớn ở cạnh trên, tạo silhouette cửa sổ nhà thờ trên nền linen canvas. Không có border-radius trên ảnh — vòm là custom SVG/clip-path. Ảnh lấp đầy chiều rộng viewport trừ gutter hai bên, với cạnh dưới chạy thẳng."

    split_top_navigation:
      vai_trò: "Header ba cụm với wordmark ở giữa"

      info: "Cố định ở đầu viewport. Cụm trái: 2–3 link monospaced ở 12px GT Pressura Mono, #000e13, tracking 1.0px, gap ngang 10px. Giữa: wordmark \"MITI NAVI\" cách điệu bằng custom display, ~32px. Cụm phải: 3–4 link monospaced giống cụm trái. Không có background fill — nav nằm trực tiếp trên linen. Active link có 1px #ffdead bottom border."

    vertical_side_tab:
      vai_trò: "Page marker cạnh phải cố định"

      info: "Một dải dọc hẹp (rộng khoảng 24px) chạy dọc cạnh phải viewport. Chứa text uppercase ngắn (GT Pressura Mono, 10px, tracking 0.71px) xoay 90° — đọc từ dưới lên. Fill #000e13, text #e6dece. Hoạt động như cả navigation lẫn margin marker kiểu trang in."

    underlined_interactive_link:
      vai_trò: "Primary action / link / CTA"

      info: "Kiểu CTA duy nhất trên site. Text GT Pressura Mono, 12–14px, #000e13, tracking 1.0–1.4px, all-caps. Một bottom border 1px #ffdead (Warm Apricot) nằm cách baseline text 4px. Không background fill, không padding ngoài khoảng cách underline. Hover làm text đậm hơn thành #000000. Không có filled buttons — mọi action đều là underlined link này."

    section_header_centered:
      vai_trò: "Editorial section opener"

      stack_căn_giữa: "eyebrow all-caps nhỏ (Times 14px, 4.0px tracking) ở trên, sau đó là heading 26px GTSectraDisplay hoặc 46px Voyage bên dưới. Khoảng trống dọc thoáng (30–60px phía trên và dưới). Tùy chọn: horizontal rule 1px #232323 bên dưới heading, rộng 40–60px."

    display_headline_voyage_oversize:
      vai_trò: "Hero và typography giới thiệu trang"

      info: "Voyage ở 130–180px, line-height 0.90, tracking 0, màu #000e13. Luôn căn trái trong column của nó. Leading tight cho phép ascenders và descenders của nhiều dòng gần như chạm nhau, tạo một khối typography dày đặc đọc như một broadside in ấn. Dùng một lần mỗi section chính."

    flat_content_card:
      vai_trò: "Danh sách du thuyền, feature blocks"

      info: "Không fill, không border, không shadow. Nội dung nằm trực tiếp trên linen canvas. Internal padding: 24px hai bên, 15–24px dọc. Hairline 1px #232323 có thể ngăn cách các card trong grid. Ảnh ở trên (nếu có) flush-edged, không radius."

    monospaced_body_block:
      vai_trò: "Nội dung đoạn văn chuẩn"

      info: "GT Pressura Mono 14px, tracking 1.4px, line-height 1.4, màu #232323. Căn đều hoặc căn trái. Paragraph spacing: 15–20px. Không drop caps, không first-line indent — cỗ máy monospaced đã tạo nhịp điệu riêng cho text."

    logo_wordmark:
      vai_trò: "Dấu hiệu nhận diện thương hiệu"

      info: "Custom lockup 'MITI NAVI' bằng custom display face, khoảng 32–40px, với một hairline rule mảnh bên dưới và sub-label 'NAVI' nhỏ bằng GT Pressura Mono 10px, tracking 1.0px, #999999. Căn giữa trong header."

    eyebrow_tag:
      vai_trò: "Nhãn phân loại trước heading"

      info: "Times 14px, uppercase, tracking 4.0px, màu #999999, căn giữa phía trên section heading. Không border, không background. Hoạt động như page caption in ấn."

    image_window_dark_mask:
      vai_trò: "Khối nội dung ảnh với khung tối"

      info: "Ảnh full-width hoặc khối lớn được đặt bên trong container fill #000e13, tạo cho ảnh một viền tối bao quanh như ảnh in sau kính. Không border-radius. Dùng cho editorial photography cần trọng lượng trên nền linen."

    hairline_divider:
      vai_trò: "Section break"

      info: "Đường 1px màu #232323, rộng 40–120px (short rule) hoặc full container width. Căn giữa hoặc căn trái. Thay thế whitespace như một structural divider. Không background, không icon, không label."

  do_s_and_don_ts:

    do:
      - "Dùng GT Pressura Mono ở 14px với 1.4px tracking cho mọi UI label, button, nav item, và body paragraph"
      - "Áp dụng Voyage ở 130–180px, line-height 0.90, cho hero và headline editorial chính — không bao giờ dùng ở kích thước dưới 46px"
      - "Đánh dấu mọi interactive link bằng bottom border 1px #ffdead cách baseline text 4px — không có filled buttons trong hệ thống này"
      - "Để linen #e6dece canvas xuyên suốt toàn bộ trang; không đưa vào bề mặt trắng hoặc xám nhạt"
      - "Neo mọi secondary metadata vào #999999 Soft Ash thay vì #000e13 chính"
      - "Đặt hairline rules (1px #232323) rộng 40–60px như section markers kiểu in ấn thay vì chỉ dựa vào whitespace"
      - "Đặt tất cả micro-text uppercase ở GT Pressura Mono 10–12px với tracking ≥0.7px để duy trì nhịp monospaced thoáng"

    don_t:
      - "Không dùng filled, rounded, hoặc shadowed buttons — hệ thống này không có filled CTA component"
      - "Không đưa màu sắc mới ngoài #ffdead; giao diện phải đọc như monochrome ngoại trừ apricot underline accent"
      - "Không áp dụng border-radius cho cards, images, hoặc buttons — thiết kế hoàn toàn vuông vức"
      - "Không dùng box-shadows hoặc hiệu ứng elevation; sự phân tách đến từ color contrast, hairline rules, và dark image insets"
      - "Không dùng sans-serif system fonts cho UI text — nhịp monospaced của GT Pressura Mono là chữ ký của hệ thống"
      - "Không dùng Voyage ở kích thước nhỏ; nó chỉ hoạt động ở 46px trở lên khi các đường cong có thể thở"
      - "Không đặt bất kỳ tint trắng, xám nhạt, hoặc off-canvas nào — mọi bề mặt là linen hoặc deep ink"

  surfaces:

    info: "| Cấp | Tên | Giá trị | Mục đích |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Linen Canvas | `#e6dece` | Background trang, primary field |"
    info: "| 2 | Card Surface | `#e6dece` | Giống canvas — content blocks nổi trên linen không có raised panels |"
    info: "| 3 | Image Inset | `#000e13` | Dark photographic insets, hero arches, và image masks đọc như cửa sổ vào không gian sâu hơn |"

  elevation:

    info: "Thiết kế này cố tình tránh box-shadows và elevation. Sự phân tách đạt được qua color contrast (linen canvas vs #000e13 image insets), 1px hairline rules màu #232323, và whitespace thoáng. Cách xử lý flat, không shadow là cốt lõi của ngôn ngữ in ấn/editorial — shadow sẽ phá vỡ phép ẩn dụ giấy."

  imagery:

    info: "Photography là yếu tố thị giác chủ đạo. Hero là một ảnh full-bleed khổ lớn duy nhất của một du thuyền buồm được chụp từ phía sau trên vùng biển Địa Trung Hải mở, với đường bờ biển núi non ở hậu cảnh. Cách xử lý là documentary-naturalistic — high-key daylight, không color grading ngoài nước xanh và bầu trời tự nhiên, không studio staging. Một arched clip-path đặc trưng che cạnh trên của hero image, tạo silhouette cửa sổ/nhà thờ. Ảnh phụ xuất hiện bên trong khung #000e13 tối hoạt động như ảnh in được gắn sau kính, làm cho các content blocks linen ấm áp đọc như giấy xung quanh. Không illustration, không abstract graphics, không product renders. Iconography tối thiểu: một vài line icon mảnh vẽ với stroke weight 1px màu #232323, dùng rất tiết chế cho functional affordances. Mật độ imagery thấp — ảnh editorial lớn được cho khoảng thở tối đa thay vì xếp lát."

  layout:

    info: "Mô hình page full-bleed với linen #e6dece canvas kéo dài đến mọi cạnh. Nội dung được giới hạn trong column căn giữa rộng khoảng 1200px max-width, với gutter ngoài thoáng 30–60px. Hero là ngoại lệ thị giác — ảnh vòm trải dài toàn bộ chiều rộng viewport. Header được chia thành ba cụm cân bằng (nav trái, wordmark giữa, nav phải) không có background fill. Nhịp section mang tính editorial: mỗi section mở đầu bằng display headline căn giữa (Voyage) trên whitespace thoáng, tiếp theo là monospaced body block, với hairline rules làm transition thay vì background color bands. Bố cục nội dung xen kẽ giữa centered stacks (cho section openers và editorial quotes) và asymmetric text+image compositions (cho yacht features). Navigation là một top bar cố định duy nhất với vertical side tab cố định ở cạnh phải. Không sidebar, không mega-menu. Mật độ tổng thể thấp — các section thở với vertical gaps 60px+, và site cảm giác như lật một catalog in ấn hơn là cuộn một dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #e6dece (Linen)"
    - "text: #232323 (Carbon)"
    - "border: #000e13 (Deep Ink)"
    - "accent: #ffdead (Warm Apricot, underline only)"
    - "muted: #999999 (Soft Ash)"
    - "primary action: #ffdead (outlined action border)"

    3_5_example_component_prompts:
    - "Xây dựng split top navigation: linen #e6dece canvas, không background. Cụm trái với hai link ('MITI NAVI', 'LOCATION') bằng GT Pressura Mono 12px, #000e13, tracking 1.0px, uppercase, gap 10px giữa các item. Giữa: wordmark 'MITI NAVI' bằng Voyage 40px, #000e13, với hairline 1px #232323 bên dưới và sublabel 'NAVI' 10px bằng GT Pressura Mono, #999999. Cụm phải: 'RÉPARATION', 'CHANTIER NAVAL', 'CONTACT' cùng style monospaced như cụm trái."

    - "Xây dựng arched hero section: ảnh full-viewport-width của du thuyền buồm trên biển mở, được che ở trên bởi một vòm cao (clip-path hoặc SVG) tạo silhouette cửa sổ nhà thờ trên nền linen canvas. Ảnh lấp đầy 100% width, chiều cao khoảng 70vh. Bên dưới vòm, display headline căn trái bằng Voyage 130px, line-height 0.90, #000e13 đọc 'Les voiliers de nos rêves'. Một underlined link bằng GT Pressura Mono 12px, #000e13, với bottom border 1px #ffdead cách baseline 4px, nhãn 'DÉCOUVRIR MITI NAVI'."

    - "Xây dựng centered editorial section opener: top padding 60px trên linen #e6dece. Eyebrow Times 14px căn giữa màu #999999, tracking 4.0px, uppercase, đọc 'MITI NAVI'. Bên dưới, heading Voyage 46px màu #000e13, line-height 0.94, đọc 'Un voilier selon vos envies'. Hairline 60px rộng 1px #232323 căn giữa cách heading 30px."

    - "Xây dựng dark image window: container fill #000e13, 100% container width, với ảnh full-bleed nội thất du thuyền. Không border-radius, không shadow. Khung internal padding 24px ngăn cách ảnh với các cạnh container. Bên dưới khối tối, caption GT Pressura Mono 14px màu #232323, tracking 1.4px, đọc 'Le pont principal — 38m² de teck massif'."

    - "Xây dựng vertical side tab: dải rộng 24px, cao 200px ghim vào cạnh phải viewport, căn giữa theo chiều dọc. Fill #000e13. Chứa 'UN LIEU REMARQUABLE' bằng GT Pressura Mono 10px, #e6dece, tracking 0.71px, uppercase, xoay -90° (đọc từ dưới lên)."

  similar_brands:

    - "**Aesop** — Cùng canvas ấm, tông giấy (off-white/cream) với typography monochrome và một accent duy nhất được tiết chế, xem website như một editorial object thay vì catalog sản phẩm"
    - "**Hermès (editions section)** — Headline display serif khổ lớn kết hợp với functional type monospaced, hairline rules, và nhịp tạp chí in ấn hạng sang trên nền neutral ấm"
    - "**Riva (riva-yachts.com)** — Thương hiệu du thuyền hạng sang dùng display type serif cỡ lớn, background neutral ấm, và editorial photography với whitespace thoáng hơn là mật độ tương tác"
    - "**Toast (toa.st)** — Cùng kỷ luật single-accent-color trên canvas linen ấm với micro-type monospaced và nhịp catalog in ấn"
    - "**Le Labo** — Giao diện monochrome tiết chế với editorial serif headlines, một chromatic accent ấm duy nhất, và cảm giác hand-set, typeset-in-metal có chủ đích"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-linen: #e6dece;
          --color-deep-ink: #000e13;
          --color-carbon: #232323;
          --color-soft-ash: #999999;
          --color-warm-apricot: #ffdead;
          --color-obsidian: #000000;
        
          /* Typography — Font Families */
          --font-gt-pressura-mono: 'GT Pressura Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-voyage: 'Voyage', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtsectradisplay: 'GTSectraDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.71px;
          --text-eyebrow: 14px;
          --leading-eyebrow: 1.4;
          --tracking-eyebrow: 4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: 1.6px;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-heading: 46px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.92;
          --text-display: 130px;
          --leading-display: 0.9;
          --text-display-xl: 180px;
          --leading-display-xl: 0.9;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-linen-canvas: #e6dece;
          --surface-card-surface: #e6dece;
          --surface-image-inset: #000e13;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-linen: #e6dece;
          --color-deep-ink: #000e13;
          --color-carbon: #232323;
          --color-soft-ash: #999999;
          --color-warm-apricot: #ffdead;
          --color-obsidian: #000000;
        
          /* Typography */
          --font-gt-pressura-mono: 'GT Pressura Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-voyage: 'Voyage', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gtsectradisplay: 'GTSectraDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.4;
          --tracking-caption: 0.71px;
          --text-eyebrow: 14px;
          --leading-eyebrow: 1.4;
          --tracking-eyebrow: 4px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: 1.6px;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-heading: 46px;
          --leading-heading: 0.94;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.92;
          --text-display: 130px;
          --leading-display: 0.9;
          --text-display-xl: 180px;
          --leading-display-xl: 0.9;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-60: 60px;
        }