foundry___style_reference:
  info: "> orange-lit type cathedral — a black room where enormous illuminated letterforms hang as exhibits and the only guide rails are pale wireframe borders and one neon marker color."

  theme: "dark"

  info: "Foundry is a type foundry presented as a dark workbench where the products are also the interface. A near-black canvas (#121212) hosts sharp-cornered UI chrome built almost entirely from monospaced text and hairline borders, giving the whole site the feel of a developer's terminal crossed with a gallery wall. The only chromatic voice is a vivid orange (#ff4d00) used as a structural accent on the logo, outlined action borders, and selective highlights — never as a filled button background, which keeps the accent feeling like a warning lamp or marker stroke rather than a brand paint job. Every screen is a specimen: massive custom display faces (90–234px) dominate the viewport, the UI recedes around them, and even sidebar items are styled as labeled tags. Compact spacing, near-zero radii (2.8px), and uppercase monospace metadata reinforce a precise, industrial, no-decoration sensibility — decoration lives entirely inside the typefaces themselves."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ember Orange | `#ff4d00` | `--color-ember-orange` | Orange accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Foundry Black | `#121212` | `--color-foundry-black` | Page background, section canvas, main surface — the dominant ground that lets white type and orange accents read as luminous |"
    info: "| Chalk White | `#e2e8f0` | `--color-chalk-white` | Hairline borders, nav rules, link underlines, tag outlines — the wireframe color that constructs the entire UI scaffold |"
    info: "| Bone White | `#efefef` | `--color-bone-white` | Primary body and UI text, icon strokes, button text, secondary surface fills — the readable text color and the inverse fill used for emphasized controls |"
    info: "| Soot | `#3a3a3a` | `--color-soot` | Low-contrast structural borders, subtle dividers between stacked sections — the quietest rule line, only visible against the bone-white inverted surfaces |"
    info: "| Ash | `#747474` | `--color-ash` | Muted helper text, inactive labels, secondary metadata — recedes so the monospace chrome can carry hierarchy without competing with display type |"

  tokens___typography:

    jetbrains_mono___the_operating_system_font__drives_the_sidebar_navigation__font_spec_labels__button_text__metadata_strips__and_body_copy__treated_as_a_ui_element_itself___uppercase__tracked_out_0_04_0_06em_for_labels__tight__0_02em_for_body__its_monospaced_geometry_is_the_visual_signature_of_every_chrome_component_____font_jetbrains_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Space Mono"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 14px, 18px"
      - "**Line height:** 1.14, 1.29, 1.30, 1.32, 1.40, 1.50"
      - "**Letter spacing:** -0.02em, 0.01em, 0.04em, 0.06em"
      - "**Role:** The operating-system font: drives the sidebar navigation, font-spec labels, button text, metadata strips, and body copy. Treated as a UI element itself — uppercase, tracked-out (0.04–0.06em) for labels, tight (-0.02em) for body. Its monospaced geometry is the visual signature of every chrome component."

    inter___secondary_text_voice_for_longer_form_copy_blocks_and_supporting_paragraphs_that_need_a_less_technical_rhythm_than_the_monospace__appears_sparingly_so_the_monospace_remains_the_dominant_signal_____font_inter:
      - "**Substitute:** Inter, system-ui, -apple-system, Segoe UI"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 18px"
      - "**Line height:** 1.29, 1.30, 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Secondary text voice for longer-form copy blocks and supporting paragraphs that need a less technical rhythm than the monospace. Appears sparingly so the monospace remains the dominant signal."

    basement_grotesque__ffflauta__b_mecha__bunker__caniche__carpenter__curia__adhesion__trovador__xer0__blob___display_specimens___the_products__each_fills_a_full_width_section_at_monumental_size__set_tight_0_95_1_10_leading_with_a_hair_of_positive_tracking__an_ai_agent_should_treat_these_as_content_blocks_to_be_authored__not_as_system_fonts_to_be_re_created__substitute_with_the_user_s_own_display_typefaces_at_proportional_sizes_____font_basement_grotesque_ffflauta_b_mecha_bunker_caniche_carpenter_curia_adhesion_trovador_xer0_blob:
      - "**Weights:** 400 (each is a single-weight specimen)"
      - "**Sizes:** 90px (FFFLAUTA) → 120px (Basement Grotesque, B-Mecha) → 156–234px (the rest)"
      - "**Line height:** 0.95–1.20"
      - "**Letter spacing:** 0.01em"
      - "**Role:** Display specimens — the products. Each fills a full-width section at monumental size, set tight (0.95–1.10 leading) with a hair of positive tracking. An AI agent should treat these as content blocks to be authored, not as system fonts to be re-created; substitute with the user's own display typefaces at proportional sizes."

    ffflauta_400___ffflauta_400___detected_in_extracted_data_but_not_described_by_ai____font_ffflauta_400:
      - "**Weights:** 400"
      - "**Sizes:** 90px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** FFFLAUTA 400 — detected in extracted data but not described by AI"

    basement_grotesque_black_expanded___basement_grotesque_black_expanded___detected_in_extracted_data_but_not_described_by_ai____font_basement_grotesque_black_expanded:
      - "**Weights:** 400"
      - "**Sizes:** 120px"
      - "**Line height:** 0.95"
      - "**Letter spacing:** 0.01"
      - "**Role:** Basement Grotesque Black Expanded — detected in extracted data but not described by AI"

    mecha_regular___mecha_regular___detected_in_extracted_data_but_not_described_by_ai____font_mecha_regular:
      - "**Weights:** 400"
      - "**Sizes:** 120px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** 0.01"
      - "**Role:** Mecha Regular — detected in extracted data but not described by AI"

    curia_regular___curia_regular___detected_in_extracted_data_but_not_described_by_ai____font_curia_regular:
      - "**Weights:** 400"
      - "**Sizes:** 156px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Curia Regular — detected in extracted data but not described by AI"

    adhesion_regular___adhesion_regular___detected_in_extracted_data_but_not_described_by_ai____font_adhesion_regular:
      - "**Weights:** 400"
      - "**Sizes:** 164px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Adhesion Regular — detected in extracted data but not described by AI"

    carpenter_regular___carpenter_regular___detected_in_extracted_data_but_not_described_by_ai____font_carpenter_regular:
      - "**Weights:** 400"
      - "**Sizes:** 169px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Carpenter Regular — detected in extracted data but not described by AI"

    bunker_regular___bunker_regular___detected_in_extracted_data_but_not_described_by_ai____font_bunker_regular:
      - "**Weights:** 400"
      - "**Sizes:** 185px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Bunker Regular — detected in extracted data but not described by AI"

    trovador_regular___trovador_regular___detected_in_extracted_data_but_not_described_by_ai____font_trovador_regular:
      - "**Weights:** 400"
      - "**Sizes:** 198px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Trovador Regular — detected in extracted data but not described by AI"

    xer0_regular___xer0_regular___detected_in_extracted_data_but_not_described_by_ai____font_xer0_regular:
      - "**Weights:** 400"
      - "**Sizes:** 198px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** XER0 Regular — detected in extracted data but not described by AI"

    caniche_regular___caniche_regular___detected_in_extracted_data_but_not_described_by_ai____font_caniche_regular:
      - "**Weights:** 400"
      - "**Sizes:** 203px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Caniche Regular — detected in extracted data but not described by AI"

    blob_regular___blob_regular___detected_in_extracted_data_but_not_described_by_ai____font_blob_regular:
      - "**Weights:** 400"
      - "**Sizes:** 234px"
      - "**Line height:** 1.1"
      - "**Letter spacing:** 0.01"
      - "**Role:** Blob Regular — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | 0.04px | `--text-caption` |"
      info: "| body-sm | 14px | 1.29 | -0.02px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.32 | — | `--text-subheading` |"
      info: "| display | 120px | 0.95 | 0.01px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 2.8px |"
      info: "| tags | 2.8px |"
      info: "| cards | 8px |"
      info: "| buttons | 2.8px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 64px"
      - "**Card padding:** 15px"
      - "**Element gap:** 8px"

  components:

    sidebar_nav_item_tag:
      role: "Navigation entry styled as a labeled tag, the primary wayfinding element"

      info: "Inverted surface fill (#efefef) with #121212 text; 2.8px radius; ~10px vertical padding and 6–10px horizontal padding; 12–14px JetBrains Mono 400, uppercase, letter-spacing 0.04em. When a count badge appears (e.g. \"10\"), the number is a separate inline pill in the same color, no border separator."

    sidebar_section_header:
      role: "Group label above nav tag clusters"

      info: "No background; 12–14px JetBrains Mono 700 (or 400 with +0.06em tracking), uppercase, #efefef; preceded by a small geometric marker (L-shaped bracket in #efefef)."

    outlined_action_button_buy_now:
      role: "Primary commercial action"

      info: "Transparent fill; 1px solid #ff4d00 border; 2.8px radius; 10px 15px padding; 12–14px JetBrains Mono 400, uppercase, letter-spacing 0.04em, #ff4d00 text. The orange outline is the entire signal — no fill, no shadow."

    ghost_action_button_explore:
      role: "Secondary action paired with the outlined CTA"

      info: "Transparent fill; 1px solid #efefef border; 2.8px radius; 10px 15px padding; 12–14px JetBrains Mono 400, uppercase, #efefef text and border."

    font_specimen_card:
      role: "Showcase block for a single typeface in the catalog grid"

      info: "Full-width band on #121212 canvas, separated by a 1px #e2e8f0 hairline at the top. Interior: a top metadata strip (font name on the left, \"N STYLES / N HEIGHTS\" plus a glyph-size toggle and mode toggle in the center, action buttons on the right), then a generous vertical gap to the display specimen set at 90–234px. No card background, no shadow — the hairline border IS the card chrome."

    metadata_strip:
      role: "Top utility bar of each specimen section"

      info: "Single horizontal row, 12–14px JetBrains Mono 400 uppercase, #efefef text; 1px #e2e8f0 bottom border. Houses: section name (left), type stats and toggles (center), action buttons (right). 10–15px vertical padding."

    ticker___announcement_bar:
      role: "Scrolling top-of-page notification"

      info: "1px tall hairline border in #e2e8f0, dark fill; inline monospaced text scrolling horizontally; small geometric triangle markers as separators between phrases."

    logo_mark:
      role: "Brand identifier, top-left, persistent across screens"

      info: "Two-line stacked wordmark in Basement Grotesque (or equivalent heavy display face) set in #ff4d00 — \"BASEMENT\" over \"FOUNDRY.\" The period is part of the mark. Orange against black is the loudest single element on any screen."

    body_copy_block:
      role: "Long-form descriptive paragraph"

      info: "Inter 400, 14–16px, line-height 1.5, #efefef; sits below a specimen as a quiet explanatory footnote. Constrained to roughly 40–50ch column width."

    glyph_toggle___mode_pill:
      role: "Small control switching the displayed character set or display mode"

      info: "Inline JetBrains Mono 12–14px, uppercase; current state shown with a small icon glyph (Aa, ¶, etc.) rather than a colored fill; sits inside the metadata strip."

  do_s_and_don_ts:

    do:
      - "Use JetBrains Mono 400 for all UI chrome — nav, labels, metadata, buttons, section headers. It is the operating-system font."
      - "Set sidebar items and button text in uppercase with 0.04em letter-spacing; reserve tight tracking (-0.02em) for running body text only."
      - "Use the orange #ff4d00 only as a 1px outlined border or as a text accent — never as a filled background. The outlined-buy-now button is the canonical use."
      - "Keep all corners sharp: 2.8px for nav, tags, and buttons; 8px only for larger card containers. Nothing round."
      - "Build depth through color inversion (bone-white panel on near-black canvas) and hairline #e2e8f0 borders — never through drop shadows."
      - "Let one display typeface fill the full width of its section at 90–234px; treat the specimen area as an exhibition, not a constrained content card."
      - "Pair every action button with a ghost companion (e.g. outlined orange BUY NEXT to ghost white EXPLORE) in the same row."

    don_t:
      - "Don't fill buttons or surfaces with #ff4d00 — it is exclusively a stroke and text accent."
      - "Don't introduce new accent colors; the palette is monochromatic neutrals plus exactly one chromatic voice."
      - "Don't apply drop shadows or heavy elevation to any component; the system is flat by design."
      - "Don't set body copy or metadata in the display typefaces — those are specimen content, not UI fonts."
      - "Don't use radii larger than 8px anywhere; the 2.8px tag radius is a signature and any rounding larger breaks the blueprint feel."
      - "Don't use Inter for labels, buttons, or metadata — reserve it for paragraph-length supporting copy only."
      - "Don't center the page layout: the sidebar is fixed-left, content is left-aligned within its column, and the canvas extends right."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#121212` | Full-bleed page background — the dark room the type hangs in |"
    info: "| 1 | Inverted Surface | `#efefef` | Bone-white panels used for featured inversions and emphasized controls; rare but high-contrast |"

  elevation:

    info: "The design intentionally avoids drop shadows. Depth is communicated through color inversion (dark canvas vs bone-white panels) and hairline borders, not through shadow stacks — a flat, blueprint-like surface treatment that keeps focus on the type itself."

  imagery:

    info: "Imagery is entirely typographic. The hero is a large 3D graffiti-style rendering of a display face in orange-on-black that fills the viewport; subsequent sections are full-bleed type specimens at 90–234px. No photography, no illustration, no icons beyond small geometric monospace markers (L-bracket section leaders, triangle separators in the ticker, Aa glyph-toggle icons). The visual language is type-as-image, with the only texture coming from the layered 3D extrusion of the hero specimen."

  layout:

    info: "Fixed-left sidebar (≈200px) holding all primary navigation as labeled tags grouped by section, with a persistent logo at the top and a small footer block (legal, social, support links). The main content area extends right to a max-width of ~1440px, starting with a full-bleed ticker bar, then a hero section that occupies the full content width with a massive specimen and a quiet body-copy footnote, then a vertical stack of full-width specimen cards separated by 1px hairline rules. No centered hero, no alternating light/dark bands — the canvas stays near-black throughout and emphasis comes from occasional inverted bone-white surfaces and the orange accent. Spacing is compact: ~64px between major sections, ~8–10px between chrome elements."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text (primary): #efefef"
    - "text (muted/helper): #747474"
    - "background (canvas): #121212"
    - "border (hairline): #e2e8f0"
    - "accent: #ff4d00"
    - "primary action: #efefef (filled action)"

    info: "3–5 Example Component Prompts"
    - "**Sidebar tag nav item**: Inverted #efefef fill, #121212 text, 2.8px radius, 10px 10px padding. Label in JetBrains Mono 14px, weight 400, uppercase, letter-spacing 0.04em. If a count follows (e.g. \"BUNKER 4\"), render the number as inline text on the same line, no separator."

    - "Create a Primary Action Button: #efefef background, #747474 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Ghost secondary action button**: Transparent fill, 1px solid #efefef border, 2.8px radius, 10px 15px padding. Text in JetBrains Mono 12px, weight 400, uppercase, letter-spacing 0.04em, color #efefef. Label \"EXPLORE\"."

    - "**Font specimen card**: Full-width band on #121212 canvas with a 1px #e2e8f0 top border. Top metadata strip: font name in JetBrains Mono 12px uppercase #efefef on the left, \"N STYLES / N HEIGHTS\" + glyph/mode toggles centered, action buttons on the right. Below, a 60–80px vertical gap, then a single display specimen set full-width at 120–200px in #efefef."

    - "**Top ticker bar**: Full-bleed, 1px tall, #121212 background, 1px #e2e8f0 bottom border. Scrolling inline text in JetBrains Mono 12px uppercase, #efefef, separated by small triangle markers."

  typeface_as_content_rule:

    info: "Every display face in the catalog (Basement Grotesque, Bunker, Curia, Adhesion, Trovador, XER0, etc.) is content, not system typography. An AI agent reproducing a page should pick one of these custom families to fill the hero/specimen area, but the rest of the UI must always fall back to JetBrains Mono (UI) and Inter (long body copy). Never use a specimen face for nav, buttons, labels, or metadata."

  similar_brands:

    - "**Dinamo Font Gauntlet (ABC Dinamo)** — Same product-as-interface logic — the homepage is a wall of massive type specimens, dark canvas, monospaced chrome"
    - "**OH no Type** — Type foundry site with fixed left sidebar, dark background, and oversized display specimens filling the viewport with minimal UI decoration"
    - "**Grilli Type** — Dark-mode catalog site that treats specimen type as hero content and keeps UI chrome tight and monospaced"
    - "**Pangram Pangram** — Bold display-first type foundry with sharp corners, dark canvas, and minimal-color UI letting the typefaces do all the visual work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ember-orange: #ff4d00;
          --color-foundry-black: #121212;
          --color-chalk-white: #e2e8f0;
          --color-bone-white: #efefef;
          --color-soot: #3a3a3a;
          --color-ash: #747474;
        
          /* Typography — Font Families */
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basement-grotesque-ffflauta-b-mecha-bunker-caniche-carpenter-curia-adhesion-trovador-xer0-blob: 'Basement Grotesque, FFFLAUTA, B-Mecha, Bunker, Caniche, Carpenter, Curia, Adhesion, Trovador, XER0, Blob', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ffflauta-400: 'FFFLAUTA 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basement-grotesque-black-expanded: 'Basement Grotesque Black Expanded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mecha-regular: 'Mecha Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-curia-regular: 'Curia Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adhesion-regular: 'Adhesion Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-carpenter-regular: 'Carpenter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bunker-regular: 'Bunker Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-trovador-regular: 'Trovador Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-xer0-regular: 'XER0 Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-caniche-regular: 'Caniche Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blob-regular: 'Blob Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.04px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.02px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.32;
          --text-display: 120px;
          --leading-display: 0.95;
          --tracking-display: 0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 64px;
          --card-padding: 15px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-sm: 2.8px;
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-nav: 2.8px;
          --radius-tags: 2.8px;
          --radius-cards: 8px;
          --radius-buttons: 2.8px;
        
          /* Surfaces */
          --surface-canvas: #121212;
          --surface-inverted-surface: #efefef;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ember-orange: #ff4d00;
          --color-foundry-black: #121212;
          --color-chalk-white: #e2e8f0;
          --color-bone-white: #efefef;
          --color-soot: #3a3a3a;
          --color-ash: #747474;
        
          /* Typography */
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basement-grotesque-ffflauta-b-mecha-bunker-caniche-carpenter-curia-adhesion-trovador-xer0-blob: 'Basement Grotesque, FFFLAUTA, B-Mecha, Bunker, Caniche, Carpenter, Curia, Adhesion, Trovador, XER0, Blob', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ffflauta-400: 'FFFLAUTA 400', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-basement-grotesque-black-expanded: 'Basement Grotesque Black Expanded', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-mecha-regular: 'Mecha Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-curia-regular: 'Curia Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-adhesion-regular: 'Adhesion Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-carpenter-regular: 'Carpenter Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-bunker-regular: 'Bunker Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-trovador-regular: 'Trovador Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-xer0-regular: 'XER0 Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-caniche-regular: 'Caniche Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-blob-regular: 'Blob Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --tracking-caption: 0.04px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.29;
          --tracking-body-sm: -0.02px;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.32;
          --text-display: 120px;
          --leading-display: 0.95;
          --tracking-display: 0.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-sm: 2.8px;
          --radius-lg: 8px;
        }