@charset "utf-8";
/* ==========================================================
 * tokens.css - 设计系统 Token 体系
 * 依据：ui-ux-pro-max-skill 的 Three-Layer Token 架构
 *   Layer 1: Primitive tokens（原子值）
 *   Layer 2: Semantic tokens（语义别名）
 *   Layer 3: Component tokens（各 CSS 文件内定义）
 *
 * 本项目品牌色：蓝紫 #5B6CFF（保留原品牌，但映射到 shadcn/ui
 * 的 blue-600 语义，以复用 skill 的推理规则和状态色）
 *
 * 加载顺序：tokens.css → user.css / admin.css / docs.css ...
 * ========================================================== */

/* =======================================================
 * Layer 1: Primitive Tokens
 * ======================================================= */
:root {
    /* ---------- 灰阶（gray scale，shadcn/ui 标准） ---------- */
    --color-gray-50:  #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;

    /* ---------- 品牌色：保留项目原有的蓝紫品牌 ---------- */
    /* 以 #5B6CFF 为锚点重新生成的十阶 scale（替代 shadcn 的 blue） */
    --color-brand-50:  #EEF0FF;
    --color-brand-100: #DCE0FF;
    --color-brand-200: #BCC3FF;
    --color-brand-300: #9AA5FF;
    --color-brand-400: #7C88FF;
    --color-brand-500: #5B6CFF;
    --color-brand-600: #4452E6;
    --color-brand-700: #3442CC;
    --color-brand-800: #2935A6;
    --color-brand-900: #1E2880;

    /* 辅助紫色（用于渐变、副主色） */
    --color-violet-400: #A78BFA;
    --color-violet-500: #8B5CF6;
    --color-violet-600: #7C3AED;
    --color-violet-700: #6D28D9;

    /* ---------- 状态色（与 skill 规范一致） ---------- */
    --color-green-50:  #ECFDF5;
    --color-green-100: #D1FAE5;
    --color-green-500: #22C55E;
    --color-green-600: #16A34A;
    --color-green-700: #15803D;

    --color-yellow-50:  #FEFCE8;
    --color-yellow-500: #EAB308;
    --color-yellow-600: #CA8A04;

    --color-red-50:   #FEF2F2;
    --color-red-100:  #FEE2E2;
    --color-red-500:  #EF4444;
    --color-red-600:  #DC2626;
    --color-red-700:  #B91C1C;

    --color-orange-500: #F59E0B;
    --color-orange-600: #D97706;

    /* ---------- 间距（4px 基准） ---------- */
    --space-0:   0;
    --space-px:  1px;
    --space-0-5: 0.125rem; /* 2px  */
    --space-1:   0.25rem;  /* 4px  */
    --space-1-5: 0.375rem; /* 6px  */
    --space-2:   0.5rem;   /* 8px  */
    --space-2-5: 0.625rem; /* 10px */
    --space-3:   0.75rem;  /* 12px */
    --space-3-5: 0.875rem; /* 14px */
    --space-4:   1rem;     /* 16px */
    --space-5:   1.25rem;  /* 20px */
    --space-6:   1.5rem;   /* 24px */
    --space-7:   1.75rem;  /* 28px */
    --space-8:   2rem;     /* 32px */
    --space-10:  2.5rem;   /* 40px */
    --space-12:  3rem;     /* 48px */
    --space-16:  4rem;     /* 64px */
    --space-20:  5rem;     /* 80px */
    --space-24:  6rem;     /* 96px */

    /* ---------- 字号 ---------- */
    --font-size-xs:   0.75rem;  /* 12px */
    --font-size-sm:   0.875rem; /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg:   1.125rem; /* 18px */
    --font-size-xl:   1.25rem;  /* 20px */
    --font-size-2xl:  1.5rem;   /* 24px */
    --font-size-3xl:  1.875rem; /* 30px */
    --font-size-4xl:  2.25rem;  /* 36px */
    --font-size-5xl:  3rem;     /* 48px */

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --leading-tight:  1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* ---------- 圆角 ---------- */
    --radius-none:    0;
    --radius-sm:      0.125rem; /* 2px */
    --radius-default: 0.25rem;  /* 4px */
    --radius-md:      0.375rem; /* 6px */
    --radius-lg:      0.5rem;   /* 8px */
    --radius-xl:      0.75rem;  /* 12px */
    --radius-2xl:     1rem;     /* 16px */
    --radius-3xl:     1.5rem;   /* 24px */
    --radius-full:    9999px;

    /* ---------- 阴影（shadcn 规范）---------- */
    --shadow-none:    none;
    --shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
                      0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1),
                      0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1),
                      0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1),
                      0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner:   inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* 品牌色投影（用于主按钮、卡片强调等） */
    --shadow-brand-sm: 0 2px 8px 0 rgba(91, 108, 255, 0.18);
    --shadow-brand:    0 8px 24px -4px rgba(91, 108, 255, 0.28);
    --shadow-brand-lg: 0 20px 40px -8px rgba(91, 108, 255, 0.32);

    /* ---------- 动效时长 ---------- */
    --duration-75:   75ms;
    --duration-100:  100ms;
    --duration-150:  150ms;
    --duration-200:  200ms;
    --duration-300:  300ms;
    --duration-500:  500ms;
    --duration-700:  700ms;
    --duration-1000: 1000ms;

    /* 语义化时长 */
    --duration-fast:   var(--duration-150);
    --duration-normal: var(--duration-200);
    --duration-slow:   var(--duration-300);

    /* 缓动曲线（shadcn/Material Design 推荐） */
    --ease-linear:      linear;
    --ease-in:          cubic-bezier(0.4, 0, 1, 1);
    --ease-out:         cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 向后兼容 */
    --ease-standard:    var(--ease-in-out);

    /* ---------- z-index 层级 ---------- */
    --z-0:          0;
    --z-10:         10;
    --z-20:         20;
    --z-30:         30;
    --z-40:         40;
    --z-50:         50;
    --z-dropdown:   1000;
    --z-sticky:     1100;
    --z-modal:      1200;
    --z-popover:    1300;
    --z-toast:      1400;

    /* ---------- 安全区域 ---------- */
    --safe-top:    env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left:   env(safe-area-inset-left, 0px);
    --safe-right:  env(safe-area-inset-right, 0px);
}

/* =======================================================
 * Layer 2: Semantic Tokens（语义别名）
 * 这些是组件真正应该使用的 token
 * ======================================================= */
:root {
    /* ----- 背景与前景 ----- */
    --color-background:        var(--color-gray-50);   /* 页面背景 */
    --color-foreground:        var(--color-gray-900);  /* 主要文字 */
    --color-card:              #FFFFFF;                 /* 卡片背景 */
    --color-card-foreground:   var(--color-gray-900);
    --color-popover:           #FFFFFF;
    --color-popover-foreground: var(--color-gray-900);

    /* ----- 品牌主色 ----- */
    --color-primary:            var(--color-brand-500);
    --color-primary-hover:      var(--color-brand-600);
    --color-primary-active:     var(--color-brand-700);
    --color-primary-foreground: #FFFFFF;
    --color-primary-soft:       var(--color-brand-50);

    /* ----- 次要色 ----- */
    --color-secondary:            var(--color-gray-100);
    --color-secondary-hover:      var(--color-gray-200);
    --color-secondary-foreground: var(--color-gray-900);

    /* ----- Muted（弱化） ----- */
    --color-muted:            var(--color-gray-100);
    --color-muted-foreground: var(--color-gray-500);

    /* ----- 强调色 ----- */
    --color-accent:            var(--color-brand-50);
    --color-accent-foreground: var(--color-brand-700);

    /* ----- 危险（销毁/删除） ----- */
    --color-destructive:            var(--color-red-600);
    --color-destructive-hover:      var(--color-red-700);
    --color-destructive-foreground: #FFFFFF;

    /* ----- 状态语义色 ----- */
    --color-success:            var(--color-green-600);
    --color-success-foreground: #FFFFFF;
    --color-success-soft:       var(--color-green-50);
    --color-warning:            var(--color-orange-500);
    --color-warning-foreground: #FFFFFF;
    --color-warning-soft:       var(--color-yellow-50);
    --color-error:              var(--color-red-600);
    --color-error-foreground:   #FFFFFF;
    --color-error-soft:         var(--color-red-50);
    --color-info:               var(--color-brand-500);
    --color-info-foreground:    #FFFFFF;

    /* ----- 边框与焦点环 ----- */
    --color-border:        var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-input:         var(--color-gray-200);
    --color-ring:          var(--color-brand-400);

    /* ----- 文字层级 ----- */
    --color-text-primary:   var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-tertiary:  var(--color-gray-500);
    --color-text-muted:     var(--color-gray-400);
    --color-text-inverse:   #FFFFFF;

    /* ----- 品牌渐变（保留项目视觉 DNA） ----- */
    --gradient-brand:
        linear-gradient(135deg,
            var(--color-brand-500) 0%,
            var(--color-violet-500) 100%);
    --gradient-brand-soft:
        linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
    --gradient-bg-soft:
        linear-gradient(135deg, #F6F8FF 0%, #FFFFFF 60%, #FEF5FF 100%);

    /* ----- 语义化间距 ----- */
    --spacing-component-xs: var(--space-1);
    --spacing-component-sm: var(--space-2);
    --spacing-component:    var(--space-3);
    --spacing-component-lg: var(--space-4);

    --spacing-section-sm: var(--space-8);
    --spacing-section:    var(--space-12);
    --spacing-section-lg: var(--space-16);

    --spacing-page-x: var(--space-4);
    --spacing-page-y: var(--space-6);

    /* ----- 语义化圆角（组件级） ----- */
    --radius-button:   var(--radius-lg);
    --radius-input:    var(--radius-md);
    --radius-card:     var(--radius-xl);
    --radius-modal:    var(--radius-2xl);
    --radius-badge:    var(--radius-full);

    /* ----- 聚焦环（无障碍） ----- */
    --focus-ring:
        0 0 0 3px rgba(91, 108, 255, 0.25);
    --focus-ring-destructive:
        0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* =======================================================
 * 统一的焦点可访问性样式
 * ======================================================= */
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-default);
    transition: box-shadow var(--duration-fast) var(--ease-out);
}
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* =======================================================
 * 尊重"减少动效"偏好（无障碍）
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}