/* ========================================
   TELL ME WHY - マツエの携帯
   黄昏夕暮れテーマ
   ======================================== */

:root {
    /* ========================================
       主色调 - 黄昏の空
       基于原作封面的夕暮色调
       ======================================== */

    /* 深层背景 - 夜幕将至 */
    --bg-deep: #1a1520;
    --bg-dark: rgba(26, 21, 32, 0.92);
    --bg-medium: rgba(45, 35, 50, 0.75);
    --bg-light: rgba(70, 55, 75, 0.5);

    /* 夕暮れグラデーション */
    --sunset-orange: #e8945a;
    --sunset-pink: #d4707a;
    --sunset-purple: #8b6b8a;
    --twilight-blue: #4a5a78;

    /* 警察制服色 - 藏青 */
    --uniform-navy: #2a3a5c;
    --uniform-dark: #1e2a42;

    /* 木門の色 - 暖褐色 */
    --door-brown: #8b7355;
    --door-gold: #c9a86c;

    /* 强调色 - 夕陽の赤み */
    --accent-primary: #e8945a;
    --accent-secondary: #d4707a;
    --accent-warm: #c9a86c;
    --accent-glow: rgba(232, 148, 90, 0.35);

    /* 文字色 - 温かみのある白 */
    --text-primary: #f5f0eb;
    --text-secondary: #d4ccc4;
    --text-muted: #9a8f85;

    /* 玻璃效果 - 带暖色调 */
    --glass-bg: rgba(26, 21, 32, 0.7);
    --glass-bg-light: rgba(255, 245, 235, 0.06);
    --glass-border: rgba(255, 245, 235, 0.1);
    --shadow-soft: 0 4px 24px rgba(20, 15, 25, 0.4);
    --shadow-warm: 0 4px 20px rgba(232, 148, 90, 0.15);

    /* App图标色 - 黄昏色系 */
    --icon-player: linear-gradient(135deg, #d4707a 0%, #a85060 100%);
    --icon-messages: linear-gradient(135deg, #8b6b8a 0%, #6a5068 100%);
    --icon-diary: linear-gradient(135deg, #4a5a78 0%, #384560 100%);
    --icon-memo: linear-gradient(135deg, #7a6a60 0%, #5a4a42 100%);
    --icon-browser: linear-gradient(135deg, #6a6078 0%, #4a4558 100%);
    --icon-calendar: linear-gradient(135deg, #c9a86c 0%, #a08550 100%);

    /* 尺寸 */
    --status-bar-height: 44px;
    --home-bar-height: 34px;
    --app-header-height: 56px;
    --icon-size: 60px;

    /* 字体 */
    --font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--sunset-orange);
    color: var(--bg-deep);
}

/* 滚动条 */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--glass-border);
    border-radius: 2px;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes subtleGlow {
    0%, 100% { box-shadow: 0 0 8px var(--accent-glow); }
    50% { box-shadow: 0 0 16px var(--accent-glow), 0 0 28px rgba(212, 112, 122, 0.25); }
}

/* 夕暮れ呼吸动画 */
@keyframes twilightPulse {
    0%, 100% {
        opacity: 0.6;
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        filter: brightness(1.1);
    }
}

/* 按钮 */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

button:active {
    transform: scale(0.96);
}