/**
 * iMusic「Aurora」设计令牌
 * 与 iOS 端 DesignSystem.swift 共用同一套数值，改动需要两端同步。
 */

/* 注册成真正的数值类型，律动变量才能参与 calc()，主题分量才能做过渡 */
@property --theme-h { syntax: "<number>"; inherits: true; initial-value: 347; }
@property --theme-s { syntax: "<percentage>"; inherits: true; initial-value: 99%; }
@property --theme-l { syntax: "<percentage>"; inherits: true; initial-value: 59%; }
@property --bass    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --mid     { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --treble  { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --level   { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --beat    { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
    color-scheme: dark;

    /* ---------- 颜色 ---------- */
    --bg-void: #07070b;
    --bg-deep: #0c0c12;

    --surface-1: rgba(255, 255, 255, 0.045);
    --surface-2: rgba(255, 255, 255, 0.075);
    --surface-line: rgba(255, 255, 255, 0.10);

    --text-1: #f2f2f5;
    --text-2: rgba(242, 242, 245, 0.62);
    --text-3: rgba(242, 242, 245, 0.38);

    --brand-hot: #fe2c55;
    --brand-cool: #25f4ee;
    --danger: #ff4d5e;
    --success: #22d67f;

    /* ---------- 动态主题（Visualizer.setCover 运行时注入 h/s/l） ---------- */
    --theme-h: 347;
    --theme-s: 99%;
    --theme-l: 59%;
    --theme: hsl(var(--theme-h) var(--theme-s) var(--theme-l));
    --theme-soft: hsl(var(--theme-h) var(--theme-s) 62% / 0.30);
    --theme-glow: hsl(var(--theme-h) 90% 60% / 0.45);

    /* ---------- 音频律动（Visualizer 每帧写入，0~1） ---------- */
    --bass: 0;
    --mid: 0;
    --treble: 0;
    --level: 0;
    --beat: 0;

    /* ---------- 圆角 ---------- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ---------- 间距（4px 栅格） ---------- */
    --sp-4: 4px;
    --sp-8: 8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-40: 40px;

    /* ---------- 阴影与玻璃 ---------- */
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 40px var(--theme-glow);
    --glass-blur: 20px;
    --glass-sat: 1.5;

    /* ---------- 字体 ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-15: 15px;
    --fs-17: 17px;
    --fs-20: 20px;
    --fs-26: 26px;
    --fs-34: 34px;
    --title-tracking: -0.02em;

    /* ---------- 时长与缓动 ---------- */
    --dur-fast: 140ms;
    --dur-base: 240ms;
    --dur-slow: 420ms;
    --dur-theme: 900ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* ---------- 层级 ---------- */
    --z-nav: 100;
    --z-mini: 200;
    --z-player: 300;
    --z-modal: 400;
    --z-toast: 900;

    /* ---------- 共享布局尺寸 ---------- */
    --nav-h: 56px;
    --mini-h: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* 切歌时整页配色平滑漂移 */
    transition:
        --theme-h var(--dur-theme) ease,
        --theme-s var(--dur-theme) ease,
        --theme-l var(--dur-theme) ease;
}

/**
 * 降级：律动变量锁死在静态中值。
 * 必须带 !important —— Visualizer 写在 documentElement 的行内样式否则会盖过这里。
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --bass: 0.35 !important;
        --mid: 0.30 !important;
        --treble: 0.25 !important;
        --level: 0.40 !important;
        --beat: 0 !important;

        --dur-fast: 1ms;
        --dur-base: 1ms;
        --dur-slow: 1ms;
        --dur-theme: 1ms;
    }
}