zkpass___style_reference:
  info: "> Encrypted terminal meets classified broadsheet — a single lime-green signal cutting through near-black typography that mixes a whisper-weight serif with terminal-grade sans."

  theme: "dark"

  info: "zkPass is an encrypted-terminal meets editorial-broadsheet: a near-black canvas serves as the substrate for a single vivid chartreuse accent (#c5ff4a) that behaves like a signal light in a dark room. The display voice is PT Serif at weight 300 — a deliberate contrarian choice that lends editorial gravity to a cryptographic protocol, contrasting the cold tech feel with a typeset-newspaper authority. Body and UI chrome switch to Inter Tight, with uppercase tracked-out labels (0.18–0.26em) that read as classified-document metadata. Surfaces stack tightly: pure black canvas → near-black cards → slightly raised panels, all separated by hairline borders rather than shadows. The lime green only ever appears in three roles: filled CTA, glowing border, and italic accent word inside headlines. Everything else stays monochrome."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void Black | `#000000` | `--color-void-black` | Page canvas, deep background layer — the absolute floor of the surface stack |"
    info: "| Carbon | `#060606` | `--color-carbon` | Primary page background where pure black would be too harsh — the actual canvas color in the dominant layout |"
    info: "| Graphite | `#252525` | `--color-graphite` | Card surfaces, nav bar, raised panels — the dominant mid-neutral |"
    info: "| Onyx | `#1f1f1f` | `--color-onyx` | Subtle elevation layer between canvas and card |"
    info: "| Iron | `#313131` | `--color-iron` | Box-shadow depth, elevated surface tint — provides warmth on hover and focus |"
    info: "| Slate | `#3d3d3d` | `--color-slate` | Hairline borders on dense tables, row dividers |"
    info: "| Fog | `#525252` | `--color-fog` | Low-emphasis borders, disabled control outlines |"
    info: "| Ash | `#7a7a7a` | `--color-ash` | Muted body text, helper copy, link underlines — the workhorse mid-gray |"
    info: "| Smoke | `#8a8a8a` | `--color-smoke` | Secondary captions, metadata text |"
    info: "| Pearl | `#c5c5c5` | `--color-pearl` | Tertiary text, subtle heading tints |"
    info: "| Bone | `#e5e5e5` | `--color-bone` | High-emphasis body text where pure white would vibrate against black |"
    info: "| Chalk | `#ffffff` | `--color-chalk` | Display text, primary headings, icon strokes — the only text color permitted above #e5e5e5 |"
    info: "| Signal Lime | `#c5ff4a` | `--color-signal-lime` | Primary CTA fill, glowing borders, italic accent words in headlines — the single chromatic punctuation in an otherwise monochrome system; at 17.8:1 contrast against black it reads as emergency lighting |"
    info: "| Olive Depth | `#597321` | `--color-olive-depth` | Dark green stroke for SVG world-map art and shadow glows under signal-lime elements |"
    info: "| Moss Shadow | `#314013` | `--color-moss-shadow` | Deepest green used only as decorative stroke in dotted-globe illustrations |"

  tokens___typography:

    pt_serif___all_display_headlines__hero_copy__section_titles__and_the_italic_accent_words___the_editorial_voice__weight_300_is_anti_convention_for_a_crypto_site__most_use_600_700__this_whisper_weight_signals_authority_through_restraint__not_volume_____font_pt_serif:
      - "**Substitute:** Source Serif 4 (Google), Cormorant Garamond Light"
      - "**Weights:** 300"
      - "**Sizes:** 20, 22, 24, 26, 32, 40, 49, 56, 60, 72, 75, 78, 86, 89, 130"
      - "**Line height:** 0.88–1.20 (tight for display, opening up for medium text)"
      - "**Letter spacing:** -0.0350em at 130px, -0.0250em at 56–60px, -0.0100em at 20–24px"
      - "**OpenType features:** `\"liga\" on, \"dlig\" on`"
      - "**Role:** All display headlines, hero copy, section titles, and the italic accent words — the editorial voice. Weight 300 is anti-convention for a crypto site; most use 600-700, this whisper-weight signals authority through restraint, not volume."

    inter_tight___all_ui_chrome__body_paragraphs__buttons__nav__tags__labels__links__carries_500_for_nav_emphasis__600_for_button_text__the_uppercase_tracked_out_labels_0_18_0_26em_read_as_classified_document_metadata_stamps_____font_inter_tight:
      - "**Substitute:** Inter (Google)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 9, 10, 11, 12, 13, 14, 16, 20, 28"
      - "**Line height:** 1.20–1.90 (wide for body, tight for nav)"
      - "**Letter spacing:** 0.0050em, 0.0100em, 0.0200em, 0.0300em, 0.0400em, 0.0800em, 0.1100em, 0.1200em, 0.1600em, 0.1800em, 0.1830em, 0.2000em, 0.2200em, 0.2400em, 0.2600em"
      - "**Role:** All UI chrome, body paragraphs, buttons, nav, tags, labels, links. Carries 500 for nav emphasis, 600 for button text. The uppercase tracked-out labels (0.18–0.26em) read as classified-document metadata stamps."

    jetbrains_mono___code_snippets__protocol_names__terminal_output__hex_strings___the_proof_of_cryptography_evidence_layer____font_jetbrains_mono:
      - "**Substitute:** Fira Code (Google)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 11, 13"
      - "**Line height:** 0.92, 1.20, 1.55"
      - "**Letter spacing:** 0.0100em, 0.0600em, 0.1800em, 0.2200em, 0.2400em"
      - "**Role:** Code snippets, protocol names, terminal output, hex strings — the proof-of-cryptography evidence layer"

    ui_monospace___inline_monospace_fallback__tiny_hash_strings__timestamps____font_ui_monospace:
      - "**Weights:** 400"
      - "**Sizes:** 9, 11, 12"
      - "**Line height:** 1.20, 1.55"
      - "**Letter spacing:** 0.0400em, 0.2200em"
      - "**Role:** Inline monospace fallback, tiny hash strings, timestamps"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.2 | 0.24px | `--text-caption` |"
      info: "| body | 14px | 1.55 | — | `--text-body` |"
      info: "| subheading | 20px | 1.3 | -0.2px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.15 | -0.4px | `--text-heading-sm` |"
      info: "| heading | 49px | 1.05 | -1px | `--text-heading` |"
      info: "| heading-lg | 72px | 0.98 | -1.8px | `--text-heading-lg` |"
      info: "| display | 89px | 0.94 | -3.1px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    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: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 44 | 44px | `--spacing-44` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 2px |"
      info: "| cards | 0px |"
      info: "| buttons | 4px |"
      info: "| logoTiles | 4px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(197, 255, 74, 0.45) 0px 0px 8px 0px` | `--shadow-sm` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 32-48px"
      - "**Element gap:** 16-20px"

  components:

    signal_lime_cta_button:
      role: "Primary action trigger — the only filled chromatic button in the system"

      info: "Background #c5ff4a, text #000000, padding 14px 24px, radius 4px. Inter Tight weight 500 at 14px with 0.04em tracking. Carries a chromatic glow shadow 0 0 8px 0 rgba(197, 255, 74, 0.45) — this glow is the button's only elevation, signaling 'this is the thing that does something'."

    ghost_nav_button:
      role: "Top-bar navigation items (PRODUCTS, TECHNOLOGY, ECOSYSTEM, $ZKP, RESOURCES)"

      info: "Transparent background, text #ffffff, Inter Tight weight 500 at 13px, 0.18em uppercase tracking. No border, no background. Active state: text shifts to #c5ff4a."

    outlined_green_button_launch_cta:
      role: "Secondary action with chromatic border"

      info: "Transparent background, 1px border #c5ff4a, text #c5ff4a, padding 14px 24px, radius 4px. Inter Tight weight 500 at 14px uppercase with 0.08em tracking. Carries the same lime glow as the filled CTA."

    sharp_content_card:
      role: "Feature panels for TransGate / TransGate SDK sections"

      info: "Background #1f1f1f, 1px border #252525, padding 40px, radius 0px. No drop shadow — depth comes from the border-color step against the canvas. Contains a tracked-out label (#7a7a8a, 0.18em) at the top, a PT Serif weight 300 headline (32–40px), and a body paragraph in Inter Tight 14px."

    code_block_panel:
      role: "Inline proof / SDK code display"

      info: "Background #252525, padding 24px, radius 4px, 1px border #313131. JetBrains Mono 13px, line-height 1.55. Lime-green syntax highlighting tokens (#c5ff4a) on #000000 inline code spans. Tag pills (e.g. 'SCHEMA', 'BUNDLE', 'INTENT') sit right-aligned in lime."

    metadata_label_stamp:
      role: "[ BUILT FOR HUMANS & AGENTS ] style section labels"

      info: "Inter Tight 11px weight 500, uppercase, 0.22em tracking, color #7a7a8a, bracketed in literal square brackets. The bracket punctuation is part of the identity — never strip the brackets."

    accent_word:
      role: "Single italic PT Serif word in lime green inside an otherwise white headline"

      info: "PT Serif weight 300 italic, color #c5ff4a, sized to match the parent headline (e.g. 'Verifiable Internet.' inside a 89px display). This is the only place italic PT Serif appears and the only place lime hits a headline — use sparingly, one per headline maximum."

    logo_tile:
      role: "Brand mark in lime green square"

      info: "60×60 to 80×80px square, background #c5ff4a, radius 4px, contains a black 'P' mark centered. The glow shadow 0 0 8px rgba(197, 255, 74, 0.45) is applied to the tile, not the inner mark."

    dotted_globe_visual:
      role: "Hero section world-map illustration"

      info: "Pure SVG composed of 1.5px #ffffff dots on the #060606 canvas forming a world-map silhouette. The dots use opacity 0.4–0.7 to create continent density. No gradient fills, no fills at all — this is pointillism typography, not vector art."

    neon_section_divider:
      role: "Horizontal lime strip separating major page sections"

      info: "Full-width 6–8px bar, solid #c5ff4a, used once between hero and content. Functions as a 'classified document' red-bar moment. Do not repeat within a page; one per scroll is the rule."

    status_tag_pill:
      role: "Signed/Verified status indicators (e.g. '✓ SIGNED', '● 3 MODES')"

      info: "Background transparent, 1px border #c5ff4a, text #c5ff4a, padding 4px 10px, radius 9999px, Inter Tight 11px weight 500 uppercase 0.06em. Check mark or dot prefix in same lime."

    top_navigation_bar:
      role: "Persistent page chrome"

      info: "Background #000000, 1px bottom border #252525, height 64px, max-width 1280px centered. Left: wordmark. Center: 5 nav items in ghost button style. Right: lime CTA. Sticky on scroll."

    section_eyebrow_bracket:
      role: "Above-title metadata tag for new content sections"

      info: "Text 'FOR HUMANS · BROWSER EXTENSION' or 'FOR AGENTS · TRANSGATE SDK' in Inter Tight 11px weight 500, 0.22em tracking, color #7a7a8a. Period-separator between phrases. Right-aligned: 'B 01' / 'B 02' style section index in same treatment."

  do_s_and_don_ts:

    do:
      - "Use #c5ff4a for filled CTA buttons, glowing borders, status pills, and exactly one italic accent word per headline — never for body text, never for icons at full size"
      - "Set display headlines in PT Serif weight 300 with negative tracking (-0.025em at 56px scaling to -0.035em at 130px) and tight line-height (0.88–0.95)"
      - "Set all UI labels in Inter Tight uppercase with 0.18–0.26em letter-spacing and bracket or period punctuation to read as classified-document metadata"
      - "Separate surface levels using border color steps (#252525 → #1f1f1f → #313131) rather than drop-shadows; the system has exactly one glow and it belongs to the lime CTA"
      - "Use #060606 as the dominant page background and reserve #000000 for absolute void areas (top bar, hero deep sections, code block inline spans)"
      - "Compose hero sections with the dotted-globe SVG (white dots, no fills) on the near-black canvas; never use a photographic or gradient hero"
      - "Scale the neon section divider (full-width 6–8px #c5ff4a bar) to exactly one per page between major page regions"

    don_t:
      - "Do not introduce any chromatic color beyond #c5ff4a, #597321, and #314013 — the entire chromatic palette is three greens against ten grays"
      - "Do not apply drop-shadows to cards, panels, or modals; elevation is communicated through surface-tone layering only"
      - "Do not use PT Serif at weight 400 or heavier for display; weight 300 is the signature and heavier weights break the whisper-authority effect"
      - "Do not round corners beyond 4px on cards, panels, and tiles; the system is near-sharp by design — only the status pill and nothing else uses 9999px radius"
      - "Do not use lime green for body copy, paragraph text, or long-form descriptions — it is reserved for actions, borders, and at most one italic accent word per headline"
      - "Do not mix the display serif into UI chrome (buttons, nav, labels); Inter Tight owns everything below 24px"
      - "Do not center long body paragraphs; content cards use left-aligned text with the metadata label and section index left/right mirrored above the title"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#060606` | Page background — the void |"
    info: "| 1 | Card | `#1f1f1f` | Content blocks, feature panels |"
    info: "| 2 | Raised | `#252525` | Nav bar, active panels, code blocks |"
    info: "| 3 | Hover | `#313131` | Interactive hover state, elevated popovers |"

  elevation:

    - "**Signal Lime CTA Button:** `0 0 8px 0 rgba(197, 255, 74, 0.45)`"

  imagery:

    info: "Imagery is pointillist, not photographic. The hero uses a dotted SVG world-map (1.5px white dots, opacity 0.4–0.7 to suggest continent density) floating on the near-black canvas. No photographs, no lifestyle shots, no product renders. The only 'image' asset is the lime-green logo tile (square, 4px radius, black 'P' mark, with the signature glow). Section illustrations and diagrams live as code-block panels (JetBrains Mono on #252525) rather than rendered graphics. Iconography is line-only or filled monochrome in #ffffff or #c5ff4a — no multicolor icons, no duotone, no gradient icons. The overall density is text-dominant with whitespace and typography doing the visual heavy lifting; the dotted globe is the single largest graphic element on any page."

  layout:

    info: "Layout is max-width 1280px centered with generous outer gutters. The hero is a full-bleed dark canvas with a centered headline stack (eyebrow bracket → 89px PT Serif headline → 14px Inter Tight body → lime CTA), the dotted-globe SVG sitting behind the headline at roughly 60% page width. Below the hero, a 6–8px neon lime divider bar spans full width. Content sections alternate between single-column centered stacks (display headline + paragraph) and two-column card grids (TransGate / TransGate SDK pattern: card with metadata eyebrow, 32–40px serif title, body, and a code-block proof panel at the bottom). Vertical rhythm is spacious: 80–120px between major sections, 32–48px inside cards, 16–20px between elements within a card. Navigation is a sticky top bar with a black background, a 1px graphite bottom border, wordmark left, five centered ghost nav items, and a lime CTA pinned right. The page reads top-to-bottom as a single editorial column punctuated by section dividers, never as a dense dashboard grid."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text (primary): #ffffff"
    - "text (body): #e5e5e5"
    - "text (muted/helper): #7a7a8a"
    - "background (canvas): #060606"
    - "background (card/panel): #1f1f1f"
    - "border (hairline): #252525"
    - "accent / primary action: #c5ff4a (filled action)"

    info: "Example Component Prompts:"

    - "Create a hero section: background #060606. Eyebrow label '[ BUILT FOR HUMANS & AGENTS ]' in Inter Tight 11px weight 500 uppercase 0.22em tracking color #7a7a8a. Headline 'Privacy & Trust Layer for the Verifiable Internet.' in PT Serif weight 300 at 89px, line-height 0.94, letter-spacing -3.1px, color #ffffff — but the words 'Verifiable Internet.' are set in italic #c5ff4a. Body subtext in Inter Tight 14px weight 400 line-height 1.55 color #e5e5e5, max-width 480px centered. A dotted-globe SVG (white dots, opacity 0.4–0.7) sits behind the headline. Below the hero, a full-width 6px solid #c5ff4a divider bar."

    - "Create a content card: background #1f1f1f, 1px border #252525, padding 40px, radius 0px. Eyebrow label 'FOR HUMANS · BROWSER EXTENSION' in Inter Tight 11px weight 500 uppercase 0.22em color #7a7a8a, with a right-aligned 'B 01' section index in the same treatment. Title 'TransGate' in PT Serif weight 300 at 40px line-height 1.05 color #ffffff. Body paragraph in Inter Tight 14px weight 400 line-height 1.55 color #e5e5e5. At the bottom, a code-block panel: background #252525, padding 24px, radius 4px, JetBrains Mono 13px line-height 1.55, with lime-green keyword tokens (#c5ff4a) and a right-aligned status pill ('✓ SIGNED' in a 1px #c5ff4a border pill, Inter Tight 11px weight 500 uppercase)."

    - "Create a top navigation bar: background #000000, 1px bottom border #252525, height 64px, max-width 1280px centered. Left: zkPass wordmark in PT Serif weight 300 at 20px color #ffffff. Center: five nav items (PRODUCTS, TECHNOLOGY, ECOSYSTEM, $ZKP, RESOURCES) in Inter Tight 13px weight 500 uppercase 0.18em tracking color #ffffff, no background, separated by 32px gaps. Right: a 'LAUNCH' ghost button — transparent background, 1px border #c5ff4a, text #c5ff4a, Inter Tight 13px weight 500 uppercase 0.08em tracking, padding 10px 20px, radius 4px, with the signature glow 0 0 8px rgba(197, 255, 74, 0.45). Sticky on scroll."

    - "Create a logo tile: 64×64px square, background #c5ff4a, radius 4px, centered black 'P' mark in PT Serif weight 300 at 36px, with the glow shadow 0 0 8px rgba(197, 255, 74, 0.45) applied to the tile itself. Place it centered below the hero headline."

    - "Create a section eyebrow: text 'Two audiences,' in PT Serif weight 300 at 49px line-height 1.05 color #ffffff, followed by 'one primitive.' in the same size and weight but italic and color #c5ff4a. Above it, a small bracket label '[ BUILT FOR HUMANS & AGENTS ]' in Inter Tight 11px weight 500 uppercase 0.22em color #7a7a8a. To the right of the headline, a 2-paragraph body block in Inter Tight 14px weight 400 line-height 1.55 color #e5e5e5, max-width 380px."

  similar_brands:

    - "**Nervos Network** — Same dark-canvas-plus-single-acid-green-accent language, and the same editorial-grade serif mixed with terminal-style monospace for cryptographic proof"
    - "**Helium** — Near-black backgrounds with a single vivid chartreuse/lime as the only chromatic brand color, plus hairline-border card surfaces and a glow-on-CTA signature"
    - "**Aleo** — Privacy-protocol crypto sites that pair whisper-weight display serif with uppercase tracked-out sans labels and lime-green CTA glow against near-black"
    - "**Layer3** — Dark interface with neon-lime accent used sparingly as border, pill, and CTA glow; near-sharp corners; editorial section rhythm"
    - "**Convex (defi)** — Mono-on-black product chrome with a single vivid green accent reserved exclusively for action states, status pills, and border highlights"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #060606;
          --color-graphite: #252525;
          --color-onyx: #1f1f1f;
          --color-iron: #313131;
          --color-slate: #3d3d3d;
          --color-fog: #525252;
          --color-ash: #7a7a7a;
          --color-smoke: #8a8a8a;
          --color-pearl: #c5c5c5;
          --color-bone: #e5e5e5;
          --color-chalk: #ffffff;
          --color-signal-lime: #c5ff4a;
          --color-olive-depth: #597321;
          --color-moss-shadow: #314013;
        
          /* Typography — Font Families */
          --font-pt-serif: 'PT Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.24px;
          --text-body: 14px;
          --leading-body: 1.55;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.4px;
          --text-heading: 49px;
          --leading-heading: 1.05;
          --tracking-heading: -1px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.98;
          --tracking-heading-lg: -1.8px;
          --text-display: 89px;
          --leading-display: 0.94;
          --tracking-display: -3.1px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-120px;
          --card-padding: 32-48px;
          --element-gap: 16-20px;
        
          /* Named Radii */
          --radius-tags: 2px;
          --radius-cards: 0px;
          --radius-buttons: 4px;
          --radius-logotiles: 4px;
        
          /* Shadows */
          --shadow-sm: rgba(197, 255, 74, 0.45) 0px 0px 8px 0px;
        
          /* Surfaces */
          --surface-canvas: #060606;
          --surface-card: #1f1f1f;
          --surface-raised: #252525;
          --surface-hover: #313131;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void-black: #000000;
          --color-carbon: #060606;
          --color-graphite: #252525;
          --color-onyx: #1f1f1f;
          --color-iron: #313131;
          --color-slate: #3d3d3d;
          --color-fog: #525252;
          --color-ash: #7a7a7a;
          --color-smoke: #8a8a8a;
          --color-pearl: #c5c5c5;
          --color-bone: #e5e5e5;
          --color-chalk: #ffffff;
          --color-signal-lime: #c5ff4a;
          --color-olive-depth: #597321;
          --color-moss-shadow: #314013;
        
          /* Typography */
          --font-pt-serif: 'PT Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.2;
          --tracking-caption: 0.24px;
          --text-body: 14px;
          --leading-body: 1.55;
          --text-subheading: 20px;
          --leading-subheading: 1.3;
          --tracking-subheading: -0.2px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.15;
          --tracking-heading-sm: -0.4px;
          --text-heading: 49px;
          --leading-heading: 1.05;
          --tracking-heading: -1px;
          --text-heading-lg: 72px;
          --leading-heading-lg: 0.98;
          --tracking-heading-lg: -1.8px;
          --text-display: 89px;
          --leading-display: 0.94;
          --tracking-display: -3.1px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-44: 44px;
        
          /* Shadows */
          --shadow-sm: rgba(197, 255, 74, 0.45) 0px 0px 8px 0px;
        }