authkit___style_reference:
  info: "> blueprint on midnight glass"

  theme: "dark"

  info: "AuthKit operates in a midnight blueprint language: near-black canvas, cool blue-gray typography, and a single electric iris purple that marks the only thing you can press. Surfaces are matte and flat — no glossy gradients, no heavy drop shadows — instead, a constellation of soft blue glows (rgba(186, 207, 247, 0.32)) and hairline 1px inset strokes suggest an interface drawn in light on dark paper. Typography is restrained and confident: a geometric workhorse (Untitled Sans) handles everything from 12px captions to 24px section titles, while a wider display face (aeonikPro) introduces hero and section headlines. Almost all decorative color lives in the shadows themselves, not in fills — the result reads as technical, precise, and quietly luminous rather than colorful."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#05060f` | `--color-midnight-ink` | Page canvas and primary surface — the near-black ground everything else is drawn onto. Slight cool tint keeps it from feeling truly black, giving a blueprint-paper quality |"
    info: "| Graphite Plate | `#2f343e` | `--color-graphite-plate` | Elevated card and panel surface — one step above canvas, used for previewed UI mockups and form containers. Matte, never glossy |"
    info: "| Steel Border | `#3f4959` | `--color-steel-border` | Hairline borders, dividers, and muted structural lines between UI elements |"
    info: "| Fog | `#81899b` | `--color-fog` | De-emphasized helper text and secondary metadata that should recede behind primary content |"
    info: "| Pebble | `#9da7ba` | `--color-pebble` | Muted body text and disabled-state labels — readable but clearly secondary |"
    info: "| Moonlight | `#c7d3ea` | `--color-moonlight` | Primary body and icon color — cool off-white that carries the interface's default voice |"
    info: "| Ice | `#d1e4fa` | `--color-ice` | Highlighted body text, strong secondary labels, and badge content where extra presence is needed without going full white |"
    info: "| Glacier | `#d8ecf8` | `--color-glacier` | Headings, link text, and section titles — the brightest readable text, used to anchor the eye on the most important strings |"
    info: "| Frost Link | `#b6d9fc` | `--color-frost-link` | Active link states and glow-infused accent text where a clear blue signal is required |"
    info: "| Electric Iris | `#663af3` | `--color-electric-iris` | Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ember | `#e46d4c` | `--color-ember` | Alternative brand accent for live-preview or demo CTAs where a warm contrast is needed against the cool palette |"
    info: "| Azure | `#027dea` | `--color-azure` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Cipher Mint | `#269684` | `--color-cipher-mint` | Teal supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Blueprint Glow | `linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%)` | `--color-blueprint-glow` | Soft highlight gradient endpoint — appears in the vertical text gradient (Glacier → Frost Link) and as the top stop in hero light gradients |"

  tokens___typography:

    untitled_sans___workhorse_ui_and_body_face__carries_everything_from_12px_captions_to_24px_section_titles__weight_400_is_default_body__500_for_emphasis__600_700_for_button_labels_and_form_controls__slight_negative_tracking__0_01em_tightens_the_dark_mode_rhythm_____font_untitled_sans:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12, 14, 16, 18, 24"
      - "**Line height:** 1.17, 1.20, 1.33, 1.43, 1.50"
      - "**Letter spacing:** -0.01em"
      - "**Role:** Workhorse UI and body face. Carries everything from 12px captions to 24px section titles; weight 400 is default body, 500 for emphasis, 600–700 for button labels and form controls. Slight negative tracking (-0.01em) tightens the dark-mode rhythm."

    aeonikpro___display_and_hero_only_face__used_for_the__authkit__wordmark_and_large_section_headlines_at_44_48px__wider_proportions_and_a_cleaner_geometric_skeleton_give_the_brand_a_distinctive_presence_that_untitled_sans_cannot_supply_at_scale__normal_tracking_____font_aeonikpro:
      - "**Substitute:** Aeonik"
      - "**Weights:** 400, 500"
      - "**Sizes:** 28, 44, 48"
      - "**Line height:** 1.14, 1.16, 1.17, 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Display and hero-only face. Used for the 'AuthKit' wordmark and large section headlines at 44–48px. Wider proportions and a cleaner geometric skeleton give the brand a distinctive presence that Untitled Sans cannot supply at scale. Normal tracking."

    dotdigital___eyebrow_and_label_only_face_at_15px__the_wide_0_1em_tracking_and_tabular_numerals__tnum__mark_these_as_quiet_structural_markers____introducing___shine_bright___extensible_by_design____that_precede_headlines__never_used_for_body_copy_____font_dotdigital:
      - "**Substitute:** JetBrains Mono"
      - "**Weights:** 400"
      - "**Sizes:** 15"
      - "**Line height:** 1.20"
      - "**Letter spacing:** 0.1em"
      - "**OpenType features:** `\"tnum\"`"
      - "**Role:** Eyebrow and label-only face at 15px. The wide 0.1em tracking and tabular numerals ('tnum') mark these as quiet structural markers — 'Introducing', 'Shine bright', 'Extensible by design' — that precede headlines. Never used for body copy."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.01px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.01px | `--text-body` |"
      info: "| subheading | 18px | 1.33 | -0.01px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.2 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 28px | 1.17 | — | `--text-heading` |"
      info: "| display | 48px | 1.14 | — | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 10-16px |"
      info: "| pills | 999px |"
      info: "| badges | 6px |"
      info: "| inputs | 2px |"
      info: "| buttons | 2px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(186, 207, 247, 0.32) 0px 0px 6px 0px` | `--shadow-sm` |"
      info: "| md | `rgba(238, 186, 247, 0.24) 0px 0px 12px 0px` | `--shadow-md` |"
      info: "| subtle | `rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| subtle-2 | `rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgb...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168,...` | `--shadow-subtle-7` |"

    layout:

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

  components:

    primary_cta_button_electric_iris:
      role: "Filled action button for the single most important action on a page."

      info: "Background #663af3, text #ffffff, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px, line-height 1.5. Sits flat — no drop shadow, relying on the saturated fill against Midnight Ink for emphasis. Used at most once per viewport."

    ghost_button:
      role: "Secondary actions that should not compete with the primary CTA."

      info: "Transparent background with 1px inset hairline rgba(186, 215, 247, 0.06), text #c7d3ea, radius 2px, padding 10px 16px. Untitled Sans weight 500, 16px. The hairline stroke gives presence without adding luminance."

    pill_navigation_button:
      role: "Top-bar and inline navigation links."

      info: "Radius 999px, background transparent or subtle Moonlight tint on hover. Text 14px Untitled Sans weight 400–500, #c7d3ea. Pairs with the sharp 2px form buttons to create a clear primary/pill button pairing."

    sign_in_form_card:
      role: "Product preview card showing AuthKit's sign-in widget embedded in marketing."

      info: "Background #2f343 with card elevation stack (inset highlights + near-black drop shadow). Radius 10px. Contains email input (2px radius, 1px Steel Border), Continue button (Electric Iris), and social provider buttons (Microsoft, Google) in ghost style. Padding 24px."

    eyebrow_label:
      role: "Small structural marker above a headline — 'Introducing', 'Shine bright', 'Extensible by design'."

      info: "dotDigital 15px, weight 400, letter-spacing 0.1em, line-height 1.20. Text color #81899b. The wide tracking and tabular figures are the system's quietest brand signal — it telegraphs 'this is a structural label, not content'."

    section_heading:
      role: "Mid-tier section titles — 'Your users. Your data. Maximum flexibility.'"

      info: "aeonikPro 44–48px, weight 400–500, line-height 1.14–1.16, normal tracking. Color #d8ecf8 (Glacier) on Midnight Ink. The combination of a display face at near-regular weight and a cool off-white gives the headline architectural weight without shouting."

    feature_icon_tile:
      role: "Single sign-on, password, MFA, social login, RBAC, and magic auth feature row entries."

      info: "Square ~40px icon container in Graphite Plate (#2f343e) with 6px radius. Icon stroke is Moonlight (#c7d3ea), 1.5px. Label below in Untitled Sans 12–14px weight 400, color #81899b. Arrows between tiles are 1px Moonlight lines with a subtle 186/207/247 glow."

    theme_toggle_pill:
      role: "Light/dark mode switcher shown above the feature row."

      info: "Pill 999px radius, background #2f343e. Two icon segments (moon/sun) in Moonlight. Caption below in Untitled Sans 14px, #81899b."

    customization_annotation_chip:
      role: "Small labeled callouts pointing at parts of a UI mockup — 'Colour', 'Logo icon', 'Page background', 'Button text', 'Preferred appearance: System / Light / Dark'."

      info: "Radius 6–10px, background #2f343 with 1px inset rgba(186, 215, 247, 0.12) hairline. Text 12px Untitled Sans weight 500, #c7d3ea. Connected to the target element with a faint blue guideline. Sits floating around the previewed sign-in card."

    brand_colour_swatch:
      role: "Row of small colored squares inside the Colour annotation chip."

      info: "Four 12px squares, 2px radius, filled with Electric Iris, Ember, Azure, and Cipher Mint. Communicates the customizable brand color slots AuthKit offers."

    background_grid_overlay:
      role: "Faint architectural grid visible on the Midnight Ink canvas behind the hero."

      info: "1px lines in rgba(186, 215, 247, 0.04) forming a ~40px square grid. Plus a radial blue glow at the top center using the Blueprint Glow palette, and thin conic gradient borders around the hero frame. The grid is the 'blueprint' in the north star — it makes the page feel drafted, not designed."

    hero_wordmark_lockup:
      role: "Centered 'AuthKit' display headline with eyebrow above and subtitle below."

      eyebrow: "dotDigital 15px, 0.1em tracking, #81899b, flanked by short horizontal rules. Wordmark: aeonikPro 48px weight 500, #ffffff, line-height 1.14. Subtitle: Untitled Sans 18px weight 400, #9da7ba. Vertical rhythm roughly 16px / 24px / 16px."

    conic_border_frame:
      role: "Thin glowing border that frames the hero section and the customization mockup."

      info: "1px conic gradient at 50% -5% with stops transparent → rgba(124, 145, 182, 0.3) → 0.5 → 0.3 → transparent. Renders as a subtle arc of cool light at the top of the frame, hinting at an illuminated source above the viewport."

  do_s_and_don_ts:

    do:
      - "Use Midnight Ink #05060f as the sole page background — never introduce a second canvas color."
      - "Restrict the Electric Iris #663af3 fill to a single primary CTA per viewport; everything else is ghost, outlined, or neutral."
      - "Reach for the aeonikPro 48px / weight 500 / line-height 1.14 pairing for any headline that introduces a new section."
      - "Mark all structural eyebrows with dotDigital 15px / 0.1em tracking / 'tnum' tabular figures, never with Untitled Sans."
      - "Build elevation from blue-tinted inset hairlines (rgba(186, 215, 247, 0.12)) and 96px inner glows, not from drop shadows."
      - "Pair form controls (buttons, inputs) at 2px radius with cards at 10–16px and pills at 999px to maintain the sharp-to-soft hierarchy."
      - "Set section gap to 120px and keep hero-to-section transitions centered on a single vertical axis."

    don_t:
      - "Do not place saturated color on any element other than a primary or alternative-action button — no colored cards, banners, or backgrounds."
      - "Do not use traditional colored drop shadows; shadows stay near-black or cool-blue, never warm."
      - "Do not mix more than three typefaces on a single screen — Untitled Sans, aeonikPro, and dotDigital is the complete set."
      - "Do not round buttons to anything other than 2px; pill-shaped action buttons break the sharp-utility rhythm."
      - "Do not introduce a second brand color for a primary CTA — Electric Iris is the only first-class action color."
      - "Do not use Untitled Sans at display sizes (28px+) when aeonikPro is available; the display face is reserved for headlines and the wordmark."
      - "Do not place text below Glacier #d8ecf8 in luminance for headings — body can drop to Pebble/Fog, but titles must stay bright."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#05060f` | Page background — near-black with faint grid overlay. |"
    info: "| 1 | Plate | `#2f343` | Card and previewed-UI surface, one shade lifted off canvas. |"
    info: "| 2 | Iris Lift | `#663af3` | Filled action surface — the only chromatic surface in the system. |"

  elevation:

    - "**Glow accent (icons, highlights):** `0px 0px 6px 0px rgba(186, 207, 247, 0.32)`"
    - "**Ambient glow (secondary highlights):** `0px 0px 12px 0px rgba(238, 186, 247, 0.24)`"
    - "**Hairline inset (links, buttons, outlines):** `inset 0px 0px 0px 1px rgba(186, 215, 247, 0.12)`"
    - "**Card elevation:** `inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12), inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05), 0px 24px 32px 0px rgba(6, 6, 14, 0.7)`"

  imagery:

    info: "No photography, no illustration, no product screenshots of third-party apps. The visual language is pure UI-on-canvas: sign-in widget previews rendered in CSS, icon glyphs drawn as 1.5px Moonlight strokes, and a faint architectural grid behind everything. The sign-in cards themselves are the imagery — they are the product shown inside the product page. Iconography is monochrome outlined with consistent 1.5px stroke weight, sitting in square Graphite Plate tiles. The only non-UI visual element is the Blueprint Glow gradient that washes the top of the hero, creating a sense of light falling onto the dark canvas."

  layout:

    info: "Centered, single-column hero anchored to a max-width of 1200px on a full-bleed Midnight Ink canvas. The hero stacks vertically: eyebrow → wordmark → subtitle → preview card, with the sign-in widget slightly oversized and centered, overlapping a faint background grid. Below the hero, content flows in centered max-width bands separated by 120px gaps, each with an eyebrow + heading + supporting text + a single visual (a feature row of icon tiles, or a full-width previewed UI mockup with annotation chips). The page never uses two-column text+image splits; it always centers. Navigation is a minimal top bar: brand wordmark left, single pill 'Get started' button right, with a small GitHub icon between them. No sidebar, no mega-menu, no sticky chrome beyond the nav."

  agent_prompt_guide:

  quick_color_reference:
    - "text primary: #ffffff"
    - "text heading: #d8ecf8 (Glacier)"
    - "text body: #c7d3ea (Moonlight)"
    - "text muted: #81899b (Fog)"
    - "background: #05060f (Midnight Ink)"
    - "surface: #2f343e (Graphite Plate)"
    - "border: #3f4959 (Steel)"
    - "accent: #b6d9fc (Frost Link)"
    - "primary action: no distinct CTA color"

  3_5_example_component_prompts:

    hero_section: ": Midnight Ink #05060f background with a faint 1px Blueprint Glow grid. Eyebrow in dotDigital 15px / 0.1em tracking / #81899b, reading 'Introducing'. Wordmark in aeonikPro 48px / weight 500 / #ffffff / line-height 1.14. Subtitle in Untitled Sans 18px / weight 400 / #9da7ba. A centered 2px-radius Electric Iris #663af3 'Get started' button sits below. Top of hero carries a conic gradient border in rgba(124, 145, 182, 0.5)."

    sign_in_widget_preview_card: ": Graphite Plate #2f343e background, 10px radius, 24px padding. Card elevation stack: inset 0px 1px 1px 0px rgba(199, 211, 234, 0.12) + inset 0px 24px 48px 0px rgba(199, 211, 234, 0.05) + 0px 24px 32px 0px rgba(6, 6, 14, 0.7). Email input with 2px radius, 1px Steel Border #3f4959, 14px Untitled Sans placeholder. Primary 'Continue' button: 2px radius, Electric Iris #663af3, white text, 10px 16px padding. Two ghost social buttons below in Moonlight #c7d3ea with the same 2px hairline."

    feature_icon_row: ": Six 40px square Graphite Plate #2f343e tiles with 6px radius, each containing a 1.5px-stroke Moonlight #c7d3ea outlined icon. Labels below in Untitled Sans 12–14px / weight 400 / #81899b. Tiles connected by 1px Moonlight lines with a 6px rgba(186, 207, 247, 0.32) glow."

    theme_toggle_pill: ": 999px radius pill, Graphite Plate #2f343e fill, 6px padding. Two 14px icon segments (moon and sun) in Moonlight #c7d3ea, active segment slightly brightened to Glacier #d8ecf8. Caption 'Light and dark modes supported.' below in Untitled Sans 14px / #81899b."

    customization_annotation_chip: ": 10px radius, Graphite Plate #2f343e fill, 1px inset rgba(186, 215, 247, 0.12) hairline. Label in Untitled Sans 12px / weight 500 / #c7d3ea. Connects to its target element with a 1px Moonlight guideline. Inside the Colour chip, four 12px squares at 2px radius filled with Electric Iris #663af3, Ember #e46d4c, Azure #027dea, and Cipher Mint #269684."

  similar_brands:

    - "**Linear** — Same midnight-canvas + single saturated accent + thin-stroke outlined iconography + tight geometric sans display face."
    - "**Vercel** — Dark blueprint aesthetic with a single vivid accent (their orange replaces AuthKit's iris), centered max-width hero, and product previews rendered as CSS rather than screenshots."
    - "**Clerk** — Auth-adjacent developer tool with embedded sign-in widget previews on a dark canvas, a cool off-white type system, and a single chromatic action color."
    - "**Resend** — Cool blue-gray dark palette, restrained color use, and centered single-column hero with a faint background pattern that frames the wordmark."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #05060f;
          --color-graphite-plate: #2f343e;
          --color-steel-border: #3f4959;
          --color-fog: #81899b;
          --color-pebble: #9da7ba;
          --color-moonlight: #c7d3ea;
          --color-ice: #d1e4fa;
          --color-glacier: #d8ecf8;
          --color-frost-link: #b6d9fc;
          --color-electric-iris: #663af3;
          --color-ember: #e46d4c;
          --color-azure: #027dea;
          --color-cipher-mint: #269684;
          --color-blueprint-glow: #bacff7;
          --gradient-blueprint-glow: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
        
          /* Typography — Font Families */
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dotdigital: 'dotDigital', 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.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.01px;
          --text-heading: 28px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 120px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 999px;
          --radius-full-2: 4999.5px;
          --radius-full-3: 9999px;
        
          /* Named Radii */
          --radius-cards: 10-16px;
          --radius-pills: 999px;
          --radius-badges: 6px;
          --radius-inputs: 2px;
          --radius-buttons: 2px;
        
          /* Shadows */
          --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
          --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
          --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
          --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
          --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #05060f;
          --surface-plate: #2f343;
          --surface-iris-lift: #663af3;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #05060f;
          --color-graphite-plate: #2f343e;
          --color-steel-border: #3f4959;
          --color-fog: #81899b;
          --color-pebble: #9da7ba;
          --color-moonlight: #c7d3ea;
          --color-ice: #d1e4fa;
          --color-glacier: #d8ecf8;
          --color-frost-link: #b6d9fc;
          --color-electric-iris: #663af3;
          --color-ember: #e46d4c;
          --color-azure: #027dea;
          --color-cipher-mint: #269684;
          --color-blueprint-glow: #bacff7;
        
          /* Typography */
          --font-untitled-sans: 'Untitled Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aeonikpro: 'aeonikPro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dotdigital: 'dotDigital', 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.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.01px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.01px;
          --text-subheading: 18px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.01px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.01px;
          --text-heading: 28px;
          --leading-heading: 1.17;
          --text-display: 48px;
          --leading-display: 1.14;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-md: 6px;
          --radius-lg: 10px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 999px;
          --radius-full-2: 4999.5px;
          --radius-full-3: 9999px;
        
          /* Shadows */
          --shadow-sm: rgba(186, 207, 247, 0.32) 0px 0px 6px 0px;
          --shadow-md: rgba(238, 186, 247, 0.24) 0px 0px 12px 0px;
          --shadow-subtle: rgba(186, 215, 247, 0.12) 0px 0px 0px 1px inset;
          --shadow-subtle-2: rgba(199, 211, 234, 0.12) -0.5px 0.5px 1px 0px inset, rgba(186, 215, 247, 0.08) 0px 0px 96px 0px inset;
          --shadow-subtle-3: rgba(186, 214, 247, 0.06) 0px 0px 0px 1px inset;
          --shadow-subtle-4: rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
          --shadow-subtle-6: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px;
          --shadow-subtle-7: rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset;
        }