/* ==========================================================================
   LIG Warm Canvas · Design Tokens v0.2
   基于 Claude（Anthropic）设计系统定制 · Cool Minimal + Azure & Ember
   消费规则：业务代码只用「语义别名层」，不要直接引用 -50~-900 原始色阶
   ========================================================================== */

:root {
  /* ---------- 1. Primary · 海蓝 Azure（唯一品牌主色，v0.2 头像校准） ---------- */
  --color-primary-50:  #EEF4FB;
  --color-primary-100: #D6E5F5;
  --color-primary-200: #AECCEB;
  --color-primary-300: #7AABE0;
  --color-primary-400: #4D8BD4;
  --color-primary-500: #2E6DBF; /* 品牌基准色：识别用（不可作正文） */
  --color-primary-600: #1E5AA6; /* 交互填充：白字 5.01:1 AA */
  --color-primary-700: #154785; /* 文字/链接：6.68:1 AA */
  --color-primary-800: #0E3463;
  --color-primary-900: #072144; /* 阴影着色源 */
  --color-primary-brand: #0046F0; /* 识别位专用：头像亮蓝（仅 Logo/头像/水印） */

  /* ---------- 2. Accent · 暖橙 Ember（唯一点缀色，对齐 Logo 橙点 #F25C05） ---------- */
  --color-accent-50:  #FDEDE3;
  --color-accent-100: #FBD9C5;
  --color-accent-200: #F6B591;
  --color-accent-300: #F1915C;
  --color-accent-400: #ED7426; /* 点缀基准色 */
  --color-accent-500: #DA5A0E;
  --color-accent-600: #C0490B; /* 文字可用：4.98:1 AA */
  --color-accent-700: #9A3809;
  --color-accent-800: #6E2906;
  --color-accent-brand: #F25C05; /* 识别位专用：品牌橙（仅 Logo 橙点/特殊标记） */

  /* ---------- 3. Neutral · 微暖冷灰（v0.2 头像校准，不抢彩色壁纸） ---------- */
  --color-neutral-0:   #FFFFFF; /* 主题商店上架图底 */
  --color-neutral-50:  #F7F8FA; /* 页面底（微暖冷灰） */
  --color-neutral-100: #EFF1F5;
  --color-neutral-200: #E2E5EC;
  --color-neutral-300: #C9CDD8;
  --color-neutral-400: #A5AABC;
  --color-neutral-500: #8288A0; /* 占位/禁用，非 AA */
  --color-neutral-600: #5E6480; /* 次要文字 4.82:1 AA */
  --color-neutral-700: #464B66;
  --color-neutral-800: #2E3248;
  --color-neutral-900: #1A1D2E; /* 主文本 16.05:1 AAA */
  --color-neutral-950: #12152A; /* 深色画布底 */

  /* ---------- 4. 语义别名层（下游优先消费） ---------- */
  --color-bg:              var(--color-neutral-50);
  --color-bg-pure:         var(--color-neutral-0);
  --color-surface:         var(--color-neutral-100);
  --color-surface-sunken:  var(--color-neutral-200);
  --color-border:          var(--color-neutral-300);
  --color-border-strong:   var(--color-neutral-400);
  --color-text-primary:    var(--color-neutral-900);
  --color-text-body:       var(--color-neutral-800);
  --color-text-secondary:  var(--color-neutral-600);
  --color-text-disabled:   var(--color-neutral-500);
  --color-text-inverse:    var(--color-neutral-50);
  --color-brand:           var(--color-primary-500);
  --color-action:          var(--color-primary-600);
  --color-action-hover:    var(--color-primary-700);
  --color-action-active:   var(--color-primary-800);
  --color-link:            var(--color-primary-700);
  --color-accent:          var(--color-accent-400);
  --color-focus-ring:      rgba(77, 139, 212, 0.45); /* primary-400 @45% */

  /* ---------- 5. 状态色（用量应极少） ---------- */
  --color-success:        #4E8C6A;
  --color-success-strong: #3B6E52;
  --color-success-bg:     #EAF2ED;
  --color-warning:        #C9932E; /* 仅填充，禁止文字 */
  --color-warning-strong: #8E6318;
  --color-warning-bg:     #F9F1E1;
  --color-danger:         #C0453E;
  --color-danger-strong:  #993530;
  --color-danger-bg:      #F8EAE8;
  --color-info:           #5E86AD;
  --color-info-strong:    #456B90;
  --color-info-bg:        #F2F6F9;

  /* ---------- 6. 渐变（仅此两支） ---------- */
  --gradient-warm: linear-gradient(160deg, #EEF4FB 0%, #EFF1F5 55%, #D6E5F5 100%);
  --gradient-dusk: linear-gradient(160deg, #12183A 0%, #0A0E1F 60%, #072144 100%);

  /* ---------- 7. 字体族 ---------- */
  --font-display: "MiSans", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Inter", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    "Inter", "MiSans", "Source Han Sans SC", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif:   "Instrument Serif", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --font-hand:    "LXGW WenKai", "LXGW WenKai Screen", "KaiTi", cursive;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ---------- 8. UI 字阶（base 16px） ---------- */
  --text-display-l: 2.75rem;   --lh-display-l: 1.12; --ls-display-l: -0.02em;  --fw-display-l: 700;
  --text-display-s: 2.25rem;   --lh-display-s: 1.16; --ls-display-s: -0.015em; --fw-display-s: 700;
  --text-h1:        1.875rem;  --lh-h1: 1.25;        --ls-h1: -0.01em;         --fw-h1: 600;
  --text-h2:        1.5rem;    --lh-h2: 1.30;        --ls-h2: -0.005em;        --fw-h2: 600;
  --text-h3:        1.25rem;   --lh-h3: 1.40;        --ls-h3: 0;               --fw-h3: 600;
  --text-body-l:    1.0625rem; --lh-body-l: 1.70;    --fw-body-l: 400;
  --text-body:      1rem;      --lh-body: 1.65;      --fw-body: 400;
  --text-body-s:    0.875rem;  --lh-body-s: 1.60;    --fw-body-s: 400;
  --text-caption:   0.8125rem; --lh-caption: 1.50;   --ls-caption: 0.01em;     --fw-caption: 500;
  --text-label:     0.75rem;   --lh-label: 1.40;     --ls-label: 0.06em;       --fw-label: 600;

  /* ---------- 9. 画布字阶（基准画布宽 1080px，其它宽度 × W/1080） ---------- */
  --poster-display: 96px;
  --poster-h1:      72px;
  --poster-h2:      56px;
  --poster-body:    36px;
  --poster-caption: 28px;
  --poster-micro:   24px; /* 画布最小字号，不得更小 */

  /* ---------- 10. 间距（4px 基数，键名 = 倍数） ---------- */
  --space-0:  0;
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- 11. 圆角 ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px; /* 按钮 / 输入框 */
  --radius-lg:   20px; /* 卡片 / 作品图 */
  --radius-xl:   28px; /* 大面板 / 模板卡 */
  --radius-2xl:  40px;
  --radius-full: 999px;
  --radius-icon-ratio: 0.2237; /* App 图标超椭圆比例：size × 0.2237（连续曲率） */

  /* ---------- 12. 阴影（深海军着色，禁止纯黑） ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(7,33,68,0.05), 0 2px 6px rgba(7,33,68,0.04);
  --shadow-2: 0 4px 12px rgba(7,33,68,0.06), 0 12px 28px rgba(7,33,68,0.05);
  --shadow-3: 0 8px 24px rgba(7,33,68,0.08), 0 28px 64px rgba(7,33,68,0.07);
  --shadow-art: 0 20px 48px rgba(7,33,68,0.10), 0 2px 4px rgba(7,33,68,0.06);

  /* ---------- 13. 层级 ---------- */
  --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200;
  --z-drawer: 250; --z-modal: 300; --z-toast: 400; --z-tooltip: 500;

  /* ---------- 14. 布局 ---------- */
  --container-max:    1200px;
  --container-prose:  680px;
  --grid-columns:     12;
  --grid-gutter:      var(--space-6);
  --page-margin-mobile:  var(--space-5);
  --page-margin-tablet:  var(--space-8);
  --page-margin-desktop: var(--space-12);
  --nav-height:       64px;
  --control-height:   44px; /* 按钮/输入框，同时是最小触控尺寸 */

  /* ---------- 15. 运动 ---------- */
  --motion-fast: 120ms cubic-bezier(0.2, 0, 0.4, 1);
  --motion-base: 200ms cubic-bezier(0.2, 0, 0.2, 1);
  --motion-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 16. 封面安全区（跨平台最坏情况并集） ---------- */
  --cover-safe-top:    12%;
  --cover-safe-bottom: 20%;
  --cover-safe-left:   7%;
  --cover-safe-right:  16%;
  --avatar-safe-circle: 86%; /* 头像内容安全圆直径占比 */
  --logo-clearspace:   0.5;  /* × mark 高度；紧凑场景最低 0.25 */
  --watermark-opacity: 0.62;
  --watermark-width:   0.10; /* × 画布宽 */
}

/* ==========================================================================
   深色画布（作品展示 / 夜间模式）
   ========================================================================== */
[data-theme="dark"] {
  --color-bg:             #0A0E1F;
  --color-bg-pure:        #000000;
  --color-surface:        #12183A;
  --color-surface-sunken: #060A1A;
  --color-border:         rgba(232, 235, 242, 0.10);
  --color-border-strong:  rgba(232, 235, 242, 0.18);
  --color-text-primary:   #E8EBF2;
  --color-text-body:      #C9CDD8;
  --color-text-secondary: #A5AABC;
  --color-text-disabled:  #5E6480;
  --color-text-inverse:   #0A0E1F;
  --color-brand:          var(--color-primary-400);
  --color-action:         var(--color-primary-500);
  --color-action-hover:   var(--color-primary-400);
  --color-action-active:  var(--color-primary-600);
  --color-link:           var(--color-primary-300);
  --color-accent:         var(--color-accent-400);

  --shadow-1: 0 2px 8px rgba(0,0,0,0.40), inset 0 1px 0 rgba(232,235,242,0.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.48), inset 0 1px 0 rgba(232,235,242,0.06);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.56), inset 0 1px 0 rgba(232,235,242,0.06);
  --shadow-art: 0 24px 64px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; }
}