/**
 * YC Design System - 统一设计令牌
 * 所有新页面/外壳统一从这里取颜色、字体、圆角、阴影，避免各页面各写一套。
 * 风格：暖白纸面 + 墨色文字 + 单一墨蓝强调色，克制留白，细线分隔。
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* 纸面与表面 */
    --ds-bg: #f6f6f3;
    --ds-bg-sunken: #efeee9;
    --ds-surface: #ffffff;
    --ds-surface-2: #fafaf8;
    --ds-overlay: rgba(20, 20, 24, 0.48);

    /* 墨色文字 */
    --ds-text: #18181c;
    --ds-text-2: #4f5058;
    --ds-text-3: #8a8b93;
    --ds-text-inverse: #f7f7f5;

    /* 线 */
    --ds-border: #e6e4de;
    --ds-border-strong: #d4d1c9;
    --ds-divider: rgba(24, 24, 28, 0.06);

    /* 品牌色：蓝紫 */
    --ds-accent: #4f5bf5;
    --ds-accent-hover: #4250e6;
    --ds-accent-soft: #eef0ff;
    --ds-accent-ring: rgba(79, 91, 245, 0.2);
    --ds-accent-2: #8b5cf6;
    --ds-gradient: linear-gradient(135deg, #4f5bf5 0%, #7c5cf6 100%);
    --ds-gradient-hover: linear-gradient(135deg, #4250e6 0%, #7050ec 100%);

    /* 功能图标配色：柔和底 + 饱和前景 */
    --ds-hue-blue: #3b6cf6;
    --ds-hue-blue-soft: #ebf1ff;
    --ds-hue-violet: #7c5cf6;
    --ds-hue-violet-soft: #f2eeff;
    --ds-hue-teal: #0f9f8f;
    --ds-hue-teal-soft: #e5f6f3;
    --ds-hue-amber: #d9822b;
    --ds-hue-amber-soft: #fdf2e6;
    --ds-hue-rose: #e0527a;
    --ds-hue-rose-soft: #fdecf1;

    /* 深墨（深色面板、主按钮） */
    --ds-ink: #141418;
    --ds-ink-2: #1d1d23;
    --ds-ink-line: rgba(255, 255, 255, 0.08);

    /* 语义色 */
    --ds-success: #1f8a5b;
    --ds-success-soft: #e8f4ee;
    --ds-warning: #b7791f;
    --ds-warning-soft: #fbf3e4;
    --ds-danger: #cf3f3f;
    --ds-danger-soft: #fbecec;

    /* 字体 */
    --ds-font: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ds-font-num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* 圆角 */
    --ds-radius-sm: 6px;
    --ds-radius: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;

    /* 阴影：多层低透明度，模拟真实投影 */
    --ds-shadow-xs: 0 1px 2px rgba(20, 20, 24, 0.04);
    --ds-shadow-sm: 0 1px 2px rgba(20, 20, 24, 0.04), 0 2px 6px rgba(20, 20, 24, 0.04);
    --ds-shadow: 0 1px 2px rgba(20, 20, 24, 0.04), 0 8px 24px rgba(20, 20, 24, 0.06);
    --ds-shadow-lg: 0 2px 4px rgba(20, 20, 24, 0.04), 0 24px 56px rgba(20, 20, 24, 0.12);

    /* 动效 */
    --ds-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ds-dur: 160ms;
}

/* ==================== 基础组件 ==================== */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ds-radius);
    font: 500 14px/1 var(--ds-font);
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease);
    text-decoration: none;
    white-space: nowrap;
}

.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ds-accent-ring); }

.ds-btn-primary {
    background: var(--ds-gradient);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 91, 245, 0.2), 0 6px 16px rgba(79, 91, 245, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ds-btn-primary:hover {
    background: var(--ds-gradient-hover);
    color: #fff;
    box-shadow: 0 1px 2px rgba(79, 91, 245, 0.24), 0 10px 24px rgba(79, 91, 245, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.ds-btn-ink { background: var(--ds-ink); color: var(--ds-text-inverse); }
.ds-btn-ink:hover { background: #26262d; color: var(--ds-text-inverse); }

/* 彩色图标底：.ds-hue + .hue-blue / .hue-violet / .hue-teal / .hue-amber / .hue-rose */
.ds-hue { background: var(--ds-accent-soft); color: var(--ds-accent); }
.ds-hue.hue-blue { background: var(--ds-hue-blue-soft); color: var(--ds-hue-blue); }
.ds-hue.hue-violet { background: var(--ds-hue-violet-soft); color: var(--ds-hue-violet); }
.ds-hue.hue-teal { background: var(--ds-hue-teal-soft); color: var(--ds-hue-teal); }
.ds-hue.hue-amber { background: var(--ds-hue-amber-soft); color: var(--ds-hue-amber); }
.ds-hue.hue-rose { background: var(--ds-hue-rose-soft); color: var(--ds-hue-rose); }

.ds-btn-accent { background: var(--ds-accent); color: #fff; }
.ds-btn-accent:hover { background: var(--ds-accent-hover); color: #fff; }

.ds-btn-ghost { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text); }
.ds-btn-ghost:hover { border-color: var(--ds-border-strong); background: var(--ds-surface-2); color: var(--ds-text); }

.ds-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-surface);
    color: var(--ds-text);
    font: 400 14px/1.4 var(--ds-font);
    transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}

.ds-input::placeholder { color: var(--ds-text-3); }
.ds-input:hover { border-color: var(--ds-border-strong); }
.ds-input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 4px var(--ds-accent-ring); }

.ds-card {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-xs);
}

.ds-num {
    font-family: var(--ds-font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-input { transition: none; }
}