harness_io___style_reference:
  info: "> midnight mission control with phosphor-green accents"

  theme: "dark"

  info: "Harness's Gitness surface reads as a nocturnal command deck: near-black canvas (#070707) with stacked card surfaces in marginally lighter shades, oversized display headlines in a condensed Calsans face with positive tracking, and a teal/mint accent (#70dcd3) that surfaces on highlight cards like a phosphor monitor glow. The page stays quiet and high-contrast — white text at AAA contrast on deep neutrals, hairline borders in light gray (not dark) to define edges against the dark canvas, and pill-shaped controls (800px radius) that feel like physical hardware buttons. Color is rationed: one bright blue (#0092e4) for active link borders and one mint (#70dcd3) for accent cards, nothing else. Spacing breathes — generous card padding, comfortable section gaps, and large display sizes that let the type carry the hierarchy rather than color or weight."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Canvas | `#070707` | `--color-void-canvas` | Page background, deepest surface — near-black, the floor everything else sits on |"
    info: "| Carbon Plate | `#0d0e12` | `--color-carbon-plate` | Primary card surface, one step above the canvas — the dominant elevated panel |"
    info: "| Obsidian | `#141418` | `--color-obsidian` | Secondary card surface, code blocks, nested panels |"
    info: "| Iron Edge | `#2e3038` | `--color-iron-edge` | Mid-tier surface, dividers, hover overlays on dark surfaces |"
    info: "| Steel Border | `#22222a` | `--color-steel-border` | Heavy structural borders, button outlines on dark, nav separators |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary text, filled pill button fill, icon strokes — the only high-luminance neutral |"
    info: "| Cloud Mist | `#f0f0f0` | `--color-cloud-mist` | Secondary text, soft fills, muted surface highlights |"
    info: "| Fog | `#d9dae5` | `--color-fog` | Card hairline borders — counterintuitively light on the dark canvas, defining card edges by luminosity contrast |"
    info: "| Ash | `#c8cad0` | `--color-ash` | Body text secondary, muted descriptions, helper text |"
    info: "| Graphite | `#aeaeb7` | `--color-graphite` | Tertiary body text, subdued labels, disabled-ish state |"
    info: "| Slate Mute | `#a2a4a9` | `--color-slate-mute` | Nav borders, inactive nav text, structural dividers in chrome |"
    info: "| Cinder | `#60606c` | `--color-cinder` | Deep muted text, low-priority links, icon rest state |"
    info: "| Phosphor Mint | `#70dcd3` | `--color-phosphor-mint` | Accent card fill, highlight surfaces — the signature brand glow, reserved for featured cards and stat panels |"
    info: "| Signal Blue | `#0092e4` | `--color-signal-blue` | Link borders, active link text, focus accents — the interface's action stroke |"
    info: "| Ice Blue | `#a6e5f2` | `--color-ice-blue` | Decorative soft borders, light accent strokes on cards |"
    info: "| Current Blue | `#00ade4` | `--color-current-blue` | Active nav state, selected menu items, current-page indicator |"
    info: "| Deep Signal | `#0677d4` | `--color-deep-signal` | Input focus border, form active state, info semantic stroke |"
    info: "| Verdant Edge | `#75ae4c` | `--color-verdant-edge` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Use as a supporting accent, not as a status color |"
    info: "| Steel Iris | `#929dbd` | `--color-steel-iris` | Card decorative borders with cool blue-gray tint, secondary card outlines |"

  tokens___typography:

    geist___body__ui__and_navigation_typeface__geist_handles_all_functional_text__body_copy_at_16px_1_50__nav_items_at_14_15px__button_labels_at_14_16px__captions_at_12px__tight_negative_tracking__0_017em_to__0_020em_at_display_sizes_creates_density__positive_tracking_0_042_0_094em_at_8_10px_gives_badge_and_micro_text_an_uppercase_stencil_feel_____font_geist:
      - "**Substitute:** Inter, or system-ui as fallback"
      - "**Weights:** 300, 400, 500, 600"
      - "**Sizes:** 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 40"
      - "**Line height:** 0.88, 1.00, 1.13, 1.20, 1.22, 1.37, 1.38, 1.44, 1.50, 1.57"
      - "**Letter spacing:** -0.020em at large sizes, -0.017em at 24-40px, 0.016-0.018em at 14-16px body, 0.042-0.094em at 8-12px captions/badges"
      - "**OpenType features:** `\"liga\" on`"
      - "**Role:** Body, UI, and navigation typeface. Geist handles all functional text: body copy at 16px/1.50, nav items at 14-15px, button labels at 14-16px, captions at 12px. Tight negative tracking (-0.017em to -0.020em) at display sizes creates density; positive tracking (0.042-0.094em) at 8-10px gives badge and micro-text an uppercase stencil feel."

    calsans___display_and_heading_typeface__calsans_is_a_condensed__geometric_sans_with_positive_tracking_0_056em_that_makes_headlines_feel_engineered_rather_than_editorial___letters_spread_apart_like_instrument_panel_labels__weight_300_used_at_largest_sizes_creates_an_anti_confident_presence__massive__airy__never_shouting__weight_600_appears_in_mid_size_headings_for_grounding_____font_calsans:
      - "**Substitute:** Space Grotesk, or any wide-tracked geometric sans"
      - "**Weights:** 300, 600"
      - "**Sizes:** 18, 24, 32, 34, 56, 64, 72, 88"
      - "**Line height:** 0.96, 1.00, 1.10, 1.15, 1.20, 1.37"
      - "**Letter spacing:** 0.056em at all sizes (~4.9px at 88px, ~3.1px at 56px, ~1.8px at 32px)"
      - "**OpenType features:** `\"liga\" on`"
      - "**Role:** Display and heading typeface. Calsans is a condensed, geometric sans with positive tracking (0.056em) that makes headlines feel engineered rather than editorial — letters spread apart like instrument panel labels. Weight 300 used at largest sizes creates an anti-confident presence: massive, airy, never shouting. Weight 600 appears in mid-size headings for grounding."

    helvetica___helvetica___detected_in_extracted_data_but_not_described_by_ai____font_helvetica:
      - "**Weights:** 400, 600"
      - "**Sizes:** 13px"
      - "**Line height:** 1.69"
      - "**OpenType features:** `\"liga\"`"
      - "**Role:** Helvetica — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.22 | 0.5px | `--text-caption` |"
      info: "| body-sm | 14px | 1.44 | 0.25px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | 0.27px | `--text-body` |"
      info: "| subheading | 20px | 1.5 | -0.34px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.1 | 1.8px | `--text-heading-sm` |"
      info: "| heading | 56px | 1.1 | 3.1px | `--text-heading` |"
      info: "| heading-lg | 72px | 1 | 4px | `--text-heading-lg` |"
      info: "| display | 88px | 0.96 | 4.9px | `--text-display` |"

  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: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 80 | 80px | `--spacing-80` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| badges | 800px |"
      info: "| inputs | 5px |"
      info: "| buttons | 800px |"
      info: "| nestedCards | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 2px 2px 0px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgb(255, 255, 255) 0px -1px 0px 0px inset, rgb(255, 255, ...` | `--shadow-subtle-2` |"

    layout:

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

  components:

    hero_headline_calsans_display:
      role: "Primary page headline"

      info: "Calsans weight 300 at 88px/0.96 line-height, color #ffffff, letter-spacing 0.056em (~4.9px). The positive tracking on massive type is signature — headlines feel like instrument panel readouts, not editorial. Two-tone color treatment on hero: 'The End-To-End' in pure white, with a secondary line optionally in Phosphor Mint (#70dcd3) for the opening phrase."

    filled_pill_button_primary:
      role: "Primary action CTA"

      info: "Background #ffffff, text #070707, border-radius 800px (full pill), padding 12px 24px, font Geist 500 at 16px. Dark text on white fill — the inversion of the dark interface makes the button physically pop. Subtle inset highlight: rgb(255,255,255) inset shadows on the top/sides create a light edge against the white fill, giving the pill a slightly embossed quality."

    ghost_pill_button_secondary:
      role: "Secondary or navigational action"

      info: "Transparent background, border 1px solid #ffffff, text #ffffff, border-radius 800px, padding 12px 24px, Geist 400 at 16px. The border is bright white at full opacity — the button's identity comes from the outline, not the fill."

    dark_surface_card:
      role: "Primary content container"

      info: "Background #0d0e12, border 1px solid #d9dae5 (light border on dark surface), border-radius 20px, padding 24px. The counterintuitive light border defines the card edge against the dark canvas — this is the system-defining move. No shadow; the border is the elevation."

    phosphor_accent_card:
      role: "Featured/highlight card"

      info: "Background #70dcd3 (the mint), no border or subtle #d9dae5 border, border-radius 20px, padding 24px. Used sparingly — one per viewport maximum. The teal fill makes the card look lit from within, like a phosphor screen."

    code_syntax_surface:
      role: "Code blocks, terminal output"

      info: "Background #141418 (Obsidian), border-radius 16px, padding 16-20px, Geist Mono (or Geist fallback) at 13-14px, text #aeaeb7 with syntax highlighting. Sits nested inside Carbon Plate cards."

    navigation_bar:
      role: "Top site navigation"

      info: "Background #070707 (transparent over canvas), height ~64px, logo left, links centered in Geist 14px, #ffffff text with #a2a4a9 for inactive items, border-bottom 1px solid #a2a4a9 (again, light borders on dark). Right side: contact link + filled pill CTA. Sticky, no background blur needed against solid dark canvas."

    activity_row_pr_commit_list:
      role: "Git activity feed item"

      horizontal_row: "avatar circle (32px) + commit message in Geist 14px weight 500 (#ffffff) + metadata in Geist 12px (#aeaeb7) + status dot (8px circle) in Phosphor Mint (#70dcd3) for pass, Verdant Edge (#75ae4c) for success, or a warm tone for warning. Padding 10px 0, separated by 1px #2e3038 dividers."

    input_field:
      role: "Form text input"

      info: "Background #0d0e12, border 1px solid #2e3038 (rest) or #0677d4 (focus), border-radius 5px, padding 12px, text Geist 14px #ffffff, placeholder #60606c. Focus adds a 1px Deep Signal border — no glow ring, just a sharp color change."

    status_badge:
      role: "Inline status indicator"

      info: "Border-radius 800px (pill), padding 2px 8px, Geist 11-12px with 0.042-0.094em tracking. Variants: success = border 1px #75ae4c with text #75ae4c, info = border 1px #0677d4 with text #0677d4. Outlined style, never filled."

    section_header_eyebrow___title:
      role: "Section introduction"

      info: "Eyebrow label in Geist 12px uppercase with 0.094em tracking, color #a6e5f2 or #929dbd, above a Calsans heading at 56px/1.1 weight 300. The uppercase eyebrow with wide tracking is the section's quiet signal."

    3d_product_visual_block:
      role: "Hero and feature illustration"

      info: "Full-bleed rendered product imagery with neon-lit 3D objects on a dark gradient ground. The image is not a flat screenshot — it has dimensional lighting, glowing edges, and a horizon line. Blends into the #070707 canvas with no hard mask."

    footer_link_column:
      role: "Footer navigation section"

      info: "Column heading in Geist 14px weight 500 #ffffff, links in Geist 13-14px weight 400 #aeaeb7 with no underline. 8-16px vertical gap between items. Four-column grid with generous column gaps (32-40px)."

  do_s_and_don_ts:

    do:
      - "Use Calsans for all headlines at 56px or larger with its native positive tracking (0.056em)"
      - "Define card edges with a 1px #d9dae5 light border, not shadows or background contrast alone"
      - "Use the filled white pill (800px radius, #ffffff fill, #070707 text) for the single primary action on any screen"
      - "Apply the Phosphor Mint (#70dcd3) accent to no more than one card or panel per viewport"
      - "Use 20px radius for cards and 800px (pill) for all interactive controls"
      - "Keep body text at 16px Geist weight 400 with -0.017em tracking; use weight 500 only for emphasized labels"
      - "Anchor all dark surfaces to the Void Canvas (#070707) as the base; stack upward through #0d0e12 → #141418"

    don_t:
      - "Don't use drop shadows on cards or panels — the system defines elevation through light borders and surface luminance steps"
      - "Don't fill buttons with color — the only filled button is white, everything else is ghost/outlined"
      - "Don't use multiple accent colors in one section — Phosphor Mint and Signal Blue should not co-occur on the same surface"
      - "Don't set body text below 14px or above 18px — the reading range is narrow and confident"
      - "Don't apply negative letter-spacing to Calsans — its positive tracking is structural to the typeface's identity"
      - "Don't use dark borders on cards; the system uses light (#d9dae5) borders to define edges on dark surfaces"
      - "Don't break the dark theme with light sections — the entire page lives in the dark spectrum"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Void Canvas | `#070707` | Page background, the base layer |"
    info: "| 1 | Carbon Plate | `#0d0e12` | Primary cards, hero feature panels, content blocks |"
    info: "| 2 | Obsidian | `#141418` | Nested cards, code surfaces, secondary panels within cards |"
    info: "| 3 | Iron Edge | `#2e3038` | Hover states, active overlays, raised interactive surfaces |"

  elevation:

    - "**Dark Surface Card:** `none (relies on 1px #d9dae5 border for definition)`"
    - "**Filled Pill Button:** `rgba(0, 0, 0, 0.05) 2px 2px 0px 0px, rgb(255, 255, 255) 0px -1px 0px 0px inset, rgb(255, 255, 255) 1px 0px 0px 0px inset, rgb(255, 255, 255) -1px 0px 0px 0px inset, rgb(255, 255, 255) 0px 1px 0px 0px inset`"
    - "**Input Field:** `rgba(0, 0, 0, 0.05) 2px 2px 0px 0px`"

  imagery:

    info: "Hero and feature sections use 3D-rendered product visuals: curved tracks, flowing light ribbons, abstract geometric objects lit with neon edge-light. These renders sit on dark gradient grounds (linear-gradient from rgb(22,48,82) to rgb(13,14,18)) and blend seamlessly into the #070707 canvas. No photography, no flat illustration — the visual language is CGI/dimensional. Icons in the UI are minimal and appear as simple line glyphs in #ffffff or muted grays. The only flat content imagery is the activity feed with circular avatars and status dots."

  layout:

    info: "Max-width 1200px centered content. Hero is split 50/50: headline and subtext left-aligned, 3D visual bleeding to right edge. Subsequent sections are full-bleed dark bands with centered content. Feature sections alternate between 2-column text+visual layouts and centered headline + card grid. Card grids are typically 2-3 columns with 20-24px gaps. Section gaps are generous (64-80px). Navigation is a single sticky top bar, no sidebar. The page rhythm is: dark hero → dark feature section → dark accent section → dark footer — it never breaks from the dark theme."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #070707"
    - "card surface: #0d0e12"
    - "primary text: #ffffff"
    - "secondary text: #aeaeb7 / #c8cad0"
    - "border: #d9dae5 (light on dark)"
    - "accent: #70dcd3 (mint)"
    - "link/active: #0092e4 (blue)"
    - "primary action: #ffffff (filled action)"

    example_component_prompts:

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

    - "**Feature Card Grid**: 3-column grid on #070707 background, 20px gaps. Each card: background #0d0e12, border 1px solid #d9dae5, border-radius 20px, padding 24px. Icon in #70dcd3 at 24px. Title in Calsans 32px weight 300, color #ffffff, letter-spacing 0.056em. Body in Geist 16px weight 400, color #aeaeb7."

    - "**Activity Feed Row**: Background #0d0e12 card with 1px #d9dae5 border, 20px radius. Each row: 32px circular avatar + Geist 14px weight 500 text in #ffffff + Geist 12px metadata in #aeaeb7 + 8px status dot in #70dcd3. Rows separated by 1px #2e3038 dividers. Row padding 10px 0."


    - "**Footer Link Grid**: 4-column grid on #070707 background. Column headers in Geist 14px weight 500, #ffffff. Links in Geist 14px weight 400, #aeaeb7, no underline. 12px row gap, 40px column gap. Bottom bar: copyright in Geist 13px #60606c, social icons (32px) in #a2a4a9."

  similar_brands:

    - "**Linear** — Same near-black canvas, high-contrast white text, pill-shaped controls, and minimal use of color as functional punctuation rather than decoration"
    - "**Vercel** — Dark-mode devtools aesthetic with geometric sans display type, generous spacing, and a single accent color used sparingly"
    - "**Supabase** — Deep dark surfaces with a distinct teal/green accent for featured elements, and light hairline borders defining card edges on dark backgrounds"
    - "**Railway** — Near-black canvas with stacked neutral surface levels, pill controls, and a restrained palette where color appears only as small functional accents"
    - "**Resend** — Dark devtools surface with oversized display type, white pill CTAs on dark backgrounds, and quiet use of a single accent color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-canvas: #070707;
          --color-carbon-plate: #0d0e12;
          --color-obsidian: #141418;
          --color-iron-edge: #2e3038;
          --color-steel-border: #22222a;
          --color-pure-white: #ffffff;
          --color-cloud-mist: #f0f0f0;
          --color-fog: #d9dae5;
          --color-ash: #c8cad0;
          --color-graphite: #aeaeb7;
          --color-slate-mute: #a2a4a9;
          --color-cinder: #60606c;
          --color-phosphor-mint: #70dcd3;
          --color-signal-blue: #0092e4;
          --color-ice-blue: #a6e5f2;
          --color-current-blue: #00ade4;
          --color-deep-signal: #0677d4;
          --color-verdant-edge: #75ae4c;
          --color-steel-iris: #929dbd;
        
          /* Typography — Font Families */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-calsans: 'Calsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.22;
          --tracking-caption: 0.5px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.44;
          --tracking-body-sm: 0.25px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.27px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.34px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: 1.8px;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --tracking-heading: 3.1px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: 4px;
          --text-display: 88px;
          --leading-display: 0.96;
          --tracking-display: 4.9px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 50px;
          --radius-full-2: 800px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-badges: 800px;
          --radius-inputs: 5px;
          --radius-buttons: 800px;
          --radius-nestedcards: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 2px 2px 0px 0px;
          --shadow-subtle-2: rgb(255, 255, 255) 0px -1px 0px 0px inset, rgb(255, 255, 255) 1px 0px 0px 0px inset, rgb(255, 255, 255) -1px 0px 0px 0px inset, rgb(255, 255, 255) 0px 1px 0px 0px inset;
        
          /* Surfaces */
          --surface-void-canvas: #070707;
          --surface-carbon-plate: #0d0e12;
          --surface-obsidian: #141418;
          --surface-iron-edge: #2e3038;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-canvas: #070707;
          --color-carbon-plate: #0d0e12;
          --color-obsidian: #141418;
          --color-iron-edge: #2e3038;
          --color-steel-border: #22222a;
          --color-pure-white: #ffffff;
          --color-cloud-mist: #f0f0f0;
          --color-fog: #d9dae5;
          --color-ash: #c8cad0;
          --color-graphite: #aeaeb7;
          --color-slate-mute: #a2a4a9;
          --color-cinder: #60606c;
          --color-phosphor-mint: #70dcd3;
          --color-signal-blue: #0092e4;
          --color-ice-blue: #a6e5f2;
          --color-current-blue: #00ade4;
          --color-deep-signal: #0677d4;
          --color-verdant-edge: #75ae4c;
          --color-steel-iris: #929dbd;
        
          /* Typography */
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-calsans: 'Calsans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.22;
          --tracking-caption: 0.5px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.44;
          --tracking-body-sm: 0.25px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.27px;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --tracking-subheading: -0.34px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.1;
          --tracking-heading-sm: 1.8px;
          --text-heading: 56px;
          --leading-heading: 1.1;
          --tracking-heading: 3.1px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: 4px;
          --text-display: 88px;
          --leading-display: 0.96;
          --tracking-display: 4.9px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-80: 80px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-md: 5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 50px;
          --radius-full-2: 800px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 2px 2px 0px 0px;
          --shadow-subtle-2: rgb(255, 255, 255) 0px -1px 0px 0px inset, rgb(255, 255, 255) 1px 0px 0px 0px inset, rgb(255, 255, 255) -1px 0px 0px 0px inset, rgb(255, 255, 255) 0px 1px 0px 0px inset;
        }