/* frag-extra.css — supplemental utilities for hand-authored docs fragments.
   app.css is a purged Tailwind v4 build: it only contains the utility classes the
   real app actually uses. The design *variables* (oklch colors, spacing, radii) all
   exist in :root, but some common utility classes were never generated. This file
   fills exactly those gaps, reusing the app's own variables so colors match 1:1.
   Only classes CONFIRMED ABSENT from app.css are defined here — no overrides. */

/* text colors (zinc) */
.text-zinc-50{color:var(--color-zinc-50)}
.text-zinc-100{color:var(--color-zinc-100)}
.text-zinc-200{color:var(--color-zinc-200)}
.text-zinc-300{color:var(--color-zinc-300)}
.text-zinc-400{color:var(--color-zinc-400)}
.text-zinc-500{color:var(--color-zinc-500)}
.text-zinc-800{color:var(--color-zinc-800)}
.text-zinc-900{color:var(--color-zinc-900)}

/* text colors (purple accent) */
.text-purple-700{color:var(--color-purple-700)}
.text-purple-800{color:var(--color-purple-800)}

/* border / background colors */
.border-zinc-200{border-color:var(--color-zinc-200)}
.bg-purple-50{background-color:var(--color-purple-50)}
.bg-purple-100{background-color:oklch(94.6%.033 307.174)}

/* padding */
.p-3{padding:calc(var(--rfext-spacing)*3)}
.py-4{padding-top:calc(var(--rfext-spacing)*4);padding-bottom:calc(var(--rfext-spacing)*4)}

/* margins */
.mt-1{margin-top:calc(var(--rfext-spacing)*1)}
.mt-1\.5{margin-top:calc(var(--rfext-spacing)*1.5)}
.mt-5{margin-top:calc(var(--rfext-spacing)*5)}
.mb-3{margin-bottom:calc(var(--rfext-spacing)*3)}
.mb-5{margin-bottom:calc(var(--rfext-spacing)*5)}
.my-4{margin-top:calc(var(--rfext-spacing)*4);margin-bottom:calc(var(--rfext-spacing)*4)}
.my-5{margin-top:calc(var(--rfext-spacing)*5);margin-bottom:calc(var(--rfext-spacing)*5)}

/* positioning (for absolute close buttons etc.) */
.right-2{right:calc(var(--rfext-spacing)*2)}
.right-3{right:calc(var(--rfext-spacing)*3)}
.top-2{top:calc(var(--rfext-spacing)*2)}
.top-3{top:calc(var(--rfext-spacing)*3)}

/* font sizes */
.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}
.text-4xl{font-size:2.25rem;line-height:1.1}

/* radius */
.rounded-2xl{border-radius:1rem}

/* sizing */
.w-fit{width:fit-content}
.h-fit{height:fit-content}
.max-w-none{max-width:none}
.max-w-md{max-width:28rem}
.w-\[120px\]{width:120px}
.max-w-\[400px\]{max-width:400px}

/* shadow */
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}