/**
 * lanru.cn 设计令牌（全新设计，方向：明亮插画风官网）
 *
 * 本文件是唯一真源。模板与组件样式禁止出现字面色值、字面字号、字面间距，
 * 一律取这里的令牌。落地目标路径：public/static/css/tokens.css
 *
 * 归属：框架通用件。插件与会员线页面一律引 /static/css/tokens.css，
 * 不再从插件目录下发令牌。
 *
 * 默认浅色（:root 即浅色，data-theme="light" 与默认一致），深色为完整第二套。
 * 浅色用作官网主视觉：白底、品牌蓝到青绿渐变、插画级首屏。
 * 深色保留给工作台长时任务场景，不刺眼。
 */

/* ===================== 主题色（默认：浅色） ===================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* 表面：白底为主，叠层用极浅灰区分 */
  --lr-bg: #FFFFFF;
  --lr-bg-raised: #FFFFFF;
  --lr-bg-overlay: #FFFFFF;
  --lr-bg-hover: #F3F6FB;
  --lr-bg-sunken: #F6F9FC;
  /* 页面灰底：区块一层灰一层白交错时的「灰」层，卡片在它上面用 --lr-bg-raised */
  --lr-bg-page: #EEF1F6;

  /* 边框 */
  --lr-border-subtle: #EEF1F6;
  --lr-border: #E3E8F0;
  --lr-border-strong: #CBD4E1;
  --lr-border-control: #8B97AB;

  /* 文字 */
  --lr-text: #10141B;
  --lr-text-secondary: #46536B;
  --lr-text-muted: #66718A;
  --lr-text-inverse: #FFFFFF;

  /* 强调色：品牌蓝（浅色下重新定值） */
  --lr-accent: #2E5BFF;
  --lr-accent-hover: #1F4DE8;
  --lr-accent-active: #1A42CC;
  --lr-accent-soft: #EBF0FF;
  --lr-accent-border: #B9CBFF;
  --lr-accent-ink: #FFFFFF;

  /* 第二强调：青绿，用于渐变收尾 */
  --lr-accent-2: #0EB98B;
  --lr-accent-2-soft: #E2F7F0;

  /* 品牌渐变（标题第二行、插画描边） */
  --lr-gradient-brand: linear-gradient(94deg, #2E5BFF 8%, #0EB98B 92%);

  /* 深色胶囊按钮（导航 CTA、首屏主行动） */
  --lr-contrast: #151A22;
  --lr-contrast-hover: #2A3342;
  --lr-contrast-ink: #FFFFFF;

  /* 语义色 */
  --lr-success: #0F7343;
  --lr-success-soft: #E6F6ED;
  /* 状态标签的描边：浅底标签配同色系 1px 边框 */
  --lr-success-border: #C6ECDF;
  --lr-warning: #8A5A00;
  --lr-warning-soft: #FCF3E2;
  --lr-warning-border: #F0D9A8;
  --lr-danger: #C53038;
  --lr-danger-soft: #FCE9EA;
  --lr-danger-border: #F3C6C8;
  --lr-info: #2E5BFF;
  --lr-info-soft: #EBF0FF;

  /* 弹层遮罩：模态 / 抽屉背后的压暗层 */
  --lr-overlay: rgba(16, 20, 27, 0.45);

  --lr-focus: #2E5BFF;

  --lr-shadow-card: 0 1px 2px rgba(16, 20, 27, 0.04),
    0 12px 32px -22px rgba(16, 20, 27, 0.20);
  --lr-shadow-overlay: 0 24px 60px -20px rgba(16, 20, 27, 0.28);
  --lr-shadow-accent: 0 6px 16px -10px rgba(46, 91, 255, 0.35);

  --lr-skeleton: #ECEFF5;
  --lr-skeleton-shine: #F5F7FB;

  /* 质感 */
  --lr-sheen-card: linear-gradient(180deg, rgba(16, 20, 27, 0.02), rgba(16, 20, 27, 0));
  --lr-sheen-btn: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  --lr-hero-band: linear-gradient(180deg, #F4F7FF 0%, #FFFFFF 100%);
}

/* ===================== 主题色（深色，工作台场景） ===================== */
[data-theme="dark"] {
  color-scheme: dark;

  --lr-bg: #0A0B0F;
  --lr-bg-raised: #101219;
  --lr-bg-overlay: #161A23;
  --lr-bg-hover: #1C2130;
  --lr-bg-sunken: #07080B;
  --lr-bg-page: #0A0B0F;

  --lr-border-subtle: #1A1E28;
  --lr-border: #232834;
  --lr-border-strong: #333C4E;
  --lr-border-control: #5A6B85;

  --lr-text: #E9EDF5;
  --lr-text-secondary: #A7B2C6;
  --lr-text-muted: #78849A;
  --lr-text-inverse: #08090D;

  --lr-accent: #5B93FF;
  --lr-accent-hover: #7AA8FF;
  --lr-accent-active: #4A82F0;
  --lr-accent-soft: #15203A;
  --lr-accent-border: #2C4374;
  --lr-accent-ink: #08090D;

  --lr-accent-2: #3DDCB0;
  --lr-accent-2-soft: #0F2419;

  --lr-gradient-brand: linear-gradient(94deg, #5B93FF 8%, #3DDCB0 92%);

  --lr-contrast: #E9EDF5;
  --lr-contrast-hover: #FFFFFF;
  --lr-contrast-ink: #0A0B0F;

  --lr-success: #3DDC97;
  --lr-success-soft: #0F2419;
  --lr-success-border: #1E4634;
  --lr-warning: #F7BE5A;
  --lr-warning-soft: #2A2113;
  --lr-warning-border: #4A3A1C;
  --lr-danger: #FF7A85;
  --lr-danger-soft: #2C1519;
  --lr-danger-border: #4A2226;
  --lr-info: #7AA8FF;
  --lr-info-soft: #141F38;

  --lr-overlay: rgba(0, 0, 0, 0.62);

  --lr-focus: #8FBBFF;

  --lr-shadow-card: none;
  --lr-shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
  --lr-shadow-accent: 0 8px 24px -10px rgba(91, 147, 255, 0.55);

  --lr-skeleton: #161A23;
  --lr-skeleton-shine: #222836;

  --lr-sheen-card: linear-gradient(180deg, rgba(233, 237, 245, 0.05), rgba(233, 237, 245, 0));
  --lr-sheen-btn: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  --lr-hero-band: linear-gradient(180deg, #10131B 0%, #0A0B0F 100%);
}

/* ===================== 字体 ===================== */
:root {
  --lr-font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --lr-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* 字号：正文 16px 起步，标题用 clamp 流体公式。上限收在 44px，避免巨字压住首屏。
     13px 只给顶栏这类 32px 高的紧凑控件，角标仍用 12px。
     手机端档位一律归拢到本组，不新增档位：13 → --lr-text-2xs、15 → --lr-text-base、
     17 → --lr-text-lg、21 → --lr-text-xl、26 → --lr-text-2xl。 */
  --lr-text-2xs: 0.8125rem;
  --lr-text-xs: 0.75rem;
  --lr-text-sm: 0.875rem;
  --lr-text-base: 1rem;
  --lr-text-lg: 1.125rem;
  --lr-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --lr-text-2xl: clamp(1.5rem, 1.28rem + 0.9vw, 2rem);
  --lr-text-3xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --lr-text-4xl: clamp(2rem, 1.72rem + 1.2vw, 2.75rem);

  --lr-leading-tight: 1.12;
  --lr-leading-display: 1.25;
  --lr-leading-snug: 1.35;
  --lr-leading-normal: 1.6;
  --lr-leading-read: 1.75;

  --lr-tracking-tight: -0.02em;
  --lr-tracking-wide: 0.08em;
  --lr-tracking-eyebrow: 0.16em;

  --lr-weight-normal: 400;
  --lr-weight-strong: 600;
}

/* ===================== 间距（4px 步长，rem 表达） ===================== */
:root {
  --lr-space-1: 0.25rem;
  --lr-space-2: 0.5rem;
  --lr-space-3: 0.75rem;
  --lr-space-4: 1rem;
  --lr-space-5: 1.25rem;
  --lr-space-6: 1.5rem;
  --lr-space-7: 2rem;
  --lr-space-8: 2.5rem;
  --lr-space-9: 3rem;
  --lr-space-10: 4rem;
  --lr-space-11: 5rem;
}

/* ===================== 圆角与动效 ===================== */
/* 999px 只留给进度条、圆点、圆形装饰这类真的是圆的元素；
   按钮、输入框、导航项、卡片一律取 2 / 4 / 6 / 8 / 10。 */
:root {
  --lr-radius-xs: 2px;
  --lr-radius-sm: 4px;
  --lr-radius-md: 6px;
  --lr-radius-lg: 8px;
  --lr-radius-xl: 10px;
  --lr-radius-pill: 999px;
  --lr-radius-btn: 6px;

  --lr-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --lr-ease-move: cubic-bezier(0.25, 1, 0.5, 1);
  --lr-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --lr-ease-press: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --lr-dur-press: 120ms;
  --lr-dur-fast: 180ms;
  --lr-dur-drawer: 280ms;
  /* 首页幻灯片自动切换周期，与切换条进度条同一时长 */
  --lr-dur-slide: 6000ms;
}

/* ===================== 尺寸与层级 ===================== */
:root {
  --lr-container-pc: 1200px;
  --lr-container-read: 720px;
  /* 手机端容器上限：官网两套独立模板，手机端流式排布，上限 430 */
  --lr-container-mobile: 430px;

  --lr-header-height: 64px;
  /* 顶栏紧凑档：PC 固定宽度端为指针设备，32 高于 WCAG 2.2 AA 热区底线 24；
     手机端顶栏仍取 --lr-hit-default。 */
  --lr-control-h-compact: 2rem;
  --lr-search-w-header: 11rem;
  --lr-sidebar-right: 300px;
  --lr-toc-width: 240px;

  /* 触控热区：默认 44，触屏主行动 48，密集图标按钮底线 24 */
  --lr-hit-default: 44px;
  --lr-hit-primary: 48px;
  --lr-hit-min: 24px;

  /* 表单控件统一高度：单行输入、多行输入最小高度、下拉触发器、块级按钮 */
  --lr-control-h: 42px;

  --lr-z-header: 20;
  --lr-z-sticky: 30;
  --lr-z-drawer: 40;
  --lr-z-modal: 100;
  --lr-z-toast: 1000;
}

/* ===================== 旧令牌别名（兼容尚未迁移的 pc.css / mobile.css / common.css） =====================
 * 上一阶段 cms/static 下的布局与组件样式仍使用 --lr-color-* / --lr-font-* / --lr-line-height-*
 * 以及更旧的 --color-* 命名。切换令牌真源后，这里保留映射，避免其他页面失样。
 * 新页面统一使用上面的 --lr-bg / --lr-text-* / --lr-accent 等。 */
:root {
  --lr-color-brand: var(--lr-accent);
  --lr-color-brand-hover: var(--lr-accent-hover);
  --lr-color-brand-subtle: var(--lr-accent-soft);
  --lr-color-text: var(--lr-text);
  --lr-color-text-secondary: var(--lr-text-secondary);
  --lr-color-text-muted: var(--lr-text-muted);
  --lr-color-surface: var(--lr-bg);
  --lr-color-surface-sunken: var(--lr-bg-sunken);
  --lr-color-border: var(--lr-border);
  --lr-color-success: var(--lr-success);
  --lr-color-warning: var(--lr-warning);
  --lr-color-danger: var(--lr-danger);
  --lr-color-action-strong: var(--lr-contrast);
  --lr-color-action-strong-hover: var(--lr-contrast-hover);
  --lr-color-focus: var(--lr-focus);

  --lr-font-xs: var(--lr-text-xs);
  --lr-font-sm: var(--lr-text-sm);
  --lr-font-md: var(--lr-text-base);
  --lr-font-lg: var(--lr-text-lg);
  --lr-font-xl: var(--lr-text-xl);
  --lr-font-2xl: var(--lr-text-2xl);
  --lr-font-3xl: var(--lr-text-3xl);
  --lr-line-height-tight: var(--lr-leading-tight);
  --lr-line-height-normal: var(--lr-leading-normal);
  --lr-line-height-loose: var(--lr-leading-read);

  --lr-shadow-sm: var(--lr-shadow-card);
  --lr-shadow-md: var(--lr-shadow-overlay);
  --lr-container-max: var(--lr-container-pc);
  --lr-container-mobile-max: var(--lr-container-mobile);
  --lr-transition: var(--lr-dur-fast);

  --lr-sidebar-pc: 300px;
  --lr-member-sidebar-pc: 230px;
  --lr-bottom-bar-height: 48px;

  --color-primary: var(--lr-accent);
  --color-primary-hover: var(--lr-accent-hover);
  --color-primary-light: var(--lr-accent-soft);
  --color-text: var(--lr-text);
  --color-text-secondary: var(--lr-text-secondary);
  --color-text-light: var(--lr-text-muted);
  --color-muted: var(--lr-text-muted);
  --color-surface: var(--lr-bg);
  --color-bg-light: var(--lr-bg-sunken);
  --color-border: var(--lr-border);
  --color-success: var(--lr-success);
  --color-success-hover: var(--lr-accent-hover);
  --color-warning: var(--lr-warning);
  --color-danger: var(--lr-danger);
  --color-danger-soft: var(--lr-danger-soft);
  --color-red: var(--lr-danger);
  --color-dark-btn: var(--lr-contrast);
  --color-dark-btn-hover: var(--lr-contrast-hover);
  --color-dark: var(--lr-contrast);
  --color-dark-hover: var(--lr-contrast-hover);
  --color-info: var(--lr-info);
  --color-gold: #e8a33d;
  --color-wechat: var(--lr-success);
  --color-qq: #12b7f5;
  --color-weibo: #e6162d;
  --color-tag-bg: var(--lr-accent-soft);
  --color-tag-text: var(--lr-accent);
  --color-rank-bg: var(--lr-accent-soft);
  --color-rank-text: var(--lr-accent);
  --color-rank-normal-bg: var(--lr-bg-sunken);
  --color-rank-normal-text: var(--lr-text-muted);
  --color-grey-btn: var(--lr-bg-sunken);
  --color-grey-btn-hover: var(--lr-border);
  --color-avatar: #8f7fe0;
  --color-info-bg: var(--lr-info-soft);
  --color-info-text: var(--lr-info);
  --color-warn-bg: var(--lr-warning-soft);
  --color-warn-text: var(--lr-warning);

  --space-xs: var(--lr-space-1);
  --space-sm: var(--lr-space-2);
  --space-md: var(--lr-space-3);
  --space-lg: var(--lr-space-4);
  --space-xl: var(--lr-space-5);
  --space-2xl: var(--lr-space-6);
  --gap-page: var(--lr-space-3);

  --font-size-body: var(--lr-text-sm);
  --font-size-small: var(--lr-text-xs);
  --font-size-tiny: var(--lr-text-xs);
  --font-size-h1: var(--lr-text-xl);
  --font-size-h2: var(--lr-text-lg);
  --font-size-h3: var(--lr-text-base);
  --font-body: var(--lr-text-sm);
  --font-body-lg: var(--lr-text-base);

  --radius-sm: var(--lr-radius-sm);
  --radius: var(--lr-radius-md);
  --radius-md: var(--lr-radius-md);
  --radius-lg: var(--lr-radius-lg);
  --radius-pill: var(--lr-radius-pill);

  --shadow-sm: var(--lr-shadow-card);
  --shadow: var(--lr-shadow-overlay);
  --transition: var(--lr-dur-fast);
  --ease: ease;
  --dur: var(--lr-dur-fast);

  --line-height-tight: var(--lr-leading-tight);
  --line-height-normal: var(--lr-leading-read);
  --line-height-loose: var(--lr-leading-read);

  --btn-height-lg: 44px;
  --btn-height-md: 36px;
  --btn-height-sm: 32px;
  --btn-height-xs: 28px;
  --btn-padding-lg: 12px 24px;
  --btn-padding-md: 8px 20px;
  --btn-padding-sm: 6px 16px;
  --btn-padding-xs: 4px 12px;
  --btn-font-size-lg: var(--lr-text-base);
  --btn-font-size-md: var(--lr-text-sm);
  --btn-font-size-sm: 13px;
  --btn-font-size-xs: var(--lr-text-xs);
  --tag-padding-lg: 6px 12px;
  --tag-padding-md: 4px 10px;
  --tag-padding-sm: 2px 8px;
  --tag-font-size-lg: 13px;
  --tag-font-size-md: var(--lr-text-xs);
  --tag-font-size-sm: 11px;

  --lr-btn-height-lg: 44px;
  --lr-btn-height-md: 36px;
  --lr-btn-height-sm: 32px;
  --lr-btn-height-xs: 28px;
}

/* 尊重系统「减少动效」设置，与屏幕宽度无关，全局保留。
   加载转圈是状态指示，冻结会让用户以为页面卡住，单独豁免保留旋转。 */
@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;
  }

  .btn.is-loading::before {
    animation-duration: .7s !important;
    animation-iteration-count: infinite !important;
  }
}