/**
 * Hauzii Decor Utilities
 *
 * data-hz-decor「只設一個顏色」的純裝飾綁定掛載 class。
 * paint 目標由 compiler 依值後綴烘進 markup(runtime 零猜測):
 *   .hz-decor-tint   → background-color(髮絲線 / 圓點 / chip 底 / 色塊)
 *   .hz-decor-ink    → color(裝飾字 / svg currentColor / 水印字)
 *   .hz-decor-border → border-color(獨立空心框 / 底線裝飾)
 * 色值來自 DecorBindingProcessor 產出的 inline CSS 變數 --hz-decor-color-*。
 * 3-tier 響應式:tablet(<=1023) / mobile(<=767) 各自 fallback 回上一級,
 * 只設 desktop 時全斷點沿用 desktop 值。
 *
 * ⚠️ 選擇器一律寫 `:root body .hz-decor-*`(家規,對齊 GapDomain / textlink 家族)。
 * 裸 class(0,1,0)會輸給主題的元素 reset —— Blocksy 有 `hr{background-color:...}`,
 * 而 WordPress 會把主題編輯器樣式自動加上 `.editor-styles-wrapper` 前綴升到 (0,1,1),
 * 於是「前台會變色、編輯器預覽不會變」。見 docs/tech-debt/blocksy-theme-reset-systemic-20260630.md。
 * 作者端另有規則:裝飾元素用 <div>/<span>,不要用 <hr>。
 */

:root body .hz-decor-tint {
    background-color: var(--hz-decor-color-desktop);
}

:root body .hz-decor-ink {
    color: var(--hz-decor-color-desktop);
}

:root body .hz-decor-border {
    border-color: var(--hz-decor-color-desktop);
}

@media (max-width: 1023px) {
    :root body .hz-decor-tint {
        background-color: var(--hz-decor-color-tablet, var(--hz-decor-color-desktop));
    }
    :root body .hz-decor-ink {
        color: var(--hz-decor-color-tablet, var(--hz-decor-color-desktop));
    }
    :root body .hz-decor-border {
        border-color: var(--hz-decor-color-tablet, var(--hz-decor-color-desktop));
    }
}

@media (max-width: 767px) {
    :root body .hz-decor-tint {
        background-color: var(--hz-decor-color-mobile, var(--hz-decor-color-tablet, var(--hz-decor-color-desktop)));
    }
    :root body .hz-decor-ink {
        color: var(--hz-decor-color-mobile, var(--hz-decor-color-tablet, var(--hz-decor-color-desktop)));
    }
    :root body .hz-decor-border {
        border-color: var(--hz-decor-color-mobile, var(--hz-decor-color-tablet, var(--hz-decor-color-desktop)));
    }
}