branding___style_reference:
  info: "> Black gallery wall, blood-red punctuation — Oversized white display type floats on a void-like dark canvas, interrupted by a single vivid red accent and dramatic ornamental display faces that feel like gallery signage rather than web UI."

  theme: "dark"

  info: "SVZ operates in the visual register of a high-fashion editorial: pitch-black canvas, oversized display typography that dominates the viewport, and a single arterial red that appears like a wound in the monochrome. The interface is deliberately sparse — most surfaces carry no chrome at all, letting type, photographic collage, and oversized background shapes do the work. Text is primarily white on near-black, with an off-white (#f3efef) reserved for inverted bodies and footers. Hierarchy is achieved through scale (160px display stepping down to 10px labels) and weight contrast (300 whisper-thin body against 700 blocky caps), never through color or chrome. Every interactive element is ghost or hairline-bordered — the system refuses to shout with buttons, preferring arrows and discover-call links that feel like editorial pull-quotes."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Canvas | `#080808` | `--color-void-canvas` | Primary page background; the base upon which all display type and floating shapes sit |"
    info: "| Absolute Black | `#000000` | `--color-absolute-black` | Deepest surface, decorative fills, icon strokes — the floor beneath the void |"
    info: "| Charcoal Plate | `#171617` | `--color-charcoal-plate` | Footer and inverted section backgrounds, slightly elevated off the base void |"
    info: "| Smoke Plate | `#262525` | `--color-smoke-plate` | Secondary surface for content blocks and image treatments layered over the void |"
    info: "| Graphite Lift | `#393939` | `--color-graphite-lift` | Subtle elevation surface and card background; the only visible shadow color |"
    info: "| Bone White | `#fcfcfc` | `--color-bone-white` | Primary text, hairline borders, icon outlines — the dominant non-black color in the system |"
    info: "| Linen | `#f3efef` | `--color-linen` | Inverted body sections, off-white text on dark cards, soft warm-white content surfaces |"
    info: "| Ash | `#d4d2d2` | `--color-ash` | Muted secondary text, nav labels, subtle borders — the whispered voice between bone and graphite |"
    info: "| Pebble | `#b5b2b2` | `--color-pebble` | Disabled borders, tertiary helper text, low-priority metadata |"
    info: "| Iron | `#525252` | `--color-iron` | Link underlines, nav dividers, hairline separators on dark surfaces |"
    info: "| Arterial Red | `#fe1e34` | `--color-arterial-red` | Sole brand accent — card borders, cursor, hero dot, gradient terminator; the only saturated color and it is used like a heartbeat, not a coat of paint |"
    info: "| Crimson Pure | `#ff0000` | `--color-crimson-pure` | Heading underline accent and decorative fill — a purer red for typographic emphasis only |"

  tokens___typography:

    kmr_waldenburg___primary_display_and_ui_typeface_across_nav__headings__body__buttons__and_the_full_scale_from_10px_tracked_nav_labels_to_160px_hero_display__the_custom_face_is_the_system_s_signature___its_bold_caps_at_64_160px_carry_negative_tracking__0_075em_to__0_080em_that_compresses_the_letters_into_architectural_blocks__substitute__neue_haas_grotesk_display__or_inter_at_matching_weights_and_tracking_____font_kmr_waldenburg:
      - "**Substitute:** Neue Haas Grotesk Display / Inter"
      - "**Weights:** 300, 400, 700"
      - "**Sizes:** 10, 12, 14, 24, 32, 42, 64, 80, 160"
      - "**Line height:** 0.90, 1.00, 1.05, 1.10, 1.20, 1.50"
      - "**Letter spacing:** Tight: -0.017em at body, -0.038em to -0.050em at headings, -0.075em to -0.080em at 80–160px display; tracked OUT to +0.071em and +0.308em for 10–12px nav labels"
      - "**Role:** Primary display and UI typeface across nav, headings, body, buttons, and the full scale from 10px tracked nav labels to 160px hero display. The custom face is the system's signature — its bold caps at 64–160px carry negative tracking (-0.075em to -0.080em) that compresses the letters into architectural blocks. Substitute: Neue Haas Grotesk Display, or Inter at matching weights and tracking."

    editorialnew___serif_italic_companion___appears_as_the__crafting_____for_the__connective_words_between_display_caps_and_as_refined_body_heading_accents__the_contrast_of_this_soft_serif_whisper_against_the_700_weight_caps_is_the_system_s_typographic_signature__substitute__editorial_old__canela__or_playfair_display_italic_____font_editorialnew:
      - "**Substitute:** Editorial Old / Playfair Display Italic"
      - "**Weights:** 300"
      - "**Sizes:** 14, 20, 32"
      - "**Line height:** 1.00, 1.10, 1.50"
      - "**Letter spacing:** -0.050em at 32px, -0.020em at 20px"
      - "**Role:** Serif italic companion — appears as the 'crafting' / 'for the' connective words between display caps and as refined body/heading accents. The contrast of this soft serif whisper against the 700-weight caps is the system's typographic signature. Substitute: Editorial Old, Canela, or Playfair Display Italic."

    dirtyline_36_daysoftype_2022___ornamental_display_face_used_for_single_letter_or_short_word_spectacle_moments_the_stylized__a__in__we_are__aggressive__0_100em_tracking_at_24px_makes_it_a_sculptural_object_rather_than_readable_type__substitute__tobias__rogue_serif__or_any_expressive_display_serif_with_calligraphic_contrast_____font_dirtyline_36_daysoftype_2022:
      - "**Substitute:** Tobias / Rogue Serif"
      - "**Weights:** 400"
      - "**Sizes:** 24, 64, 80"
      - "**Line height:** 0.90, 1.05, 1.10"
      - "**Letter spacing:** -0.100em at 24px, -0.037em at 64px, -0.030em at 80px"
      - "**Role:** Ornamental display face used for single-letter or short-word spectacle moments (the stylized 'a' in 'WE ARE'). Aggressive -0.100em tracking at 24px makes it a sculptural object rather than readable type. Substitute: Tobias, Rogue Serif, or any expressive display serif with calligraphic contrast."

    system_ui___quiet_body_fallback_and_small_icon_labels___only_used_where_kmr_waldenburg_s_geometric_personality_would_overpower_micro_copy__effectively_the__muted__voice_in_the_type_system_____font_system_ui:
      - "**Substitute:** system-ui / -apple-system"
      - "**Weights:** 300, 400"
      - "**Sizes:** 12, 14"
      - "**Line height:** 1.20, 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Quiet body fallback and small icon labels — only used where Kmr Waldenburg's geometric personality would overpower micro-copy. Effectively the 'muted' voice in the type system."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 0.8px | `--text-caption` |"
      info: "| body | 14px | 1.5 | -0.24px | `--text-body` |"
      info: "| subheading | 24px | 1.1 | -0.91px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.05 | -1.6px | `--text-heading-sm` |"
      info: "| heading | 42px | 1.05 | -2px | `--text-heading` |"
      info: "| heading-lg | 64px | 1 | -4.8px | `--text-heading-lg` |"
      info: "| display | 80px | 0.9 | -6px | `--text-display` |"
      info: "| display-xl | 160px | 0.9 | -12.8px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 184 | 184px | `--spacing-184` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 3px |"
      info: "| cards | 8px |"
      info: "| buttons | 8px |"
      info: "| largeCards | 14.4px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset` | `--shadow-sm` |"

    layout:

      - "**Section gap:** 48-64px"
      - "**Card padding:** 12-24px"
      - "**Element gap:** 24px"

  components:

    ghost_cta_link:
      role: "Primary action affordance across the site"

      info: "Uppercase 12px Kmr Waldenburg weight 400 with 0.071em letter-spacing, bone-white (#fcfcfc) text on void canvas, paired with a 45° arrow icon. No fill, no background, no border. 32px vertical padding, 8px horizontal. Replaces the conventional button entirely — the system treats calls-to-action as editorial pull-quotes, not UI controls."

    discovery_call_outlined_button:
      role: "Rare filled-style affordance for high-intent actions"

      top_right_header_element: "uppercase 12px tracked text inside an 8px-radius rectangle with a 1px hairline border at #d4d2d2 on the void, containing a diagonal arrow. Internal padding 12px 24px. This is the only element that visually resembles a 'button' in the conventional sense — even it is a ghost."

    hero_display_headline:
      role: "Page-opening typographic statement"

      info: "160px Kmr Waldenburg weight 700, all caps, line-height 0.90, letter-spacing -12.8px. White (#fcfcfc) on void (#080808). Small Editorialnew italic weight 300 words ('crafting', 'for the') sit inline at 42px between the caps as connective tissue. The two type families are locked at the same baseline grid."

    section_transition_headline:
      role: "Mid-page typographic punctuation (e.g. 'WE ARE')"

      info: "80px Kmr Waldenburg weight 700 with -6px tracking, paired with a single oversized ornamental letter from Dirtyline 36 Daysoftype 2022 in 80–160px. The contrast between blocky geometric caps and a hand-drawn calligraphic glyph is the signature moment."

    bordered_brand_card:
      role: "Highlighted content card using the brand accent"

      background: "void or smoke (#080808–#262525). Border: 1px solid #fe1e34. Border-radius: 8px. Internal padding: 24px. The red border is the only chromatic border in the system; it functions as a 'featured' marker, not decoration."

    standard_card:
      role: "Generic content surface"

      info: "Background #080808 or #f3efef, 1px hairline border at #d4d2d2 (on dark) or #525252 (on light), 8px radius, 12–24px internal padding. Inset highlight: rgba(255,255,255,0.2) 0px 2px 5px 0px inset on dark variants to suggest a glass edge."

    hairline_link:
      role: "Inline and nav text links"

      info: "12–14px Kmr Waldenburg weight 400, uppercase, 0.071em tracking. Underline in #525252 (on dark) or #b5b2b2 (on light). 3px border-radius is reserved for link/nav containers only. No color change on hover — the system relies on weight or position shift instead."

    top_navigation:
      role: "Primary site navigation bar"

      info: "Full-width, transparent over void canvas. Logo 'SVZ' top-left in 32px Editorialnew or Kmr Waldenburg caps. Four column groups (AGENCY, WORK, CULTURE, INSIGHTS) centered as tracked uppercase labels with stacked sub-items in 12px. Discovery Call outlined button pinned top-right. No background fill — the nav floats on the void."

    footer_panel:
      role: "Site footer"

      info: "Charcoal (#171617) background, full-bleed, bone-white text. Mirrors the nav's column structure. 48px vertical padding minimum."

    accent_dot:
      role: "Scattered red punctuation across the canvas"

      info: "Solid 16–24px #fe1e34 circle, no border, no shadow. Appears as a cursor-like marker near CTA areas and as visual rhythm against the void. Functions like a drop of blood in the monochrome system."

    decorative_background_shape:
      role: "Atmospheric large-scale visual element"

      info: "Oversized geometric forms (crosses, arrows, letters) rendered in #171617 to #262525 with 8–20% perceived opacity, bleeding off-canvas. Establishes editorial composition without competing with foreground type. No interaction."

    editorial_body_panel:
      role: "Long-form content section"

      info: "Linen (#f3efef) background, 080808 text, 14px Kmr Waldenburg weight 400, line-height 1.50, 24px section padding. The only high-density reading surface in the system. 1px #d4d2d2 border or seamless transition from a dark section."

  do_s_and_don_ts:

    do:
      - "Let type carry hierarchy — use 80–160px display sizes for hero moments and 10–12px tracked uppercase for metadata; do not introduce color, chrome, or icons to compensate."
      - "Use #fe1e34 only as a 1px border on one or two featured elements per page, plus the accent dot — the red must remain rare to function as punctuation."
      - "Mix Kmr Waldenburg caps at 700 with Editorialnew italic weight 300 on the same baseline for editorial contrast — this two-family dialogue is the signature."
      - "Maintain 0.90–1.10 line-height on all display sizes; the system uses tight leading to let oversized type feel architectural rather than airy."
      - "Track 10–12px nav and label text OUT to +0.071em–+0.308em and display text IN to -0.050em–-0.080em — letter-spacing is a load-bearing typographic tool, not decoration."
      - "Anchor interactive elements with a diagonal arrow icon (↗) rather than color, weight, or background change — hover states should shift position or weight, not hue."
      - "Use #f3efef as the only surface that escapes the void; light sections feel like turning a page in a magazine."

    don_t:
      - "Do not introduce filled buttons, drop shadows, or gradients on UI elements — the system rejects conventional depth and uses a single white inset highlight at most."
      - "Do not use #fe1e34 as a text color, background fill, or icon color beyond borders and the single accent dot; spreading the red flattens its meaning."
      - "Do not use Kmr Waldenburg body weights (300/400) for display headings under 64px — the system reserves 700 weight for sizes 42px and above to preserve impact."
      - "Do not apply border-radius above 14.4px; the system uses crisp 3px (nav/links) and 8px (cards/buttons) only — rounding is a whisper, not a curve."
      - "Do not place body text below 14px or above 32px without shifting to a display role; 10–12px is reserved for tracked uppercase labels with no sentence structure."
      - "Do not combine more than two typeface families in a single composition (Kmr Waldenburg + Editorialnew, or + Dirtyline 36); adding a third breaks the editorial discipline."
      - "Do not use #000000 as a text color on dark surfaces — the void (#080808) and bone-white (#fcfcfc) pairing is the system's reading contract; pure black text only appears on #f3efef."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void | `#080808` | Page canvas — the absolute floor |"
    info: "| 1 | Absolute | `#000000` | Deepest surface, behind decorative shapes and image overlays |"
    info: "| 2 | Charcoal | `#171617` | Footer and inverted content surfaces |"
    info: "| 3 | Smoke | `#262525` | Elevated content blocks and image treatments |"
    info: "| 4 | Graphite | `#393939` | Card surface — the only platform that receives the white inset highlight shadow |"
    info: "| 5 | Linen | `#f3efef` | Inverted body panel — warm-white surface for content contrast |"

  elevation:

    - "**Card (dark variant):** `rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset`"

  imagery:

    imagery_is_editorial_collage: "large-scale photographic textures (leopard-print heart, animal patterns) and oversized geometric shapes bleeding off-canvas in Smoke (#171617–#262525) tones. Full-bleed, no rounded corners, no contained frames — images occupy the canvas like wallpaper, not thumbnails. Photography is high-contrast, dark/moody, often surreal or fashion-editorial, used to punctuate display type rather than explain product. Iconography is minimal: 1px hairline arrows (↗) and stroked SVGs in bone-white on the void. No illustration, no 3D, no abstract gradients on content."

  layout:

    info: "Full-bleed dark canvas with no max-width container — content uses generous internal padding (48–64px section gaps) to feel composed against the void. The hero is a full-viewport moment dominated by 160px display type centered or left-aligned, with the dark background visible around all four edges. Sections alternate between void (#080808) and a single inverted linen (#f3efef) body panel, with 48–80px vertical breathing room. Navigation is a transparent top bar; no sticky header, no sidebar. Content arrangement is editorial: asymmetric, with display headlines set as two- or three-line stacks and small italic connectives. Card grids (when used) are 2–3 columns with 24px gaps, 8px radius, and 1px hairline borders."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #fcfcfc"
    - "background: #080808"
    - "border: #d4d2d2 (on dark) / #525252 (on light)"
    - "accent: #fe1e34"
    - "primary action: #fe1e34 (filled action)"

    3_5_example_component_prompts:

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

    - "Build a featured project card: background #080808, 1px solid #fe1e34 border, 8px border-radius, 24px padding. Headline 'PROJECT NAME' in 24px Kmr Waldenburg weight 700, color #fcfcfc, letter-spacing -0.91px. Body description in 14px Kmr Waldenburg weight 400, color #d4d2d2, line-height 1.50. The red border is the only chromatic chrome — do not add shadows, fills, or icons."

    - "Build the top navigation: transparent background over void canvas. Left: logo 'SVZ' in 32px Kmr Waldenburg weight 700 caps, color #fcfcfc. Center: four column headers (AGENCY, WORK, CULTURE, INSIGHTS) in 10px Kmr Waldenburg weight 400 uppercase, tracked +0.8px, color #d4d2d2, each with 2–3 sub-items in 12px same color directly below at 8px row gap. Right: a Discovery Call outlined button — 8px border-radius rectangle with 1px #d4d2d2 border, 12px 24px padding, 'DISCOVERY CALL ↗' in 12px Kmr Waldenburg weight 400 uppercase, color #fcfcfc, tracked +0.85px."

    - "Build an inverted body section: background #f3efef, 64px vertical padding. Body text in 14px Kmr Waldenburg weight 400, color #080808, line-height 1.50. Section heading 'EDITORIAL' in 32px Kmr Waldenburg weight 700, color #080808, letter-spacing -1.6px, uppercase. Use this surface sparingly — it is the only escape from the void and should feel like turning a page."

    - "Build a 'WE ARE' transition moment: void background, 80px Kmr Waldenburg weight 700 caps spelling 'WE' and 'RE' with extreme letter-spacing -6px, color #fcfcfc, line-height 0.90. Between them, a single ornamental 160px character from Dirtyline 36 Daysoftype 2022 (a stylized 'a' or calligraphic letterform) as a sculptural object — the geometric caps and the hand-drawn glyph must sit on the same baseline with the cap-height of the glyph matching the cap-height of the surrounding letters."

  similar_brands:

    - "**Locomotive Mtl** — Same agency-portfolio instinct for oversized display type on dark canvases, with display faces treated as editorial objects rather than UI text"
    - "**Resn** — Dark-mode creative agency site with a single saturated accent color used as punctuation and a refusal of conventional button chrome"
    - "**Huge** — Editorial-magazine layout rhythm, hairline-bordered cards on near-black surfaces, and serif-italic connectives woven into display caps"
    - "**Active Theory** — Full-bleed dark canvas, bleeding decorative shapes behind display type, and a single vivid accent (their neon) used as rare punctuation"
    - "**Ueno** — Agency sites that treat typography as art direction — mixing geometric sans display with editorial serif italics and letting the type do the layout work"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-canvas: #080808;
          --color-absolute-black: #000000;
          --color-charcoal-plate: #171617;
          --color-smoke-plate: #262525;
          --color-graphite-lift: #393939;
          --color-bone-white: #fcfcfc;
          --color-linen: #f3efef;
          --color-ash: #d4d2d2;
          --color-pebble: #b5b2b2;
          --color-iron: #525252;
          --color-arterial-red: #fe1e34;
          --color-crimson-pure: #ff0000;
        
          /* Typography — Font Families */
          --font-kmr-waldenburg: 'Kmr Waldenburg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorialnew: 'Editorialnew', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dirtyline-36-daysoftype-2022: 'Dirtyline 36 Daysoftype 2022', 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-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.8px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-subheading: 24px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.91px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.6px;
          --text-heading: 42px;
          --leading-heading: 1.05;
          --tracking-heading: -2px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -4.8px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -6px;
          --text-display-xl: 160px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -12.8px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-184: 184px;
        
          /* Layout */
          --section-gap: 48-64px;
          --card-padding: 12-24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 14.4px;
        
          /* Named Radii */
          --radius-nav: 3px;
          --radius-cards: 8px;
          --radius-buttons: 8px;
          --radius-largecards: 14.4px;
        
          /* Shadows */
          --shadow-sm: rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset;
        
          /* Surfaces */
          --surface-void: #080808;
          --surface-absolute: #000000;
          --surface-charcoal: #171617;
          --surface-smoke: #262525;
          --surface-graphite: #393939;
          --surface-linen: #f3efef;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-canvas: #080808;
          --color-absolute-black: #000000;
          --color-charcoal-plate: #171617;
          --color-smoke-plate: #262525;
          --color-graphite-lift: #393939;
          --color-bone-white: #fcfcfc;
          --color-linen: #f3efef;
          --color-ash: #d4d2d2;
          --color-pebble: #b5b2b2;
          --color-iron: #525252;
          --color-arterial-red: #fe1e34;
          --color-crimson-pure: #ff0000;
        
          /* Typography */
          --font-kmr-waldenburg: 'Kmr Waldenburg', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-editorialnew: 'Editorialnew', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dirtyline-36-daysoftype-2022: 'Dirtyline 36 Daysoftype 2022', 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-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.8px;
          --text-body: 14px;
          --leading-body: 1.5;
          --tracking-body: -0.24px;
          --text-subheading: 24px;
          --leading-subheading: 1.1;
          --tracking-subheading: -0.91px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.05;
          --tracking-heading-sm: -1.6px;
          --text-heading: 42px;
          --leading-heading: 1.05;
          --tracking-heading: -2px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -4.8px;
          --text-display: 80px;
          --leading-display: 0.9;
          --tracking-display: -6px;
          --text-display-xl: 160px;
          --leading-display-xl: 0.9;
          --tracking-display-xl: -12.8px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-80: 80px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-184: 184px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 14.4px;
        
          /* Shadows */
          --shadow-sm: rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset;
        }