/* ============================================================
   WORDPRESS UTILITY CSS SYSTEM
   Tailwind-range utility classes for WordPress themes
   Version: 1.0.0
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES (Design Tokens) ─────────────── */
:root {
  /* Spacing Scale (matches Tailwind) */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-2-5:  10px;
  --space-3:    12px;
  --space-3-5:  14px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    28px;
  --space-8:    32px;
  --space-9:    36px;
  --space-10:   40px;
  --space-11:   44px;
  --space-12:   48px;
  --space-14:   56px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-28:   112px;
  --space-32:   128px;
  --space-36:   144px;
  --space-40:   160px;
  --space-44:   176px;
  --space-48:   192px;
  --space-52:   208px;
  --space-56:   224px;
  --space-60:   240px;
  --space-64:   256px;
  --space-72:   288px;
  --space-80:   320px;
  --space-96:   384px;

  /* Font Sizes */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;
  --text-7xl:  72px;
  --text-8xl:  96px;
  --text-9xl:  128px;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Border Radius */
  --rounded-none:   0;
  --rounded-sm:     2px;
  --rounded:        4px;
  --rounded-md:     6px;
  --rounded-lg:     8px;
  --rounded-xl:     12px;
  --rounded-2xl:    16px;
  --rounded-3xl:    24px;
  --rounded-full:   9999px;

  /* Box Shadows */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: 0 0 #0000;

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-0:    0;
  --z-10:   10;
  --z-20:   20;
  --z-30:   30;
  --z-40:   40;
  --z-50:   50;
  --z-auto: auto;

  /* Breakpoints (reference only — use in JS or @media) */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

  /* WordPress-specific container width */
  --wp-container-sm:  640px;
  --wp-container-md:  768px;
  --wp-container-lg:  1024px;
  --wp-container-xl:  1280px;
  --wp-container-2xl: 1536px;
}


/* ─── RESET / BASE ───────────────────────────────────────── */
.pl-box-border, .pl-box-border * { box-sizing: border-box; }
.pl-box-content, .pl-box-content * { box-sizing: content-box; }


/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

/* Container */
.pl-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px)  { .pl-container { max-width: 640px; } }
@media (min-width: 768px)  { .pl-container { max-width: 768px; } }
@media (min-width: 1024px) { .pl-container { max-width: 1024px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1280px) { .pl-container { max-width: 1280px; } }
@media (min-width: 1536px) { .pl-container { max-width: 1536px; } }

.pl-container--fluid { max-width: 100% !important; }
.pl-container--narrow { max-width: 768px; }
.pl-container--wide   { max-width: 1536px; }

/* Display */
.pl-block        { display: block; }
.pl-inline-block { display: inline-block; }
.pl-inline       { display: inline; }
.pl-flex         { display: flex; }
.pl-inline-flex  { display: inline-flex; }
.pl-grid         { display: grid; }
.pl-inline-grid  { display: inline-grid; }
.pl-hidden       { display: none; }
.pl-contents     { display: contents; }

/* Position */
.pl-static   { position: static; }
.pl-relative { position: relative; }
.pl-absolute { position: absolute; }
.pl-fixed    { position: fixed; }
.pl-sticky   { position: sticky; }

/* Inset */
.pl-inset-0    { inset: 0; }
.pl-inset-auto { inset: auto; }
.pl-top-0      { top: 0; } .pl-top-auto { top: auto; }
.pl-right-0    { right: 0; } .pl-right-auto { right: auto; }
.pl-bottom-0   { bottom: 0; } .pl-bottom-auto { bottom: auto; }
.pl-left-0     { left: 0; } .pl-left-auto { left: auto; }

/* Overflow */
.pl-overflow-auto    { overflow: auto; }
.pl-overflow-hidden  { overflow: hidden; }
.pl-overflow-visible { overflow: visible; }
.pl-overflow-scroll  { overflow: scroll; }
.pl-overflow-x-auto  { overflow-x: auto; }
.pl-overflow-y-auto  { overflow-y: auto; }
.pl-overflow-x-hidden { overflow-x: hidden; }
.pl-overflow-y-hidden { overflow-y: hidden; }

/* Float */
.pl-float-left  { float: left; }
.pl-float-right { float: right; }
.pl-float-none  { float: none; }
.pl-clearfix::after { content: ''; display: table; clear: both; }

/* Object Fit */
.pl-object-contain { object-fit: contain; }
.pl-object-cover   { object-fit: cover; }
.pl-object-fill    { object-fit: fill; }
.pl-object-none    { object-fit: none; }
.pl-object-scale   { object-fit: scale-down; }


/* ═══════════════════════════════════════════════════════════
   FLEXBOX
   ═══════════════════════════════════════════════════════════ */

/* Flex Direction */
.pl-flex-row         { flex-direction: row; }
.pl-flex-row-reverse { flex-direction: row-reverse; }
.pl-flex-col         { flex-direction: column; }
.pl-flex-col-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.pl-flex-wrap         { flex-wrap: wrap; }
.pl-flex-nowrap       { flex-wrap: nowrap; }
.pl-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Flex Sizing */
.pl-flex-1    { flex: 1 1 0%; }
.pl-flex-auto { flex: 1 1 auto; }
.pl-flex-none { flex: none; }
.pl-flex-initial { flex: 0 1 auto; }
.pl-grow      { flex-grow: 1; }
.pl-grow-0    { flex-grow: 0; }
.pl-shrink    { flex-shrink: 1; }
.pl-shrink-0  { flex-shrink: 0; }

/* Align Items */
.pl-items-start    { align-items: flex-start; }
.pl-items-end      { align-items: flex-end; }
.pl-items-center   { align-items: center; }
.pl-items-baseline { align-items: baseline; }
.pl-items-stretch  { align-items: stretch; }

/* Justify Content */
.pl-justify-start   { justify-content: flex-start; }
.pl-justify-end     { justify-content: flex-end; }
.pl-justify-center  { justify-content: center; }
.pl-justify-between { justify-content: space-between; }
.pl-justify-around  { justify-content: space-around; }
.pl-justify-evenly  { justify-content: space-evenly; }

/* Align Self */
.pl-self-auto    { align-self: auto; }
.pl-self-start   { align-self: flex-start; }
.pl-self-end     { align-self: flex-end; }
.pl-self-center  { align-self: center; }
.pl-self-stretch { align-self: stretch; }

/* Align Content */
.pl-content-start   { align-content: flex-start; }
.pl-content-end     { align-content: flex-end; }
.pl-content-center  { align-content: center; }
.pl-content-between { align-content: space-between; }
.pl-content-around  { align-content: space-around; }

/* Gap */
.pl-gap-0   { gap: var(--space-0); }
.pl-gap-1   { gap: var(--space-1); }
.pl-gap-2   { gap: var(--space-2); }
.pl-gap-3   { gap: var(--space-3); }
.pl-gap-4   { gap: var(--space-4); }
.pl-gap-5   { gap: var(--space-5); }
.pl-gap-6   { gap: var(--space-6); }
.pl-gap-7   { gap: var(--space-7); }
.pl-gap-8   { gap: var(--space-8); }
.pl-gap-10  { gap: var(--space-10); }
.pl-gap-12  { gap: var(--space-12); }
.pl-gap-16  { gap: var(--space-16); }
.pl-gap-x-0  { column-gap: var(--space-0); }
.pl-gap-x-2  { column-gap: var(--space-2); }
.pl-gap-x-4  { column-gap: var(--space-4); }
.pl-gap-x-6  { column-gap: var(--space-6); }
.pl-gap-x-8  { column-gap: var(--space-8); }
.pl-gap-y-0  { row-gap: var(--space-0); }
.pl-gap-y-2  { row-gap: var(--space-2); }
.pl-gap-y-4  { row-gap: var(--space-4); }
.pl-gap-y-6  { row-gap: var(--space-6); }
.pl-gap-y-8  { row-gap: var(--space-8); }


/* ═══════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════ */

/* Grid Cols */
.pl-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.pl-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pl-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pl-grid-cols-7  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.pl-grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pl-grid-cols-9  { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.pl-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.pl-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.pl-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pl-grid-cols-none { grid-template-columns: none; }

/* Grid Rows */
.pl-grid-rows-1  { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.pl-grid-rows-2  { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pl-grid-rows-3  { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.pl-grid-rows-4  { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.pl-grid-rows-5  { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.pl-grid-rows-6  { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.pl-grid-rows-none { grid-template-rows: none; }

/* Col Span */
.pl-col-auto       { grid-column: auto; }
.pl-col-span-1     { grid-column: span 1 / span 1; }
.pl-col-span-2     { grid-column: span 2 / span 2; }
.pl-col-span-3     { grid-column: span 3 / span 3; }
.pl-col-span-4     { grid-column: span 4 / span 4; }
.pl-col-span-5     { grid-column: span 5 / span 5; }
.pl-col-span-6     { grid-column: span 6 / span 6; }
.pl-col-span-7     { grid-column: span 7 / span 7; }
.pl-col-span-8     { grid-column: span 8 / span 8; }
.pl-col-span-9     { grid-column: span 9 / span 9; }
.pl-col-span-10    { grid-column: span 10 / span 10; }
.pl-col-span-11    { grid-column: span 11 / span 11; }
.pl-col-span-12    { grid-column: span 12 / span 12; }
.pl-col-span-full  { grid-column: 1 / -1; }

/* Row Span */
.pl-row-auto      { grid-row: auto; }
.pl-row-span-1    { grid-row: span 1 / span 1; }
.pl-row-span-2    { grid-row: span 2 / span 2; }
.pl-row-span-3    { grid-row: span 3 / span 3; }
.pl-row-span-full { grid-row: 1 / -1; }


/* ═══════════════════════════════════════════════════════════
   SPACING — MARGIN
   ═══════════════════════════════════════════════════════════ */

.pl-m-0    { margin: var(--space-0); }
.pl-m-auto { margin: auto; }
.pl-m-1    { margin: var(--space-1); }
.pl-m-2    { margin: var(--space-2); }
.pl-m-3    { margin: var(--space-3); }
.pl-m-4    { margin: var(--space-4); }
.pl-m-5    { margin: var(--space-5); }
.pl-m-6    { margin: var(--space-6); }
.pl-m-7    { margin: var(--space-7); }
.pl-m-8    { margin: var(--space-8); }
.pl-m-10   { margin: var(--space-10); }
.pl-m-12   { margin: var(--space-12); }
.pl-m-16   { margin: var(--space-16); }
.pl-m-20   { margin: var(--space-20); }
.pl-m-24   { margin: var(--space-24); }

/* Margin X / Y */
.pl-mx-auto { margin-left: auto; margin-right: auto; }
.pl-my-0  { margin-top: 0; margin-bottom: 0; }
.pl-mx-0  { margin-left: 0; margin-right: 0; }
.pl-my-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.pl-mx-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
.pl-my-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.pl-mx-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
.pl-my-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.pl-mx-6  { margin-left: var(--space-6); margin-right: var(--space-6); }
.pl-my-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.pl-mx-8  { margin-left: var(--space-8); margin-right: var(--space-8); }
.pl-my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }
.pl-my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.pl-my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
.pl-my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }
.pl-my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }

/* Margin individual sides */
.pl-mt-0  { margin-top: 0; }    .pl-mt-auto { margin-top: auto; }
.pl-mt-1  { margin-top: var(--space-1); }
.pl-mt-2  { margin-top: var(--space-2); }
.pl-mt-3  { margin-top: var(--space-3); }
.pl-mt-4  { margin-top: var(--space-4); }
.pl-mt-5  { margin-top: var(--space-5); }
.pl-mt-6  { margin-top: var(--space-6); }
.pl-mt-8  { margin-top: var(--space-8); }
.pl-mt-10 { margin-top: var(--space-10); }
.pl-mt-12 { margin-top: var(--space-12); }
.pl-mt-16 { margin-top: var(--space-16); }
.pl-mt-20 { margin-top: var(--space-20); }
.pl-mt-24 { margin-top: var(--space-24); }

.pl-mb-0  { margin-bottom: 0; }  .pl-mb-auto { margin-bottom: auto; }
.pl-mb-1  { margin-bottom: var(--space-1); }
.pl-mb-2  { margin-bottom: var(--space-2); }
.pl-mb-3  { margin-bottom: var(--space-3); }
.pl-mb-4  { margin-bottom: var(--space-4); }
.pl-mb-5  { margin-bottom: var(--space-5); }
.pl-mb-6  { margin-bottom: var(--space-6); }
.pl-mb-8  { margin-bottom: var(--space-8); }
.pl-mb-10 { margin-bottom: var(--space-10); }
.pl-mb-12 { margin-bottom: var(--space-12); }
.pl-mb-16 { margin-bottom: var(--space-16); }
.pl-mb-20 { margin-bottom: var(--space-20); }
.pl-mb-24 { margin-bottom: var(--space-24); }

.pl-ml-0  { margin-left: 0; }    .pl-ml-auto { margin-left: auto; }
.pl-ml-1  { margin-left: var(--space-1); }
.pl-ml-2  { margin-left: var(--space-2); }
.pl-ml-4  { margin-left: var(--space-4); }
.pl-ml-6  { margin-left: var(--space-6); }
.pl-ml-8  { margin-left: var(--space-8); }

.pl-mr-0  { margin-right: 0; }   .pl-mr-auto { margin-right: auto; }
.pl-mr-1  { margin-right: var(--space-1); }
.pl-mr-2  { margin-right: var(--space-2); }
.pl-mr-4  { margin-right: var(--space-4); }
.pl-mr-6  { margin-right: var(--space-6); }
.pl-mr-8  { margin-right: var(--space-8); }

/* Negative Margins */
.pl--mt-1  { margin-top: calc(-1 * var(--space-1)); }
.pl--mt-2  { margin-top: calc(-1 * var(--space-2)); }
.pl--mt-4  { margin-top: calc(-1 * var(--space-4)); }
.pl--mb-1  { margin-bottom: calc(-1 * var(--space-1)); }
.pl--mb-2  { margin-bottom: calc(-1 * var(--space-2)); }
.pl--ml-1  { margin-left: calc(-1 * var(--space-1)); }
.pl--ml-2  { margin-left: calc(-1 * var(--space-2)); }
.pl--mr-1  { margin-right: calc(-1 * var(--space-1)); }
.pl--mr-2  { margin-right: calc(-1 * var(--space-2)); }


/* ═══════════════════════════════════════════════════════════
   SPACING — PADDING
   ═══════════════════════════════════════════════════════════ */

.pl-p-0   { padding: 0; }
.pl-p-px  { padding: 1px; }
.pl-p-1   { padding: var(--space-1); }
.pl-p-2   { padding: var(--space-2); }
.pl-p-3   { padding: var(--space-3); }
.pl-p-4   { padding: var(--space-4); }
.pl-p-5   { padding: var(--space-5); }
.pl-p-6   { padding: var(--space-6); }
.pl-p-7   { padding: var(--space-7); }
.pl-p-8   { padding: var(--space-8); }
.pl-p-10  { padding: var(--space-10); }
.pl-p-12  { padding: var(--space-12); }
.pl-p-16  { padding: var(--space-16); }
.pl-p-20  { padding: var(--space-20); }
.pl-p-24  { padding: var(--space-24); }

/* Padding X / Y */
.pl-px-0  { padding-left: 0; padding-right: 0; }
.pl-py-0  { padding-top: 0; padding-bottom: 0; }
.pl-px-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
.pl-py-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.pl-px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.pl-py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.pl-px-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.pl-py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.pl-px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.pl-py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.pl-px-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
.pl-py-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.pl-px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.pl-py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.pl-px-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
.pl-py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pl-px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }
.pl-py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.pl-px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
.pl-py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.pl-px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
.pl-py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.pl-px-20 { padding-left: var(--space-20); padding-right: var(--space-20); }
.pl-py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.pl-px-24 { padding-left: var(--space-24); padding-right: var(--space-24); }
.pl-py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/* Padding sides */
.pl-pt-0  { padding-top: 0; }
.pl-pt-1  { padding-top: var(--space-1); }
.pl-pt-2  { padding-top: var(--space-2); }
.pl-pt-3  { padding-top: var(--space-3); }
.pl-pt-4  { padding-top: var(--space-4); }
.pl-pt-6  { padding-top: var(--space-6); }
.pl-pt-8  { padding-top: var(--space-8); }
.pl-pt-12 { padding-top: var(--space-12); }
.pl-pt-16 { padding-top: var(--space-16); }

.pl-pb-0  { padding-bottom: 0; }
.pl-pb-1  { padding-bottom: var(--space-1); }
.pl-pb-2  { padding-bottom: var(--space-2); }
.pl-pb-3  { padding-bottom: var(--space-3); }
.pl-pb-4  { padding-bottom: var(--space-4); }
.pl-pb-6  { padding-bottom: var(--space-6); }
.pl-pb-8  { padding-bottom: var(--space-8); }
.pl-pb-12 { padding-bottom: var(--space-12); }
.pl-pb-16 { padding-bottom: var(--space-16); }

.pl-pl-0  { padding-left: 0; }
.pl-pl-2  { padding-left: var(--space-2); }
.pl-pl-4  { padding-left: var(--space-4); }
.pl-pl-6  { padding-left: var(--space-6); }
.pl-pl-8  { padding-left: var(--space-8); }

.pl-pr-0  { padding-right: 0; }
.pl-pr-2  { padding-right: var(--space-2); }
.pl-pr-4  { padding-right: var(--space-4); }
.pl-pr-6  { padding-right: var(--space-6); }
.pl-pr-8  { padding-right: var(--space-8); }


/* ═══════════════════════════════════════════════════════════
   SIZING — WIDTH & HEIGHT
   ═══════════════════════════════════════════════════════════ */

/* Width */
.pl-w-auto  { width: auto; }
.pl-w-full  { width: 100%; }
.pl-w-screen { width: 100vw; }
.pl-w-min   { width: min-content; }
.pl-w-max   { width: max-content; }
.pl-w-fit   { width: fit-content; }
.pl-w-0     { width: 0; }
.pl-w-px    { width: 1px; }
.pl-w-1     { width: var(--space-1); }
.pl-w-2     { width: var(--space-2); }
.pl-w-3     { width: var(--space-3); }
.pl-w-4     { width: var(--space-4); }
.pl-w-5     { width: var(--space-5); }
.pl-w-6     { width: var(--space-6); }
.pl-w-8     { width: var(--space-8); }
.pl-w-10    { width: var(--space-10); }
.pl-w-12    { width: var(--space-12); }
.pl-w-16    { width: var(--space-16); }
.pl-w-20    { width: var(--space-20); }
.pl-w-24    { width: var(--space-24); }
.pl-w-32    { width: var(--space-32); }
.pl-w-40    { width: var(--space-40); }
.pl-w-48    { width: var(--space-48); }
.pl-w-56    { width: var(--space-56); }
.pl-w-64    { width: var(--space-64); }
.pl-w-80    { width: var(--space-80); }
.pl-w-96    { width: var(--space-96); }
/* Fractional widths */
.pl-w-1\/2  { width: 50%; }
.pl-w-1\/3  { width: 33.333333%; }
.pl-w-2\/3  { width: 66.666667%; }
.pl-w-1\/4  { width: 25%; }
.pl-w-3\/4  { width: 75%; }
.pl-w-1\/5  { width: 20%; }
.pl-w-2\/5  { width: 40%; }
.pl-w-3\/5  { width: 60%; }
.pl-w-4\/5  { width: 80%; }

/* Min / Max Width */
.pl-min-w-0    { min-width: 0; }
.pl-min-w-full { min-width: 100%; }
.pl-max-w-none { max-width: none; }
.pl-max-w-xs   { max-width: 320px; }
.pl-max-w-sm   { max-width: 384px; }
.pl-max-w-md   { max-width: 448px; }
.pl-max-w-lg   { max-width: 512px; }
.pl-max-w-xl   { max-width: 576px; }
.pl-max-w-2xl  { max-width: 672px; }
.pl-max-w-3xl  { max-width: 768px; }
.pl-max-w-4xl  { max-width: 896px; }
.pl-max-w-5xl  { max-width: 1024px; }
.pl-max-w-6xl  { max-width: 1152px; }
.pl-max-w-7xl  { max-width: 1280px; }
.pl-max-w-full { max-width: 100%; }
.pl-max-w-screen-sm  { max-width: 640px; }
.pl-max-w-screen-md  { max-width: 768px; }
.pl-max-w-screen-lg  { max-width: 1024px; }
.pl-max-w-screen-xl  { max-width: 1280px; }
.pl-max-w-screen-2xl { max-width: 1536px; }

/* Height */
.pl-h-auto   { height: auto; }
.pl-h-full   { height: 100%; }
.pl-h-screen { height: 100vh; }
.pl-h-svh    { height: 100svh; }
.pl-h-dvh    { height: 100dvh; }
.pl-h-min    { height: min-content; }
.pl-h-max    { height: max-content; }
.pl-h-fit    { height: fit-content; }
.pl-h-0      { height: 0; }
.pl-h-px     { height: 1px; }
.pl-h-1      { height: var(--space-1); }
.pl-h-2      { height: var(--space-2); }
.pl-h-3      { height: var(--space-3); }
.pl-h-4      { height: var(--space-4); }
.pl-h-5      { height: var(--space-5); }
.pl-h-6      { height: var(--space-6); }
.pl-h-8      { height: var(--space-8); }
.pl-h-10     { height: var(--space-10); }
.pl-h-12     { height: var(--space-12); }
.pl-h-16     { height: var(--space-16); }
.pl-h-20     { height: var(--space-20); }
.pl-h-24     { height: var(--space-24); }
.pl-h-32     { height: var(--space-32); }
.pl-h-40     { height: var(--space-40); }
.pl-h-48     { height: var(--space-48); }
.pl-h-56     { height: var(--space-56); }
.pl-h-64     { height: var(--space-64); }
.pl-h-80     { height: var(--space-80); }
.pl-h-96     { height: var(--space-96); }

/* Min / Max Height */
.pl-min-h-0      { min-height: 0; }
.pl-min-h-full   { min-height: 100%; }
.pl-min-h-screen { min-height: 100vh; }
.pl-max-h-full   { max-height: 100%; }
.pl-max-h-screen { max-height: 100vh; }
.pl-max-h-none   { max-height: none; }


/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

/* Font Size */
.pl-text-xs   { font-size: var(--text-xs);   line-height: 16px; }
.pl-text-sm   { font-size: var(--text-sm);   line-height: 20px; }
.pl-text-base { font-size: var(--text-base); line-height: 24px; }
.pl-text-lg   { font-size: var(--text-lg);   line-height: 28px; }
.pl-text-xl   { font-size: var(--text-xl);   line-height: 28px; }
.pl-text-2xl  { font-size: var(--text-2xl);  line-height: 32px; }
.pl-text-3xl  { font-size: var(--text-3xl);  line-height: 36px; }
.pl-text-4xl  { font-size: var(--text-4xl);  line-height: 40px; }
.pl-text-5xl  { font-size: var(--text-5xl);  line-height: 1; }
.pl-text-6xl  { font-size: var(--text-6xl);  line-height: 1; }
.pl-text-7xl  { font-size: var(--text-7xl);  line-height: 1; }
.pl-text-8xl  { font-size: var(--text-8xl);  line-height: 1; }
.pl-text-9xl  { font-size: var(--text-9xl);  line-height: 1; }

/* Fluid / Clamp Typography (responsive without breakpoints) */
.pl-text-fluid-sm   { font-size: clamp(12.8px,   1vw + 6.4px, 14px); }
.pl-text-fluid-base { font-size: clamp(16px,     1.5vw + 8px, 18px); }
.pl-text-fluid-lg   { font-size: clamp(18px, 2vw + 8px,  24px); }
.pl-text-fluid-xl   { font-size: clamp(24px,   3vw + 12px, 36px); }
.pl-text-fluid-2xl  { font-size: clamp(32px,     5vw + 16px,    60px); }
.pl-text-fluid-3xl  { font-size: clamp(40px,   7vw + 16px,    80px); }

/* Font Weight */
.pl-font-thin       { font-weight: 100; }
.pl-font-extralight { font-weight: 200; }
.pl-font-light      { font-weight: 300; }
.pl-font-normal     { font-weight: 400; }
.pl-font-medium     { font-weight: 500; }
.pl-font-semibold   { font-weight: 600; }
.pl-font-bold       { font-weight: 700; }
.pl-font-extrabold  { font-weight: 800; }
.pl-font-black      { font-weight: 900; }

/* Font Style */
.pl-italic      { font-style: italic; }
.pl-not-italic  { font-style: normal; }

/* Text Align */
.pl-text-left    { text-align: left; }
.pl-text-center  { text-align: center; }
.pl-text-right   { text-align: right; }
.pl-text-justify { text-align: justify; }
.pl-text-start   { text-align: start; }
.pl-text-end     { text-align: end; }

/* Text Transform */
.pl-uppercase   { text-transform: uppercase; }
.pl-lowercase   { text-transform: lowercase; }
.pl-capitalize  { text-transform: capitalize; }
.pl-normal-case { text-transform: none; }

/* Text Decoration */
.pl-underline    { text-decoration-line: underline; }
.pl-overline     { text-decoration-line: overline; }
.pl-line-through { text-decoration-line: line-through; }
.pl-no-underline { text-decoration-line: none; }

/* Line Height */
.pl-leading-none    { line-height: var(--leading-none); }
.pl-leading-tight   { line-height: var(--leading-tight); }
.pl-leading-snug    { line-height: var(--leading-snug); }
.pl-leading-normal  { line-height: var(--leading-normal); }
.pl-leading-relaxed { line-height: var(--leading-relaxed); }
.pl-leading-loose   { line-height: var(--leading-loose); }

/* Letter Spacing */
.pl-tracking-tighter { letter-spacing: -0.05em; }
.pl-tracking-tight   { letter-spacing: -0.025em; }
.pl-tracking-normal  { letter-spacing: 0; }
.pl-tracking-wide    { letter-spacing: 0.025em; }
.pl-tracking-wider   { letter-spacing: 0.05em; }
.pl-tracking-widest  { letter-spacing: 0.1em; }

/* Text Overflow */
.pl-truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-text-ellipsis  { text-overflow: ellipsis; }
.pl-text-clip      { text-overflow: clip; }
.pl-break-normal   { overflow-wrap: normal; word-break: normal; }
.pl-break-words    { overflow-wrap: break-word; }
.pl-break-all      { word-break: break-all; }
.pl-break-keep     { word-break: keep-all; }
.pl-whitespace-normal   { white-space: normal; }
.pl-whitespace-nowrap   { white-space: nowrap; }
.pl-whitespace-pre      { white-space: pre; }
.pl-whitespace-pre-wrap { white-space: pre-wrap; }
.pl-whitespace-pre-line { white-space: pre-line; }

/* Vertical Align */
.pl-align-baseline    { vertical-align: baseline; }
.pl-align-top         { vertical-align: top; }
.pl-align-middle      { vertical-align: middle; }
.pl-align-bottom      { vertical-align: bottom; }
.pl-align-text-top    { vertical-align: text-top; }
.pl-align-text-bottom { vertical-align: text-bottom; }
.pl-align-sub         { vertical-align: sub; }
.pl-align-super       { vertical-align: super; }

/* List Style */
.pl-list-none    { list-style-type: none; }
.pl-list-disc    { list-style-type: disc; }
.pl-list-decimal { list-style-type: decimal; }
.pl-list-inside  { list-style-position: inside; }
.pl-list-outside { list-style-position: outside; }


/* ═══════════════════════════════════════════════════════════
   BACKGROUNDS
   ═══════════════════════════════════════════════════════════ */

.pl-bg-transparent { background-color: transparent; }
.pl-bg-current     { background-color: currentColor; }
.pl-bg-white       { background-color: #fff; }
.pl-bg-black       { background-color: #000; }

/* Tailwind Gray Scale */
.pl-bg-gray-50  { background-color: #f9fafb; }
.pl-bg-gray-100 { background-color: #f3f4f6; }
.pl-bg-gray-200 { background-color: #e5e7eb; }
.pl-bg-gray-300 { background-color: #d1d5db; }
.pl-bg-gray-400 { background-color: #9ca3af; }
.pl-bg-gray-500 { background-color: #6b7280; }
.pl-bg-gray-600 { background-color: #4b5563; }
.pl-bg-gray-700 { background-color: #374151; }
.pl-bg-gray-800 { background-color: #1f2937; }
.pl-bg-gray-900 { background-color: #111827; }
.pl-bg-gray-950 { background-color: #030712; }

/* Blue */
.pl-bg-blue-50  { background-color: #eff6ff; }
.pl-bg-blue-100 { background-color: #dbeafe; }
.pl-bg-blue-200 { background-color: #bfdbfe; }
.pl-bg-blue-300 { background-color: #93c5fd; }
.pl-bg-blue-400 { background-color: #60a5fa; }
.pl-bg-blue-500 { background-color: #3b82f6; }
.pl-bg-blue-600 { background-color: #2563eb; }
.pl-bg-blue-700 { background-color: #1d4ed8; }
.pl-bg-blue-800 { background-color: #1e40af; }
.pl-bg-blue-900 { background-color: #1e3a8a; }

/* Green */
.pl-bg-green-50  { background-color: #f0fdf4; }
.pl-bg-green-100 { background-color: #dcfce7; }
.pl-bg-green-500 { background-color: #22c55e; }
.pl-bg-green-600 { background-color: #16a34a; }
.pl-bg-green-700 { background-color: #15803d; }

/* Red */
.pl-bg-red-50  { background-color: #fef2f2; }
.pl-bg-red-100 { background-color: #fee2e2; }
.pl-bg-red-500 { background-color: #ef4444; }
.pl-bg-red-600 { background-color: #dc2626; }
.pl-bg-red-700 { background-color: #b91c1c; }

/* Yellow / Amber */
.pl-bg-yellow-50  { background-color: #fefce8; }
.pl-bg-yellow-100 { background-color: #fef9c3; }
.pl-bg-yellow-400 { background-color: #facc15; }
.pl-bg-yellow-500 { background-color: #eab308; }

/* Background Size / Position */
.pl-bg-auto     { background-size: auto; }
.pl-bg-cover    { background-size: cover; }
.pl-bg-contain  { background-size: contain; }
.pl-bg-center   { background-position: center; }
.pl-bg-top      { background-position: top; }
.pl-bg-bottom   { background-position: bottom; }
.pl-bg-left     { background-position: left; }
.pl-bg-right    { background-position: right; }
.pl-bg-no-repeat { background-repeat: no-repeat; }
.pl-bg-repeat   { background-repeat: repeat; }
.pl-bg-repeat-x { background-repeat: repeat-x; }
.pl-bg-repeat-y { background-repeat: repeat-y; }
.pl-bg-fixed    { background-attachment: fixed; }
.pl-bg-local    { background-attachment: local; }
.pl-bg-scroll   { background-attachment: scroll; }


/* ═══════════════════════════════════════════════════════════
   TEXT COLORS
   ═══════════════════════════════════════════════════════════ */

.pl-text-white       { color: #fff; }
.pl-text-black       { color: #000; }
.pl-text-transparent { color: transparent; }
.pl-text-current     { color: currentColor; }
.pl-text-inherit     { color: inherit; }

.pl-text-gray-50  { color: #f9fafb; }
.pl-text-gray-100 { color: #f3f4f6; }
.pl-text-gray-200 { color: #e5e7eb; }
.pl-text-gray-300 { color: #d1d5db; }
.pl-text-gray-400 { color: #9ca3af; }
.pl-text-gray-500 { color: #6b7280; }
.pl-text-gray-600 { color: #4b5563; }
.pl-text-gray-700 { color: #374151; }
.pl-text-gray-800 { color: #1f2937; }
.pl-text-gray-900 { color: #111827; }
.pl-text-gray-950 { color: #030712; }

.pl-text-blue-400 { color: #60a5fa; }
.pl-text-blue-500 { color: #3b82f6; }
.pl-text-blue-600 { color: #2563eb; }
.pl-text-blue-700 { color: #1d4ed8; }

.pl-text-green-500 { color: #22c55e; }
.pl-text-green-600 { color: #16a34a; }
.pl-text-green-700 { color: #15803d; }

.pl-text-red-500 { color: #ef4444; }
.pl-text-red-600 { color: #dc2626; }
.pl-text-red-700 { color: #b91c1c; }

.pl-text-yellow-400 { color: #facc15; }
.pl-text-yellow-500 { color: #eab308; }


/* ═══════════════════════════════════════════════════════════
   BORDERS
   ═══════════════════════════════════════════════════════════ */

/* Border Width */
.pl-border-0  { border-width: 0; }
.pl-border    { border-width: 1px; }
.pl-border-2  { border-width: 2px; }
.pl-border-4  { border-width: 4px; }
.pl-border-8  { border-width: 8px; }
.pl-border-t  { border-top-width: 1px; }
.pl-border-r  { border-right-width: 1px; }
.pl-border-b  { border-bottom-width: 1px; }
.pl-border-l  { border-left-width: 1px; }
.pl-border-t-0 { border-top-width: 0; }
.pl-border-b-0 { border-bottom-width: 0; }
.pl-border-t-2 { border-top-width: 2px; }
.pl-border-b-2 { border-bottom-width: 2px; }

/* Border Style */
.pl-border-solid  { border-style: solid; }
.pl-border-dashed { border-style: dashed; }
.pl-border-dotted { border-style: dotted; }
.pl-border-none   { border-style: none; }

/* Border Color */
.pl-border-transparent { border-color: transparent; }
.pl-border-current     { border-color: currentColor; }
.pl-border-white       { border-color: #fff; }
.pl-border-black       { border-color: #000; }
.pl-border-gray-100    { border-color: #f3f4f6; }
.pl-border-gray-200    { border-color: #e5e7eb; }
.pl-border-gray-300    { border-color: #d1d5db; }
.pl-border-gray-400    { border-color: #9ca3af; }
.pl-border-gray-500    { border-color: #6b7280; }
.pl-border-gray-700    { border-color: #374151; }
.pl-border-blue-500    { border-color: #3b82f6; }
.pl-border-blue-600    { border-color: #2563eb; }
.pl-border-red-500     { border-color: #ef4444; }
.pl-border-green-500   { border-color: #22c55e; }

/* Border Radius */
.pl-rounded-none { border-radius: var(--rounded-none); }
.pl-rounded-sm   { border-radius: var(--rounded-sm); }
.pl-rounded      { border-radius: var(--rounded); }
.pl-rounded-md   { border-radius: var(--rounded-md); }
.pl-rounded-lg   { border-radius: var(--rounded-lg); }
.pl-rounded-xl   { border-radius: var(--rounded-xl); }
.pl-rounded-2xl  { border-radius: var(--rounded-2xl); }
.pl-rounded-3xl  { border-radius: var(--rounded-3xl); }
.pl-rounded-full { border-radius: var(--rounded-full); }
.pl-rounded-t-none  { border-top-left-radius: 0; border-top-right-radius: 0; }
.pl-rounded-b-none  { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pl-rounded-t-lg    { border-top-left-radius: var(--rounded-lg); border-top-right-radius: var(--rounded-lg); }
.pl-rounded-b-lg    { border-bottom-left-radius: var(--rounded-lg); border-bottom-right-radius: var(--rounded-lg); }

/* Outline */
.pl-outline-none   { outline: 2px solid transparent; outline-offset: 2px; }
.pl-outline        { outline-style: solid; }
.pl-outline-dashed { outline-style: dashed; }
.pl-outline-2      { outline-width: 2px; }
.pl-outline-4      { outline-width: 4px; }
.pl-outline-offset-2 { outline-offset: 2px; }
.pl-outline-offset-4 { outline-offset: 4px; }


/* ═══════════════════════════════════════════════════════════
   EFFECTS
   ═══════════════════════════════════════════════════════════ */

/* Box Shadow */
.pl-shadow-none { box-shadow: var(--shadow-none); }
.pl-shadow-sm   { box-shadow: var(--shadow-sm); }
.pl-shadow      { box-shadow: var(--shadow); }
.pl-shadow-md   { box-shadow: var(--shadow-md); }
.pl-shadow-lg   { box-shadow: var(--shadow-lg); }
.pl-shadow-xl   { box-shadow: var(--shadow-xl); }
.pl-shadow-2xl  { box-shadow: var(--shadow-2xl); }
.pl-shadow-inner { box-shadow: var(--shadow-inner); }

/* Opacity */
.pl-opacity-0   { opacity: 0; }
.pl-opacity-5   { opacity: 0.05; }
.pl-opacity-10  { opacity: 0.1; }
.pl-opacity-20  { opacity: 0.2; }
.pl-opacity-25  { opacity: 0.25; }
.pl-opacity-30  { opacity: 0.3; }
.pl-opacity-40  { opacity: 0.4; }
.pl-opacity-50  { opacity: 0.5; }
.pl-opacity-60  { opacity: 0.6; }
.pl-opacity-70  { opacity: 0.7; }
.pl-opacity-75  { opacity: 0.75; }
.pl-opacity-80  { opacity: 0.8; }
.pl-opacity-90  { opacity: 0.9; }
.pl-opacity-95  { opacity: 0.95; }
.pl-opacity-100 { opacity: 1; }

/* Mix Blend Mode */
.pl-mix-blend-normal      { mix-blend-mode: normal; }
.pl-mix-blend-multiply    { mix-blend-mode: multiply; }
.pl-mix-blend-screen      { mix-blend-mode: screen; }
.pl-mix-blend-overlay     { mix-blend-mode: overlay; }
.pl-mix-blend-darken      { mix-blend-mode: darken; }
.pl-mix-blend-lighten     { mix-blend-mode: lighten; }
.pl-mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.pl-mix-blend-color-burn  { mix-blend-mode: color-burn; }

/* Backdrop Filter */
.pl-backdrop-blur-sm  { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pl-backdrop-blur     { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pl-backdrop-blur-md  { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pl-backdrop-blur-lg  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pl-backdrop-blur-xl  { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.pl-backdrop-blur-2xl { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.pl-backdrop-blur-3xl { backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); }

/* Filter */
.pl-blur-sm  { filter: blur(4px); }
.pl-blur     { filter: blur(8px); }
.pl-blur-md  { filter: blur(12px); }
.pl-blur-lg  { filter: blur(16px); }
.pl-blur-xl  { filter: blur(24px); }
.pl-grayscale   { filter: grayscale(100%); }
.pl-grayscale-0 { filter: grayscale(0); }
.pl-invert      { filter: invert(100%); }
.pl-invert-0    { filter: invert(0); }
.pl-brightness-50  { filter: brightness(0.5); }
.pl-brightness-75  { filter: brightness(0.75); }
.pl-brightness-100 { filter: brightness(1); }
.pl-brightness-125 { filter: brightness(1.25); }
.pl-brightness-150 { filter: brightness(1.5); }


/* ═══════════════════════════════════════════════════════════
   TRANSFORMS
   ═══════════════════════════════════════════════════════════ */

.pl-scale-0    { transform: scale(0); }
.pl-scale-50   { transform: scale(0.5); }
.pl-scale-75   { transform: scale(0.75); }
.pl-scale-90   { transform: scale(0.9); }
.pl-scale-95   { transform: scale(0.95); }
.pl-scale-100  { transform: scale(1); }
.pl-scale-105  { transform: scale(1.05); }
.pl-scale-110  { transform: scale(1.1); }
.pl-scale-125  { transform: scale(1.25); }
.pl-scale-150  { transform: scale(1.5); }
.pl-scale-x-0  { transform: scaleX(0); }
.pl-scale-x-100 { transform: scaleX(1); }
.pl-scale-y-0  { transform: scaleY(0); }
.pl-scale-y-100 { transform: scaleY(1); }

.pl-rotate-0    { transform: rotate(0); }
.pl-rotate-1    { transform: rotate(1deg); }
.pl-rotate-2    { transform: rotate(2deg); }
.pl-rotate-3    { transform: rotate(3deg); }
.pl-rotate-6    { transform: rotate(6deg); }
.pl-rotate-12   { transform: rotate(12deg); }
.pl-rotate-45   { transform: rotate(45deg); }
.pl-rotate-90   { transform: rotate(90deg); }
.pl-rotate-180  { transform: rotate(180deg); }
.pl--rotate-1   { transform: rotate(-1deg); }
.pl--rotate-2   { transform: rotate(-2deg); }
.pl--rotate-3   { transform: rotate(-3deg); }
.pl--rotate-6   { transform: rotate(-6deg); }
.pl--rotate-12  { transform: rotate(-12deg); }
.pl--rotate-45  { transform: rotate(-45deg); }
.pl--rotate-90  { transform: rotate(-90deg); }
.pl--rotate-180 { transform: rotate(-180deg); }

.pl-translate-x-0    { transform: translateX(0); }
.pl-translate-x-full { transform: translateX(100%); }
.pl--translate-x-full { transform: translateX(-100%); }
.pl-translate-y-0    { transform: translateY(0); }
.pl-translate-y-full { transform: translateY(100%); }
.pl--translate-y-full { transform: translateY(-100%); }
.pl--translate-y-1\/2 { transform: translateY(-50%); }
.pl--translate-x-1\/2 { transform: translateX(-50%); }
.pl-translate-center  { transform: translate(-50%, -50%); }

.pl-skew-x-0  { transform: skewX(0); }
.pl-skew-x-1  { transform: skewX(1deg); }
.pl-skew-x-2  { transform: skewX(2deg); }
.pl-skew-x-3  { transform: skewX(3deg); }
.pl-skew-y-0  { transform: skewY(0); }
.pl-skew-y-1  { transform: skewY(1deg); }
.pl-skew-y-2  { transform: skewY(2deg); }
.pl-skew-y-3  { transform: skewY(3deg); }

.pl-origin-center      { transform-origin: center; }
.pl-origin-top         { transform-origin: top; }
.pl-origin-top-right   { transform-origin: top right; }
.pl-origin-right       { transform-origin: right; }
.pl-origin-bottom-right { transform-origin: bottom right; }
.pl-origin-bottom      { transform-origin: bottom; }
.pl-origin-bottom-left { transform-origin: bottom left; }
.pl-origin-left        { transform-origin: left; }
.pl-origin-top-left    { transform-origin: top left; }


/* ═══════════════════════════════════════════════════════════
   TRANSITIONS & ANIMATION
   ═══════════════════════════════════════════════════════════ */

.pl-transition-none { transition: none; }
.pl-transition      { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.pl-transition-all  { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.pl-transition-colors { transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.pl-transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.pl-transition-shadow  { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.pl-transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.pl-duration-75   { transition-duration: 75ms; }
.pl-duration-100  { transition-duration: 100ms; }
.pl-duration-150  { transition-duration: 150ms; }
.pl-duration-200  { transition-duration: 200ms; }
.pl-duration-300  { transition-duration: 300ms; }
.pl-duration-500  { transition-duration: 500ms; }
.pl-duration-700  { transition-duration: 700ms; }
.pl-duration-1000 { transition-duration: 1000ms; }

.pl-ease-linear    { transition-timing-function: linear; }
.pl-ease-in        { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.pl-ease-out       { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.pl-ease-in-out    { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.pl-delay-75   { transition-delay: 75ms; }
.pl-delay-100  { transition-delay: 100ms; }
.pl-delay-150  { transition-delay: 150ms; }
.pl-delay-200  { transition-delay: 200ms; }
.pl-delay-300  { transition-delay: 300ms; }
.pl-delay-500  { transition-delay: 500ms; }

/* Animations */
@keyframes u-spin     { to { transform: rotate(360deg); } }
@keyframes u-ping     { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes u-pulse    { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes u-bounce   { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes u-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes u-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes u-slide-in-up   { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes u-slide-in-down { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes u-slide-in-left { from { transform: translateX(-16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes u-slide-in-right { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.pl-animate-none       { animation: none; }
.pl-animate-spin       { animation: u-spin 1s linear infinite; }
.pl-animate-ping       { animation: u-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.pl-animate-pulse      { animation: u-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.pl-animate-bounce     { animation: u-bounce 1s infinite; }
.pl-animate-fade-in    { animation: u-fade-in 0.3s ease-out; }
.pl-animate-fade-out   { animation: u-fade-out 0.3s ease-in; }
.pl-animate-slide-up   { animation: u-slide-in-up 0.3s ease-out; }
.pl-animate-slide-down { animation: u-slide-in-down 0.3s ease-out; }
.pl-animate-slide-left { animation: u-slide-in-left 0.3s ease-out; }
.pl-animate-slide-right { animation: u-slide-in-right 0.3s ease-out; }


/* ═══════════════════════════════════════════════════════════
   Z-INDEX & VISIBILITY
   ═══════════════════════════════════════════════════════════ */

.pl-z-0    { z-index: var(--z-0); }
.pl-z-10   { z-index: var(--z-10); }
.pl-z-20   { z-index: var(--z-20); }
.pl-z-30   { z-index: var(--z-30); }
.pl-z-40   { z-index: var(--z-40); }
.pl-z-50   { z-index: var(--z-50); }
.pl-z-auto { z-index: var(--z-auto); }

.pl-visible   { visibility: visible; }
.pl-invisible { visibility: hidden; }
.pl-collapse  { visibility: collapse; }

/* Accessibility — screen-reader only */
.pl-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.pl-not-sr-only {
  position: static; width: auto; height: auto;
  padding: 0; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}


/* ═══════════════════════════════════════════════════════════
   POINTER & INTERACTION
   ═══════════════════════════════════════════════════════════ */

.pl-cursor-auto     { cursor: auto; }
.pl-cursor-default  { cursor: default; }
.pl-cursor-pointer  { cursor: pointer; }
.pl-cursor-wait     { cursor: wait; }
.pl-cursor-text     { cursor: text; }
.pl-cursor-move     { cursor: move; }
.pl-cursor-help     { cursor: help; }
.pl-cursor-not-allowed { cursor: not-allowed; }
.pl-cursor-grab     { cursor: grab; }
.pl-cursor-grabbing { cursor: grabbing; }

.pl-pointer-events-none { pointer-events: none; }
.pl-pointer-events-auto { pointer-events: auto; }
.pl-select-none   { user-select: none; }
.pl-select-text   { user-select: text; }
.pl-select-all    { user-select: all; }
.pl-select-auto   { user-select: auto; }
.pl-resize        { resize: both; }
.pl-resize-none   { resize: none; }
.pl-resize-x      { resize: horizontal; }
.pl-resize-y      { resize: vertical; }
.pl-appearance-none { -webkit-appearance: none; appearance: none; }

/* Scroll */
.pl-scroll-smooth     { scroll-behavior: smooth; }
.pl-scroll-auto       { scroll-behavior: auto; }
.pl-scroll-snap-none  { scroll-snap-type: none; }
.pl-scroll-snap-x     { scroll-snap-type: x mandatory; }
.pl-scroll-snap-y     { scroll-snap-type: y mandatory; }
.pl-snap-start        { scroll-snap-align: start; }
.pl-snap-center       { scroll-snap-align: center; }
.pl-snap-end          { scroll-snap-align: end; }
.pl-snap-none         { scroll-snap-align: none; }
.pl-overscroll-auto   { overscroll-behavior: auto; }
.pl-overscroll-contain { overscroll-behavior: contain; }
.pl-overscroll-none   { overscroll-behavior: none; }


/* ═══════════════════════════════════════════════════════════
   ASPECT RATIO
   ═══════════════════════════════════════════════════════════ */

.pl-aspect-auto    { aspect-ratio: auto; }
.pl-aspect-square  { aspect-ratio: 1 / 1; }
.pl-aspect-video   { aspect-ratio: 16 / 9; }
.pl-aspect-4-3     { aspect-ratio: 4 / 3; }
.pl-aspect-21-9    { aspect-ratio: 21 / 9; }


/* ═══════════════════════════════════════════════════════════
   COLUMNS (CSS Multi-column)
   ═══════════════════════════════════════════════════════════ */

.pl-columns-1  { columns: 1; }
.pl-columns-2  { columns: 2; }
.pl-columns-3  { columns: 3; }
.pl-columns-4  { columns: 4; }
.pl-columns-auto { columns: auto; }
.pl-col-gap-4  { column-gap: var(--space-4); }
.pl-col-gap-8  { column-gap: var(--space-8); }
.pl-break-before-auto   { break-before: auto; }
.pl-break-before-avoid  { break-before: avoid; }
.pl-break-before-all    { break-before: all; }
.pl-break-after-auto    { break-after: auto; }
.pl-break-after-avoid   { break-after: avoid; }
.pl-break-inside-auto   { break-inside: auto; }
.pl-break-inside-avoid  { break-inside: avoid; }


/* ═══════════════════════════════════════════════════════════
   WORDPRESS-SPECIFIC UTILITIES
   ═══════════════════════════════════════════════════════════ */

/* Override WP Alignments */
.pl-wp-no-align { float: none !important; margin: 0 !important; }
.pl-alignfull-override { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.pl-alignwide-override { margin-left: -64px; margin-right: -64px; max-width: calc(100% + 128px); }

/* WP Block spacing reset */
.pl-no-block-gap > * + * { margin-top: 0 !important; }
.pl-no-wp-margin { margin-top: 0 !important; margin-bottom: 0 !important; }

/* WP Image helpers */
.pl-img-full { width: 100%; height: auto; display: block; }
.pl-img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-img-contain { width: 100%; height: 100%; object-fit: contain; display: block; }

/* WP Editor Width Hints */
.pl-entry-content-narrow { max-width: 65ch; }
.pl-entry-content-normal { max-width: 75ch; }
.pl-entry-content-wide   { max-width: 90ch; }


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px
   ═══════════════════════════════════════════════════════════ */

/* ── sm (≥640px) ── */
@media (min-width: 640px) {
  .sm\:pl-hidden      { display: none; }
  .sm\:pl-block       { display: block; }
  .sm\:pl-flex        { display: flex; }
  .sm\:pl-grid        { display: grid; }
  .sm\:pl-flex-row    { flex-direction: row; }
  .sm\:pl-flex-col    { flex-direction: column; }
  .sm\:pl-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:pl-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:pl-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:pl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:pl-col-span-1  { grid-column: span 1 / span 1; }
  .sm\:pl-col-span-2  { grid-column: span 2 / span 2; }
  .sm\:pl-col-span-full { grid-column: 1 / -1; }
  .sm\:pl-w-full      { width: 100%; }
  .sm\:pl-w-auto      { width: auto; }
  .sm\:pl-text-left   { text-align: left; }
  .sm\:pl-text-center { text-align: center; }
  .sm\:pl-text-right  { text-align: right; }
  .sm\:pl-text-sm     { font-size: var(--text-sm); }
  .sm\:pl-text-base   { font-size: var(--text-base); }
  .sm\:pl-text-lg     { font-size: var(--text-lg); }
  .sm\:pl-text-xl     { font-size: var(--text-xl); }
  .sm\:pl-text-2xl    { font-size: var(--text-2xl); }
  .sm\:pl-p-4         { padding: var(--space-4); }
  .sm\:pl-p-6         { padding: var(--space-6); }
  .sm\:pl-p-8         { padding: var(--space-8); }
  .sm\:pl-px-4        { padding-left: var(--space-4); padding-right: var(--space-4); }
  .sm\:pl-px-6        { padding-left: var(--space-6); padding-right: var(--space-6); }
  .sm\:pl-py-4        { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .sm\:pl-py-8        { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .sm\:pl-gap-4       { gap: var(--space-4); }
  .sm\:pl-gap-6       { gap: var(--space-6); }
  .sm\:pl-gap-8       { gap: var(--space-8); }
  .sm\:pl-items-center { align-items: center; }
  .sm\:pl-justify-between { justify-content: space-between; }
  .sm\:pl-rounded-lg  { border-radius: var(--rounded-lg); }
}

/* ── md (≥768px) ── */
@media (min-width: 768px) {
  .md\:pl-hidden      { display: none; }
  .md\:pl-block       { display: block; }
  .md\:pl-flex        { display: flex; }
  .md\:pl-grid        { display: grid; }
  .md\:pl-flex-row    { flex-direction: row; }
  .md\:pl-flex-col    { flex-direction: column; }
  .md\:pl-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:pl-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:pl-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:pl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:pl-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:pl-col-span-1  { grid-column: span 1 / span 1; }
  .md\:pl-col-span-2  { grid-column: span 2 / span 2; }
  .md\:pl-col-span-3  { grid-column: span 3 / span 3; }
  .md\:pl-col-span-full { grid-column: 1 / -1; }
  .md\:pl-w-full      { width: 100%; }
  .md\:pl-w-auto      { width: auto; }
  .md\:pl-w-1\/2      { width: 50%; }
  .md\:pl-w-1\/3      { width: 33.333333%; }
  .md\:pl-w-2\/3      { width: 66.666667%; }
  .md\:pl-text-left   { text-align: left; }
  .md\:pl-text-center { text-align: center; }
  .md\:pl-text-right  { text-align: right; }
  .md\:pl-text-sm     { font-size: var(--text-sm); }
  .md\:pl-text-base   { font-size: var(--text-base); }
  .md\:pl-text-lg     { font-size: var(--text-lg); }
  .md\:pl-text-xl     { font-size: var(--text-xl); }
  .md\:pl-text-2xl    { font-size: var(--text-2xl); }
  .md\:pl-text-3xl    { font-size: var(--text-3xl); }
  .md\:pl-text-4xl    { font-size: var(--text-4xl); }
  .md\:pl-p-4         { padding: var(--space-4); }
  .md\:pl-p-6         { padding: var(--space-6); }
  .md\:pl-p-8         { padding: var(--space-8); }
  .md\:pl-p-12        { padding: var(--space-12); }
  .md\:pl-px-4        { padding-left: var(--space-4); padding-right: var(--space-4); }
  .md\:pl-px-6        { padding-left: var(--space-6); padding-right: var(--space-6); }
  .md\:pl-px-8        { padding-left: var(--space-8); padding-right: var(--space-8); }
  .md\:pl-py-4        { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .md\:pl-py-8        { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .md\:pl-py-12       { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .md\:pl-gap-4       { gap: var(--space-4); }
  .md\:pl-gap-6       { gap: var(--space-6); }
  .md\:pl-gap-8       { gap: var(--space-8); }
  .md\:pl-gap-10      { gap: var(--space-10); }
  .md\:pl-items-center { align-items: center; }
  .md\:pl-items-start  { align-items: flex-start; }
  .md\:pl-justify-between { justify-content: space-between; }
  .md\:pl-justify-center  { justify-content: center; }
  .md\:pl-rounded-xl  { border-radius: var(--rounded-xl); }
  .md\:pl-shadow-lg   { box-shadow: var(--shadow-lg); }
}

/* ── lg (≥1024px) ── */
@media (min-width: 1024px) {
  .lg\:pl-hidden      { display: none; }
  .lg\:pl-block       { display: block; }
  .lg\:pl-flex        { display: flex; }
  .lg\:pl-grid        { display: grid; }
  .lg\:pl-flex-row    { flex-direction: row; }
  .lg\:pl-flex-col    { flex-direction: column; }
  .lg\:pl-grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:pl-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:pl-col-span-1   { grid-column: span 1 / span 1; }
  .lg\:pl-col-span-2   { grid-column: span 2 / span 2; }
  .lg\:pl-col-span-3   { grid-column: span 3 / span 3; }
  .lg\:pl-col-span-4   { grid-column: span 4 / span 4; }
  .lg\:pl-col-span-6   { grid-column: span 6 / span 6; }
  .lg\:pl-col-span-full { grid-column: 1 / -1; }
  .lg\:pl-w-full       { width: 100%; }
  .lg\:pl-w-auto       { width: auto; }
  .lg\:pl-w-1\/2       { width: 50%; }
  .lg\:pl-w-1\/3       { width: 33.333333%; }
  .lg\:pl-text-left    { text-align: left; }
  .lg\:pl-text-center  { text-align: center; }
  .lg\:pl-text-right   { text-align: right; }
  .lg\:pl-text-xl      { font-size: var(--text-xl); }
  .lg\:pl-text-2xl     { font-size: var(--text-2xl); }
  .lg\:pl-text-3xl     { font-size: var(--text-3xl); }
  .lg\:pl-text-4xl     { font-size: var(--text-4xl); }
  .lg\:pl-text-5xl     { font-size: var(--text-5xl); }
  .lg\:pl-text-6xl     { font-size: var(--text-6xl); }
  .lg\:pl-p-6          { padding: var(--space-6); }
  .lg\:pl-p-8          { padding: var(--space-8); }
  .lg\:pl-p-10         { padding: var(--space-10); }
  .lg\:pl-p-12         { padding: var(--space-12); }
  .lg\:pl-p-16         { padding: var(--space-16); }
  .lg\:pl-px-6         { padding-left: var(--space-6); padding-right: var(--space-6); }
  .lg\:pl-px-8         { padding-left: var(--space-8); padding-right: var(--space-8); }
  .lg\:pl-py-8         { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .lg\:pl-py-12        { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .lg\:pl-py-16        { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .lg\:pl-py-20        { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .lg\:pl-gap-6        { gap: var(--space-6); }
  .lg\:pl-gap-8        { gap: var(--space-8); }
  .lg\:pl-gap-10       { gap: var(--space-10); }
  .lg\:pl-gap-12       { gap: var(--space-12); }
  .lg\:pl-items-center { align-items: center; }
  .lg\:pl-items-start  { align-items: flex-start; }
  .lg\:pl-justify-between { justify-content: space-between; }
  .lg\:pl-sticky       { position: sticky; }
}

/* ── xl (≥1280px) ── */
@media (min-width: 1280px) {
  .xl\:pl-hidden        { display: none; }
  .xl\:pl-block         { display: block; }
  .xl\:pl-flex          { display: flex; }
  .xl\:pl-grid          { display: grid; }
  .xl\:pl-grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:pl-grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:pl-grid-cols-5   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:pl-grid-cols-6   { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:pl-col-span-4    { grid-column: span 4 / span 4; }
  .xl\:pl-col-span-6    { grid-column: span 6 / span 6; }
  .xl\:pl-text-4xl      { font-size: var(--text-4xl); }
  .xl\:pl-text-5xl      { font-size: var(--text-5xl); }
  .xl\:pl-text-6xl      { font-size: var(--text-6xl); }
  .xl\:pl-text-7xl      { font-size: var(--text-7xl); }
  .xl\:pl-p-12          { padding: var(--space-12); }
  .xl\:pl-p-16          { padding: var(--space-16); }
  .xl\:pl-px-12         { padding-left: var(--space-12); padding-right: var(--space-12); }
  .xl\:pl-py-16         { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .xl\:pl-py-20         { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .xl\:pl-gap-8         { gap: var(--space-8); }
  .xl\:pl-gap-12        { gap: var(--space-12); }
  .xl\:pl-gap-16        { gap: var(--space-16); }
}

/* ── 2xl (≥1536px) ── */
@media (min-width: 1536px) {
  .\32xl\:pl-hidden      { display: none; }
  .\32xl\:pl-block       { display: block; }
  .\32xl\:pl-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:pl-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .\32xl\:pl-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .\32xl\:pl-text-7xl    { font-size: var(--text-7xl); }
  .\32xl\:pl-text-8xl    { font-size: var(--text-8xl); }
  .\32xl\:pl-p-16        { padding: var(--space-16); }
  .\32xl\:pl-p-20        { padding: var(--space-20); }
  .\32xl\:pl-px-16       { padding-left: var(--space-16); padding-right: var(--space-16); }
  .\32xl\:pl-gap-16      { gap: var(--space-16); }
}

/* ── max-sm (<640px) ── */
@media (max-width: 639px) {
  .max-sm\:pl-hidden   { display: none; }
  .max-sm\:pl-flex-col { flex-direction: column; }
  .max-sm\:pl-w-full   { width: 100%; }
  .max-sm\:pl-text-center { text-align: center; }
  .max-sm\:pl-p-4      { padding: var(--space-4); }
  .max-sm\:pl-gap-4    { gap: var(--space-4); }
}

/* ── max-md (<768px) ── */
@media (max-width: 767px) {
  .max-md\:pl-hidden   { display: none; }
  .max-md\:pl-flex-col { flex-direction: column; }
  .max-md\:pl-w-full   { width: 100%; }
  .max-md\:pl-text-center { text-align: center; }
  .max-md\:pl-p-4      { padding: var(--space-4); }
}

/* ── max-lg (<1024px) ── */
@media (max-width: 1023px) {
  .max-lg\:pl-hidden   { display: none; }
  .max-lg\:pl-flex-col { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .dark\:pl-bg-gray-800 { background-color: #1f2937; }
  .dark\:pl-bg-gray-900 { background-color: #111827; }
  .dark\:pl-bg-gray-950 { background-color: #030712; }
  .dark\:pl-text-white  { color: #fff; }
  .dark\:pl-text-gray-100 { color: #f3f4f6; }
  .dark\:pl-text-gray-200 { color: #e5e7eb; }
  .dark\:pl-text-gray-300 { color: #d1d5db; }
  .dark\:pl-border-gray-700 { border-color: #374151; }
  .dark\:pl-border-gray-600 { border-color: #4b5563; }
  .dark\:pl-shadow-none { box-shadow: none; }
}

/* WordPress .is-dark-theme class support */
.is-dark-theme .dark-theme\:pl-bg-gray-800 { background-color: #1f2937; }
.is-dark-theme .dark-theme\:pl-bg-gray-900 { background-color: #111827; }
.is-dark-theme .dark-theme\:pl-text-white  { color: #fff; }
.is-dark-theme .dark-theme\:pl-text-gray-200 { color: #e5e7eb; }
.is-dark-theme .dark-theme\:pl-border-gray-700 { border-color: #374151; }


/* ═══════════════════════════════════════════════════════════
   PSEUDO-CLASS VARIANTS  (hover, focus, active, disabled)
   ═══════════════════════════════════════════════════════════ */

/* Hover */
.hover\:pl-bg-gray-100:hover  { background-color: #f3f4f6; }
.hover\:pl-bg-gray-200:hover  { background-color: #e5e7eb; }
.hover\:pl-bg-gray-700:hover  { background-color: #374151; }
.hover\:pl-bg-blue-600:hover  { background-color: #2563eb; }
.hover\:pl-bg-blue-700:hover  { background-color: #1d4ed8; }
.hover\:pl-text-blue-600:hover { color: #2563eb; }
.hover\:pl-text-gray-900:hover { color: #111827; }
.hover\:pl-text-white:hover    { color: #fff; }
.hover\:pl-underline:hover     { text-decoration-line: underline; }
.hover\:pl-no-underline:hover  { text-decoration-line: none; }
.hover\:pl-shadow-md:hover  { box-shadow: var(--shadow-md); }
.hover\:pl-shadow-lg:hover  { box-shadow: var(--shadow-lg); }
.hover\:pl-shadow-xl:hover  { box-shadow: var(--shadow-xl); }
.hover\:pl-scale-105:hover  { transform: scale(1.05); }
.hover\:pl-scale-110:hover  { transform: scale(1.1); }
.hover\:pl-scale-95:hover   { transform: scale(0.95); }
.hover\:pl-opacity-75:hover { opacity: 0.75; }
.hover\:pl-opacity-100:hover { opacity: 1; }
.hover\:pl-border-blue-500:hover { border-color: #3b82f6; }
.hover\:pl-translate-y--1:hover { transform: translateY(-4px); }

/* Focus */
.focus\:pl-outline-none:focus       { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:pl-ring-2:focus             { box-shadow: 0 0 0 2px currentColor; }
.focus\:pl-ring-blue-500:focus      { box-shadow: 0 0 0 2px #3b82f6; }
.focus\:pl-ring-offset-2:focus      { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.focus\:pl-border-blue-500:focus    { border-color: #3b82f6; }
.focus-visible\:pl-ring-2:focus-visible { box-shadow: 0 0 0 2px #3b82f6; }

/* Active */
.active\:pl-scale-95:active   { transform: scale(0.95); }
.active\:pl-bg-blue-700:active { background-color: #1d4ed8; }
.active\:pl-bg-gray-200:active { background-color: #e5e7eb; }
.active\:pl-shadow-sm:active   { box-shadow: var(--shadow-sm); }

/* Disabled */
.disabled\:pl-opacity-50:disabled      { opacity: 0.5; }
.disabled\:pl-cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:pl-pointer-events-none:disabled { pointer-events: none; }

/* Group Hover */
.pl-group:hover .group-hover\:pl-visible    { visibility: visible; }
.pl-group:hover .group-hover\:pl-invisible  { visibility: hidden; }
.pl-group:hover .group-hover\:pl-opacity-100 { opacity: 1; }
.pl-group:hover .group-hover\:pl-opacity-0  { opacity: 0; }
.pl-group:hover .group-hover\:pl-translate-x-0 { transform: translateX(0); }
.pl-group:hover .group-hover\:pl-text-blue-600 { color: #2563eb; }
.pl-group:hover .group-hover\:pl-underline { text-decoration-line: underline; }


/* ═══════════════════════════════════════════════════════════
   PRINT UTILITIES
   ═══════════════════════════════════════════════════════════ */

@media print {
  .print\:pl-hidden        { display: none; }
  .print\:pl-block         { display: block; }
  .print\:pl-text-black    { color: #000; }
  .print\:pl-bg-white      { background-color: #fff; }
  .print\:pl-shadow-none   { box-shadow: none; }
  .print\:pl-no-underline  { text-decoration: none; }
  .print\:pl-break-before  { break-before: page; }
  .print\:pl-break-avoid   { break-inside: avoid; }
}


/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:pl-transition-none { transition: none; }
  .motion-reduce\:pl-animate-none    { animation: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   COMPONENT RECIPES  (common WordPress UI patterns)
   ═══════════════════════════════════════════════════════════ */

/* Card */
.pl-card {
  background-color: #fff;
  border-radius: var(--rounded-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.pl-card-body { padding: var(--space-6); }

/* Badge */
.pl-badge {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--rounded-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

/* Button base */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--rounded-md);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: 20px;
  cursor: pointer;
  transition: var(--transition-base);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.pl-btn:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
.pl-btn--primary { background-color: #2563eb; color: #fff; }
.pl-btn--primary:hover { background-color: #1d4ed8; }
.pl-btn--secondary { background-color: #f3f4f6; color: #111827; }
.pl-btn--secondary:hover { background-color: #e5e7eb; }
.pl-btn--outline { background-color: transparent; border-color: #d1d5db; color: #374151; }
.pl-btn--outline:hover { background-color: #f9fafb; }
.pl-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.pl-btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }

/* Divider */
.pl-divider { border: 0; border-top: 1px solid #e5e7eb; margin: var(--space-4) 0; }
.pl-divider-y { border: 0; border-left: 1px solid #e5e7eb; align-self: stretch; margin: 0 var(--space-4); }

/* Prose reset for WP content */
.pl-prose-reset p  { margin-top: 0; margin-bottom: var(--space-4); }
.pl-prose-reset h1, .pl-prose-reset h2, .pl-prose-reset h3,
.pl-prose-reset h4, .pl-prose-reset h5, .pl-prose-reset h6 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.pl-prose-reset ul, .pl-prose-reset ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.pl-prose-reset li { margin-bottom: var(--space-1); }
.pl-prose-reset img { max-width: 100%; height: auto; }

/* ─── END OF FILE ──────────────────────────────────────────── */