cycle___style_reference:
  info: "> Ink-stained porcelain workshop with jewel-toned labels"

  theme: "light"

  info: "Cycle's visual language reads as a warm, analog workspace — slightly off-white canvas, ink-black type, and a palette of deep jewel tones that feel more like vintage inkpots than SaaS accents. Headlines use Eudoxus Sans at heavy weights with tight tracking, giving every title physical weight; body and UI default to Inter at comfortable 14–16px. Components sit on a very soft shadow system (low-opacity warm gray) rather than hard borders, and large 20px corner radii make cards feel like ceramic tiles. Color is functional and categorical — each product agent or feature cluster gets its own deep hue (teal, violet, amber, maroon) and its own tinted background wash, never decorative gradients."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#171618` | `--color-ink-black` | Primary text, icons, dark surfaces — the dominant neutral; never use pure #000 for text |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, modal panels, text on dark buttons — the brightest surface in the stack |"
    info: "| Warm Canvas | `#f7f7f7` | `--color-warm-canvas` | Page background, subtle section divider — the off-white that gives the system its warm analog feel |"
    info: "| Mist Gray | `#efefef` | `--color-mist-gray` | Hairline borders, input backgrounds, divider lines — the quietest structural neutral |"
    info: "| Stone Gray | `#dadada` | `--color-stone-gray` | Button borders, disabled outlines |"
    info: "| Pewter | `#bababa` | `--color-pewter` | Subtle shadow tint, placeholder text in low-emphasis contexts |"
    info: "| Iron | `#727578` | `--color-iron` | Secondary text, nav links, muted body copy — the workhorse mid-gray |"
    info: "| Lead | `#8b8d8f` | `--color-lead` | Tertiary nav, breadcrumb separators |"
    info: "| Pebble | `#7d7d7d` | `--color-pebble` | Badge text, metadata labels |"
    info: "| Deep Teal | `#004d60` | `--color-deep-teal` | Product accent — Pathfinder agent, data-viz category, teal-tinted section backgrounds pair it |"
    info: "| Deep Violet | `#38296c` | `--color-deep-violet` | Product accent — VoiceHunter agent, primary feature category, violet wash sections |"
    info: "| Deep Amber | `#6c4800` | `--color-deep-amber` | Product accent — LoopCloser agent, gold-tinted section backgrounds and warm callouts |"
    info: "| Deep Plum | `#46122d` | `--color-deep-plum` | Product accent — additional agent or feature category, paired with pinkish washes |"
    info: "| Deep Navy | `#0f1c41` | `--color-deep-navy` | Product accent — analytics or infrastructure category |"
    info: "| Deep Maroon | `#663220` | `--color-deep-maroon` | Product accent — heading accent on warm-toned pages |"
    info: "| Deep Umber | `#772914` | `--color-deep-umber` | Product accent — rust-toned category, icon and illustration accent |"
    info: "| Deep Indigo | `#241a42` | `--color-deep-indigo` | Product accent — dark variant of the violet for headings and iconography on light surfaces |"
    info: "| Burnt Sienna | `#412e0a` | `--color-burnt-sienna` | Dark amber — heading text when a warm-tone treatment is needed; Yellow supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Violet Wash | `#f5f0ff` | `--color-violet-wash` | Soft tinted background — feature section panels, agent card backgrounds |"
    info: "| Teal Mist | `#defafe` | `--color-teal-mist` | Soft tinted background — teal-categorized section panels |"
    info: "| Amber Cream | `#fff6e1` | `--color-amber-cream` | Soft tinted background — gold-categorized section panels |"
    info: "| Apricot Wash | `#fff1ec` | `--color-apricot-wash` | Soft tinted background — warm secondary section panels |"
    info: "| Violet Veil | `#e7e0fe` | `--color-violet-veil` | Badge and small-card background — violet category |"
    info: "| Sky Tint | `#cfeff8` | `--color-sky-tint` | Badge and small-card background — teal category |"
    info: "| Honey Veil | `#feedcc` | `--color-honey-veil` | Gray supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"

  tokens___typography:

    inter___all_ui__body__nav__button__and_badge_text___body_at_14_16px_400__nav_and_labels_at_12_13px_500__button_text_at_14_16px_500__inline_emphasized_text_at_600____font_inter:
      - "**Substitute:** Inter (already freely available)"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 21px, 27px"
      - "**Line height:** 0.94–1.74"
      - "**Letter spacing:** -0.011em at 16–27px, -0.01em at 14–15px, normal at 12–13px"
      - "**Role:** All UI, body, nav, button, and badge text — body at 14–16px/400, nav and labels at 12–13px/500, button text at 14–16px/500, inline emphasized text at 600"

    eudoxus_sans___all_display_and_heading_copy___hero_at_58px_800__section_headings_at_48px_800__sub_headings_at_32px_700__the_tight__0_035em_tracking_at_display_sizes_and_heavy_weight_give_headlines_physical__sculptural_presence_that_contrasts_inter_s_workhorse_body____font_eudoxus_sans:
      - "**Substitute:** Cabinet Grotesk Bold, Söhne Breit, or Plus Jakarta Sans 800"
      - "**Weights:** 700, 800"
      - "**Sizes:** 21px, 23px, 32px, 48px, 58px"
      - "**Line height:** 1.00–1.40"
      - "**Letter spacing:** -0.035em at 48–58px, -0.029em at 32px, -0.026em at 21–23px"
      - "**Role:** All display and heading copy — hero at 58px/800, section headings at 48px/800, sub-headings at 32px/700; the tight -0.035em tracking at display sizes and heavy weight give headlines physical, sculptural presence that contrasts Inter's workhorse body"

    karla___karla___detected_in_extracted_data_but_not_described_by_ai____font_karla:
      - "**Weights:** 400"
      - "**Sizes:** 21px"
      - "**Line height:** 1.4"
      - "**Role:** Karla — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body | 15px | 1.62 | -0.1px | `--text-body` |"
      info: "| subheading | 21px | 1.4 | -0.23px | `--text-subheading` |"
      info: "| heading-sm | 27px | 1.18 | -0.3px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | -0.93px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.05 | -1.68px | `--text-heading-lg` |"
      info: "| display | 58px | 1 | -2.03px | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 31 | 31px | `--spacing-31` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 42 | 42px | `--spacing-42` |"
      info: "| 66 | 66px | `--spacing-66` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 20px |"
      info: "| badges | 100px |"
      info: "| images | 12px |"
      info: "| inputs | 20px |"
      info: "| buttons | 8px |"
      info: "| largeSurfaces | 27px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| md | `rgba(239, 239, 239, 0.55) 0px 2px 15px 0px` | `--shadow-md` |"
      info: "| subtle | `rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) ...` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0...` | `--shadow-subtle-3` |"

    layout:

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

  components:

    primary_cta_button:
      role: "Main action — Book a demo, Sign up"

      info: "Solid #000000 fill, #ffffff text at 14px Inter weight 500, 8px corner radius, 22px horizontal / 10px vertical padding. Subtle two-stop drop shadow: 0 1px 2px rgba(0,0,0,0.08) + 0 0.5px 0 rgba(0,0,0,0.12). No border."

    ghost___outlined_button:
      role: "Secondary action — Watch video, Explore product agents"

      info: "Transparent fill, #171618 border at 1px, 8px corner radius, 22px / 10px padding, 14px Inter weight 500. Pairs beside the primary CTA in the hero."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent bar on white canvas, logo left (#000000 mark), nav links in Inter 14px/500 #171618, right side hosts Log in link and a compact primary CTA button."

    logo_mark:
      role: "Brand identity anchor"

      info: "The Cycle dot+wordmark in #000000 — a small circle glyph followed by 'Cycle' in Inter 14px/600; reappears in the product UI as an in-app breadcrumb mark."

    hero_section:
      role: "Above-the-fold brand statement"

      info: "Full-width white canvas, centered 58px Eudoxus Sans 800 headline ('Together we ship alone'), 21px Inter 400 subtitle in #727578, two-button group centered. Flanked by 3D mascot characters (jewel-toned blob faces with hats) — decorative, not part of the grid."

    customer_logo_strip:
      role: "Social proof band"

      info: "Two rows of monochrome #727578 / 60%-opacity customer logos on the warm canvas, no dividers, 21px row gap."

    product_screenshot_card:
      role: "Product visualization"

      info: "White card on warm canvas, 20px radius, 24px padding, 12px image radius inside, soft layered shadow (1px ink hairline + 16px/6px warm blurs). Hosts the product UI mockup showing feedback organization."

    category_tinted_section:
      role: "Per-feature color-coded content block"

      info: "Full-bleed tinted background — one of #f5f0ff, #defafe, #fff6e1, or #fff1ec — with a 20px-radius card inside, 3-column or 3-row layout, each card representing a product agent with its matching deep-jewel accent."

    agent___feature_card:
      role: "Individual product capability tile"

      info: "White surface on tinted background, 20px radius, 24px padding, Eudoxus Sans 800 32px heading in a deep brand color, Inter 14–15px body in #171618, optional small badge with 100px pill radius in tinted accent."

    category_badge:
      role: "Inline tag for area, source, or status"

      info: "100px pill radius, tinted background (one of #e7e0fe, #cfeff8, #feedcc), 12px Inter 500 text in the matching deep ink color, 6px vertical / 9px horizontal padding."

    primary_nav_link:
      role: "Menu items in top bar"

      info: "Inter 14px weight 500, #171618, no underline; chevron-down icons next to dropdown items; active state uses weight 600."

    in_product_sidebar_item:
      role: "Workspace navigation inside the product UI"

      info: "Inter 13px weight 500, #171618, left-aligned with a small leading icon, 8px vertical padding, subtle hover wash in #f7f7f7."

    search_input:
      role: "Workspace search field"

      info: "Full-width input with 1px #efefef border, 20px radius, 12px Inter 400 placeholder in #727578, 12px vertical / 14px horizontal padding, focus state deepens border to #171618."

    filter_pill:
      role: "Active filter chip in the product UI"

      info: "Pill shape (100px radius), white fill, 1px #efefef border, 12px Inter 500 text, small trailing X icon in #727578."

  do_s_and_don_ts:

    do:
      - "Use #000000 fill + #ffffff text for the single primary action on any screen; never introduce a second filled-CTA color in the same viewport."
      - "Pair each deep brand accent (#38296c, #004d60, #6c4800, #46122d) with its matching tinted wash — violet text on #f5f0ff, teal on #defafe, amber on #fff6e1, maroon on apricot wash — to keep the categorical system legible."
      - "Set all display headlines in Eudoxus Sans 700–800 with tracking between -0.026em and -0.035em; never use Inter above 27px."
      - "Use 20px radius for cards, 8px for buttons, and 100px for badges/tags — these three radii define the system's silhouette."
      - "Anchor body text in Inter 14–15px weight 400 at line-height 1.62; apply 600 only for inline emphasis, never for full paragraphs."
      - "Layer the signature soft shadow (rgba(239,239,239,0.55) 0 2px 15px) beneath white cards on the warm canvas; avoid hard borders on elevated surfaces."
      - "Use #f7f7f7 as the page background and #ffffff for cards to preserve the warm off-white analog feel — never pure #ffffff for full-page canvas."

    don_t:
      - "Don't use #000000 for body or heading text — #171618 is the only ink color; pure black is reserved for CTA fills and the logo mark."
      - "Don't introduce bright or saturated accent colors (electric blue, neon green, etc.) — every chromatic value in the system is a deep, muted jewel tone."
      - "Don't set body or product UI text in Eudoxus Sans — it's a display face only; Inter handles everything from 12px captions up to 27px sub-headings."
      - "Don't use sharp 4px or 0px corner radii on cards or inputs — the system's softness comes from 20px / 12px / 8px curves."
      - "Don't stack multiple colored CTA buttons in the same view; the system is strictly one filled black action plus ghost/outlined secondary actions per surface."
      - "Don't apply gradients to backgrounds or buttons — the color palette relies on flat deep tones and their tinted washes for depth."
      - "Don't use the chromatic brand colors for decorative gradients or large background floods — they belong on text, icons, and small accent elements paired with their tinted wash."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Warm Canvas | `#f7f7f7` | Page background — the off-white that grounds everything |"
    info: "| 1 | Paper White | `#ffffff` | Card, modal, and elevated component surfaces |"
    info: "| 2 | Tinted Wash | `#f5f0ff` | Category-coded section backgrounds — violet, teal, amber, apricot variants |"
    info: "| 3 | Ink Overlay | `#171618` | Dark inverted sections and product mockup frames |"

  elevation:

    - "**Card (paper white on warm canvas):** `0px 2px 15px 0px rgba(239, 239, 239, 0.55)`"
    - "**Product screenshot frame:** `0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 16px 16px 0px rgba(23, 24, 26, 0.03), 0px 6px 12px 0px rgba(23, 24, 26, 0.05)`"
    - "**Secondary card or input:** `0px 0px 0px 1px rgba(23, 24, 26, 0.1), 0px 8px 16px 0px rgba(23, 24, 26, 0.03)`"
    - "**Primary CTA button:** `0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.12)`"

  imagery:

    info: "The site's visual language mixes three modes: (1) 3D mascot characters in the hero — soft, rounded blob creatures with expressive faces and hats, rendered in the full deep-jewel palette (teal, violet, amber, pink) with subtle ambient shadows; they float as isolated characters with small geometric confetti shapes, never composited onto backgrounds. (2) Product UI screenshots — crisp, full-bleed captures of the actual Cycle workspace showing feedback lists, sidebars, and search inputs, presented in white card frames on the warm canvas. (3) Iconography — small, line-based icons throughout the product UI at 16–20px stroke weight, monochrome #171618 or matching the active category color. No photography, no abstract gradient art, no illustration beyond the mascots. Imagery is sparse and purposeful: mascots anchor brand warmth, product screenshots do the explanatory heavy lifting, icons carry functional density."

  layout:

    info: "Max-width 1200px centered column, hero breaks full-bleed with the nav pill floating above. Hero is a centered stack: small wordmark + nav, then 58px headline, subtitle, and a two-button group, flanked by mascot characters sitting outside the content column. Below the hero, a monochrome customer-logo band runs edge-to-edge in a quiet row. Product sections alternate between white product-screenshot cards on the warm canvas and full-bleed tinted sections (violet / teal / amber / apricot) that hold 3-column agent card grids. Section gaps are generous (~80px) to let the soft shadows breathe. Navigation is a minimal top bar with no sticky behavior apparent; in-product pages switch to a left sidebar with a workspace switcher at the top."

  agent_prompt_guide:

    info: "Quick Color Reference:"
    - "text: #171618"
    - "background: #f7f7f7 (canvas) / #ffffff (card)"
    - "border: #efefef (hairline) / #171618 (strong)"
    - "accent: #38296c (Deep Violet) — paired with #f5f0ff wash"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts:"
    - "Build the hero: #ffffff background, centered 58px Eudoxus Sans weight 800 headline in #171618 at letter-spacing -2.03px, 21px Inter weight 400 subtitle in #727578 with 1.62 line-height, and a centered button pair — primary #000000 filled button with #ffffff text at 14px Inter 500 (8px radius, 22px/10px padding) and a ghost button with 1px #171618 border, same sizing. Flank with 3D mascot characters in violet, teal, and amber."

    - "Build a category-tinted section: #f5f0ff full-bleed background, 3-column grid of white cards (20px radius, 24px padding, soft shadow rgba(239,239,239,0.55) 0 2px 15px), each card with a 32px Eudoxus Sans 800 heading in #38296c, 15px Inter 400 body in #171618, and a 100px-radius pill badge using #e7e0fe fill with #38296c text."

    - "Build a product screenshot card: white card (20px radius, 24px padding) on the #f7f7f7 canvas, containing a product UI mockup with 12px image radius and a layered shadow (1px #171618 at 10% opacity + 16px and 6px warm blurs at 3–5% opacity). Inside the mockup, a left sidebar with 13px Inter 500 items in #171618, a top search input with 20px radius and 1px #efefef border, and a main panel with Eudoxus Sans 21px weight 700 headings."

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

    - "Build a category badge: 100px pill radius, #feedcc fill, 12px Inter 500 text in #412e0a, 6px vertical / 9px horizontal padding. Use for area, source, or status tagging inside the product UI."

  color_categorical_system:

    info: "Cycle's chromatic palette is not a decorative accent set — it is a categorical taxonomy. Each product agent or feature cluster is assigned one deep-jewel hue and one matching tinted wash:"

    - "Deep Violet (#38296c) + Violet Wash (#f5f0ff) → VoiceHunter / understanding customers"
    - "Deep Teal (#004d60) + Teal Mist (#defafe) → Pathfinder / shaping the product"
    - "Deep Amber (#6c4800) + Amber Cream (#fff6e1) → LoopCloser / closing the loop"
    - "Deep Plum (#46122d) + Apricot Wash (#fff1ec) → additional agent or feedback category"
    - "Deep Navy (#0f1c41) → analytics or infrastructure category"

    info: "When adding a new agent or feature cluster, select a new deep hue and generate its 95%-lightened wash. Never reuse a hue for a second category. UI chrome (buttons, nav, body) stays neutral; chromatic color enters the interface only through this agent/category system."

  typography_pairing_logic:

    info: "The Eudoxus Sans + Inter pairing is a contrast play, not a harmony. Eudoxus Sans 700–800 with tight tracking (-0.035em at display sizes) gives every heading a sculptural, almost pressed-letter quality — the kind of voice you see on a wine label or architecture monograph. Inter at 400–500 with looser tracking handles everything the user reads or clicks."

    info: "Rules for the pair:"
    - "Headlines never use Inter; UI never uses Eudoxus Sans."
    - "The transition point is 27–32px: at 27px and below use Inter; at 32px and above use Eudoxus Sans."
    - "Eudoxus Sans is always weight 700 or 800 — never lighter."
    - "Inter at 21px or 27px sub-heading sizes gets -0.011em tracking, which is enough to feel intentional without becoming display-style."

  similar_brands:

    - "**Linear** — Same warm off-white canvas and heavy display heading against a quiet, mostly-monochrome product frame"
    - "**Vercel** — Same approach of one dark CTA button per view with ghost secondaries, and the soft warm-gray shadow system beneath white cards"
    - "**Notion** — Same category-coded color washes on neutral surfaces, with deep muted hues rather than bright SaaS accents"
    - "**Pitch** — Same soft 20px card radii, Inter for body, custom display face for headlines, and a warm canvas that reads analog rather than digital"
    - "**Loom** — Same use of 3D character mascots as brand warmth, paired with a clean, generous white-and-warm-gray layout"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #171618;
          --color-pure-black: #000000;
          --color-paper-white: #ffffff;
          --color-warm-canvas: #f7f7f7;
          --color-mist-gray: #efefef;
          --color-stone-gray: #dadada;
          --color-pewter: #bababa;
          --color-iron: #727578;
          --color-lead: #8b8d8f;
          --color-pebble: #7d7d7d;
          --color-deep-teal: #004d60;
          --color-deep-violet: #38296c;
          --color-deep-amber: #6c4800;
          --color-deep-plum: #46122d;
          --color-deep-navy: #0f1c41;
          --color-deep-maroon: #663220;
          --color-deep-umber: #772914;
          --color-deep-indigo: #241a42;
          --color-burnt-sienna: #412e0a;
          --color-violet-wash: #f5f0ff;
          --color-teal-mist: #defafe;
          --color-amber-cream: #fff6e1;
          --color-apricot-wash: #fff1ec;
          --color-violet-veil: #e7e0fe;
          --color-sky-tint: #cfeff8;
          --color-honey-veil: #feedcc;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-eudoxus-sans: 'Eudoxus Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-karla: 'Karla', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 15px;
          --leading-body: 1.62;
          --tracking-body: -0.1px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.23px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -0.3px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.93px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.68px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -2.03px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
          --font-weight-extrabold: 800;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-28: 28px;
          --spacing-31: 31px;
          --spacing-32: 32px;
          --spacing-42: 42px;
          --spacing-66: 66px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 27px;
          --radius-3xl-3: 30px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-cards: 20px;
          --radius-badges: 100px;
          --radius-images: 12px;
          --radius-inputs: 20px;
          --radius-buttons: 8px;
          --radius-largesurfaces: 27px;
        
          /* Shadows */
          --shadow-md: rgba(239, 239, 239, 0.55) 0px 2px 15px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0.5px 0px 0px;
          --shadow-subtle-2: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 8px 16px 0px;
          --shadow-subtle-3: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 16px 16px 0px, rgba(23, 24, 26, 0.05) 0px 6px 12px 0px;
        
          /* Surfaces */
          --surface-warm-canvas: #f7f7f7;
          --surface-paper-white: #ffffff;
          --surface-tinted-wash: #f5f0ff;
          --surface-ink-overlay: #171618;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #171618;
          --color-pure-black: #000000;
          --color-paper-white: #ffffff;
          --color-warm-canvas: #f7f7f7;
          --color-mist-gray: #efefef;
          --color-stone-gray: #dadada;
          --color-pewter: #bababa;
          --color-iron: #727578;
          --color-lead: #8b8d8f;
          --color-pebble: #7d7d7d;
          --color-deep-teal: #004d60;
          --color-deep-violet: #38296c;
          --color-deep-amber: #6c4800;
          --color-deep-plum: #46122d;
          --color-deep-navy: #0f1c41;
          --color-deep-maroon: #663220;
          --color-deep-umber: #772914;
          --color-deep-indigo: #241a42;
          --color-burnt-sienna: #412e0a;
          --color-violet-wash: #f5f0ff;
          --color-teal-mist: #defafe;
          --color-amber-cream: #fff6e1;
          --color-apricot-wash: #fff1ec;
          --color-violet-veil: #e7e0fe;
          --color-sky-tint: #cfeff8;
          --color-honey-veil: #feedcc;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-eudoxus-sans: 'Eudoxus Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-karla: 'Karla', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 15px;
          --leading-body: 1.62;
          --tracking-body: -0.1px;
          --text-subheading: 21px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.23px;
          --text-heading-sm: 27px;
          --leading-heading-sm: 1.18;
          --tracking-heading-sm: -0.3px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: -0.93px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.05;
          --tracking-heading-lg: -1.68px;
          --text-display: 58px;
          --leading-display: 1;
          --tracking-display: -2.03px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-28: 28px;
          --spacing-31: 31px;
          --spacing-32: 32px;
          --spacing-42: 42px;
          --spacing-66: 66px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 3px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 27px;
          --radius-3xl-3: 30px;
          --radius-full: 48px;
          --radius-full-2: 100px;
        
          /* Shadows */
          --shadow-md: rgba(239, 239, 239, 0.55) 0px 2px 15px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0.5px 0px 0px;
          --shadow-subtle-2: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 8px 16px 0px;
          --shadow-subtle-3: rgba(23, 24, 26, 0.1) 0px 0px 0px 1px, rgba(23, 24, 26, 0.03) 0px 16px 16px 0px, rgba(23, 24, 26, 0.05) 0px 6px 12px 0px;
        }