loops___style_reference:
  info: "> Warm parchment behind a serif headline — like a stationer's print proof lit by afternoon sun."

  theme: "light"

  info: "Loops runs a warm, editorial light interface — cream paper (#faf9f7) instead of cold white, a serif display face (Newsreader) that gives marketing screens a magazine-cover gravity, and a single orange (#f97316) that barely appears, like a wax seal on an envelope. The product itself stays almost entirely achromatic: dark pill buttons, hairline stone-toned borders, and flat surfaces with no decorative gradients. Components feel like printed editorial stationery — generous line-height, tight tracking on display, small tags as 999px pills, and elevation reduced to a single hairline inset shadow. An AI agent should treat orange as a signal, not a chrome — it should only fire on the logo, status pips, and small icon accents — while the primary action is always the dark charcoal pill (#1c1917 fill, white text)."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment | `#faf9f7` | `--color-parchment` | Page canvas — the warm off-white that defines the entire experience; never substitute pure #ffffff at the body level |"
    info: "| Paper | `#ffffff` | `--color-paper` | Card surfaces, code blocks, and inset panels sitting on Parchment |"
    info: "| Mist | `#f1efef` | `--color-mist` | Subtle secondary surface — hover states on tag pills, tinted code snippet backgrounds, gentle section differentiation without borders |"
    info: "| Stone-200 | `#e7e5e4` | `--color-stone-200` | Default hairline border — button outlines, card edges, input borders |"
    info: "| Stone-300 | `#d6d3d1` | `--color-stone-300` | Stronger dividers and hover-borders where more separation is needed |"
    info: "| Stone-400 | `#a8a29e` | `--color-stone-400` | Muted helper text, disabled labels, icon stroke at rest |"
    info: "| Stone-500 | `#78716c` | `--color-stone-500` | Secondary text, timestamps, breadcrumb trails |"
    info: "| Stone-600 | `#57534e` | `--color-stone-600` | Link text at rest, nav labels, mid-priority body text |"
    info: "| Stone-700 | `#44403c` | `--color-stone-700` | High-emphasis body text, button text on light surfaces |"
    info: "| Warm Ink | `#1c1917` | `--color-warm-ink` | Primary headings and filled button background — the near-black with a warm cast that harmonizes with Parchment; use instead of #000 for all text and CTA fills |"
    info: "| Charcoal | `#292524` | `--color-charcoal` | Deep border tone for card hairlines and inset shadows on elevated elements |"
    info: "| Ember | `#f97316` | `--color-ember` | Orange decorative accent for icons, marks, and small graphic details |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400, 600"
      - "**Sizes:** 12px, 16px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    newsreader___display_and_headings___a_transitional_serif_with_optical_sizing__at_80px_it_carries_the_hero_with__0_04em_tracking__at_34px_it_subtitles_feature_sections__at_28px_it_titles_cards__this_is_the_signature_choice__an_editorial_serif_in_a_product_ui_breaks_the_saas_sans_serif_monotony_and_signals_craft_____font_newsreader:
      - "**Substitute:** Lora, Source Serif Pro, or system 'ui-serif'"
      - "**Weights:** 600"
      - "**Sizes:** 28px, 34px, 80px"
      - "**Line height:** 1.00–1.25"
      - "**Letter spacing:** -0.04em at 80px (-3.2px), -0.03em at 34px (-1.02px), -0.02em at 28px (-0.56px)"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Display and headings — a transitional serif with optical sizing. At 80px it carries the hero with -0.04em tracking; at 34px it subtitles feature sections; at 28px it titles cards. This is the signature choice: an editorial serif in a product UI breaks the SaaS sans-serif monotony and signals craft."

    inter___body__ui_controls__labels__and_links__the_default_voice_for_everything_that_isn_t_a_display_headline__450_is_used_for_slightly_heavier_body_emphasis__500_600_for_button_text_and_nav_____font_inter:
      - "**Substitute:** system 'ui-sans-serif', or Inter from Google Fonts"
      - "**Weights:** 400, 450, 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 17px, 19px"
      - "**Line height:** 1.20–1.80"
      - "**Letter spacing:** -0.02em to 0em, with 0.08em reserved for the all-caps pill badge ('CLI now available')"
      - "**OpenType features:** `\"blwf\", \"cv03\", \"cv04\", \"cv09\", \"cv11\"`"
      - "**Role:** Body, UI controls, labels, and links. The default voice for everything that isn't a display headline. 450 is used for slightly heavier body emphasis; 500–600 for button text and nav."

    ui_monospace___code_blocks__api_endpoints__json_payloads__and_the_inline_code_chip__system_monospace_keeps_the_engineering_texture_without_importing_a_web_font_____font_ui_monospace:
      - "**Substitute:** JetBrains Mono, Fira Code, system monospace"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.20–1.78"
      - "**Role:** Code blocks, API endpoints, JSON payloads, and the inline code chip. System monospace keeps the engineering texture without importing a web font."

    ui_sans_serif___ui_sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_ui_sans_serif:
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 17px"
      - "**Line height:** 1, 1.2, 1.25, 1.3, 1.35"
      - "**Letter spacing:** -0.02, -0.015, 0.01"
      - "**Role:** ui-sans-serif — detected in extracted data but not described by AI"

    iowan_old_style___iowan_old_style___detected_in_extracted_data_but_not_described_by_ai____font_iowan_old_style:
      - "**Weights:** 400"
      - "**Sizes:** 20px"
      - "**Line height:** 1.45"
      - "**Role:** Iowan Old Style — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | 0.96px | `--text-caption` |"
      info: "| body-sm | 14px | 1.4 | — | `--text-body-sm` |"
      info: "| body-lg | 17px | 1.6 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.45 | — | `--text-subheading` |"
      info: "| heading | 28px | 1.25 | -0.56px | `--text-heading` |"
      info: "| heading-lg | 34px | 1.2 | -1.02px | `--text-heading-lg` |"
      info: "| display | 80px | 1 | -3.2px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 108 | 108px | `--spacing-108` |"
      info: "| 140 | 140px | `--spacing-140` |"
      info: "| 180 | 180px | `--spacing-180` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| code | 8px |"
      info: "| tags | 999px |"
      info: "| cards | 8px |"
      info: "| inputs | 8px |"
      info: "| modals | 12px |"
      info: "| buttons | 999px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, rgba(0, 0, 0, 0.03) ...` | `--shadow-sm` |"
      info: "| subtle | `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgb(214, 211, 209) 0px 0px 0px 1px inset` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgb(231, 229, 228) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) ...` | `--shadow-subtle-4` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 32px"
      - "**Element gap:** 12px"

  components:

    filled_pill_button:
      role: "Primary action — the only filled button in the system"

      info: "999px radius, 8px vertical × 16px horizontal padding, Warm Ink (#1c1917) background, Paper (#ffffff) text, Inter weight 500 at 14px. No shadow. Used for the single most important action per surface."

    ghost_pill_button:
      role: "Secondary action"

      info: "999px radius, 8px × 16px padding, transparent background, 1px Stone-200 (#e7e5e4) border, Stone-700 (#44403c) text at Inter 500/14px. Sits beside the filled primary on hero and feature blocks."

    text_link:
      role: "Inline or standalone link"

      info: "Inter 400/16px, Stone-600 (#57534c) with a 1px Stone-300 (#d6d3d1) underline or no underline depending on context. Hover lifts to Warm Ink."

    pill_tag:
      role: "Category labels, topic chips, learn-section links"

      info: "999px radius, 6px vertical × 13px horizontal padding, Mist (#f1efef) background, Stone-600 text at Inter 400/13px. Borderless at rest; gains Stone-200 border on hover."

    status_badge:
      role: "Ephemeral notices — 'CLI now available', beta labels, version tags"

      info: "999px radius, 5px × 12px padding, Parchment (#faf9f7) background with 1px Stone-200 border, Stone-600 text at Inter 600/12px in all-caps with 0.08em tracking. Ember dot prefix for live indicators."

    editorial_card:
      role: "Feature explanation block — the dominant content unit"

      info: "8px radius, 32px padding, Paper (#ffffff) background, 1px Stone-200 border, hairline shadow. Contains a Newsreader heading-lg (34px), Inter body-lg (17px), and a row of Pill Tags at the foot."

    code_preview_block:
      role: "API examples, JSON payloads, terminal snippets"

      info: "8px radius, 24px padding, Paper background, 1px Stone-200 border. ui-monospace at 14px/1.78, Stone-700 text. Language label pill in the top-right corner. A subtle right-side gutter shows framework logos."

    email_preview_frame:
      role: "Inline email rendering — the product's signature visual"

      info: "8px radius, 24px padding, Paper background, 1px Stone-200 border. Contains a faux email header (sender name in Inter 500, email in Stone-500), two Stone-300 placeholder lines for body, and a Warm Ink filled button as the CTA — mirrors a real inbox card."

    property_row:
      role: "Label-value pairs in the design explanation panel"

      info: "Two-column row inside an Editorial Card. Left: Stone-500 text in Inter 400/16px. Right: monospace value in Mist-filled 6px-padded chip. 12px vertical row gap; 1px Stone-200 bottom border per row."

    top_navigation_bar:
      role: "Global header"

      transparent_over_parchment__left: "small Ember circular logo + stacked Inter nav links at 14px (Guides, Pricing, Docs). Right: Ghost 'Log in' and Filled 'Start' pill. No background fill, no shadow — sits on the canvas directly."

    logo_wordmark_lockup:
      role: "Brand mark"

      info: "8px × 8px Ember (#f97316) filled circle with a subtle internal letterform, positioned above the nav stack. The only place Ember appears at meaningful size in the chrome."

    customer_logo_strip:
      role: "Social proof row"

      info: "Single horizontal row of customer names in Inter 400/14px Stone-500, separated by 1px Stone-200 vertical dividers at 12px gaps. No logos, no treatments — pure typographic trust signal."

    help_button:
      role: "Persistent utility"

      info: "Floating bottom-right, 32px circle, Paper background with 1px Stone-200 border, '?' glyph in Inter 500/14px Stone-500. No shadow."

  do_s_and_don_ts:

    do:
      - "Use #faf9f7 as the page canvas — never substitute pure #ffffff at the body level"
      - "Set display headlines in Newsreader 600 at 80px with -3.2px tracking; this is the editorial signature"
      - "Use the 999px pill radius for every button, tag, and badge — there are no rounded-rect buttons in this system"
      - "Reserve #f97316 for the logo, status dots, and single-character icon highlights; never paint it onto buttons or large fills"
      - "Express elevation with a 1px Stone-200 border and an optional hairline shadow at ≤0.05 alpha — avoid layered drop shadows"
      - "Center hero content at a 1200px max-width with 80px section gaps between feature blocks"
      - "Place the filled Warm Ink button beside exactly one Ghost pill on any action cluster"

    don_t:
      - "Do not use the bright orange #f97316 as a CTA or link color — the filled action is always Warm Ink #1c1917"
      - "Do not introduce gradients, glows, or blur effects — the palette is flat and printed"
      - "Do not use a sans-serif for the hero headline — Newsreader carries the brand and removing it collapses the editorial identity"
      - "Do not use corners sharper than 8px on cards or wider than 8px on inputs — the two-radius system (8px / 999px) is the whole geometry"
      - "Do not stack multiple shadows on a single card — one hairline border is the maximum depth"
      - "Do not use pure #000 for body text — Warm Ink #1c1917 keeps the type harmonized with the warm canvas"
      - "Do not place logos or decorative imagery in the customer trust strip — the typographic-only row is intentional restraint"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#faf9f7` | Page background — warm off-white, the dominant field |"
    info: "| 1 | Card | `#ffffff` | Elevated content blocks, code containers, preview windows |"
    info: "| 2 | Hover Tile | `#f1efef` | Hover and selected states on flat lists, tag backgrounds at rest |"
    info: "| 3 | Edge | `#e7e5e4` | Hairline borders and inset panel edges — defined by 1px lines, not fills |"

  elevation:

    - "**Card / preview container:** `rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 0.5px`"
    - "**Floating popover / command palette:** `rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 0px`"
    - "**Inset panel divider:** `rgb(214, 211, 209) 0px 0px 0px 1px inset`"
    - "**Button inner edge:** `rgb(231, 229, 228) 0px 0px 0px 1px inset`"

  imagery:

    info: "No photography, no illustration, no product screenshots. The site is pure UI: a hero headline, a row of customer names, and feature blocks built from inline components (email preview cards, code snippets, property tables). The brand logo is a single 8px Ember dot. Every 'image' is a component mockup that shows the product's output (an email card, an API call) rather than a screenshot of the product itself."

  layout:

    info: "Max-width 1200px centered, with hero content centered within an ~800px column. The hero is a single centered headline stack: Ember logo → status badge → 80px serif headline → 17px subtext → two-button row → customer name strip. Below the fold, feature sections alternate between a left-aligned heading + right-aligned preview, and a centered heading with a full-width inline component below. All feature blocks share 80px vertical gaps and sit directly on the Parchment canvas without section-dividing bands. Navigation is a minimal top bar with a small left-side wordmark stack and two right-side pill buttons — no sticky behavior, no sidebar."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #1c1917 (Warm Ink) for headings and primary copy"
    - "background: #faf9f7 (Parchment) for page, #ffffff (Paper) for cards"
    - "border: #e7e5e4 (Stone-200) for hairlines"
    - "accent: #f97316 (Ember) for logo and status dots only"
    - "muted text: #78716c (Stone-500) for secondary, #a8a29e (Stone-400) for helper text"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:
    - "**Hero headline**: Center on #faf9f7 canvas. Text in Newsreader weight 600, 80px, color #1c1917, letter-spacing -3.2px, line-height 1.0. Below, a 17px Inter weight 400 line in #57534e."

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Ghost secondary button**: 999px radius, 8px × 16px padding, transparent background, 1px #e7e5e4 border, text #44403c in Inter 500/14px."

    - "**Editorial feature card**: 8px radius, 32px padding, background #ffffff, 1px #e7e5e4 border. Heading in Newsreader 600 at 34px, #1c1917, letter-spacing -1.02px. Body in Inter 400/17px, #44403c. Footer row of pill tags: 999px radius, 6px × 13px padding, #f1efef background, #57534e text at Inter 400/13px."

    - "**Code preview block**: 8px radius, 24px padding, background #ffffff, 1px #e7e5e4 border. Content in ui-monospace 14px, line-height 1.78, color #44403c. Keyword tokens (e.g. 'POST') in #92400e, string tokens (e.g. email addresses) in #a16207 — these are syntax colors inside the snippet, not brand colors."

  similar_brands:

    - "**ConvertKit** — Same warm-light editorial feel with serif display headlines and a near-monochrome palette"
    - "**Resend** — Developer-focused email product with a single accent color and pill-shaped controls"
    - "**Plausible Analytics** — Achromatic light surfaces, hairline borders, and a single warm color used only on tiny accents"
    - "**Cal.com** — Mixed serif-and-sans type pairing on a cream canvas, with pill buttons and flat elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment: #faf9f7;
          --color-paper: #ffffff;
          --color-mist: #f1efef;
          --color-stone-200: #e7e5e4;
          --color-stone-300: #d6d3d1;
          --color-stone-400: #a8a29e;
          --color-stone-500: #78716c;
          --color-stone-600: #57534e;
          --color-stone-700: #44403c;
          --color-warm-ink: #1c1917;
          --color-charcoal: #292524;
          --color-ember: #f97316;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-newsreader: 'Newsreader', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-iowan-old-style: 'Iowan Old Style', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: 0.96px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body-lg: 17px;
          --leading-body-lg: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --tracking-heading: -0.56px;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.02px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.2px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-108: 108px;
          --spacing-140: 140px;
          --spacing-180: 180px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-code: 8px;
          --radius-tags: 999px;
          --radius-cards: 8px;
          --radius-inputs: 8px;
          --radius-modals: 12px;
          --radius-buttons: 999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 0.5px;
          --shadow-subtle: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
          --shadow-subtle-2: rgb(214, 211, 209) 0px 0px 0px 1px inset;
          --shadow-subtle-3: rgb(231, 229, 228) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 4px 0px;
        
          /* Surfaces */
          --surface-canvas: #faf9f7;
          --surface-card: #ffffff;
          --surface-hover-tile: #f1efef;
          --surface-edge: #e7e5e4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment: #faf9f7;
          --color-paper: #ffffff;
          --color-mist: #f1efef;
          --color-stone-200: #e7e5e4;
          --color-stone-300: #d6d3d1;
          --color-stone-400: #a8a29e;
          --color-stone-500: #78716c;
          --color-stone-600: #57534e;
          --color-stone-700: #44403c;
          --color-warm-ink: #1c1917;
          --color-charcoal: #292524;
          --color-ember: #f97316;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-newsreader: 'Newsreader', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-ui-sans-serif: 'ui-sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-iowan-old-style: 'Iowan Old Style', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: 0.96px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.4;
          --text-body-lg: 17px;
          --leading-body-lg: 1.6;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --tracking-heading: -0.56px;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.02px;
          --text-display: 80px;
          --leading-display: 1;
          --tracking-display: -3.2px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-108: 108px;
          --spacing-140: 140px;
          --spacing-180: 180px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-full: 999px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.05) 0px 1px 4px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 0.5px;
          --shadow-subtle: rgba(255, 255, 255, 0.07) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 2px 6px 0px;
          --shadow-subtle-2: rgb(214, 211, 209) 0px 0px 0px 1px inset;
          --shadow-subtle-3: rgb(231, 229, 228) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.03) 0px 1px 4px 0px;
        }