mesh___style_reference:
  info: "> Bronze ink on midnight paper. A dark editorial spread where warm amber rules and serif-slim sans type guide the eye through a dense, unhurried layout."

  theme: "dark"

  info: "Mesh presents a nocturnal editorial workspace: near-black canvas, warm amber glow bleeding up from the lower viewport, and crisp white type that reads like a magazine spread rather than a SaaS dashboard. The voice is confident but quiet — compact, information-dense, with text doing the heavy lifting and color reserved as semantic punctuation. Warm copper (#f2b98b) is the only chromatic accent, and it arrives as outlines and rules rather than fills, so actions feel invited rather than pushed. The interface borrows from print typography: wide-tracked uppercase labels (0.1–0.17em), condensed display faces for hero headlines, and generous line-height on body copy. Surfaces are flat, borders are hairline, and the lone shadow is subtle — depth comes from layering and glow, not drop shadows."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian Canvas | `#0f0f10` | `--color-obsidian-canvas` | Page background, hero base, footer — the dominant near-black field that holds everything else |"
    info: "| Graphite Layer | `#1d1d1f` | `--color-graphite-layer` | Elevated surfaces, icon strokes, secondary button borders — one step lighter than the canvas to create depth without elevation |"
    info: "| Bone White | `#fefef7` | `--color-bone-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Cream Paper | `#f7f3ee` | `--color-cream-paper` | Light surface variant, gradient terminus — a soft warm white paired with Obsidian for AAA contrast |"
    info: "| Ash Border | `#b3b3b3` | `--color-ash-border` | Hairline borders, dividers, list separators, muted structural lines — the most-used neutral border color |"
    info: "| Slate Mute | `#666666` | `--color-slate-mute` | Secondary text, inactive link borders, de-emphasized chrome |"
    info: "| Cool Steel | `#868f97` | `--color-cool-steel` | Body helper text, icon outlines, subtle annotation |"
    info: "| Warm Pewter | `#86868b` | `--color-warm-pewter` | Heading and body muted variant — the slightly warmer counterpart to Cool Steel |"
    info: "| Pale Mist | `#cccccc` | `--color-pale-mist` | Body borders, very subtle structural separators |"
    info: "| Onyx | `#000000` | `--color-onyx` | Body text on light surfaces, icon fills, deep contrast anchor |"
    info: "| Bronze Glow | `#f2b98b` | `--color-bronze-glow` | Outlined action border, link underline, decorative icon accent — warm copper against matte black, the only chromatic punctuation in the system |"
    info: "| Apricot Highlight | `#ffaf7c` | `--color-apricot-highlight` | Lighter amber accent for secondary decorative rules and gradient highlights |"
    info: "| Amber Wash | `linear-gradient(95deg, rgb(212, 144, 101) 0%, rgb(254, 201, 155) 100%)` | `--color-amber-wash` | Gradient start color — the warm horizon glow that bleeds into the lower viewport |"

  tokens___typography:

    verlag___primary_ui_and_body_typeface__weight_400_for_body__600_for_nav_and_emphasized_labels__700_for_buttons_and_card_headings__the_wide_letter_spacing_at_small_sizes_0_056em_0_167em_on_9_10px_creates_editorial_all_caps_labels_that_read_as_section_markers__not_body_text__substitute__inter__untitled_sans__or_s_hne_for_a_similar_geometric_grotesque_with_editorial_weight_range_____font_verlag:
      - "**Substitute:** Inter, Untitled Sans, Söhne"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 9, 10, 12, 14, 16, 18, 20"
      - "**Line height:** 1.00–3.00"
      - "**Letter spacing:** 0.013em at 20px → 0.167em at 9px (all-caps labels at 9–10px use 0.167em, badges at 10–12px use 0.063–0.083em, body at 16px uses 0.013em)"
      - "**Role:** Primary UI and body typeface. Weight 400 for body, 600 for nav and emphasized labels, 700 for buttons and card headings. The wide letter-spacing at small sizes (0.056em–0.167em) on 9–10px creates editorial all-caps labels that read as section markers, not body text. Substitute: Inter, Untitled Sans, or Söhne for a similar geometric grotesque with editorial weight range."

    verlag_condensed___display_headlines_only__the_compressed_letterforms_at_weight_900_create_tall__magazine_cover_impact_on_hero_text___the_signature_of_the_mesh_brand_voice__substitute__oswald__barlow_condensed__or_roboto_condensed_black_for_a_tall__narrow_display_face_____font_verlag_condensed:
      - "**Substitute:** Oswald, Barlow Condensed, Roboto Condensed"
      - "**Weights:** 700, 900"
      - "**Sizes:** 48, 64"
      - "**Line height:** 1.00"
      - "**Letter spacing:** 0.014em at 48–64px — nearly tight, letting the condensed forms breathe vertically"
      - "**Role:** Display headlines only. The compressed letterforms at weight 900 create tall, magazine-cover impact on hero text — the signature of the Mesh brand voice. Substitute: Oswald, Barlow Condensed, or Roboto Condensed Black for a tall, narrow display face."

    chronicle_text_g1_roman___editorial_subhead_accent___a_serif_counterpoint_to_verlag_s_sans__used_sparingly_for_humanizing_mid_page_text__substitute__tiempos_text__source_serif__or_pt_serif_____font_chronicle_text_g1_roman:
      - "**Substitute:** Tiempos Text, Source Serif, PT Serif"
      - "**Weights:** 400"
      - "**Sizes:** 22"
      - "**Line height:** 1.55"
      - "**Letter spacing:** normal at 22px"
      - "**Role:** Editorial subhead accent — a serif counterpoint to Verlag's sans, used sparingly for humanizing mid-page text. Substitute: Tiempos Text, Source Serif, or PT Serif."

    system_ui___system_fallback_for_body_and_heading_contexts_where_verlag_is_unavailable__the_0_1em_tracking_at_10px_mirrors_the_wide_label_pattern_____font_system_ui:
      - "**Substitute:** system-ui, -apple-system, Segoe UI"
      - "**Weights:** 500, 600"
      - "**Sizes:** 10, 14, 15"
      - "**Line height:** 1.14–2.00"
      - "**Letter spacing:** 0.1em at 10px"
      - "**Role:** System fallback for body and heading contexts where Verlag is unavailable. The 0.1em tracking at 10px mirrors the wide-label pattern."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| eyebrow | 10px | 1.1 | 1.67px | `--text-eyebrow` |"
      info: "| body | 14px | 1.4 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.38 | — | `--text-body-lg` |"
      info: "| subheading | 18px | 1.35 | — | `--text-subheading` |"
      info: "| heading-sm | 20px | 1.33 | — | `--text-heading-sm` |"
      info: "| editorial | 22px | 1.55 | — | `--text-editorial` |"
      info: "| display | 48px | 1 | — | `--text-display` |"
      info: "| display-lg | 64px | 1 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 133 | 133px | `--spacing-133` |"
      info: "| 140 | 140px | `--spacing-140` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| badges | 12px |"
      info: "| images | 36px |"
      info: "| buttons | 6px |"
      info: "| navPill | 9999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) ...` | `--shadow-subtle` |"

    layout:

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

  components:

    hero_headline:
      role: "Primary page title"

      info: "64px Verlag Condensed weight 900, color #fefef7, letter-spacing 0.014em, line-height 1.0. Centered above subtext. This is the loudest element on the page — everything else is quieter."

    hero_subtext:
      role: "Supporting paragraph under headline"

      info: "16px Verlag weight 400, color #b3b3b3, line-height 1.38, max-width ~600px centered. Muted gray-on-black to recede behind the headline."

    filled_primary_button:
      role: "Main call-to-action (GET STARTED, GET MESH FREE)"

      info: "Background #fefef7, text #0f0f10, Verlag 600 at 14px, uppercase, letter-spacing ~0.063em, padding 14px 28px, border-radius 6px. No border. The bright white pill against the dark canvas is the strongest visual button — no shadow needed, contrast does the work."

    outlined_amber_action:
      role: "Secondary or contextual link/action"

      info: "Background transparent, border 1px solid #f2b98b, text #f2b98b, Verlag 600 at 14px, padding 8px 16px, border-radius 6px. The amber outline is the only chromatic interactive element — use sparingly for contextual actions, not for primary CTAs."

    ghost_text_link:
      role: "Inline navigation and footer links"

      info: "No background, no border, text #b3b3b3 or #fefef7, Verlag 400 at 14–16px. Underline appears on hover in #f2b98b."

    centered_nav_pill:
      role: "Primary site navigation"

      info: "Pill-shaped container (border-radius 9999px) with semi-transparent dark background, holding 4 nav items (RELEASES, RESOURCES, COMPANY, PRICING) in Verlag 600 at 12px uppercase, letter-spacing ~0.071em, text #fefef7. Sits centered between logo and sign-in actions."

    sign_in_link:
      role: "Authenticated entry point"

      info: "Plain text 'SIGN IN' in Verlag 600 at 12px uppercase, letter-spacing ~0.071em, color #fefef7. Sits left of the primary CTA in the header."

    eyebrow_label:
      role: "Section markers and small annotations"

      info: "Verlag 600 at 9–10px uppercase, letter-spacing 0.083–0.167em, color #b3b3b3 or #f2b98b. The wide tracking is a signature — these read as editorial captions, not UI labels."

    product_mockup_card:
      role: "App preview in the hero"

      info: "Large card with background #1d1d1f, border-radius 16px, subtle hairline border + offset shadow (see elevation). Contains a three-column app UI mockup with sidebar nav, activity feed, and detail panel. Rounded avatar images at 36px radius sit inside."

    activity_feed_row:
      role: "Item in the product mockup feed"

      info: "Row layout with 24px avatar, bold name, action text, timestamp right-aligned. Verlag 400/600 at 12–14px, name in #fefef7, description in #b3b3b3, timestamp in #666666. Dividers are 1px #b3b3b3 at very low opacity."

    avatar_group:
      role: "Stacked user avatars"

      info: "Overlapping circular images (36px radius), 2–4 avatars shown with negative margin. No border, no shadow — the overlap itself creates the grouping effect."

    badge___tag:
      role: "Status and category markers"

      info: "Pill or rounded-rect (12px radius), background transparent or very dark, text in Verlag 600 at 10–12px uppercase, letter-spacing ~0.063em, border 1px #fefef7 or #b3b3b3. Amber variant uses border #f2b98b for emphasis."

    social_proof_logo_strip:
      role: "Brand logos under the hero"

      info: "Horizontal row of monochrome white logos (Notion, Disney, Stanford, IDEO, Tumblr, McKinsey) on the dark canvas. Logos are uniformly sized, evenly spaced with 40–60px gaps, and rendered in #b3b3b3 or #fefef7 with a small uppercase eyebrow label above."

    announcement_banner:
      role: "Top-of-page news or update"

      info: "Single line of Verlag 400 at 14px centered above the hero, with a bold name ('Clay' in this case) and a right-arrow link. Color #b3b3b3 base, #fefef7 for the bolded name, amber #f2b98b for the arrow link."

  do_s_and_don_ts:

    do:
      - "Use #fefef7 (Bone White) as the filled CTA background on dark surfaces — it provides 18.9:1 contrast against #0f0f10 and reads as warm, not clinical."
      - "Set small UI labels to 9–10px Verlag 600 uppercase with 0.083–0.167em letter-spacing — the wide tracking is a signature of the system."
      - "Use Verlag Condensed weight 900 at 48–64px for display headlines only; line-height 1.0 lets the tall forms stack tightly."
      - "Reserve #f2b98b (Bronze Glow) for outlined actions, link underlines, and decorative rules — never as a fill, to keep it feeling like a warm signal, not a button color."
      - "Apply 36px border-radius to all avatar and product-mockup images; 16px for content cards; 6px for buttons and inline links; 12px for badges."
      - "Layer the warm gradient (linear-gradient(95deg, #d49065 0%, #fec99b 100%)) as a bottom-of-viewport atmospheric wash — it bleeds up behind content rather than being contained in a band."
      - "Keep body text at 14–16px Verlag 400 with line-height 1.35–1.55; let long-form copy breathe vertically rather than tightening it."

    don_t:
      - "Do not use #f2b98b as a filled button background — the system uses white fills for primary actions and amber only for outlined accents."
      - "Do not introduce additional chromatic colors; the 3% colorfulness budget means any new hue must be earned by a new functional role."
      - "Do not use soft, large-radius drop shadows; the single shadow in the system is an offset hairline (negative X, positive Y) — keep elevation minimal and directional."
      - "Do not use letter-spacing below 0.013em on body text or above 0.167em on any label; the tracking scale is the system's typographic identity."
      - "Do not use serif faces (Chronicle) for more than one mid-page editorial accent per screen — it is a counterpoint, not a workhorse."
      - "Do not apply border-radius uniformly; the 6/12/16/36 hierarchy maps to element type and losing it flattens the visual grammar."
      - "Do not place bright white (#fefef7) on bright surfaces — it is reserved for dark-canvas text and CTA fills; on light sections switch to #0f0f10 or #1d1d1f."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Obsidian Canvas | `#0f0f10` | Page base, hero, footer — the ground plane |"
    info: "| 1 | Graphite Layer | `#1d1d1f` | Product mockup card, elevated UI panels, secondary surfaces |"
    info: "| 2 | Warm Horizon | `#d49065` | Gradient atmosphere zone in the lower viewport — decorative only |"
    info: "| 3 | Cream Paper | `#f7f3ee` | Inverse light sections, gradient terminus, high-contrast blocks |"
    info: "| 4 | Bone White | `#fefef7` | Filled CTA, nav-pill background, badge borders — the brightest interactive surface |"

  elevation:

    - "**Product Mockup Card:** `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) -8px 12px 22px 0px`"

  imagery:

    info: "Imagery is sparse and product-centric. The hero features a large product-mockup card showing the Mesh app interface rather than lifestyle photography. Avatar groups use real circular portraits (36px radius) for social proof. A social-proof logo strip displays monochrome white partner logos. The lower viewport carries a warm amber-to-cream gradient as atmospheric backdrop — decorative, not informational. No stock photography, no 3D renders, no illustrations. Icons are minimal and monoline. The visual weight is carried by type and the gradient atmosphere, not by imagery."

  layout:

    info: "Centered, max-width 1200px page model with full-bleed dark canvas. The hero is a single centered column: announcement banner → large condensed headline → 2-line subtext → white filled CTA, with the product mockup card overlapping the lower viewport where the warm gradient begins. Navigation is a centered pill above the headline, with logo and sign-in/CTA flanking it. Below the hero, sections flow as centered single-column or 2-column text-plus-visual blocks with 80px vertical gaps. The social-proof logo strip is a full-width centered row. The overall rhythm is unhurried and editorial — generous section gaps with compact internal spacing. No sidebar, no sticky header pattern, no card grid layouts — the page reads top-to-bottom as a continuous narrative."

  agent_prompt_guide:

    quick_color_reference:
    - "text (on dark): #fefef7"
    - "text (muted): #b3b3b3"
    - "text (subtle): #666666"
    - "background (canvas): #0f0f10"
    - "surface (elevated): #1d1d1f"
    - "border (hairline): #b3b3b3"
    - "accent (amber): #f2b98b"
    - "primary action: #f2b98b (outlined action border)"

    example_component_prompts:

    - "Create an Outlined Primary Action: Transparent background, #f2b98b border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button."

    - "*Centered nav pill*: 9999px radius, semi-transparent dark fill, padding 6px 8px, containing 4 items at 12px Verlag 600 uppercase, letter-spacing 0.071em, text #fefef7, separated by 16px gaps. Sits centered in a max-width 1200px header."

    - "*Product mockup card*: 16px border-radius, background #1d1d1f, hairline border 1px #b3b3b3, offset shadow rgba(0,0,0,0.06) 0 0 0 1px + rgba(0,0,0,0.08) -8px 12px 22px 0. Contains a 3-column app UI with sidebar (avatar 36px radius), activity feed rows (14px Verlag 400 names in #fefef7, 12px timestamps in #666666, 1px #b3b3b3 dividers at low opacity), and right detail panel."

    - "*Outlined amber action link*: transparent background, 1px solid #f2b98b border, 6px radius, padding 8px 16px, text 14px Verlag 600 uppercase, letter-spacing 0.063em, color #f2b98b. Use for secondary/contextual actions only."

    - "*Eyebrow label*: 9–10px Verlag 600 uppercase, letter-spacing 0.167em, color #b3b3b3. Sits centered above section content with 24px margin-bottom. Reads as editorial caption, not UI label."

  gradient_system:

    info: "The single approved gradient is the warm horizon wash: linear-gradient(95deg, #d49065 0%, #fec99b 100%). It is positioned in the lower viewport, bleeding upward behind content rather than being contained in a card or band. Treat it as atmospheric chrome, not a brand element — it never appears inside components, only behind them."

  typography_personality:

    the_system_pairs_three_faces: "Verlag (geometric grotesque) for UI and body, Verlag Condensed (compressed sans) for hero display, and Chronicle Text G1 (transitional serif) for occasional editorial accents. The wide-tracked all-caps label is the most recognizable typographic signature — 9–10px with 0.083–0.167em tracking reads as magazine sidebar text, not interface chrome. Body copy is unadorned 14–16px Verlag 400 with generous line-height; the voice is unhurried."

  similar_brands:

    - "**Linear** — Same dark-canvas editorial approach with monochrome neutrals, hairline borders, and a single restrained accent for actions"
    - "**Arc** — Compact information-dense layout with wide-tracked all-caps labels and warm-tinted whites (#fefef7 family) instead of pure white"
    - "**Notion** — Near-black canvas with white text, condensed display type for hero headlines, and minimal chromatic accent usage"
    - "**Vercel** — Dark-first design with centered nav pill, white filled CTA pattern, and product-mockup-over-gradient hero composition"
    - "**Pitch** — Editorial dark UI with serif accents on a sans body, wide-tracked labels, and a single warm gradient as atmosphere"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian-canvas: #0f0f10;
          --color-graphite-layer: #1d1d1f;
          --color-bone-white: #fefef7;
          --color-cream-paper: #f7f3ee;
          --color-ash-border: #b3b3b3;
          --color-slate-mute: #666666;
          --color-cool-steel: #868f97;
          --color-warm-pewter: #86868b;
          --color-pale-mist: #cccccc;
          --color-onyx: #000000;
          --color-bronze-glow: #f2b98b;
          --color-apricot-highlight: #ffaf7c;
          --color-amber-wash: #d49065;
          --gradient-amber-wash: linear-gradient(95deg, rgb(212, 144, 101) 0%, rgb(254, 201, 155) 100%);
        
          /* Typography — Font Families */
          --font-verlag: 'Verlag', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-verlag-condensed: 'Verlag Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chronicle-text-g1-roman: 'Chronicle Text G1 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-eyebrow: 10px;
          --leading-eyebrow: 1.1;
          --tracking-eyebrow: 1.67px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-body-lg: 16px;
          --leading-body-lg: 1.38;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-editorial: 22px;
          --leading-editorial: 1.55;
          --text-display: 48px;
          --leading-display: 1;
          --text-display-lg: 64px;
          --leading-display-lg: 1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-104: 104px;
          --spacing-133: 133px;
          --spacing-140: 140px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-badges: 12px;
          --radius-images: 36px;
          --radius-buttons: 6px;
          --radius-navpill: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) -8px 12px 22px 0px;
        
          /* Surfaces */
          --surface-obsidian-canvas: #0f0f10;
          --surface-graphite-layer: #1d1d1f;
          --surface-warm-horizon: #d49065;
          --surface-cream-paper: #f7f3ee;
          --surface-bone-white: #fefef7;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian-canvas: #0f0f10;
          --color-graphite-layer: #1d1d1f;
          --color-bone-white: #fefef7;
          --color-cream-paper: #f7f3ee;
          --color-ash-border: #b3b3b3;
          --color-slate-mute: #666666;
          --color-cool-steel: #868f97;
          --color-warm-pewter: #86868b;
          --color-pale-mist: #cccccc;
          --color-onyx: #000000;
          --color-bronze-glow: #f2b98b;
          --color-apricot-highlight: #ffaf7c;
          --color-amber-wash: #d49065;
        
          /* Typography */
          --font-verlag: 'Verlag', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-verlag-condensed: 'Verlag Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-chronicle-text-g1-roman: 'Chronicle Text G1 Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui: 'system-ui', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-eyebrow: 10px;
          --leading-eyebrow: 1.1;
          --tracking-eyebrow: 1.67px;
          --text-body: 14px;
          --leading-body: 1.4;
          --text-body-lg: 16px;
          --leading-body-lg: 1.38;
          --text-subheading: 18px;
          --leading-subheading: 1.35;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.33;
          --text-editorial: 22px;
          --leading-editorial: 1.55;
          --text-display: 48px;
          --leading-display: 1;
          --text-display-lg: 64px;
          --leading-display-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-104: 104px;
          --spacing-133: 133px;
          --spacing-140: 140px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 36px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) -8px 12px 22px 0px;
        }