/**
 * CSS 变量定义
 *
 * 统一的设计系统变量，合并了 client_view 和 meetings 两套系统
 * 使用 --brand-* 作为品牌色，--color-* 作为功能色
 */

/* ──────────────────────────────────────────────
   响应式断点规范 (canonical breakpoints)
   原生 CSS 无法 token 化 media query，此处仅作文档约定：
     480px   — 手机
     768px   — 平板 / 移动-桌面边界
     1024px  — 桌面
     1440px  — 大桌面
   新增 @media 一律使用以上值；历史 767/1023 视为 768/1024
   的 off-by-one，已收敛为规范值。
   ────────────────────────────────────────────── */

:root {
    /* ========== 品牌色系 ========== */
    --brand-primary: #6366f1;
    --brand-primary-hover: #5457e5;
    --brand-primary-rgb: 99, 102, 241;
    --brand-primary-soft: rgba(99, 102, 241, 0.08);
    --brand-primary-soft-2: rgba(99, 102, 241, 0.06);
    --brand-primary-border: rgba(99, 102, 241, 0.15);

    /* 兼容旧变量名 */
    --primary: var(--brand-primary);
    --primary-color: var(--brand-primary);
    --primary-light: #e0e7ff;
    --primary-soft: #e0e7ff;

    /* AI 特征色 - 柔和的蓝紫渐变 */
    --ai-gradient: linear-gradient(135deg, #818CF8 0%, #A78BFA 50%, #C4B5FD 100%);
    --ai-gradient-soft: linear-gradient(135deg, rgba(129, 140, 248, 0.08) 0%, rgba(167, 139, 250, 0.08) 100%);
    --ai-soft: rgba(167, 139, 250, 0.06);
    --ai-border: rgba(167, 139, 250, 0.15);
    --ai-lavender: #A78BFA;

    /* ========== 功能色 ========== */
    /* 成功色系 */
    --color-success: #10b981;
    --color-success-soft: rgba(16, 185, 129, 0.08);
    --color-success-light: #dcfce7;
    --color-success-bg: #f0fdf4;
    --color-success-dark: #166534;
    --color-success-hover: #059669;

    /* 警告色系 */
    --color-warning: #f59e0b;
    --color-warning-soft: rgba(245, 158, 11, 0.08);
    --color-warning-light: #fef3c7;
    --color-warning-bg: #fffbeb;
    --color-warning-dark: #b45309;
    --color-warning-hover: #d97706;

    /* 危险色系 */
    --color-danger: #ef4444;
    --color-danger-soft: rgba(239, 68, 68, 0.08);
    --color-danger-light: #fee2e2;
    --color-danger-bg: #fef2f2;
    --color-danger-dark: #991b1b;
    --color-danger-hover: #dc2626;

    /* 信息色系 */
    --color-info: #3b82f6;
    --color-info-soft: rgba(59, 130, 246, 0.08);
    --color-info-light: #dbeafe;
    --color-info-bg: #eff6ff;
    --color-info-dark: #1e40af;
    --color-info-hover: #2563eb;

    /* 紫色系 (AI/思维功能) */
    --color-purple: #8b5cf6;
    --color-purple-soft: rgba(139, 92, 246, 0.08);
    --color-purple-light: #f3e8ff;
    --color-purple-bg: #faf5ff;
    --color-purple-dark: #6b21a8;
    --color-purple-hover: #7c3aed;

    /* iOS 风格颜色 */
    --color-ios-danger: #ff3b30;
    --ios-sheet-bg: #f2f2f7;
    --ios-sheet-separator: #e5e5e7;
    --ios-sheet-header-color: #8e8e93;

    /* ========== 中性色系 ========== */
    --neutral-900: #111827;
    --neutral-800: #1F2937;
    --neutral-700: #374151;
    --neutral-600: #4B5563;
    --neutral-500: #6B7280;
    --neutral-400: #9CA3AF;
    --neutral-300: #D1D5DB;
    --neutral-200: #E5E7EB;
    --neutral-100: #F3F4F6;
    --neutral-50: #F9FAFB;

    /* 语义化文本色 */
    --text-main: #1e293b;
    --text-sub: #64748b;
    --text-muted: #94a3b8;

    /* ========== 背景色 ========== */
    --bg-body: #f8fafc;
    --bg-page: #F5F7FA;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.72);

    /* ========== 边框色 ========== */
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    /* ========== 装饰/补充色（值与原硬编码完全一致，零视觉变化） ========== */
    --decor-ring: #c7d2fe;            /* 登录页装饰光环 SVG stroke */
    --decor-success-icon: #22c55e;    /* 装饰性成功图标（区别于功能色 --color-success） */
    --decor-pink: #ec4899;            /* 装饰性粉色图标 */
    --decor-placeholder: #cbd5e1;     /* 空态占位文本/插画 */
    --text-strong: #334155;           /* 较深正文/强调文本（介于 text-main 与 text-sub 之间） */

    /* ========== 字体缩放 ========== */
    --font-scale: 1;

    /* ========== UI 整体缩放（由 UiScaleService 在全屏时按 1080p/2K/4K 分档写入） ========== */
    --ui-scale: 1;

    /* ========== 字号体系 ========== */
    --font-xs: 12px; /* 仅用于时间戳/字幕等非正文元数据，勿用于正文 */
    --font-sm: 12px;
    --font-base: 15px;
    --font-lg: 16px;
    --font-xl: 18px;

    /* ========== 间距系统 ========== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ========== 圆角 ========== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-card: 12px;

    /* ========== 阴影 ========== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 2px var(--brand-primary), 0 10px 15px -3px rgba(99, 102, 241, 0.2);
    --focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.22);

    /* ========== 布局尺寸 ========== */
    --sidebar-width: 320px;
    --header-height: 60px;

    /* ========== 移动端安全区 ========== */
    --mobile-header-height: 44px;
    --mobile-tab-height: 44px;
    --mobile-action-bar-height: 56px;
    --mobile-touch-target: 44px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ========== 触控目标（按指针类型自适应）==========
       默认值 = 桌面紧凑尺寸（指针精确，鼠标可点小目标）。
       在文件末尾的 @media (pointer: coarse) 中整体放大到 WCAG 2.5.5
       的 44px 触控目标。组件一律引用这些令牌，禁止再硬编码像素，
       从而做到"桌面紧凑 / 触屏 44px"单一数据源。 */
    --tap-icon: 40px;          /* 标准图标按钮（.btn-icon 等）*/
    --tap-icon-sm: 32px;       /* 小图标按钮（.btn-icon.btn-sm、modal-close 等）*/
    --tap-check: 20px;         /* todo 复选框可视/命中尺寸 */
    --tap-btn-min-h: auto;     /* .btn 文本按钮：桌面不强制最小高度 */
    --tap-btn-sm-min-h: auto;  /* .btn-sm */
    --tap-control-min-h: auto; /* 表单 input / select / pill 等控件 */

    /* ========== 过渡 ========== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --mobile-transition-panel: 350ms cubic-bezier(0.16, 1, 0.3, 1);
    --mobile-transition-overlay: 300ms ease;

    /* ========== Z-Index 层级 ========== */
    --z-controls: 50;
    --z-edge-btn: 90;
    --z-audio-mini: 95;
    --z-header: 100;
    --z-dock: 101;
    --z-overlay: 140;
    --z-panel: 145;
    --z-sidebar: 150;
    --z-dropdown: 155;
    --z-sheet: 200;

    /* 高优先级浮层层级（BUG-040）
       播放器 < toast < modal-overlay < modal-content。
       关键约束：modal-overlay 必须高于底部 audio-player-container，
       否则播放器会遮挡解读弹窗底部按钮。 */
    --z-player: 1000;
    --z-toast: 1100;
    --z-modal-overlay: 1200;
    --z-modal-content: 1300;

    /* ========== 加入资格色 ========== */
    --color-joinable: var(--color-success);
    --color-joinable-soft: var(--color-success-soft);
    --color-mine: var(--brand-primary);
    --color-mine-soft: var(--brand-primary-soft);
    --color-invite-only: var(--color-warning);
    --color-invite-only-soft: var(--color-warning-soft);
    --color-unavailable: var(--neutral-400);
    --color-unavailable-soft: rgba(156, 163, 175, 0.08);

    /* ========== 上限状态色 ========== */
    --color-limit: var(--color-warning);
    --color-limit-soft: var(--color-warning-soft);
}

/* ========== 品牌链接（Logo/标题跳回首页）========== */
.brand-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.brand-link:hover {
    opacity: 0.7;
}
.brand-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: 8px;
}

/* ========== 介绍页入口（柔和 lavender chip，匹配页面平面浅色风格） ========== */
.brand-entry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--brand-primary-soft, rgba(99, 102, 241, 0.08));
    color: var(--brand-primary, #6366f1);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background 0.18s ease, color 0.18s ease;
}
.brand-entry:hover {
    background: rgba(99, 102, 241, 0.14);
    color: var(--brand-primary-hover, #5457e5);
    opacity: 1;
}
.brand-entry:focus-visible {
    outline: 2px solid var(--brand-primary, #6366f1);
    outline-offset: 2px;
}
.brand-entry-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.brand-entry:hover .brand-entry-arrow {
    transform: translate(1px, -1px);
}
@media (max-width: 480px) {
    .brand-entry { padding: 0 12px; height: 44px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-entry, .brand-entry-arrow { transition: none; }
    .brand-entry:hover .brand-entry-arrow { transform: none; }
}

/* 阻止 iOS Safari 聚焦表单时自动缩放；勿低于 16px */
input, textarea, select { font-size: 16px; }

:where(button, [role="button"], input, select, textarea, a, .btn, .dropdown-item) {
    touch-action: manipulation;
}

:where(button, [role="button"], input, select, textarea, a, .btn, .dropdown-item):focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* 触屏设备（主指针为粗指针/手指）：触控目标整体放大到 44px。
   桌面（鼠标，pointer: fine）保持上方 :root 的紧凑默认值。 */
@media (pointer: coarse) {
    :root {
        --tap-icon: 44px;
        --tap-icon-sm: 40px;
        --tap-check: 44px;
        --tap-btn-min-h: 44px;
        --tap-btn-sm-min-h: 40px;
        --tap-control-min-h: 44px;
    }
}