paradigm___style_reference:
  info: "> midnight lab notebook opening to daylight — a dark first screen cracks into a bright, data-rich scroll."

  theme: "light"

  info: "Paradigm opens in a dark observatory atmosphere — near-black canvas, white serif display type, and a live data table that already proves the product — then dissolves into a daylight research interface of white paper, soft tinted surfaces, and pastel status badges. The signature move is the Atacama VAR serif at 44–54px with -0.06em tracking, paired against a workhorse PP Neue Montreal that carries the entire UI at 14–22px with tabular numerals. Color is rationed: one vivid blue (#0a33ff) punctuates the brand through active states and step indicators, status is communicated through six dark-ink + pastel-wash badge pairs (forest, sapphire, mulberry, amber, crimson, plum), and the rest of the system lives in carefully tuned warm and cool grays. Components feel like research instruments — 4px corners, hairline borders, a signature white inner-glow on product mockup cards, and almost no drop shadows."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#080b12` | `--color-midnight-ink` | Primary text, hero background, card borders, table rules — the structural near-black that anchors both dark and light regions |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page background, card surfaces, inverted button fill in dark hero |"
    info: "| Fog | `#f6f7f8` | `--color-fog` | Subtle surface lift for secondary panels, table zebra rows, input wells |"
    info: "| Pearl | `#edeef1` | `--color-pearl` | Quiet button backgrounds, nested surface tint |"
    info: "| Stone | `#d9d9d9` | `--color-stone` | Table column dividers, neutral hairline borders |"
    info: "| Lavender Mist | `#dbdbee` | `--color-lavender-mist` | Tinted table surface and the dominant data-grid border — a barely-violet line that sets the product interface apart from generic grays |"
    info: "| Mist | `#b5b9c4` | `--color-mist` | Light borders on secondary controls, list separators |"
    info: "| Pewter | `#9898ae` | `--color-pewter` | Medium cool border for outlined buttons and inputs |"
    info: "| Steel | `#848a9c` | `--color-steel` | Cool gray border used at extremely high frequency (392) — the workhorse rule-line color for structural divisions |"
    info: "| Smoke | `#acacae` | `--color-smoke` | Icon stroke and muted body text on light surfaces |"
    info: "| Ash | `#9d9ea1` | `--color-ash` | Muted icons, placeholder text, inactive controls |"
    info: "| Iron | `#606167` | `--color-iron` | Body text secondary level, icon stroke weight |"
    info: "| Graphite | `#6c6d73` | `--color-graphite` | Tertiary body text, supporting metadata |"
    info: "| Slate | `#4f535e` | `--color-slate` | Strong secondary borders, card outline emphasis, footer text |"
    info: "| Charcoal | `#2b2b2c` | `--color-charcoal` | Deep text for body emphasis on light backgrounds |"
    info: "| Electric Iris | `#0a33ff` | `--color-electric-iris` | Brand accent — active tab indicator, step pill, the Enrich action, selected row check, brand wordmark dot — the single chromatic punctuation across an otherwise neutral system |"
    info: "| Periwinkle | `#7f90ce` | `--color-periwinkle` | Muted action fill, secondary blue surfaces, desaturated hover state for the brand blue |"
    info: "| Hero Dawn | `linear-gradient(180deg, #010b18 0%, #010818 16%, #103b91 49%, #4c7de8 78%, #bad0ff 97%)` | `--color-hero-dawn` | Hero gradient terminus — the deepest point of the dark-to-light blue backdrop |"
    info: "| Sky Whisper | `#e2efff` | `--color-sky-whisper` | Info badge background wash |"
    info: "| Sapphire Ink | `#061353` | `--color-sapphire-ink` | Info badge dark text and border |"
    info: "| Mint Whisper | `#e4f3e2` | `--color-mint-whisper` | Success badge background wash |"
    info: "| Forest Ink | `#03350f` | `--color-forest-ink` | Green state accent for badges, validation surfaces, and short status labels. |"
    info: "| Sprout Whisper | `#d6ffe0` | `--color-sprout-whisper` | Light success badge alternative background |"
    info: "| Saffron Whisper | `#faeed1` | `--color-saffron-whisper` | Warning badge background wash |"
    info: "| Amber Ink | `#423301` | `--color-amber-ink` | Warning badge dark text and border |"
    info: "| Blossom Whisper | `#ffe6f7` | `--color-blossom-whisper` | Pink/magenta tag badge background — category label |"
    info: "| Mulberry Ink | `#600537` | `--color-mulberry-ink` | Pink/magenta tag badge dark text and border |"
    info: "| Plum Ink | `#21034d` | `--color-plum-ink` | Deep violet tag badge dark text and border — alternative category color |"
    info: "| Crimson Ink | `#580101` | `--color-crimson-ink` | Red state accent for badges, validation surfaces, and short status labels. |"
    info: "| Apricot Whisper | `#fee8dd` | `--color-apricot-whisper` | Orange/copper tag badge background |"
    info: "| Russet Ink | `#581c01` | `--color-russet-ink` | Orange/copper tag badge dark text and border |"

  tokens___typography:

    atacama_var___display_serif_for_all_section_and_hero_headlines_44px_and_above___the_editorial_weight_317_370_reads_as_research_journal_rather_than_marketing__and_the__0_06em_tracking_tightens_the_wide_capitals_into_a_confident_mass____font_atacama_var:
      - "**Substitute:** Tiempos Text, Lora, or Source Serif Pro"
      - "**Weights:** 317, 370, 400"
      - "**Sizes:** 44px, 48px, 54px"
      - "**Line height:** 1.0–1.2"
      - "**Letter spacing:** -0.06em at 44–48px, -0.05em at 54px"
      - "**Role:** Display serif for all section and hero headlines 44px and above — the editorial weight 317–370 reads as research-journal rather than marketing, and the -0.06em tracking tightens the wide capitals into a confident mass"

    pp_neue_montreal___workhorse_ui_font___body_copy__buttons__nav__badges__table_cells__and_pre_headline_labels__the_450_weight_a_rare_half_step_is_the_default_for_interactive_elements__sitting_between_regular_and_medium_for_restraint____font_pp_neue_montreal:
      - "**Substitute:** Inter, Söhne, or General Sans"
      - "**Weights:** 400, 450, 500"
      - "**Sizes:** 12px, 13px, 14px, 15px, 16px, 17px, 18px, 21px, 22px, 160px"
      - "**Line height:** 1.2–1.6"
      - "**Letter spacing:** -0.01em body, 0.14–0.15em on all-caps eyebrow labels (THE OLD WAY, WITH PARADIGM)"
      - "**OpenType features:** `\"tnum\" on, \"ss01\" off`"
      - "**Role:** Workhorse UI font — body copy, buttons, nav, badges, table cells, and pre-headline labels. The 450 weight (a rare half-step) is the default for interactive elements, sitting between regular and medium for restraint"

    inter___secondary_ui_text___tight_table_cells__micro_labels__and_dense_numerical_columns_where_pp_neue_montreal_is_swapped_for_the_slightly_narrower_inter_to_save_horizontal_space____font_inter:
      - "**Substitute:** Inter (already Google Fonts)"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 9px, 10px, 11px, 12px, 13px, 14px, 15px"
      - "**Line height:** 1.2–1.6"
      - "**Letter spacing:** -0.006em to -0.02em body, 0.02em eyebrow"
      - "**Role:** Secondary UI text — tight table cells, micro-labels, and dense numerical columns where PP Neue Montreal is swapped for the slightly narrower Inter to save horizontal space"

    suisse_intl___rarely_used_body_fallback__appears_in_micro_copy_where_0_08em_letter_spacing_creates_a_quiet_institutional_voice____font_suisse_intl:
      - "**Substitute:** Söhne or Inter"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** 0.0100em, 0.0800em"
      - "**Role:** Rarely used body fallback, appears in micro-copy where 0.08em letter-spacing creates a quiet institutional voice"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | -0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.4 | -0.18px | `--text-subheading` |"
      info: "| heading-sm | 21px | 1.3 | -0.21px | `--text-heading-sm` |"
      info: "| heading-lg | 44px | 1.1 | -2.64px | `--text-heading-lg` |"
      info: "| display | 54px | 1 | -2.7px | `--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: "| 9 | 9px | `--spacing-9` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 188 | 188px | `--spacing-188` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tabs | 100px |"
      info: "| cards | 4px |"
      info: "| badges | 4px |"
      info: "| buttons | 4px |"
      info: "| feature-cards | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgb(255, 255, 255) 0px 0px 24px 0px inset` | `--shadow-lg` |"
      info: "| subtle | `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(76, 120, 250, 0.14) 0px 0px 0px 3px` | `--shadow-subtle-3` |"
      info: "| xl | `rgba(0, 0, 0, 0.09) 0px 4px 40px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    dark_hero_section:
      role: "Opening viewport with product proof"

      info: "Full-bleed #080b12 background, 1200px inner content. Left-aligned: 54px Atacama VAR display headline in #ffffff, 18px PP Neue Montreal subhead in #4f535e-equivalent muted gray. Two CTAs side by side — white filled 'Request a demo →' and ghost 'Try now'. Below the fold, a tabs row (Deal Sourcing active) and the data table mockup bleeds edge-to-edge with a slight #dbdbee tint on the table surface."

    hero_primary_button:
      role: "Primary action in the dark hero"

      info: "Filled white (#ffffff) background, #080b12 text, 4px radius, weight 450 PP Neue Montreal at 14px, 8px vertical / 16px horizontal padding, optional right arrow (→). Tracking -0.01em. Sits against the dark hero so the inversion does the heavy lifting — no shadow, no border."

    hero_secondary_button:
      role: "Secondary action in the dark hero"

      info: "Transparent fill, #ffffff text, 4px radius, weight 450 PP Neue Montreal at 14px, 8px vertical / 16px horizontal padding. The lighter visual weight makes it read as the low-commitment companion to the filled primary."

    blue_accent_button:
      role: "Sole chromatic action in the system (Enrich, Step pills)"

      info: "Filled #0a33ff background, #ffffff text, 4px radius, weight 500 PP Neue Montreal at 13–14px, 6px vertical / 12px horizontal padding. Used for the 'Enrich' action on data tables and the active step indicator. Restrict to one per surface — this is the system's only saturated fill."

    section_heading:
      role: "Display heading on light body sections"

      info: "Atacama VAR weight 317–370 at 44–54px, color #080b12, letter-spacing -0.06em to -0.05em, line-height 1.0–1.1. The unusually light weight for such a large size is the anti-convention choice — most sites use 600–700 here, the whisper-weight creates authority through restraint."

    eyebrow_label:
      role: "All-caps pre-headline label above section titles"

      info: "PP Neue Montreal weight 500, 12px, letter-spacing 0.14em, color #6c6d73. Sits 16–24px above the section heading, creating a two-step vertical entry into each section."

    problem_list_item:
      role: "X-marked list in 'The Old Way' section"

      info: "Thin gray X glyph in #848a9c, 16px PP Neue Montreal body 400 in #2b2b2c, 8px vertical gap between items. The cross icon is rendered as a simple SVG, not emoji — stroke weight ~1.5px."

    solution_list_item:
      role: "Checkmarked list in 'With Paradigm' section"

      info: "Check glyph in #0a33ff, 16px PP Neue Montreal body 400 in #2b2c2c, 8px vertical gap. The shift from gray X to blue ✓ is the entire visual argument of the section."

    category_tag_badge:
      role: "Inline categorization label in data tables"

      info: "4px radius, 2px vertical / 8px horizontal padding. Background is a light pastel wash (#ffe6f7, #e2efff, #e4f3e2, #faeed1) and text+border is the matching dark ink (#600537, #061353, #03350f, #423301). 12px PP Neue Montreal 500. The two-color badge (dark text on pastel fill) is the only color-expression channel in the system."

    status_fit_pill:
      role: "Deal fit indicator (Highest / High / Low)"

      info: "4px radius, 4px vertical / 8px horizontal padding, 12px PP Neue Montreal 500. 'Highest' and 'High' use the Forest Ink (#03350f) text on a soft border; 'Low' uses Crimson Ink (#580101). The pill is intentionally quieter than a full badge — it sits inline in a dense data row."

    tabs_row:
      role: "Category navigation above the data table"

      info: "100px radius pills on a transparent bar. Inactive tab: 14px PP Neue Montreal 450 in #6c6d73 with a 1px #b5b9c4 hairline border. Active tab: same dimensions but #080b12 text with a #080b12 1px border and a white #ffffff fill background. The pill shape is the only break from the system's 4px geometry."

    data_table:
      role: "Primary product interface"

      info: "Full-width table on #ffffff surface with #dbdbee 1px row dividers (46+ uses confirm this is the intentional tinted rule). Header row in 13px PP Neue Montreal 500 #6c6d73, body cells in 14px 400 #080b12 with tabular numerals (tnum). Row height ~44px, cell padding 9–12px vertical. First column uses a #0a33ff square checkbox in the selected row."

    step_indicator:
      role: "Sequential step pills in 'Encode your best thinking' section"

      100px_radius__active_step: "filled #0a33ff with #ffffff 'Step 1' label. Inactive steps: #ffffff fill with 1px #b5b9c4 border and #2b2b2c text. 13px PP Neue Montreal 500, 6px vertical / 12px horizontal padding. The active state is the only place outside the hero where #0a33ff appears as a fill."

    product_mockup_card:
      role: "Screenshot of the product embedded in body sections"

ffffff_surface__4px_radius__the_signature_elevation__rgb255_255_255_0_0_24px_inset___a_white_inner_glow_that_makes_the_card_appear_to_sit_on_a_soft_light_source_from_within__often_paired_with_the_135deg_subtle_blue_gradient_rgb123_149_196___rgb223_236_255_as_the_card_backdrop__giving_product_mockups_a_frosted_screen_quality:

    trust_logo_bar:
      role: "Social proof strip of client logos"

      info: "Light #f6f7f8 band, centered. Eyebrow text 'Trusted by 10,000+ decision makers...' in 14px PP Neue Montreal 400 #6c6d73. Logos are monochrome #080b12, rendered at uniform ~24px height, spaced 64–80px apart in a single horizontal row."

  do_s_and_don_ts:

    do:
      - "Use Atacama VAR for every display heading 44px and above at weight 317–370 with -0.06em tracking — the whisper-weight serif is the system's defining typographic choice"
      - "Use 4px border-radius on all buttons, cards, badges, and inputs; reserve 100px only for tabs and step pills"
      - "Pair every status badge as a dark saturated text + matching 1px border on a light pastel wash — never invert this (no dark fills with light text)"
      - "Apply the white 24px inner-glow (rgb(255,255,255) 0 0 24px inset) on any product mockup card — this is the signature elevation"
      - "Enable tabular numerals (tnum) on PP Neue Montreal for all numeric data in tables and stat blocks"
      - "Use #0a33ff sparingly — one accent per surface, only on the Enrich action, active tab, active step, and selected row check"
      - "Use letter-spacing 0.14–0.15em on all 12px PP Neue Montreal 500 eyebrow labels above section headings"

    don_t:
      - "Don't use rounded pill buttons on cards or actions — 4px corners are the system geometry, pills are reserved for tabs and step indicators"
      - "Don't use drop shadows for depth — depth comes from the white inner-glow and the blue 135deg gradient backdrop, not from elevation"
      - "Don't use #0a33ff as a filled CTA background on landing sections — reserve it for in-product actions and active states only"
      - "Don't use emoji or filled multicolor icons — icons are thin-stroke outlined SVGs in #080b12 or #6c6d73"
      - "Don't center-align body text or section content — the layout rhythm is left-aligned with an asymmetric image companion"
      - "Don't introduce new saturated colors — the only chromatic channels are #0a33ff and the six dark-ink badge colors; everything else stays in warm and cool grays"
      - "Don't use auto-animation or scroll-triggered effects — the system has no motion personality and relies on static composition"
      - "Don't set display headings in PP Neue Montreal or Inter — the Atacama VAR serif is mandatory for any text 44px or larger"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Default page background and primary card surface |"
    info: "| 1 | Fog | `#f6f7f8` | Quiet lift for trust bars, footer bands, and secondary panels |"
    info: "| 2 | Lavender Mist | `#dbdbee` | Tinted surface for the data table interior — the barely-violet tint signals 'this is a data environment' without being decorative |"
    info: "| 3 | Midnight | `#080b12` | Hero and dark section backgrounds — anchors the system's most dramatic moments |"

  elevation:

    - "**Product Mockup Card:** `rgb(255, 255, 255) 0px 0px 24px 0px inset`"
    - "**Standard Card:** `rgba(0, 0, 0, 0.06) 0px 1px 3px 0px`"
    - "**Badge:** `rgba(0, 0, 0, 0.04) 0px 1px 3px 0px`"
    - "**Focus Ring:** `rgba(76, 120, 250, 0.14) 0px 0px 0px 3px`"
    - "**Elevated Feature Card:** `rgba(0, 0, 0, 0.09) 0px 4px 40px 0px`"

  imagery:

    info: "Imagery is product-led, not lifestyle. The page embeds actual screenshots of the data table and enriched company profile inside card frames, with the signature white inner-glow making them feel like frosted screens. No photography of people, no abstract 3D renders, no stock illustrations. The brand mark is a small dark square with a centered glyph. Icons throughout are thin-stroke outlined SVGs (stroke weight ~1.5px), monochrome in #080b12 or #6c6d73. Trust logos are rendered as monochrome vector marks in #080b12. Visual density is low — text and data structures carry the page, with imagery playing a supporting evidence role rather than a decorative one."

  layout:

    info: "The page uses a max-width 1200px contained layout with sections separated by 80px vertical gaps. The hero is full-bleed #080b12 with left-aligned content (headline left, subhead and CTAs below), transitioning via a tabbed data table that bleeds edge-to-edge. Body sections follow a strict alternating rhythm: text-left/image-right ('The Old Way') then image-left/text-right ('With Paradigm'), each anchored by a 44–54px Atacama VAR heading, a 12px all-caps eyebrow above, and 4 short list items below. The trust logo bar is a centered single row on a #f6f7f8 band. The step section is a centered headline over a horizontal row of three step pills. Navigation is a minimal top bar: brand mark left, four nav items center, 'Log in' text and 'Request a demo' outlined button right. The entire system is grid-disciplined — no masonry, no overlapping panels, no asymmetric experimental compositions."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #080b12"
    - "background: #ffffff"
    - "surface tint: #f6f7f8"
    - "border (table/data): #dbdbee"
    - "border (neutral): #b5b9c4"
    - "accent: #0a33ff"
    - "primary action: #7f90ce (filled action)"

    3_5_example_component_prompts:

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

    - "**Data Table Row** — Full-width table on #ffffff, 1px #dbdbee row dividers, ~44px row height, 12px cell padding vertical. Header: 13px PP Neue Montreal weight 500, #6c6d73, tnum enabled. Body cell: 14px weight 400, #080b12. Status cell uses a 4px-radius pill: 4px 8px padding, 12px weight 500, Forest Ink #03350f text with 1px #03350f border for 'Highest'/'High', Crimson Ink #580101 for 'Low'. Right-edge cell holds a filled #0a33ff Enrich button: 4px radius, 6px 12px padding, 13px weight 500, #ffffff text."

    - "**Section with Eyebrow + Heading + Checklist** — Light #ffffff background, max-width 1200px. Eyebrow: 12px PP Neue Montreal weight 500, letter-spacing 0.14em, #6c6d73, 24px below sits a 48px Atacama VAR weight 370 heading in #080b12, letter-spacing -2.88px, line-height 1.1. Below: 4 list items with 8px row gap, each 16px PP Neue Montreal weight 400 in #2b2b2c. List marker is an SVG check in #0a33ff (stroke 1.5px) for solution sections, or a thin X in #848a9c for problem sections."

    - "**Product Mockup Card** — 4px radius, #ffffff surface, shadow stack: rgb(255,255,255) 0 0 24px inset (signature inner glow). Optional backdrop uses linear-gradient(135deg, #7b95c4, #dfecff) at low opacity. Card holds a product screenshot filling the interior with 16px inset padding around it. To the right or left of the card, a 44px Atacama VAR section heading and 4-item check list, separated by 64px horizontal gap."

    - "**Trust Logo Bar** — #f6f7f8 full-width band, 48px vertical padding. Center-aligned eyebrow: 14px PP Neue Montreal weight 400, #6c6d73. Single horizontal row of 5 logos below, each rendered as monochrome #080b12 SVG at uniform 24px height, 72px column gap between logos, centered as a group."

  similar_brands:

    - "**Linear** — Same dark-hero-into-light-body structure, 4px geometry, hairline borders, and single-accent-color discipline"
    - "**Retool** — Data-table-dense interfaces with tabular numerals and pastel status badges for row-level categorization"
    - "**Anthropic** — Editorial serif display headings paired against a workhorse sans, the research-publication voice in a product interface"
    - "**Vercel** — Restrained neutral palette with one vivid accent, sharp 4px corners, and a preference for inner glow over drop shadow"
    - "**Notion** — Comfortable light density, #f6f7f8 quiet surfaces, and minimal decorative chrome — content and tables are the design"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #080b12;
          --color-paper: #ffffff;
          --color-fog: #f6f7f8;
          --color-pearl: #edeef1;
          --color-stone: #d9d9d9;
          --color-lavender-mist: #dbdbee;
          --color-mist: #b5b9c4;
          --color-pewter: #9898ae;
          --color-steel: #848a9c;
          --color-smoke: #acacae;
          --color-ash: #9d9ea1;
          --color-iron: #606167;
          --color-graphite: #6c6d73;
          --color-slate: #4f535e;
          --color-charcoal: #2b2b2c;
          --color-electric-iris: #0a33ff;
          --color-periwinkle: #7f90ce;
          --color-hero-dawn: #010b18;
          --gradient-hero-dawn: linear-gradient(180deg, #010b18 0%, #010818 16%, #103b91 49%, #4c7de8 78%, #bad0ff 97%);
          --color-sky-whisper: #e2efff;
          --color-sapphire-ink: #061353;
          --color-mint-whisper: #e4f3e2;
          --color-forest-ink: #03350f;
          --color-sprout-whisper: #d6ffe0;
          --color-saffron-whisper: #faeed1;
          --color-amber-ink: #423301;
          --color-blossom-whisper: #ffe6f7;
          --color-mulberry-ink: #600537;
          --color-plum-ink: #21034d;
          --color-crimson-ink: #580101;
          --color-apricot-whisper: #fee8dd;
          --color-russet-ink: #581c01;
        
          /* Typography — Font Families */
          --font-atacama-var: 'Atacama VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.21px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.64px;
          --text-display: 54px;
          --leading-display: 1;
          --tracking-display: -2.7px;
        
          /* Typography — Weights */
          --font-weight-w317: 317;
          --font-weight-w370: 370;
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-188: 188px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-tabs: 100px;
          --radius-cards: 4px;
          --radius-badges: 4px;
          --radius-buttons: 4px;
          --radius-feature-cards: 16px;
        
          /* Shadows */
          --shadow-lg: rgb(255, 255, 255) 0px 0px 24px 0px inset;
          --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
          --shadow-subtle-3: rgba(76, 120, 250, 0.14) 0px 0px 0px 3px;
          --shadow-xl: rgba(0, 0, 0, 0.09) 0px 4px 40px 0px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-fog: #f6f7f8;
          --surface-lavender-mist: #dbdbee;
          --surface-midnight: #080b12;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #080b12;
          --color-paper: #ffffff;
          --color-fog: #f6f7f8;
          --color-pearl: #edeef1;
          --color-stone: #d9d9d9;
          --color-lavender-mist: #dbdbee;
          --color-mist: #b5b9c4;
          --color-pewter: #9898ae;
          --color-steel: #848a9c;
          --color-smoke: #acacae;
          --color-ash: #9d9ea1;
          --color-iron: #606167;
          --color-graphite: #6c6d73;
          --color-slate: #4f535e;
          --color-charcoal: #2b2b2c;
          --color-electric-iris: #0a33ff;
          --color-periwinkle: #7f90ce;
          --color-hero-dawn: #010b18;
          --color-sky-whisper: #e2efff;
          --color-sapphire-ink: #061353;
          --color-mint-whisper: #e4f3e2;
          --color-forest-ink: #03350f;
          --color-sprout-whisper: #d6ffe0;
          --color-saffron-whisper: #faeed1;
          --color-amber-ink: #423301;
          --color-blossom-whisper: #ffe6f7;
          --color-mulberry-ink: #600537;
          --color-plum-ink: #21034d;
          --color-crimson-ink: #580101;
          --color-apricot-whisper: #fee8dd;
          --color-russet-ink: #581c01;
        
          /* Typography */
          --font-atacama-var: 'Atacama VAR', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-pp-neue-montreal: 'PP Neue Montreal', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.14px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.18px;
          --text-heading-sm: 21px;
          --leading-heading-sm: 1.3;
          --tracking-heading-sm: -0.21px;
          --text-heading-lg: 44px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -2.64px;
          --text-display: 54px;
          --leading-display: 1;
          --tracking-display: -2.7px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-9: 9px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-120: 120px;
          --spacing-188: 188px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-lg: rgb(255, 255, 255) 0px 0px 24px 0px inset;
          --shadow-subtle: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px;
          --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 3px 0px;
          --shadow-subtle-3: rgba(76, 120, 250, 0.14) 0px 0px 0px 3px;
          --shadow-xl: rgba(0, 0, 0, 0.09) 0px 4px 40px 0px;
        }