reducto___style_reference:
  info: "> Magazine on warm paper"

  theme: "light"

  info: "Reducto presents a warm-paper editorial system: an off-white canvas paired with a custom serif that behaves like a luxury magazine masthead, grounded by a single high-chroma magenta that punches through without shouting. The aesthetic borrows from print typography — oversized serif headlines (64–136px) set in a custom face with tight tracking, paired with a workmanlike sans for utility — and treats the page as a structured document rather than a product dashboard. Color is rationed: almost everything reads in warm grays and the deep plum #310632, and the vivid magenta #9d17a0 is reserved for the moment a user needs to act. Surfaces are paper-thin, borders are warm beige instead of cold gray, and shadows are essentially absent — depth comes from inset white highlights and subtle border contrast, not from elevation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Aubergine | `#310632` | `--color-aubergine` | Primary text, headline color, nav active state, link accent, footer text — the deep plum that replaces black across the entire interface, giving body copy a warm violet cast instead of cold gray |"
    info: "| Magenta Pulse | `#9d17a0` | `--color-magenta-pulse` | Filled primary action background, selected nav indicator, brand icon color — the single vivid hue permitted on a CTA, used sparingly so the click target glows against the paper canvas |"
    info: "| Damson | `#690f6b` | `--color-damson` | Outlined action border, secondary button outline — a darker shade of the action magenta, used when a ghost/outlined button needs chromatic weight without the filled fill |"
    info: "| Lilac Wash | `#dcbffb` | `--color-lilac-wash` | Violet text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"
    info: "| Ochre | `#a2541b` | `--color-ochre` | Decorative icon accent, illustrative highlight — used inside product visualizations and tag chips to add warm contrast against the dominant magenta/plum palette |"
    info: "| Moss | `#718613` | `--color-moss` | Decorative icon and illustration accent — secondary chromatic note for data visualization callouts, kept low-frequency |"
    info: "| Reed | `#87a017` | `--color-reed` | Green text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |"
    info: "| Paper | `#fafaf9` | `--color-paper` | Page canvas, hero background, nav background — the warm off-white that defines the entire site's surface; never pure #ffffff at the top level |"
    info: "| Vellum | `#f5f5f4` | `--color-vellum` | Secondary surface, elevated card background, subtle section differentiation |"
    info: "| Snow | `#ffffff` | `--color-snow` | Pure card surface, button text on dark/magenta fills, icon fill — only used as a surface lift or as foreground text, never as the page canvas |"
    info: "| Sand | `#d7ccc1` | `--color-sand` | Primary border color, hairline dividers, card outlines — the warm beige border that replaces cold gray; the single most-used border token across the system |"
    info: "| Driftwood | `#e7e5e4` | `--color-driftwood` | Subtle border, decorative separator, low-contrast outline — lighter than Sand for secondary dividers |"
    info: "| Stone | `#d6d3d1` | `--color-stone` | Nav border, button border, body border — mid-tone warm gray for structural outlines where more contrast is needed than Sand provides |"
    info: "| Graphite | `#292524` | `--color-graphite` | Secondary body text, navigation labels, and subdued headings. Do not promote it to the primary CTA color |"
    info: "| Slate | `#57534d` | `--color-slate` | Secondary heading text, icon stroke, strong body text — mid-dark warm gray for emphasis without going full black |"
    info: "| Pewter | `#79716b` | `--color-pewter` | Body text, nav text, button text on light backgrounds, helper text — the default readable text color, warm and low-contrast |"
    info: "| Bark | `#44403b` | `--color-bark` | Neutral button treatment for secondary actions and selected controls. |"
    info: "| Ash | `#a6a09b` | `--color-ash` | Muted helper text, disabled state, low-priority captions — the lightest readable neutral |"

  tokens___typography:

    reductoserif___display_and_headline_serif___the_brand_s_signature_voice__set_at_64_136px_for_hero_display__drops_to_24_32px_for_section_headings__weight_470_is_the_workhorse_editorial_body_weight_for_a_display_face__weight_650_is_reserved_for_stat_numbers__the_tight__0_01em_tracking_at_every_size_is_critical__it_tightens_the_serif_s_natural_rhythm_into_a_modern__condensed_look__substituted_with_playfair_display__lora__or_source_serif_pro_when_unavailable_____font_reductoserif:
      - "**Substitute:** Playfair Display, Lora, or Source Serif 4"
      - "**Weights:** 400, 470, 650"
      - "**Sizes:** 16px, 24px, 32px, 64px, 80px, 136px"
      - "**Line height:** 0.74, 1.13, 1.25, 1.33, 1.50"
      - "**Letter spacing:** -0.01em at all sizes"
      - "**Role:** Display and headline serif — the brand's signature voice. Set at 64–136px for hero/display, drops to 24–32px for section headings. Weight 470 is the workhorse (editorial body weight for a display face), weight 650 is reserved for stat numbers. The tight -0.01em tracking at every size is critical: it tightens the serif's natural rhythm into a modern, condensed look. Substituted with Playfair Display, Lora, or Source Serif Pro when unavailable."

    inter___body_and_ui_sans___the_workhorse_for_nav_links__buttons__descriptions__paragraphs__and_form_fields__weight_400_for_body__500_for_button_labels_and_emphasized_nav__activates_stylistic_alternates__salt__single_storey__a__and__ss02__open__g____these_are_essential_to_matching_the_brand__without_them__inter_reads_as_generic_____font_inter:
      - "**Substitute:** DM Sans or General Sans"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 15px, 16px, 17px, 18px, 20px, 24px"
      - "**Line height:** 1.33, 1.43, 1.50, 1.56, 1.60"
      - "**OpenType features:** `\"salt\" on, \"ss02\" on`"
      - "**Role:** Body and UI sans — the workhorse for nav links, buttons, descriptions, paragraphs, and form fields. Weight 400 for body, 500 for button labels and emphasized nav. Activates stylistic alternates 'salt' (single-storey 'a') and 'ss02' (open 'g') — these are essential to matching the brand; without them, Inter reads as generic."

    reductosans___compact_ui_sans_for_small_labels__tag_chips__micro_copy__and_dense_interface_text_where_inter_feels_too_tall__functionally_overlaps_with_inter_but_provides_a_tighter__more__captured__rhythm_for_chrome_____font_reductosans:
      - "**Substitute:** Inter at the same weight and size"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14px, 15px, 16px"
      - "**Line height:** 1.43, 1.50, 1.60"
      - "**Role:** Compact UI sans for small labels, tag chips, micro-copy, and dense interface text where Inter feels too tall. Functionally overlaps with Inter but provides a tighter, more 'captured' rhythm for chrome."

    reddit_mono___single_purpose_display_monospace_for_oversized_stat_numbers___the__2_000_000_000__counter__the__0_03em_tracking_pulls_the_mono_s_natural_width_inward_so_the_number_doesn_t_look_like_code__but_a_label__substituted_with_jetbrains_mono_or_ibm_plex_mono_____font_reddit_mono:
      - "**Substitute:** JetBrains Mono or IBM Plex Mono"
      - "**Weights:** 400"
      - "**Sizes:** 80px"
      - "**Line height:** 1.13"
      - "**Letter spacing:** -0.03em at 80px"
      - "**Role:** Single-purpose display monospace for oversized stat numbers — the '2,000,000,000' counter. The -0.03em tracking pulls the mono's natural width inward so the number doesn't look like code, but a label. Substituted with JetBrains Mono or IBM Plex Mono."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | — | `--text-body-sm` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.25 | -0.01px | `--text-heading` |"
      info: "| heading-lg | 64px | 1.13 | -0.01px | `--text-heading-lg` |"
      info: "| display-sm | 80px | 1.13 | -0.01px | `--text-display-sm` |"
      info: "| display | 136px | 1.13 | -0.01px | `--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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    shadows:

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

    layout:

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

  components:

    announcement_bar:
      role: "Top-of-page product announcement strip"

      info: "Full-width bar with #9d17a0 (Magenta Pulse) background, white text at 14px Inter weight 400, centered. 2px bottom inset highlight of rgba(255,255,255,0.3) gives it a subtle embossed feel. Padding 2–4px vertical."

    top_navigation:
      role: "Sticky site navigation"

fafaf9_background_with_1px_stone_d6d3d1_bottom_border__logo_left__nav_links_center_in_14px_inter_weight_500_pewter___log_in__text_link_and__contact_sales__filled_dark_button_right__2px_white_inset_highlights_top_and_bottom_for_a_paper_sheet_feel__height__60px__horizontal_padding_24px:

    contact_sales_button_dark_filled:
      role: "Primary dark CTA in nav"

      info: "Bark (#44403b) background, white text, 14px Inter weight 500, 4px radius, 8px 16px padding. Inset 2px white highlights on top and bottom edges create a 3D embossed look. The dark fill on warm-paper canvas makes this the highest-contrast interactive element above the fold."

    magenta_primary_button:
      role: "Hero CTA, primary conversion action"

9d17a0_magenta_pulse_background__white_text__14px_inter_weight_500__4px_radius__12px_24px_padding__arrow_icon___follows_the_label__inset_rgba255_255_255_0_25_top_and_bottom_highlights_give_a_glossy_raised_feel__this_is_the_only_filled_chromatic_button_in_the_system:

    ghost_outlined_button:
      role: "Secondary action, demo request"

      info: "Transparent background, 1px Damson (#690f6b) border, Aubergine (#310632) text, 14px Inter weight 500, 4px radius, 12px 24px padding. Pairs directly beside the magenta CTA as the lower-commitment option."

    hero_headline:
      role: "Above-the-fold page title"

      info: "Set in reductoSerif weight 470 at 64–80px, line-height 1.13, letter-spacing -0.01em, color Graphite (#292524). Two-line stack with a maximum width of ~900px. One word (e.g. 'data') is set in Magenta Pulse (#9d17a0) for emphasis — this word-color treatment is a signature pattern."

    hero_subtext:
      role: "Supporting paragraph under headline"

      info: "Inter weight 400, 17–18px, line-height 1.5, color Pewter (#79716b), max-width ~600px centered. Inline emphasis word (e.g. 'most accurate') recolored in Aubergine (#310632) for subtle weight."

    customer_logo_strip:
      role: "Social proof row"

      info: "Single row of 5+ customer wordmarks on Paper background, evenly spaced, separated by thin dividers. Logos are rendered in their own brand colors (Harvey = dark, Scale = pink, Newfront = Aubergine, Medallion = dark + blue icon). Optional '+ many more' text link in Pewter right-aligned."

    stat_display_number:
      role: "Oversized metric counter"

      info: "80px Reddit Mono weight 400, line-height 1.13, letter-spacing -0.03em, color Graphite. The mono choice with tight tracking makes the number feel like a typeset label rather than code. Small caption above in Inter 14px ('Over') centered."

    feature_card:
      role: "3-column feature grid card"

      info: "White (#ffffff) surface on Paper background, 1px Sand (#d7ccc1) border, 8px radius, 24–32px padding. Top half contains an illustrative visual (document mockup, chart, or icon grid). Title in reductoSerif 24px Graphite, body in Inter 16px Pewter. Three cards per row, 24px gap between cards."

    section_header:
      role: "Centered section title block"

      info: "Small eyebrow label in Inter 14px weight 500 with a 4-dot icon prefix (##) in Aubergine, followed by reductoSerif heading at 48–64px Graphite, then Inter body subtext 17px Pewter. All centered, max-width ~700px, 16–24px between elements."

    product_visualization:
      role: "Decorative document/data illustration"

      info: "Flat, outlined document mockups with bounding-box overlays in Sand (#d7ccc1) and accent color tags (Lilac #dcbffb, Ochre #a2541b) on selected cells. Pixelated mosaic backgrounds scatter color squares at low opacity. No drop shadows — depth is implied by the grid."

  do_s_and_don_ts:

    do:
      - "Set all hero/display headlines in reductoSerif weight 470 at 64–136px with -0.01em letter-spacing; never use a sans face for a display heading."
      - "Use #9d17a0 (Magenta Pulse) as the only filled chromatic action background; pair it with white text and 12px 24px padding."
      - "Color exactly one word in a hero headline in #9d17a0 to create emphasis; this accent-word pattern is the system's signature rhythm."
      - "Use #d7ccc1 (Sand) as the default border color for all cards, dividers, and outlines; avoid cool gray borders."
      - "Set body copy in Inter 17px weight 400 at line-height 1.5 with 'salt' and 'ss02' features enabled — these alternates are non-negotiable for brand fidelity."
      - "Maintain a paper-canvas base: page background must be #fafaf9, never #ffffff; lift cards with #ffffff over the warm canvas instead of using shadows."
      - "Use Reddit Mono with -0.03em tracking at 80px for oversized stat numbers; the mono face signals 'this is a measurement, not a word'."

    don_t:
      - "Don't use black (#000000) for body or heading text; use Graphite (#292524) or Aubergine (#310632) to keep the warm palette consistent."
      - "Don't apply drop shadows to cards or sections; depth must come from border color contrast or white-on-warm layering, not from blur shadows."
      - "Don't use cool gray (#6b7280, #94a3b8, etc.) for borders or text — every neutral in this system is warm (brown- or beige-tinted)."
      - "Don't activate the magenta action color on more than one element per viewport section; if the CTA is magenta, the nav must stay neutral."
      - "Don't use the reductoSerif face for body copy or UI labels under 24px; it loses legibility below that and breaks the display/utility split."
      - "Don't introduce additional chromatic accent colors beyond Ochre, Moss, and Lilac; the palette intentionally restricts to plum-family + warm neutrals + 2–3 illustration accents."
      - "Don't use #0000ee or default browser link blue; all links must use Aubergine or Lilac Wash."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#fafaf9` | Base page canvas — warm off-white, the dominant surface of every section |"
    info: "| 1 | Snow | `#ffffff` | Card surface, elevated panel — pure white sits on top of Paper to create gentle lift without shadows |"
    info: "| 2 | Vellum | `#f5f5f4` | Subtle section differentiation, nav background variant, secondary surface |"
    info: "| 3 | Magenta Pulse | `#9d17a0` | Accent surface — announcement bar, filled CTA, selected state |"
    info: "| 4 | Graphite | `#292524` | Dark surface — dark button, inverted panel, footer dark zone |"

  elevation:

    - "**Filled action button (magenta):** `inset 0 -2px 0 0 rgba(255,255,255,0.25), inset 0 2px 0 0 rgba(255,255,255,0.25), 0 1px 2px 0 rgba(0,0,0,0.05)`"
    - "**Nav bar:** `inset 0 -2px 0 0 rgba(255,255,255,0.3), inset 0 2px 0 0 rgba(255,255,255,0.3)`"

  imagery:

    info: "Product visualizations dominate over photography. Document mockups are rendered as flat outlined rectangles with visible bounding-box overlays, grid guides, and small color-coded cell tags — they read as 'annotated data' rather than realistic screenshots. A pixelated mosaic of scattered color squares (in Ochre, Moss, Lilac, and Plum) appears as a decorative background element behind the stat counter, giving a digital-data texture. No lifestyle photography, no people, no environments. Icons are thin-stroke line icons in Slate or Graphite. The visual language is 'schematic document intelligence' — the product is shown as structured data being extracted, always flat, always annotated, never photographic."

  layout:

    info: "Max-width 1200px centered container with generous horizontal padding. Hero is a centered text block (headline → subtext → two-button row) occupying the upper third of the viewport, followed by a full-width row of document-to-data illustrations spanning the page width with no container constraint. Customer logos sit in a single horizontal row inside the container. Below the fold, sections alternate between centered-text headers and 3-column card grids, each card containing an illustration above a title and short body. Vertical rhythm is generous: 80px between major sections, 24px between cards, 16–24px between text elements within a block. The nav is a sticky horizontal bar with logo left, links center, and a dark filled CTA right. No sidebar, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #292524 (Graphite) for headings, #79716b (Pewter) for body"
    - "background: #fafaf9 (Paper) canvas, #ffffff (Snow) for cards"
    - "border: #d7ccc1 (Sand) default, #d6d3d1 (Stone) for nav"
    - "accent: #9d17a0 (Magenta Pulse) for emphasis words and the announcement bar"
    - "primary action: #9d17a0 (filled action)"

    3_5_example_component_prompts:

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

    - "*Build a feature card grid (3-column)*: White #ffffff card surface on #fafaf9 canvas, 1px #d7ccc1 border, 8px radius, 32px padding. Card title in reductoSerif weight 470 at 24px, color #292524. Card body in Inter 16px weight 400, line-height 1.5, color #79716b. Illustration area at top of card: flat outlined document mockup with #d7ccc1 bounding-box overlay and one #dcbffb accent tag. 24px gap between cards."

    - "*Build the stat counter section*: #fafaf9 background. Small centered label 'Over' in Inter 14px weight 500, color #79716b. Oversized number in Reddit Mono weight 400 at 80px, line-height 1.13, letter-spacing -0.03em, color #292524. Decorative pixelated mosaic of small color squares (in #a2541b, #718613, #dcbffb, #310632) scattered above the number at low opacity as a background pattern."

    - "*Build the top navigation*: #fafaf9 background, 1px #d6d3d1 bottom border, 60px height, 24px horizontal padding. Logo (icon + 'reducto' wordmark) left, nav links center in 14px Inter weight 500, color #79716b, 24px gap between links. Right side: 'Log in' as plain text link in #79716b, then dark filled button 'Contact sales' with #44403b background, white text, 4px radius, 8px 16px padding."

    - "*Build the announcement bar*: Full-width strip, #9d17a0 background, 2px vertical padding. Centered text in Inter 14px weight 400, color #ffffff. No border-radius."

  similar_brands:

    - "**Linear** — Same editorial-serif-meets-utility-sans typography pairing, same single-accent-color rationing, same paper-white canvas with warm neutrals"
    - "**Vercel** — Same disciplined use of one chromatic action color against an otherwise monochrome interface, same generous vertical section rhythm"
    - "**Stripe** — Same warm off-white canvas replacing pure white, same serif headlines at 60–80px for hero, same border-as-depth philosophy instead of drop shadows"
    - "**Notion** — Same warm-gray text palette and hairline warm-beige borders, same absence of heavy shadows, same document-first visual language"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-aubergine: #310632;
          --color-magenta-pulse: #9d17a0;
          --color-damson: #690f6b;
          --color-lilac-wash: #dcbffb;
          --color-ochre: #a2541b;
          --color-moss: #718613;
          --color-reed: #87a017;
          --color-paper: #fafaf9;
          --color-vellum: #f5f5f4;
          --color-snow: #ffffff;
          --color-sand: #d7ccc1;
          --color-driftwood: #e7e5e4;
          --color-stone: #d6d3d1;
          --color-graphite: #292524;
          --color-slate: #57534d;
          --color-pewter: #79716b;
          --color-bark: #44403b;
          --color-ash: #a6a09b;
        
          /* Typography — Font Families */
          --font-reductoserif: 'reductoSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-reductosans: 'reductosans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-reddit-mono: 'Reddit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.01px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: -0.01px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -0.01px;
          --text-display-sm: 80px;
          --leading-display-sm: 1.13;
          --tracking-display-sm: -0.01px;
          --text-display: 136px;
          --leading-display: 1.13;
          --tracking-display: -0.01px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w470: 470;
          --font-weight-medium: 500;
          --font-weight-w650: 650;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24-32px;
          --element-gap: 16-24px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.25) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 2px 0px 0px inset;
          --shadow-subtle-2: rgba(255, 255, 255, 0.3) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 2px 0px 0px inset;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-paper: #fafaf9;
          --surface-snow: #ffffff;
          --surface-vellum: #f5f5f4;
          --surface-magenta-pulse: #9d17a0;
          --surface-graphite: #292524;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-aubergine: #310632;
          --color-magenta-pulse: #9d17a0;
          --color-damson: #690f6b;
          --color-lilac-wash: #dcbffb;
          --color-ochre: #a2541b;
          --color-moss: #718613;
          --color-reed: #87a017;
          --color-paper: #fafaf9;
          --color-vellum: #f5f5f4;
          --color-snow: #ffffff;
          --color-sand: #d7ccc1;
          --color-driftwood: #e7e5e4;
          --color-stone: #d6d3d1;
          --color-graphite: #292524;
          --color-slate: #57534d;
          --color-pewter: #79716b;
          --color-bark: #44403b;
          --color-ash: #a6a09b;
        
          /* Typography */
          --font-reductoserif: 'reductoSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-reductosans: 'reductosans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-reddit-mono: 'Reddit Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.01px;
          --text-heading: 32px;
          --leading-heading: 1.25;
          --tracking-heading: -0.01px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: -0.01px;
          --text-display-sm: 80px;
          --leading-display-sm: 1.13;
          --tracking-display-sm: -0.01px;
          --text-display: 136px;
          --leading-display: 1.13;
          --tracking-display: -0.01px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-120: 120px;
        
          /* Shadows */
          --shadow-subtle: rgba(255, 255, 255, 0.25) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 2px 0px 0px inset;
          --shadow-subtle-2: rgba(255, 255, 255, 0.3) 0px -2px 0px 0px inset, rgba(255, 255, 255, 0.3) 0px 2px 0px 0px inset;
          --shadow-subtle-3: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }