little_amps___style_reference:
  info: "> vinyl record sleeve in afternoon sun. Cream paper, burnt-orange ink, a single dusty blue stamp, every label set in monospace — the interface behaves like a printed coffee zine: tactile, editorial, never sterile."

  theme: "light"

  info: "Little Amps is a warm analog coffee-shop world: cream-paper canvas, rich espresso-brown type, and burnt-orange accents that feel like sun-faded label ink. The interface reads like a printed zine or vinyl insert — a custom chunky display serif handles headlines while monospaced type (Necto Mono, Roboto Mono) labels everything that is structural: nav, buttons, prices, dates, callouts. Photography is documentary and tactile (hands on records, café counters, coffee cherries) and anchors every section. Color is sparse but decisive: a single vivid red-orange does the work of links and highlights, a dusty blue and marigold yellow appear as quiet secondary signals. Surfaces are flat, borders are hairline warm-taupe lines, and radius stays small (3–8px) — the aesthetic is curated and editorial, not soft or rounded."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Espresso | `#522c25` | `--color-espresso` | Primary text, icons, card borders, nav, footer, input fields — the structural dark that holds every screen together, warm rather than black to stay on-brand with roasted coffee |"
    info: "| Burnt Orange | `#c03001` | `--color-burnt-orange` | Filled action buttons, active links, key highlights, badge fills — the single vivid accent that makes interactive elements feel switched on against the cream canvas |"
    info: "| Amber Ink | `#c46500` | `--color-amber-ink` | Secondary accent for emphasized text, hover states, and warm callouts — a slightly darker orange that pairs with Burnt Orange for tonal depth |"
    info: "| Marigold Wash | `#febf6f` | `--color-marigold-wash` | Soft highlight backgrounds, tag fills, and decorative washes — used sparingly to add warm sunlight moments inside otherwise neutral layouts |"
    info: "| Dusty Blue | `#89b4ca` | `--color-dusty-blue` | Cool counter-accent for secondary buttons, link backgrounds, and color variety — the only blue in the system, it reads as a quiet companion to the warm palette |"
    info: "| Cream Paper | `#fff9f2` | `--color-cream-paper` | Page canvas, card surfaces, button fills, input backgrounds — the base layer of every screen, warm off-white that replaces pure white |"
    info: "| Linen Beige | `#f6ede3` | `--color-linen-beige` | Card backgrounds, section surfaces, image borders, body borders — one step deeper than canvas, creates gentle layered surfaces without elevation |"
    info: "| Taupe Hairline | `#e6dad4` | `--color-taupe-hairline` | Hairline dividers, card borders, nav separators, subtle structural lines — the only border color most components need |"
    info: "| Sandstone | `#cbbbb4` | `--color-sandstone` | Muted card backgrounds, soft surface fills, disabled surface states — a warm gray-taupe for low-emphasis panels |"
    info: "| Coffee Dust | `#977e77` | `--color-coffee-dust` | Muted body text, helper text, low-emphasis copy — warm brown-gray that fades into the cream without disappearing |"

  tokens___typography:

    little_amps___custom_display_serif_for_brand_wordmark__section_headlines__and_large_editorial_titles__heavy_negative_tracking__0_10em_at_41_51px_creates_a_tight__chunky_retro_poster_feel__the_heaviest_typographic_element_on_every_page_and_the_signature_voice_of_the_brand_____font_little_amps:
      - "**Substitute:** Recoleta, Canela, or DM Serif Display"
      - "**Weights:** 500"
      - "**Sizes:** 20px, 22px, 41px, 45px, 50px, 51px"
      - "**Line height:** 0.80–1.00"
      - "**Letter spacing:** -0.10em"
      - "**Role:** Custom display serif for brand wordmark, section headlines, and large editorial titles. Heavy negative tracking (-0.10em) at 41–51px creates a tight, chunky retro-poster feel. The heaviest typographic element on every page and the signature voice of the brand."

    inclusive_sans___primary_body_and_ui_text__used_for_descriptions__paragraphs__and_most_readable_content__consistent_0_05em_positive_tracking_gives_a_slightly_looser__zine_like_feel__the_workhorse___appears_in_nearly_every_context_____font_inclusive_sans:
      - "**Substitute:** Inter, Work Sans, or Public Sans"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** 0.05em"
      - "**Role:** Primary body and UI text. Used for descriptions, paragraphs, and most readable content. Consistent 0.05em positive tracking gives a slightly looser, zine-like feel. The workhorse — appears in nearly every context."

    necto_mono___labels__buttons__navigation__dates__prices__and_all_structural_metadata__tighter_line_heights_0_80_1_20_and_monospaced_forms_make_it_feel_like_stamped_or_typewriter_set_type__0_05em_tracking_is_the_system_wide_small_caps_standard_____font_necto_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, or Space Mono"
      - "**Weights:** 400, 500"
      - "**Sizes:** 10px, 12px, 13px, 14px, 16px"
      - "**Line height:** 0.80–1.20"
      - "**Letter spacing:** 0.05em"
      - "**Role:** Labels, buttons, navigation, dates, prices, and all structural metadata. Tighter line-heights (0.80–1.20) and monospaced forms make it feel like stamped or typewriter-set type. 0.05em tracking is the system-wide small-caps standard."

    roboto_mono___secondary_monospaced_text_for_code_like_or_technical_labels__supplementing_necto_mono_in_body_and_data_contexts_____font_roboto_mono:
      - "**Substitute:** Roboto Mono, Space Mono, or IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 1.10"
      - "**Letter spacing:** -0.02em to 0.05em"
      - "**Role:** Secondary monospaced text for code-like or technical labels, supplementing Necto Mono in body and data contexts."

    gtstandard_m___rare_body_fallback___appears_in_minimal_contexts_____font_gtstandard_m:
      - "**Substitute:** Söhne, Inter, or system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** normal"
      - "**Role:** Rare body fallback — appears in minimal contexts."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 10px | 1.1 | 0.5px | `--text-caption` |"
      info: "| body | 14px | 1.6 | 0.7px | `--text-body` |"
      info: "| heading-sm | 20px | 1 | -2px | `--text-heading-sm` |"
      info: "| heading | 22px | 1 | -2.2px | `--text-heading` |"
      info: "| display | 50px | 0.85 | -5px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      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: "| 15 | 15px | `--spacing-15` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 90 | 90px | `--spacing-90` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 3px |"
      info: "| images | 8px |"
      info: "| inputs | 3px |"
      info: "| buttons | 3px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-64px"
      - "**Card padding:** 24-36px"
      - "**Element gap:** 6-12px"

  components:

    filled_action_button:
      role: "Primary CTA — Shop, Read More, Listen Now, Quick View"

      info: "Solid Burnt Orange (#c03001) background, Cream Paper (#fff9f2) text, 3px radius, Necto Mono at 12–14px weight 400, 0.05em tracking, uppercase. Padding 10px 12px. Small, tight, stamp-like. The button reads as a printed label, not a pill."

    ghost_outline_button:
      role: "Secondary action — border-only variants"

      info: "Transparent background, Espresso (#522c25) 1px border, Espresso text, 3px radius, Necto Mono 12–14px uppercase. Padding 6–10px vertical. Used when a filled orange button would compete with a primary on the same screen."

    navigation_link:
      role: "Top nav menu items: SHOP, ABOUT, WHOLESALE, COMMUNITY BOARD, CONTACT"

      info: "Necto Mono 12–14px weight 400, 0.05em tracking, uppercase, Espresso (#522c25) text. No background. Small dropdown caret next to SHOP. Aligned in a single horizontal row centered in the header."

    hero_brand_block:
      role: "Brand lockup overlaid on hero image"

      info: "Little Amps display serif at 45–51px weight 500, -0.10em tracking, in Burnt Orange (#c03001). Two lines: brand name stacked over a small decorative line-art icon (espresso machine or coffee bag). Positioned top-left of the hero image with generous padding."

    product_card:
      role: "E-commerce product tile — Friend Blend shown"

      info: "Linen Beige (#f6ede3) background, 8px radius, product image framed with 8px radius and hairline border. Below image: product name in Inclusive Sans 16px Espresso, price in Necto Mono, tasting notes in Coffee Dust (#977e77), roast level bar, and a Dusty Blue (#89b4ca) Quick View button at 3px radius. Padding 24–36px."

    editorial_card:
      role: "Community Board / blog post tile"

      info: "Cream Paper (#fff9f2) background, Taupe Hairline (#e6dad4) 1px border, 8px radius. Image on top (8px radius), then date in Necto Mono 10–12px, title in Little Amps serif 20–22px -0.10em, excerpt in Inclusive Sans 14px Coffee Dust, and a filled Burnt Orange Read More button at 3px radius."

    horizontal_scroll_carousel:
      role: "Community Board and product sliders"

      info: "Row of 4–5 cards with consistent 14–16px gaps. Small circular prev/next arrow buttons (12px) in the top-right corner. No visible scrollbar — navigation is icon-only."

    header___nav_bar:
      role: "Site-wide top navigation"

      info: "Cream Paper (#fff9f2) background, thin Taupe Hairline (#e6dad4) 1px bottom border. Brand wordmark logo on the left (lowercase custom mark), centered nav links in Necto Mono uppercase, right-aligned Account dropdown and Cart counter. Height approximately 64–80px."

    date_stamp:
      role: "Article and post publication dates"

      info: "Necto Mono 10–12px weight 400, 0.05em tracking, Coffee Dust (#977e77) text. Dot-separated format (e.g. '06.03.2026'). Sits above titles in editorial cards."

    tasting_notes_bar:
      role: "Flavor profile indicator on product pages"

      info: "Three small monospace labels (Roastness, Acidity, Complexity) with circular dot indicators below each, in Necto Mono 10–12px Espresso. A horizontal scale bar below shows roast level (e.g. Medium Roast) in Inclusive Sans 14px."

    hero_image_banner:
      role: "Full-bleed top-of-page photography"

      info: "Edge-to-edge lifestyle or product photography (record player, café interior) on Cream Paper canvas. No overlay, no gradient — the image IS the hero. Often paired with the Hero Brand Block in the top-left corner."

    decorative_line_art_icon:
      role: "Small brand mark and section accents (duck, espresso machine, coffee bag)"

      info: "Espresso (#522c25) or Burnt Orange (#c03001) 1–2px stroke, no fill, approximately 24–40px. Hand-drawn illustrative style — appears next to headlines and as the brand mascot in the header logo."

    slider_counter:
      role: "Carousel position indicator (01 — 03)"

      info: "Necto Mono 10–12px in the bottom-right of carousels. Format: current slide number, em-dash, total slides, flanked by small prev/next arrow buttons."

    shop_all_pill_button:
      role: "Section transition link at bottom of carousels"

      info: "Small Burnt Orange filled button with Cream Paper text at 3px radius. Necto Mono 12px uppercase, tight padding (8–10px vertical). Appears at the bottom-left of each major carousel section."

  do_s_and_don_ts:

    do:
      - "Use Little Amps serif for all display headlines at 20–51px with -0.10em tracking — it is the only voice that signals brand identity."
      - "Set all UI labels, nav, buttons, dates, and prices in Necto Mono uppercase with 0.05em tracking — this monospace voice IS the structural system."
      - "Default page background to Cream Paper (#fff9f2) and use Linen Beige (#f6ede3) for the next surface up — never use pure white."
      - "Use Burnt Orange (#c03001) as the single filled action color; keep all primary CTAs on a 3px radius for a printed-label feel."
      - "Hairline all borders at 1px in Taupe Hairline (#e6dad4) — never use heavy shadows or thick borders."
      - "Use Coffee Dust (#977e77) for any muted, secondary, or helper text — never use plain gray."
      - "Pair full-bleed documentary photography with the Hero Brand Block in the top-left corner; let the image do the atmosphere."

    don_t:
      - "Don't use pure black, pure white, or blue-gray system neutrals — the palette is warm and coffee-toned throughout."
      - "Don't use large border-radius (pill shapes, 16px+, fully rounded) — the system is sharp-cornered at 3–8px."
      - "Don't use heavy drop shadows or elevation effects — depth comes from surface color shifts, not shadows."
      - "Don't set body or paragraph text in display serif or monospace — Inclusive Sans is the only body face."
      - "Don't introduce additional accent colors — the system is disciplined: one vivid orange, one amber, one marigold, one dusty blue."
      - "Don't use bright pure red, green, or blue for state semantics — the warm palette rewrites these into Espresso and Burnt Orange."
      - "Don't use Inter, Helvetica, or system-ui for branding moments — the custom display serif and monospace pairing is non-negotiable."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Cream Paper | `#fff9f2` | Page canvas and default background |"
    info: "| 2 | Linen Beige | `#f6ede3` | Card surfaces, section bands, image frames |"
    info: "| 3 | Sandstone | `#cbbbb4` | Muted panel fills, secondary card surfaces |"

  elevation:

    info: "The system deliberately avoids drop shadows. Depth is communicated through three flat cream/beige surface levels (Cream Paper → Linen Beige → Sandstone) and 1px hairline borders in Taupe Hairline. Components float through color layering, not shadow. This keeps the aesthetic flat, editorial, and zine-like — consistent with the printed-label and vinyl-sleeve metaphor."

  imagery:

    info: "Photography is documentary, tactile, and lifestyle-led: hands touching record players, café counter scenes with baristas and customers, raw coffee cherries in hands, vinyl records, coffee bag packaging. Treatment is warm and slightly desaturated, matching the cream-and-espresso palette. Images are full-bleed at the hero level but contained in 8px-radius frames within cards. No stock photography, no abstract gradients, no 3D renders. Illustrations are minimal line-art icons (espresso machine, coffee bag, duck mascot) in 1–2px Espresso or Burnt Orange strokes — hand-drawn, never geometric. Imagery occupies roughly 40–50% of page real estate and carries the brand atmosphere more than typography or color alone."

  layout:

    info: "Page model is centered max-width (~1200px) on a full-bleed Cream Paper canvas, with content comfortably contained rather than edge-to-edge except for the hero image. The hero pattern is a full-bleed documentary photograph (record player / café interior) with the brand lockup overlaid in the top-left corner, followed by a horizontal nav bar pinned below the image. Section rhythm alternates between editorial text blocks (centered or left-aligned headlines over short paragraph copy) and image-heavy carousels (Community Board, product grids). Card grids use 3–4 columns on desktop with 14–16px gaps. Content density is comfortable — generous breathing room between sections (40–64px), with small tight internal padding. Navigation is a single horizontal bar with no sidebar or mega-menu. Carousels include small icon-only prev/next controls and a numeric position counter."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas: #fff9f2"
    - "card surface: #f6ede3"
    - "text: #522c25"
    - "muted text: #977e77"
    - "border: #e6dad4"
    - "accent: #c03001"
    - "primary action: #c03001 (filled action)"

    example_component_prompts:

    - "*Editorial Card*: Cream Paper (#fff9f2) background, Taupe Hairline (#e6dad4) 1px border, 8px radius. Image at top with 8px radius. Date in Necto Mono 10px Coffee Dust (#977e77), 0.05em tracking, format '06.03.2026'. Title in Little Amps serif 22px weight 500, Espresso (#522c25), -2.2px tracking. Body excerpt in Inclusive Sans 14px Coffee Dust. Filled Read More button: Burnt Orange (#c03001) background, Cream Paper text, 3px radius, Necto Mono 12px uppercase, 10px 12px padding."

    - "*Product Card*: Linen Beige (#f6ede3) background, 8px radius. Product image framed at 8px radius. Name in Inclusive Sans 16px Espresso. Price in Necto Mono 13px Amber Ink (#c46500). Tasting notes in Inclusive Sans 14px Coffee Dust. Roast level bar: 1px Taupe Hairline line with filled segment in Espresso. Quick View button: Dusty Blue (#89b4ca) background, Cream Paper text, 3px radius, Necto Mono 12px uppercase."

    - "*Hero Brand Block*: Little Amps display serif at 50px weight 500, Burnt Orange (#c03001), -5px tracking, two lines left-aligned. Small line-art coffee bag icon (24px, Espresso stroke) positioned to the right of the second line. Padding 32px from top-left of hero image."

    - "*Nav Bar*: Cream Paper (#fff9f2) background, 1px Taupe Hairline bottom border, height 72px. Brand wordmark logo at left (lowercase custom mark, Little Amps serif 20px Espresso). Center: nav items in Necto Mono 13px uppercase Espresso, 0.05em tracking, 24px gaps: SHOP ▾, ABOUT, WHOLESALE, COMMUNITY BOARD, CONTACT. Right: ACCOUNT ▾ and CART 0 in same style."

    - "*Ghost Outline Button*: Transparent background, 1px Espresso (#522c25) border, 3px radius. Text in Necto Mono 13px weight 500 Espresso, 0.05em tracking, uppercase. Padding 8px 14px. Use for secondary actions when a filled Burnt Orange button is already on screen."

  typography_pairing_logic:

    info: "The system uses a strict three-font hierarchy: Little Amps (custom display serif) speaks only at the brand and headline level — 20px and up, always in Espresso or Burnt Orange. Necto Mono handles everything structural and metadata: nav, buttons, dates, prices, labels — always uppercase, always 0.05em tracking, always between 10–16px. Inclusive Sans is the only body face, set at 13–16px with 0.05em tracking. Roboto Mono appears as a secondary monospace for data contexts. Never let display serif and monospace appear in the same line of body copy — they serve separate emotional registers."

  color_behavior_rules:

    info: "Color is rationed, not decorated. Cream Paper is the default for 80% of surface area. Linen Beige appears only inside cards or section bands. Burnt Orange (#c03001) is the single filled-button color and should appear at most 1–2 times per viewport. Amber Ink (#c46500) is for text emphasis only, not backgrounds. Marigold Wash (#febf6f) and Dusty Blue (#89b4ca) are seasonal or secondary accents — never use both in the same component. Espresso (#522c25) is the only structural dark and handles all text, borders, and icons."

  similar_brands:

    - "**Blue Bottle Coffee** — Same documentary café photography on cream/off-white canvas with a single dark accent for text and one warm accent for CTAs"
    - "**Sey Coffee** — Editorial zine-like layout with monospaced labels, tight corners, and warm coffee-toned palette replacing standard neutrals"
    - "**Onyx Coffee Lab** — Heavy use of monospaced typography for technical metadata (roast dates, origins, scores) and flat surfaces without shadows"
    - "**Stumptown Coffee** — Warm cream canvas, burnt-orange accent, and lifestyle photography that leads the page rather than supporting it"
    - "**Counter Culture Coffee** — Editorial grid system with strong typographic hierarchy, small-radius buttons, and a restrained warm palette with one vivid accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-espresso: #522c25;
          --color-burnt-orange: #c03001;
          --color-amber-ink: #c46500;
          --color-marigold-wash: #febf6f;
          --color-dusty-blue: #89b4ca;
          --color-cream-paper: #fff9f2;
          --color-linen-beige: #f6ede3;
          --color-taupe-hairline: #e6dad4;
          --color-sandstone: #cbbbb4;
          --color-coffee-dust: #977e77;
        
          /* Typography — Font Families */
          --font-little-amps: 'Little Amps', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inclusive-sans: 'Inclusive Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-necto-mono: 'Necto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.1;
          --tracking-caption: 0.5px;
          --text-body: 14px;
          --leading-body: 1.6;
          --tracking-body: 0.7px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -2px;
          --text-heading: 22px;
          --leading-heading: 1;
          --tracking-heading: -2.2px;
          --text-display: 50px;
          --leading-display: 0.85;
          --tracking-display: -5px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-90: 90px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-64px;
          --card-padding: 24-36px;
          --element-gap: 6-12px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 3px;
          --radius-images: 8px;
          --radius-inputs: 3px;
          --radius-buttons: 3px;
        
          /* Surfaces */
          --surface-cream-paper: #fff9f2;
          --surface-linen-beige: #f6ede3;
          --surface-sandstone: #cbbbb4;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-espresso: #522c25;
          --color-burnt-orange: #c03001;
          --color-amber-ink: #c46500;
          --color-marigold-wash: #febf6f;
          --color-dusty-blue: #89b4ca;
          --color-cream-paper: #fff9f2;
          --color-linen-beige: #f6ede3;
          --color-taupe-hairline: #e6dad4;
          --color-sandstone: #cbbbb4;
          --color-coffee-dust: #977e77;
        
          /* Typography */
          --font-little-amps: 'Little Amps', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inclusive-sans: 'Inclusive Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-necto-mono: 'Necto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-gtstandard-m: 'GTStandard-M', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 10px;
          --leading-caption: 1.1;
          --tracking-caption: 0.5px;
          --text-body: 14px;
          --leading-body: 1.6;
          --tracking-body: 0.7px;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -2px;
          --text-heading: 22px;
          --leading-heading: 1;
          --tracking-heading: -2.2px;
          --text-display: 50px;
          --leading-display: 0.85;
          --tracking-display: -5px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-15: 15px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-36: 36px;
          --spacing-90: 90px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 22px;
        }