/* ============================================================
   思槐聚合登录 · 主题变量系统
   主题不仅控制颜色，也控制：圆角、字重、字号、间距、卡片风格
   ============================================================ */

:root {
    /* ---------------- 字体 ---------------- */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: var(--font-family);

    /* ---------------- 主色（默认 light） ---------------- */
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #e0e7ff;
    --color-secondary: #06b6d4;
    --primary-rgb: 79, 70, 229;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

    /* ---------------- 背景 / 文字 / 边框 ---------------- */
    --bg-body: #f8fafc;
    --bg-page: var(--bg-body);
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #fafafa;
    --bg-elevated: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --text-on-primary: #ffffff;
    --text-placeholder: #cbd5e1;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-focus: #4f46e5;

    /* ---------------- 状态色 ---------------- */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* ---------------- 间距尺度 ---------------- */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* ---------------- 圆角（基础） ---------------- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* ---------------- 主题排版变量（重点） ---------------- */
    /* 这些变量由各主题覆盖，从而让"换主题=换排版" */
    --t-radius-card: 1rem;        /* 卡片外圆角 */
    --t-radius-button: 0.625rem;  /* 按钮圆角 */
    --t-radius-input: 0.625rem;   /* 输入框圆角 */
    --t-radius-pill: 9999px;      /* 胶囊形 */

    --t-card-padding: 1.75rem;    /* 卡片内边距 */
    --t-card-border: 1px solid var(--border-color);
    --t-card-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);

    --t-page-bg: var(--bg-body);  /* 页面背景（可被主题覆盖为渐变） */

    --t-heading-weight: 700;      /* 标题字重 */
    --t-heading-tracking: -0.01em;
    --t-body-weight: 400;
    --t-button-weight: 600;
    --t-button-tracking: 0;
    --t-button-padding-y: 0.625rem;
    --t-button-padding-x: 1.25rem;
    --t-button-text-transform: none;

    --t-nav-height: 64px;
    --t-nav-bg: var(--bg-surface);
    --t-nav-border: 1px solid var(--border-color);
    --t-nav-shadow: none;
    --t-nav-blur: none;

    --t-container-max: 1200px;
    --t-content-density: 1;       /* 整体行距/留白系数 */

    /* ---------------- 阴影 ---------------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
    --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ---------------- 过渡 ---------------- */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
}

/* ============================================================
   light · 默认明亮
   ============================================================ */
[data-theme="light"] {
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #e0e7ff;
    --color-secondary: #06b6d4;
    --primary-rgb: 79, 70, 229;
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --bg-body: #f8fafc;
    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f5f9;
    --bg-card: #ffffff;
    --bg-input: #fafafa;
    --bg-elevated: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-light: #94a3b8;
    --text-on-primary: #ffffff;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-focus: #4f46e5;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.08);

    --t-radius-card: 1rem;
    --t-radius-button: 0.625rem;
    --t-card-padding: 1.75rem;
    --t-card-shadow: var(--shadow-card);
    --t-heading-weight: 700;
    --t-button-weight: 600;
}

/* ============================================================
   dark · 深色（柔和深色）
   ============================================================ */
[data-theme="dark"] {
    --color-primary: #818cf8;
    --color-primary-hover: #6366f1;
    --color-primary-light: #312e81;
    --color-secondary: #22d3ee;
    --primary-rgb: 129, 140, 248;
    --primary-gradient: linear-gradient(135deg, #a5b4fc 0%, #818cf8 100%);
    --bg-body: #0f172a;
    --bg-page: #0f172a;
    --bg-surface: #1e293b;
    --bg-surface-hover: #334155;
    --bg-card: #1e293b;
    --bg-input: #0f172a;
    --bg-elevated: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --text-on-primary: #ffffff;
    --border-color: #334155;
    --border-light: #1e293b;
    --border-focus: #818cf8;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-error: #f87171;
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4);

    --t-radius-card: 1rem;
    --t-radius-button: 0.625rem;
    --t-card-padding: 1.75rem;
    --t-card-shadow: var(--shadow-card);
    --t-heading-weight: 700;
    --t-button-weight: 600;
}

/* ============================================================
   anime · 二次元 / 治愈风（图1风格）
   - 大圆角软牌片
   - 浅紫蓝渐变背景
   - 标题加粗、按钮胶囊形
   - 留白宽松、字体偏圆润
   ============================================================ */
[data-theme="anime"] {
    --font-family: "Quicksand", "PingFang SC", "Hiragino Maru Gothic ProN", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    --font-display: "Quicksand", "PingFang SC", "Hiragino Maru Gothic ProN", "Microsoft YaHei", system-ui, sans-serif;

    /* 冷调蓝紫主色（参考图风格） */
    --color-primary: #4f7cff;
    --color-primary-hover: #3b6cf5;
    --color-primary-light: #e0e9ff;
    --color-secondary: #7c93ff;
    --primary-rgb: 79, 124, 255;
    --primary-gradient: linear-gradient(135deg, #6e8eff 0%, #4f7cff 100%);

    --bg-body: #f4f6fb;
    --bg-page: #f4f6fb;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f1f4fa;
    --bg-card: #ffffff;
    --bg-input: #f7f9fd;
    --bg-elevated: #ffffff;

    --text-main: #1f2937;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-on-primary: #ffffff;
    --text-placeholder: #c7d2fe;
    --border-color: #e5e9f2;
    --border-light: #eef1f7;
    --border-focus: #4f7cff;

    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    --shadow-sm: 0 1px 2px 0 rgb(79 124 255 / 0.05);
    --shadow-md: 0 6px 14px -2px rgb(79 124 255 / 0.08), 0 3px 6px -3px rgb(79 124 255 / 0.06);
    --shadow-lg: 0 18px 28px -8px rgb(79 124 255 / 0.10), 0 6px 10px -4px rgb(79 124 255 / 0.06);
    --shadow-xl: 0 28px 40px -12px rgb(79 124 255 / 0.14), 0 10px 18px -8px rgb(79 124 255 / 0.08);
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 28px -8px rgba(79, 124, 255, 0.10);
    --shadow-card-hover: 0 4px 8px rgba(15, 23, 42, 0.05), 0 20px 40px -12px rgba(79, 124, 255, 0.18);

    /* 排版差异 —— anime 风的关键 */
    --t-radius-card: 1.5rem;           /* 24px 大圆角 */
    --t-radius-button: 9999px;         /* 胶囊按钮 */
    --t-radius-input: 0.75rem;
    --t-card-padding: 2.25rem;
    --t-card-border: 1px solid #eef1f7;
    --t-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 48px -16px rgba(79, 124, 255, 0.18);

    --t-page-bg: #f4f6fb;

    --t-heading-weight: 700;
    --t-heading-tracking: -0.01em;
    --t-body-weight: 400;
    --t-button-weight: 600;
    --t-button-padding-y: 0.75rem;
    --t-button-padding-x: 1.75rem;

    --t-nav-bg: rgba(255, 255, 255, 0.85);
    --t-nav-border: 1px solid #eef1f7;
    --t-nav-blur: saturate(180%) blur(12px);

    --t-container-max: 1120px;
    --t-content-density: 1.05;
}

/* ============================================================
   x · X / Twitter 风
   - 纯黑背景 + 大字白字
   - 锐利的细灰边线代替阴影
   - 胶囊按钮、紧凑信息流
   - 字体加粗、字号偏小、行距紧
   ============================================================ */
[data-theme="x"] {
    --font-family: "Inter", "Chirp", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
    --font-display: var(--font-family);

    --color-primary: #1d9bf0;
    --color-primary-hover: #1a8cd8;
    --color-primary-light: rgba(29, 155, 240, 0.18);
    --color-secondary: #f4212e;
    --primary-rgb: 29, 155, 240;
    --primary-gradient: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%);

    --bg-body: #000000;
    --bg-page: #000000;
    --bg-surface: #000000;
    --bg-surface-hover: #16181c;
    --bg-card: #000000;
    --bg-input: #202327;
    --bg-elevated: #16181c;

    --text-main: #e7e9ea;
    --text-muted: #71767b;
    --text-light: #71767b;
    --text-on-primary: #ffffff;
    --text-placeholder: #4b5358;

    --border-color: #2f3336;
    --border-light: #1f2326;
    --border-focus: #1d9bf0;

    --color-success: #00ba7c;
    --color-warning: #ffd400;
    --color-error: #f4212e;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 0 0 1px #2f3336;
    --shadow-xl: 0 0 0 1px #2f3336;
    --shadow-card: 0 0 0 1px #2f3336;
    --shadow-card-hover: 0 0 0 1px #4b5358;

    /* 排版差异 —— Twitter 风的关键 */
    --t-radius-card: 1rem;             /* 16px，X 卡片偏方 */
    --t-radius-button: 9999px;         /* 胶囊按钮 */
    --t-radius-input: 0.25rem;
    --t-card-padding: 1rem;            /* 紧凑 */
    --t-card-border: 1px solid #2f3336;
    --t-card-shadow: none;

    --t-page-bg: #000000;

    --t-heading-weight: 800;
    --t-heading-tracking: -0.02em;
    --t-body-weight: 400;
    --t-button-weight: 700;
    --t-button-padding-y: 0.5rem;
    --t-button-padding-x: 1.25rem;
    --t-button-tracking: -0.01em;

    --t-nav-bg: rgba(0, 0, 0, 0.75);
    --t-nav-border: 1px solid #2f3336;
    --t-nav-blur: saturate(180%) blur(12px);
    --t-nav-height: 56px;

    --t-container-max: 990px;
    --t-content-density: 0.95;
}

/* ============================================================
   blackwhite · 黑白极简（保留）
   ============================================================ */
[data-theme="blackwhite"] {
    --color-primary: #171717;
    --color-primary-hover: #262626;
    --color-primary-light: #f5f5f5;
    --color-secondary: #525252;
    --primary-rgb: 23, 23, 23;
    --primary-gradient: linear-gradient(135deg, #171717 0%, #404040 100%);
    --bg-body: #fafafa;
    --bg-page: #fafafa;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f5f5f5;
    --bg-card: #ffffff;
    --bg-input: #fafafa;
    --bg-elevated: #ffffff;
    --text-main: #171717;
    --text-muted: #525252;
    --text-light: #737373;
    --text-on-primary: #ffffff;
    --border-color: #e5e5e5;
    --border-light: #f5f5f5;
    --border-focus: #171717;
    --color-success: #262626;
    --color-warning: #525252;
    --color-error: #171717;
    --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.1);

    --t-radius-card: 0.5rem;
    --t-radius-button: 0.375rem;
    --t-radius-input: 0.375rem;
    --t-card-padding: 1.5rem;
    --t-card-shadow: var(--shadow-card);
    --t-heading-weight: 700;
    --t-button-weight: 600;
}