/* PlayingInChina — 颜色令牌（design theme 覆盖层）
   work_mode=design_theme · 只重绑语义色，不写具体选择器样式。
   权威：websites/playinginchina.com/design/full-ui-demo/styles.css Phase-2
   （--blue:#0f66d8 · sticky 白顶栏 · Inter · --ink/--muted/--line）。
   皮肤选择器样式在 assets/css/playinginchina.css。

   硬钉：店面固定浅色品牌面。系统深色 / data-theme=dark 不得把
   canvas·结账成功页刷成 #0b1220（白顶栏 + 黑正文撕裂）。深色区块只走
   --color-bg-dark*（footer/CTA），不走全局 surface。 */

:root,
[data-w-area="frontend"] {
    /* Phase-2 语义色重钉 */
    --color-bg-canvas:        #f8fbff;
    /* 框架详情壳用 --color-bg-primary；未钉时易漂到奶油纸/暗底 */
    --color-bg-primary:       #ffffff;
    --color-bg-secondary:     #f3f8ff;
    --color-bg-tertiary:      #eef5ff;
    --color-bg-elevated:      #ffffff;
    --color-surface:          #ffffff;
    --color-surface-subtle:   #f3f8ff;
    --color-surface-muted:    #eef5ff;

    --color-text-primary:     #18304f;
    --color-text-secondary:   #4d6480;
    --color-text-tertiary:    #566d86;
    --color-text-muted:       #4d6480;
    --color-text:             #18304f;
    --color-text-inverse:     #ffffff;

    --color-border-default:   #e4edf7;
    --color-border-strong:    #dce6f2;

    --color-brand-primary:    #0f66d8;
    --color-brand-secondary:  #102d59;
    --color-brand-soft:       #edf5ff;
    /* 框架别名：禁止残留旧 terracotta 主色导致回漂 */
    --color-primary:          #0f66d8;
    --color-primary-hover:    #155db5;
    --color-primary-dark:     #102d59;
    --color-accent-primary:   #ffb51b;
    --color-accent-soft:      #fff6e0;
    --color-price:            #cf3a2a;
    --color-link:             #176ee5;

    /* 深色区块（CTA / footer）— Phase-2 navy */
    --color-bg-dark:          #0d2442;
    --color-bg-dark-secondary:#102d59;
    --color-bg-dark-tertiary: #173e70;

    /* 框架 chrome / layout 常用别名 */
    --weline-theme-primary:   var(--color-brand-primary);
    --weline-theme-text:      var(--color-text-primary);
    --weline-theme-text-muted:var(--color-text-secondary);
    --weline-theme-border-subtle: var(--color-border-default);
    --weline-theme-surface:   var(--color-surface);
    --weline-theme-surface-subtle: var(--color-surface-subtle);
    --weline-theme-surface-muted: var(--color-surface-muted);
    --weline-theme-canvas:    var(--color-bg-canvas);
    --weline-theme-body-bg:   var(--color-bg-canvas);
    --weline-theme-body-text: var(--color-text-primary);
    --weline-chrome-bg-primary: var(--color-surface);
    --weline-chrome-body-bg:  var(--color-bg-canvas);
    --weline-chrome-body-text: var(--color-text-primary);
    --weline-layout-surface-primary: var(--color-surface);
    --weline-layout-surface-secondary: var(--color-bg-secondary);
    --weline-layout-surface-tertiary: var(--color-bg-tertiary);
    --weline-layout-text-primary: var(--color-text-primary);
    color-scheme: light;
}

/* 显式 dark / OS dark：仍保持 Phase-2 浅色店面（品牌面 ≠ 后台 system dark） */
[data-theme="dark"],
[data-w-area="frontend"][data-theme="dark"],
html[data-theme="dark"] {
    --color-bg-canvas:        #f8fbff;
    --color-bg-primary:       #ffffff;
    --color-bg-secondary:     #f3f8ff;
    --color-bg-tertiary:      #eef5ff;
    --color-bg-elevated:      #ffffff;
    --color-surface:          #ffffff;
    --color-surface-subtle:   #f3f8ff;
    --color-surface-muted:    #eef5ff;
    --color-text-primary:     #18304f;
    --color-text-secondary:   #4d6480;
    --color-text-tertiary:    #566d86;
    --color-text-muted:       #4d6480;
    --color-text:             #18304f;
    --color-text-inverse:     #ffffff;
    --color-border-default:   #e4edf7;
    --color-border-strong:    #dce6f2;
    --color-brand-primary:    #0f66d8;
    --color-brand-soft:       #edf5ff;
    --color-primary:          #0f66d8;
    --color-primary-hover:    #155db5;
    --color-accent-primary:   #ffb51b;
    --color-accent-soft:      #fff6e0;
    --color-price:            #cf3a2a;
    --color-link:             #176ee5;
    --color-bg-dark:          #0d2442;
    --color-bg-dark-secondary:#102d59;
    --color-bg-dark-tertiary: #173e70;
    --weline-theme-primary:   var(--color-brand-primary);
    --weline-theme-text:      var(--color-text-primary);
    --weline-theme-text-muted:var(--color-text-secondary);
    --weline-theme-border-subtle: var(--color-border-default);
    --weline-theme-surface:   var(--color-surface);
    --weline-theme-surface-subtle: var(--color-surface-subtle);
    --weline-theme-surface-muted: var(--color-surface-muted);
    --weline-theme-canvas:    var(--color-bg-canvas);
    --weline-theme-body-bg:   var(--color-bg-canvas);
    --weline-theme-body-text: var(--color-text-primary);
    --weline-chrome-bg-primary: var(--color-surface);
    --weline-chrome-body-bg:  var(--color-bg-canvas);
    --weline-chrome-body-text: var(--color-text-primary);
    --weline-layout-surface-primary: var(--color-surface);
    --weline-layout-surface-secondary: var(--color-bg-secondary);
    --weline-layout-surface-tertiary: var(--color-bg-tertiary);
    --weline-layout-text-primary: var(--color-text-primary);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root,
    :root:not([data-theme-preference]),
    :root[data-theme-preference="system"],
    :root[data-theme="dark"],
    :root[data-theme="light"],
    [data-w-area="frontend"] {
        --color-bg-canvas:        #f8fbff;
        --color-bg-primary:       #ffffff;
        --color-bg-secondary:     #f3f8ff;
        --color-bg-tertiary:      #eef5ff;
        --color-bg-elevated:      #ffffff;
        --color-surface:          #ffffff;
        --color-surface-subtle:   #f3f8ff;
        --color-surface-muted:    #eef5ff;
        --color-text-primary:     #18304f;
        --color-text-secondary:   #4d6480;
        --color-text-tertiary:    #566d86;
        --color-text-muted:       #4d6480;
        --color-text:             #18304f;
        --color-text-inverse:     #ffffff;
        --color-border-default:   #e4edf7;
        --color-border-strong:    #dce6f2;
        --color-brand-primary:    #0f66d8;
        --color-primary:          #0f66d8;
        --color-link:             #176ee5;
        --weline-theme-canvas:    var(--color-bg-canvas);
        --weline-theme-body-bg:   var(--color-bg-canvas);
        --weline-theme-body-text: var(--color-text-primary);
        --weline-chrome-body-bg:  var(--color-bg-canvas);
        --weline-chrome-body-text: var(--color-text-primary);
        --weline-theme-surface:   var(--color-surface);
        --weline-theme-surface-subtle: var(--color-surface-subtle);
        --weline-layout-surface-primary: var(--color-surface);
        --weline-layout-surface-secondary: var(--color-bg-secondary);
        --weline-layout-text-primary: var(--color-text-primary);
        color-scheme: light;
    }
}