/* ============================================
   tokens.css — haven 设计令牌
   「暖白纸面 × 精密仪器」：暖调中性基底 + 蓝色主色 +
   任务控制台式语义状态色。浅色/深色双套，跟随系统切换。
   ============================================ */

:root {
    color-scheme: light;

    /* ── 品牌主色（蓝色系） ─── */
    --color-primary:       #2563EB;
    --color-primary-hover: #1D4ED8;
    --color-primary-soft:  #EFF6FF;
    --color-primary-ring:  rgba(37, 99, 235, .16);
    --color-on-primary:    #FFFFFF;

    /* ── 语义色（状态：成功/警告/危险/信息） ─── */
    --color-success:    #15803D;
    --color-success-bg: #E6F2E9;
    --color-warning:    #A16207;
    --color-warning-bg: #F7EFDA;
    --color-danger:     #C2410C;
    --color-danger-bg:  #FAE8E2;
    --color-info:       #0E7490;
    --color-info-bg:    #E1EFF3;

    /* ── 暖调中性 ─── */
    --color-bg:            #F4F4F1;
    --color-surface:       #FCFCFA;
    --color-surface-2:     #F0F0EC;
    --color-surface-hover: #EFEFEA;
    --color-text:          #1B1B18;
    --color-text-muted:    #6E6D63;
    --color-text-faint:    #8B8A7F;
    --color-border:        #E4E3DB;
    --color-border-strong: #CBC9BC;
    --color-backdrop:      rgba(27, 27, 24, .42);

    /* ── 阴影（发丝边框为主，阴影仅用于浮层） ─── */
    --shadow-sm: 0 1px 2px rgba(27, 27, 24, .04);
    --shadow:    0 1px 2px rgba(27, 27, 24, .05);
    --shadow-md: 0 6px 20px rgba(27, 27, 24, .08), 0 2px 6px rgba(27, 27, 24, .04);
    --shadow-lg: 0 16px 44px rgba(27, 27, 24, .14), 0 4px 12px rgba(27, 27, 24, .06);

    /* ── 布局 ─── */
    --header-height: 60px;
    --shell-side-width: 208px;

    /* ── 圆角 ─── */
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;

    /* ── 字体栈（中文安全） ─── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Noto Sans CJK SC", sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                 "Liberation Mono", monospace;

    /* ── 动效 ─── */
    --dur-fast: .15s;
    --dur:      .2s;
    --ease:     cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* ── 品牌主色（蓝色系 深色模式） ─── */
        --color-primary:       #60A5FA;
        --color-primary-hover: #93C5FD;
        --color-primary-soft:  rgba(96, 165, 250, .13);
        --color-primary-ring:  rgba(96, 165, 250, .26);
        --color-on-primary:    #0F172A;

        --color-success:    #34D399;
        --color-success-bg: rgba(52, 211, 153, .13);
        --color-warning:    #FBBF24;
        --color-warning-bg: rgba(251, 191, 36, .12);
        --color-danger:     #F87171;
        --color-danger-bg:  rgba(248, 113, 113, .13);
        --color-info:       #22D3EE;
        --color-info-bg:    rgba(34, 211, 238, .12);

        --color-bg:            #070B11;
        --color-surface:       #0D141E;
        --color-surface-2:     #121B27;
        --color-surface-hover: #16202E;
        --color-text:          #E4E9F0;
        --color-text-muted:    #8D97A8;
        --color-text-faint:    #5B6678;
        --color-border:        #1D2837;
        --color-border-strong: #2C3C52;
        --color-backdrop:      rgba(2, 6, 14, .66);

        --shadow-sm: 0 1px 2px rgba(0,0,0,.34);
        --shadow:    0 1px 3px rgba(0,0,0,.4);
        --shadow-md: 0 6px 20px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.32);
        --shadow-lg: 0 16px 44px rgba(0,0,0,.56), 0 4px 12px rgba(0,0,0,.38);
    }
}