/* ============================================================
   测试游戏馆 · Design Tokens  v1.0
   ------------------------------------------------------------
   全站唯一的设计变量来源。所有颜色 / 字号 / 间距 / 圆角 /
   阴影 / 动效均从此处取值，组件样式禁止硬编码色值。

   三层结构：
   1. 基础令牌  --sk-{category}-{scale}      原始值，不含语义
   2. 语义令牌  --sk-{role}                  角色映射，组件只读这一层
   3. 主题覆盖  [data-theme] / 媒体查询      只重写语义层

   主题切换：<html data-theme="dark"> 或任意容器加 .sk-theme-dark
   默认跟随系统 prefers-color-scheme。
   ============================================================ */

/* ------------------------------------------------------------
   1. 基础令牌 · Primitive
   ------------------------------------------------------------ */
:root {
  /* --- 品牌色 · 天青蓝 Azure --- */
  --sk-brand-50:  #F2F8FD;
  --sk-brand-100: #E3F0FB;
  --sk-brand-200: #C6E1F5;
  --sk-brand-300: #9CC9EB;
  --sk-brand-400: #6FADD9;
  --sk-brand-500: #3579B5;   /* 交互主色 · 与白色对比 4.61:1 */
  --sk-brand-600: #2A6599;
  --sk-brand-700: #215178;
  --sk-brand-800: #1B4160;
  --sk-brand-900: #16344C;

  /* --- 中性色 · 冷灰（带蓝调）--- */
  --sk-gray-0:   #FFFFFF;
  --sk-gray-50:  #F7FBFD;
  --sk-gray-100: #EFF6FA;
  --sk-gray-200: #E3EDF4;
  --sk-gray-300: #D2DFE9;
  --sk-gray-400: #B4C6D4;
  --sk-gray-500: #8FA3B4;
  --sk-gray-600: #6B8095;
  --sk-gray-700: #4E6376;
  --sk-gray-800: #354A5C;
  --sk-gray-900: #1B2E3F;
  --sk-gray-950: #132430;

  /* --- 语义色 · 仅用于状态，不用于装饰 --- */
  --sk-green-50:  #E6F6F1;
  --sk-green-100: #CCEDE2;
  --sk-green-500: #2E9B7F;
  --sk-green-600: #1F8068;

  --sk-amber-50:  #FBF3E4;
  --sk-amber-100: #F6E6C8;
  --sk-amber-500: #C98A2E;
  --sk-amber-600: #96631A;

  --sk-red-50:  #FBECEB;
  --sk-red-100: #F6D8D6;
  --sk-red-500: #D45F58;
  --sk-red-600: #B94A44;

  /* --- 间距 · 4pt 基准 --- */
  --sk-sp-0:  0;
  --sk-sp-1:  2px;
  --sk-sp-2:  4px;
  --sk-sp-3:  8px;
  --sk-sp-4:  12px;
  --sk-sp-5:  16px;
  --sk-sp-6:  20px;
  --sk-sp-7:  24px;
  --sk-sp-8:  32px;
  --sk-sp-9:  40px;
  --sk-sp-10: 48px;
  --sk-sp-11: 64px;
  --sk-sp-12: 80px;

  /* --- 圆角 --- */
  --sk-r-xs:   4px;
  --sk-r-sm:   8px;
  --sk-r-md:   12px;
  --sk-r-lg:   16px;
  --sk-r-xl:   22px;
  --sk-r-pill: 999px;

  /* --- 字号 / 行高 / 字重 --- */
  --sk-fs-11: 11px;
  --sk-fs-12: 12px;
  --sk-fs-13: 13px;
  --sk-fs-14: 14px;
  --sk-fs-16: 16px;
  --sk-fs-18: 18px;
  --sk-fs-21: 21px;
  --sk-fs-26: 26px;
  --sk-fs-34: 34px;
  --sk-fs-44: 44px;

  --sk-fw-regular:  400;
  --sk-fw-medium:   500;
  --sk-fw-semibold: 600;
  --sk-fw-bold:     700;
  --sk-fw-black:    800;

  --sk-lh-tight:  1.15;
  --sk-lh-snug:   1.3;
  --sk-lh-normal: 1.5;
  --sk-lh-relax:  1.7;

  --sk-tracking-tight: -0.03em;
  --sk-tracking-snug:  -0.015em;
  --sk-tracking-normal: 0;
  --sk-tracking-wide:  0.04em;

  /* --- 字族 --- */
  --sk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --sk-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- 动效 --- */
  --sk-dur-fast:   120ms;
  --sk-dur-base:   180ms;
  --sk-dur-slow:   260ms;
  --sk-dur-slower: 420ms;

  --sk-ease-out:    cubic-bezier(.22, .8, .3, 1);
  --sk-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --sk-ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* --- 布局 --- */
  --sk-container: 1240px;
  --sk-gutter: 20px;
  --sk-nav-h: 60px;
  --sk-measure: 68ch;
}

/* ------------------------------------------------------------
   2. 语义令牌 · Semantic（浅色，默认）
   ------------------------------------------------------------ */
:root,
.sk-theme-light {
  color-scheme: light;

  /* 背景与表面 */
  --sk-bg:        var(--sk-gray-50);    /* 页面底色 */
  --sk-bg-soft:   var(--sk-gray-100);   /* 次级填充：输入框、标签底 */
  --sk-bg-tint:   var(--sk-brand-50);   /* 品牌浅底：选中态、提示条 */
  --sk-surface:   var(--sk-gray-0);     /* 卡片 */
  --sk-surface-2: var(--sk-gray-50);    /* 卡内嵌套区块 */
  --sk-overlay:   rgba(19, 36, 48, .38);

  /* 文字 */
  --sk-text-1: var(--sk-gray-900);   /* 标题 · 13.9:1 */
  --sk-text-2: #4A6072;              /* 正文 · 7.0:1 */
  --sk-text-3: #566B7E;              /* 次要 · 5.5:1 */
  --sk-text-4: var(--sk-gray-500);   /* 占位 / 装饰，禁止用于正文 */
  --sk-text-inv: #FFFFFF;

  /* 描边 */
  --sk-line:      var(--sk-gray-200);  /* 默认分隔线 */
  --sk-line-soft: var(--sk-gray-100);  /* 极弱分隔 */
  --sk-line-strong: var(--sk-gray-300);

  /* 品牌 */
  --sk-accent:      var(--sk-brand-500);
  --sk-accent-hover: var(--sk-brand-600);
  --sk-accent-soft: var(--sk-brand-100);
  --sk-accent-tint: var(--sk-brand-50);
  --sk-on-accent:   #FFFFFF;

  /* 状态 */
  --sk-ok:      var(--sk-green-500);
  --sk-ok-text: var(--sk-green-600);
  --sk-ok-soft: var(--sk-green-50);

  --sk-warn:      var(--sk-amber-500);
  --sk-warn-text: var(--sk-amber-600);
  --sk-warn-soft: var(--sk-amber-50);

  --sk-danger:      var(--sk-red-500);
  --sk-danger-text: var(--sk-red-600);
  --sk-danger-soft: var(--sk-red-50);

  /* 阴影 · 冷调，避免发灰 */
  --sk-shadow-xs: 0 1px 2px rgba(19, 36, 48, .05);
  --sk-shadow-sm: 0 1px 2px rgba(19, 36, 48, .04), 0 4px 12px -6px rgba(19, 36, 48, .10);
  --sk-shadow:    0 1px 2px rgba(19, 36, 48, .04), 0 10px 26px -14px rgba(19, 36, 48, .16);
  --sk-shadow-lg: 0 2px 4px rgba(19, 36, 48, .05), 0 22px 48px -20px rgba(19, 36, 48, .22);
  --sk-shadow-brand: 0 8px 22px -10px rgba(53, 121, 181, .45);
  --sk-ring: 0 0 0 3px rgba(53, 121, 181, .20);

  /* 渐变 */
  --sk-grad-brand: linear-gradient(135deg, var(--sk-brand-500), var(--sk-brand-400));
  --sk-grad-surface: linear-gradient(180deg, #FFFFFF, var(--sk-brand-50));
  --sk-grad-hero:
    radial-gradient(660px 300px at 14% -80px, rgba(198, 225, 245, .70) 0%, rgba(198, 225, 245, 0) 70%),
    radial-gradient(720px 320px at 86% -90px, rgba(156, 201, 235, .55) 0%, rgba(156, 201, 235, 0) 70%),
    linear-gradient(180deg, #FBFDFF 0%, var(--sk-gray-50) 100%);
}

/* ------------------------------------------------------------
   3. 语义令牌 · 深色
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.sk-theme-light) {
    color-scheme: dark;

    --sk-bg:        #0E1A24;
    --sk-bg-soft:   #16242F;
    --sk-bg-tint:   #142C3E;
    --sk-surface:   #15232F;
    --sk-surface-2: #1B2B39;
    --sk-overlay:   rgba(0, 0, 0, .60);

    --sk-text-1: #E6EEF6;
    --sk-text-2: #C2D2DF;
    --sk-text-3: #A9BDCD;
    --sk-text-4: #7E93A6;
    --sk-text-inv: #0E1A24;

    --sk-line:        #24384A;
    --sk-line-soft:   #1B2B39;
    --sk-line-strong: #35506A;

    --sk-accent:       #6FAEE0;
    --sk-accent-hover: #8CC2EB;
    --sk-accent-soft:  rgba(111, 174, 224, .16);
    --sk-accent-tint:  rgba(111, 174, 224, .09);
    --sk-on-accent:    #0B1B27;

    --sk-ok:      #45B695;
    --sk-ok-text: #6FCFB2;
    --sk-ok-soft: rgba(69, 182, 149, .14);

    --sk-warn:      #DCA85A;
    --sk-warn-text: #E8C07E;
    --sk-warn-soft: rgba(220, 168, 90, .14);

    --sk-danger:      #E5796F;
    --sk-danger-text: #F09A92;
    --sk-danger-soft: rgba(229, 121, 111, .14);

    --sk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
    --sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -6px rgba(0, 0, 0, .50);
    --sk-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -14px rgba(0, 0, 0, .60);
    --sk-shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 22px 48px -20px rgba(0, 0, 0, .70);
    --sk-shadow-brand: 0 8px 22px -10px rgba(0, 0, 0, .65);
    --sk-ring: 0 0 0 3px rgba(111, 174, 224, .28);

    --sk-grad-brand: linear-gradient(135deg, #4E8FC4, #6FAEE0);
    --sk-grad-surface: linear-gradient(180deg, #182634, #14212C);
    --sk-grad-hero:
      radial-gradient(660px 300px at 14% -80px, rgba(63, 118, 160, .34) 0%, rgba(63, 118, 160, 0) 70%),
      radial-gradient(720px 320px at 86% -90px, rgba(45, 92, 130, .30) 0%, rgba(45, 92, 130, 0) 70%),
      linear-gradient(180deg, #101D28 0%, var(--sk-bg) 100%);
  }
}

/* 显式深色：<html data-theme="dark"> 或容器 .sk-theme-dark */
:root[data-theme="dark"],
.sk-theme-dark {
  color-scheme: dark;

  --sk-bg:        #0E1A24;
  --sk-bg-soft:   #16242F;
  --sk-bg-tint:   #142C3E;
  --sk-surface:   #15232F;
  --sk-surface-2: #1B2B39;
  --sk-overlay:   rgba(0, 0, 0, .60);

  --sk-text-1: #E6EEF6;
  --sk-text-2: #C2D2DF;
  --sk-text-3: #A9BDCD;
  --sk-text-4: #7E93A6;
  --sk-text-inv: #0E1A24;

  --sk-line:        #24384A;
  --sk-line-soft:   #1B2B39;
  --sk-line-strong: #35506A;

  --sk-accent:       #6FAEE0;
  --sk-accent-hover: #8CC2EB;
  --sk-accent-soft:  rgba(111, 174, 224, .16);
  --sk-accent-tint:  rgba(111, 174, 224, .09);
  --sk-on-accent:    #0B1B27;

  --sk-ok:      #45B695;
  --sk-ok-text: #6FCFB2;
  --sk-ok-soft: rgba(69, 182, 149, .14);

  --sk-warn:      #DCA85A;
  --sk-warn-text: #E8C07E;
  --sk-warn-soft: rgba(220, 168, 90, .14);

  --sk-danger:      #E5796F;
  --sk-danger-text: #F09A92;
  --sk-danger-soft: rgba(229, 121, 111, .14);

  --sk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --sk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px -6px rgba(0, 0, 0, .50);
  --sk-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -14px rgba(0, 0, 0, .60);
  --sk-shadow-lg: 0 2px 4px rgba(0, 0, 0, .40), 0 22px 48px -20px rgba(0, 0, 0, .70);
  --sk-shadow-brand: 0 8px 22px -10px rgba(0, 0, 0, .65);
  --sk-ring: 0 0 0 3px rgba(111, 174, 224, .28);

  --sk-grad-brand: linear-gradient(135deg, #4E8FC4, #6FAEE0);
  --sk-grad-surface: linear-gradient(180deg, #182634, #14212C);
  --sk-grad-hero:
    radial-gradient(660px 300px at 14% -80px, rgba(63, 118, 160, .34) 0%, rgba(63, 118, 160, 0) 70%),
    radial-gradient(720px 320px at 86% -90px, rgba(45, 92, 130, .30) 0%, rgba(45, 92, 130, 0) 70%),
    linear-gradient(180deg, #101D28 0%, var(--sk-bg) 100%);
}

/* ------------------------------------------------------------
   4. 兼容别名（旧变量名，逐步弃用）
   ------------------------------------------------------------ */
:root {
  --sk-card: var(--sk-surface);
  --sk-ink: var(--sk-text-1);
  --sk-ink-2: var(--sk-text-2);
  --sk-ink-3: var(--sk-text-3);
  --sk-line-2: var(--sk-line-soft);
  --sk-accent-2: var(--sk-brand-400);
  --sk-warm: var(--sk-amber-500);
  --sk-warm-soft: var(--sk-amber-50);
  --sk-radius: var(--sk-r-lg);
  --sk-radius-sm: var(--sk-r-md);
}

/* ------------------------------------------------------------
   5. 全局重置与偏好
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-dur-fast: 1ms;
    --sk-dur-base: 1ms;
    --sk-dur-slow: 1ms;
    --sk-dur-slower: 1ms;
  }
}