lamanna___style_reference:
  info: "> Neon circus tent on a Naples sidewalk"

  theme: "light"

  info: "Lamanna's is a maximalist Italian-bakery visual system built on screaming color confidence: a saturated orange-red canvas, sunshine-yellow display type, and a blush-pink secondary surface that act as a three-band color rhythm across the page. Type is the loudest voice — an ultra-wide, squished-black display face (Right Grotesk Spatial) set at near-zero line-height, so headlines read as massive solid blocks rather than airy typographic statements. Layout is full-bleed, edge-to-edge, with no max-width containment; sections are separated by hard color changes rather than whitespace. Decorative energy (zigzags, pointing hands, starburst badges) is integral to the brand — the system expects graphical accents everywhere rather than clean minimalism."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Anger Orange | `#ff4100` | `--color-anger-orange` | Primary brand canvas and surface fill — hero backgrounds, section dividers, and headline text. The entire site is painted in this color; restraint is not the goal |"
    info: "| Sun Yellow | `#ffc700` | `--color-sun-yellow` | Display type, starburst badges, and decorative graphic fills. Sits on top of orange sections for maximum contrast and excitement |"
    info: "| Royal Blue | `#1573dd` | `--color-royal-blue` | Outlined link and icon border color — used as a chromatic accent stroke for interactive elements and decorative icon outlines against the orange field |"
    info: "| Charcoal | `#292a2c` | `--color-charcoal` | Primary text and structural border color. Near-black but slightly warm — softer than pure black, used for body copy, dividers, and image borders |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Button borders, link text, and SVG fills. Reserved for the sharpest contrast moments where pure black is needed over lighter surfaces |"
    info: "| Blush Peach | `#fdbeba` | `--color-blush-peach` | Soft secondary surface — pastel section background that breaks the orange dominance and introduces a calmer band for content |"
    info: "| Cream | `#fee3c1` | `--color-cream` | Softest surface tint and decorative shape fill in pink sections. Functions as a quiet third surface level above blush |"
    info: "| Lemon Cream | `#f6e653` | `--color-lemon-cream` | Secondary yellow used in decorative shapes and softer accent fills where pure sun-yellow would be too aggressive |"

  tokens___typography:

    rightgrotesk_spatialblack_webfont___display_and_heading_typeface__ultra_wide__compressed_black_sans_with_near_zero_leading_0_89_that_makes_headlines_read_as_solid_slabs__this_is_the_signature_voice___every_page_must_use_it_for_its_loudest_statements_____font_rightgrotesk_spatialblack_webfont:
      - "**Substitute:** Bowlby One SC or Tungsten Bold"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 24px, 30px, 36px, 54px"
      - "**Line height:** 0.89-1.00"
      - "**Letter spacing:** -0.0200em at 18px (-0.36px), -0.0110em at 24px (-0.26px), -0.0090em at 30px+ (-0.27px at 30, -0.32px at 36, -0.49px at 54)"
      - "**Role:** Display and heading typeface. Ultra-wide, compressed-black sans with near-zero leading (0.89) that makes headlines read as solid slabs. This is the signature voice — every page must use it for its loudest statements."

    nimbus_sans_extended_bold___secondary_body_emphasis_type__heavy_negative_tracking_at_23px_gives_a_chunky_condensed_feel_for_subheadings_or_emphasized_inline_copy_____font_nimbus_sans_extended_bold:
      - "**Substitute:** Helvetica Inserat or Compacta Bold"
      - "**Weights:** 400"
      - "**Sizes:** 23px"
      - "**Line height:** 1.13"
      - "**Letter spacing:** -0.0510em (-1.17px)"
      - "**Role:** Secondary body emphasis type. Heavy negative tracking at 23px gives a chunky condensed feel for subheadings or emphasized inline copy."

    nimbus_sans_extended_regular___extended_sans_for_body_and_subheading_roles_where_rightgrotesk_would_be_too_heavy__tight_0_89_leading_on_the_36px_size_is_an_intentional_match_to_the_display_voice_____font_nimbus_sans_extended_regular:
      - "**Substitute:** Helvetica Neue Extended or Roboto Condensed"
      - "**Weights:** 400"
      - "**Sizes:** 21px, 36px"
      - "**Line height:** 0.89-1.48"
      - "**Role:** Extended sans for body and subheading roles where rightgrotesk would be too heavy. Tight 0.89 leading on the 36px size is an intentional match to the display voice."

    open_sans___readable_body_and_hero_paragraph_text__at_1_67_leading_on_22px__it_s_the_quiet_voice_for_longer_passages__at_1_00_on_18px__it_acts_as_a_dense_label_____font_open_sans:
      - "**Substitute:** Open Sans (direct)"
      - "**Weights:** 400"
      - "**Sizes:** 18px, 22px"
      - "**Line height:** 1.00-1.67"
      - "**Role:** Readable body and hero paragraph text. At 1.67 leading on 22px, it's the quiet voice for longer passages; at 1.00 on 18px, it acts as a dense label."

    obviously_condensed_semibold___link_and_cta_typeface__condensed_semibold_for_narrow__punchy_action_labels_____font_obviously_condensed_semibold:
      - "**Substitute:** Bebas Neue or Oswald Semibold"
      - "**Weights:** 400"
      - "**Sizes:** 32px"
      - "**Line height:** 1.16"
      - "**Role:** Link and CTA typeface. Condensed semibold for narrow, punchy action labels."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 18px | 1 | -0.36px | `--text-body-sm` |"
      info: "| subheading | 24px | 1 | -0.26px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1 | -0.27px | `--text-heading-sm` |"
      info: "| heading-lg | 36px | 0.89 | -0.32px | `--text-heading-lg` |"
      info: "| display | 54px | 0.89 | -0.49px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 15 | 15px | `--spacing-15` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 43 | 43px | `--spacing-43` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 55 | 55px | `--spacing-55` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 105 | 105px | `--spacing-105` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 130 | 130px | `--spacing-130` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"
      info: "| starbursts | 0px |"

    layout:

      - "**Section gap:** 60-100px"
      - "**Element gap:** 10-20px"

  components:

    full_bleed_hero_section:
      role: "Opening visual statement that defines the brand canvas"

      info: "Anger Orange (#ff4100) background filling the entire viewport edge-to-edge with no max-width constraint. Centered logo (#292a2c) at top. Massive rightgrotesk display headline at 54px, line-height 0.89, sun-yellow (#ffc700) with -0.49px letter-spacing, breaking across full width. Decorative zigzag SVGs in #ffc700 flank the layout. A oversized product photo (pizza slice) is layered in front, sharp-edged, no radius, no shadow."

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "Transparent or orange-fill bar at top, full-bleed. Left: \\"SHOP MERCH\\" in rightgrotesk 18px sun-yellow with a small circular icon, underlined. Center: LAMANNA'S logo mark (charcoal). Right: \\"ORDER ONLINE\\" in rightgrotesk 18px sun-yellow with Royal Blue (#1573dd) circular icon outline. Zero radius, zero shadow, no hover state subtlety."

    outlined_link_button:
      role: "Primary interactive text link with visible action border"

      info: "Royal Blue (#1573dd) border, 1-2px stroke, no background fill, no radius. Text in rightgrotesk 18px or obviously-condensed 32px in charcoal or black. The chromatic border is the only differentiator — no filled background variant exists. Padding roughly 6px 15px."

    starburst_product_badge:
      role: "Featured product spotlight with energetic visual frame"

      info: "Sun-yellow (#ffc700) multi-pointed star/sunburst SVG shape, zero radius on its outer points, containing a product photo centered. Sits on a blush peach (#fdbeba) section. Below: product name in rightgrotesk 18-24px charcoal. These badges are the system's primary product-card pattern — no rectangles, no shadows, just geometric sun shapes."

    3d_drop_shadow_headline:
      role: "Playful typographic statement with built-in depth"

      info: "Right-grotesk display text in sun-yellow with a hard-edged, solid anger-orange (#ff4100) drop-shadow offset 4-6px right and down, no blur. The \\"Toro\\" and \\"The Hall of Fame\\" headlines use this treatment — it creates dimensional type without using actual CSS box-shadow blur."

    section_color_band:
      role: "Full-width section divider"

      info: "Hard color change across the full viewport — from anger-orange to blush-peach, or blush-peach to sun-yellow — with no border, no gradient, no margin transition. Sections are demarcated by chromatic contrast, not whitespace."

    zigzag_decorative_element:
      role: "Brand-signature graphic accent"

      info: "Hand-drawn or geometric zigzag lines in sun-yellow (#ffc700), 2-3px stroke, no fill, placed at section edges as visual punctuation. Reinforces the circus-tent/playful energy. Zero radius."

    pointing_hand_graphic:
      role: "Directional call-to-action decoration"

      info: "Small cartoon-style hand (in #ffc700 or charcoal) pointing toward content, used on the Hall of Fame section to direct the eye. Part of the decorative system, not a real UI element."

    product_photo_tile:
      role: "Full-bleed product imagery"

      info: "Product photography (pizza, donuts, gelato) presented as raw, uncropped, edge-touching images with no border-radius and no shadow. The product IS the card — no chrome, no padding frame, no label box around the image."

    product_label_caption:
      role: "Short product name under a starburst badge"

      info: "Two-line product name in rightgrotesk 18px charcoal, center-aligned, sitting directly below a starburst badge with ~20px vertical gap. No background, no border, no chrome."

    logo_mark:
      role: "Brand identification at page center"

      info: "LAMANNA'S wordmark in a condensed/extended bold face (nimbus-sans-extended-bold) with -1.17px letter-spacing, in charcoal (#292a2c). Centered, compact, acts as the visual anchor of the navigation bar."

    header_strip:
      role: "Promotional or section intro band"

      info: "Full-bleed anger-orange band containing large display text and a centered product image. Functions as a transitional hero between major content sections."

  do_s_and_don_ts:

    do:
      - "Use Right Grotesk Spatial (or Bowlby One SC) for all display headlines at 36px+ — this is the brand's voice, not a suggestion"
      - "Set display headlines to line-height 0.89 so type stacks into dense solid blocks rather than airy typography"
      - "Fill sections with solid color (anger orange, blush peach, sun yellow) edge-to-edge — never use max-width containers or card padding"
      - "Use Royal Blue (#1573dd) only as a 1-2px outlined border on links and icons — never as a filled background"
      - "Apply 3D drop-shadow to display headlines using a solid offset (#ff4100 shadow on #ffc700 text), never with blur"
      - "Add zigzag and starburst decorative SVGs as visual punctuation in every section"
      - "Let product photography bleed to the viewport edge with no radius, no border, no shadow"

    don_t:

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Anger Orange Canvas | `#ff4100` | Primary full-bleed page background and hero fill |"
    info: "| 2 | Blush Peach Band | `#fdbeba` | Secondary section surface that breaks orange dominance |"
    info: "| 3 | Cream Accent | `#fee3c1` | Softest decorative shape fill inside pink sections |"

  elevation:

    info: "No elevation is used. The design system relies on hard color changes, full-bleed color bands, and offset solid-color type shadows instead of box-shadow blur. Depth is created by chromatic contrast, not by floating elements above surfaces."

  imagery:

    info: "Photography is the product hero — large, raw, uncropped food photography (pizza slices, donuts, gelato) presented edge-to-edge with no rounded corners, no shadow, and no frame. Images bleed into and out of the orange canvas as if torn from a magazine. Decorative graphic elements (zigzag lines, pointing hands, starburst shapes) are flat SVG illustrations in sun-yellow and charcoal, used as energetic punctuation throughout. No lifestyle photography, no dark moody shots — everything is high-saturation, high-energy, and shot or rendered against clean backgrounds. Icons are minimal and outlined, primarily in Royal Blue."

  layout:

    info: "Full-bleed, edge-to-edge layout with no max-width container. The page is a stack of horizontal color bands — each section fills the viewport width and is delineated by hard chromatic transitions rather than margins or borders. Hero sections are center-stacked: large display headline above a full-bleed product photo. Product showcases use a 3-column grid of starburst badges on a pink section. Navigation is a fixed top bar with left/center/right items. No sidebar, no nested containers, no card padding — every element touches the viewport edge. The overall rhythm is: orange band → orange-with-product → pink band → orange band, repeating."

  agent_prompt_guide:

    create_an_outlined_primary_action: "Transparent background, #1573dd border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-anger-orange: #ff4100;
          --color-sun-yellow: #ffc700;
          --color-royal-blue: #1573dd;
          --color-charcoal: #292a2c;
          --color-obsidian: #000000;
          --color-blush-peach: #fdbeba;
          --color-cream: #fee3c1;
          --color-lemon-cream: #f6e653;
        
          /* Typography — Font Families */
          --font-rightgrotesk-spatialblack-webfont: 'rightgrotesk-spatialblack-webfont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nimbus-sans-extended-bold: 'nimbus-sans-extended-bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nimbus-sans-extended-regular: 'nimbus-sans-extended-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-obviously-condensed-semibold: 'obviously-condensed-semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 18px;
          --leading-body-sm: 1;
          --tracking-body-sm: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.26px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.27px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 0.89;
          --tracking-heading-lg: -0.32px;
          --text-display: 54px;
          --leading-display: 0.89;
          --tracking-display: -0.49px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-43: 43px;
          --spacing-50: 50px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-105: 105px;
          --spacing-120: 120px;
          --spacing-130: 130px;
          --spacing-160: 160px;
        
          /* Layout */
          --section-gap: 60-100px;
          --element-gap: 10-20px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
          --radius-starbursts: 0px;
        
          /* Surfaces */
          --surface-anger-orange-canvas: #ff4100;
          --surface-blush-peach-band: #fdbeba;
          --surface-cream-accent: #fee3c1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-anger-orange: #ff4100;
          --color-sun-yellow: #ffc700;
          --color-royal-blue: #1573dd;
          --color-charcoal: #292a2c;
          --color-obsidian: #000000;
          --color-blush-peach: #fdbeba;
          --color-cream: #fee3c1;
          --color-lemon-cream: #f6e653;
        
          /* Typography */
          --font-rightgrotesk-spatialblack-webfont: 'rightgrotesk-spatialblack-webfont', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nimbus-sans-extended-bold: 'nimbus-sans-extended-bold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nimbus-sans-extended-regular: 'nimbus-sans-extended-regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-open-sans: 'Open Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-obviously-condensed-semibold: 'obviously-condensed-semibold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 18px;
          --leading-body-sm: 1;
          --tracking-body-sm: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1;
          --tracking-subheading: -0.26px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: -0.27px;
          --text-heading-lg: 36px;
          --leading-heading-lg: 0.89;
          --tracking-heading-lg: -0.32px;
          --text-display: 54px;
          --leading-display: 0.89;
          --tracking-display: -0.49px;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-10: 10px;
          --spacing-15: 15px;
          --spacing-20: 20px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-42: 42px;
          --spacing-43: 43px;
          --spacing-50: 50px;
          --spacing-55: 55px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-105: 105px;
          --spacing-120: 120px;
          --spacing-130: 130px;
          --spacing-160: 160px;
        }