/**
 * Token Bridge — Tailwind 固定颜色 → PufferGo CSS 变量映射
 *
 * 此文件必须加载在 tailwind.css 之后。
 * 两者选择器特异性相同，后加载的覆盖先加载的。
 *
 * 作用域：.puffergo-fullpage-layout（header + footer + 所有内容区）
 */

/* ── Background ── */

.puffergo-fullpage-layout .bg-white {
    background-color: var(--pg-base);
}

.puffergo-fullpage-layout .bg-indigo-600 {
    background-color: var(--pg-primary);
}

.puffergo-fullpage-layout .bg-gray-50,
.puffergo-fullpage-layout .hover\:bg-gray-50:hover {
    background-color: var(--pg-surface);
}

.puffergo-fullpage-layout .group-hover\:bg-white:hover,
.puffergo-fullpage-layout .group:hover .group-hover\:bg-white {
    background-color: var(--pg-base);
}

.puffergo-fullpage-layout .bg-gray-900\/20 {
    background-color: color-mix(in srgb, var(--pg-primary) 20%, transparent);
}

/* ── Text Color ── */

.puffergo-fullpage-layout .text-gray-900,
.puffergo-fullpage-layout .text-gray-700 {
    color: var(--pg-text-main);
}

.puffergo-fullpage-layout .text-gray-400,
.puffergo-fullpage-layout .text-gray-600 {
    color: var(--pg-text-muted);
}

.puffergo-fullpage-layout .text-indigo-600,
.puffergo-fullpage-layout .group-hover\:text-indigo-600:hover,
.puffergo-fullpage-layout .group:hover .group-hover\:text-indigo-600,
.puffergo-fullpage-layout .hover\:text-indigo-600:hover {
    color: var(--pg-primary);
}

/* ── Border / Outline / Ring ── */

.puffergo-fullpage-layout .outline-gray-900\/5 {
    outline-color: var(--pg-border);
}

.puffergo-fullpage-layout .divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--pg-border);
}

.puffergo-fullpage-layout .sm\:ring-gray-900\/10,
.puffergo-fullpage-layout .ring-gray-200,
.puffergo-fullpage-layout .sm\:ring-gray-200\/80 {
    --tw-ring-color: var(--pg-border);
}

.puffergo-fullpage-layout .border-gray-200,
.puffergo-fullpage-layout .border-gray-200\/10 {
    border-color: var(--pg-border);
}