/* ============================================================================
   无限摄影社 · 设计令牌 Design Tokens
   ----------------------------------------------------------------------------
   品牌血统全部来自社团 LOGO：
     · 墨黑  —— 相机轮廓线 / 徽章底色
     · 银白  —— 「永無止鏡」立体金属字面
     · 品牌红 —— 右侧镜头红点 #C01828（取色自 logo-badge.jpg）
     · 无限  —— ∞ 符号是贯穿全局的视觉母题
   核心气质：通透（Glassmorphism + 多层光场 + 金属高光）
   ========================================================================== */

:root {
  /* ── 墨色阶（LOGO 黑） ─────────────────────────────────────────── */
  --ink-1000: #040406;
  --ink-950:  #07070B;
  --ink-900:  #0B0B11;
  --ink-850:  #0F0F17;
  --ink-800:  #14141D;
  --ink-750:  #1A1A25;
  --ink-700:  #21212E;
  --ink-650:  #292938;
  --ink-600:  #333344;
  --ink-550:  #3F3F52;

  /* ── 银白阶（LOGO 金属字） ─────────────────────────────────────── */
  --silver-50:  #FBFCFD;
  --silver-100: #F1F3F6;
  --silver-200: #DFE3EA;
  --silver-300: #C3C9D4;
  --silver-400: #9DA4B2;
  --silver-500: #767D8C;
  --silver-600: #565D6B;
  --silver-700: #3D434F;

  /* ── 品牌红（LOGO 镜头红点） ───────────────────────────────────── */
  --red-300: #FF6B7E;
  --red-400: #F23A55;
  --red-500: #DE2039;
  --red-600: #C8102E;   /* ★ 主品牌色 */
  --red-700: #A20C25;
  --red-800: #78091B;
  --red-900: #4A0511;

  /* ── 金属渐变（模拟 LOGO 立体字的银面反射） ────────────────────── */
  --metal-chrome: linear-gradient(
    135deg,
    #FFFFFF 0%, #E4E8EF 14%, #A8B0BC 32%,
    #F4F6F9 48%, #8D95A3 64%, #D9DEE6 80%, #FFFFFF 100%
  );
  --metal-soft: linear-gradient(
    160deg,
    rgba(255,255,255,.96) 0%,
    rgba(214,220,229,.88) 40%,
    rgba(150,158,171,.80) 70%,
    rgba(238,241,245,.92) 100%
  );
  --metal-line: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 18%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.55) 82%,
    transparent 100%
  );

  /* ── 玻璃层（通透感的核心） ───────────────────────────────────── */
  --glass-1: rgba(255, 255, 255, 0.038);   /* 最轻：大面积容器 */
  --glass-2: rgba(255, 255, 255, 0.058);   /* 常规卡片 */
  --glass-3: rgba(255, 255, 255, 0.082);   /* 悬浮 / 激活态 */
  --glass-4: rgba(255, 255, 255, 0.115);   /* 强调浮层 */
  --glass-dark: rgba(10, 10, 16, 0.55);    /* 深色玻璃：导航 / 模态 */

  --stroke-1: rgba(255, 255, 255, 0.075);  /* 常规描边 */
  --stroke-2: rgba(255, 255, 255, 0.130);  /* 悬浮描边 */
  --stroke-3: rgba(255, 255, 255, 0.200);  /* 高光描边 */
  --stroke-red: rgba(200, 16, 46, 0.42);

  --blur-sm: 10px;
  --blur-md: 20px;
  --blur-lg: 34px;
  --blur-xl: 52px;

  /* ── 文字 ─────────────────────────────────────────────────────── */
  --text-1: #F4F6F9;                        /* 主文字（银白） */
  --text-2: rgba(233, 237, 243, 0.74);      /* 次要 */
  --text-3: rgba(214, 220, 230, 0.52);      /* 辅助 */
  --text-4: rgba(198, 205, 216, 0.34);      /* 极弱 / 占位 */
  --text-on-red: #FFFFFF;

  /* ── 阴影（通透感的另一半：要有深度但不能闷） ─────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.24);
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.48), 0 2px 8px rgba(0,0,0,.28);
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.60), 0 6px 16px rgba(0,0,0,.32);
  --shadow-xl: 0 36px 80px -20px rgba(0,0,0,.72), 0 10px 24px rgba(0,0,0,.38);
  --shadow-red: 0 8px 28px -6px rgba(200, 16, 46, .48);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.10);
  --shadow-inset-glass: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.22);

  /* ── 圆角 ─────────────────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* ── 间距（4pt 基准） ─────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── 字体 ─────────────────────────────────────────────────────── */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI",
                  "Source Han Sans SC", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas,
               "Liberation Mono", monospace;

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-base:15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 25px;
  --fs-3xl: 31px;
  --fs-4xl: 40px;
  --fs-5xl: 52px;
  --fs-6xl: 68px;

  --lh-tight: 1.16;
  --lh-snug:  1.38;
  --lh-base:  1.68;
  --lh-loose: 1.85;

  --ls-tight: -0.022em;
  --ls-wide:  0.06em;
  --ls-wider: 0.16em;

  /* ── 动效 ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.16, 1, .30, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 720ms;

  /* ── 布局尺度 ─────────────────────────────────────────────────── */
  --sidebar-w: 252px;
  --sidebar-w-rail: 76px;
  --topbar-h: 64px;
  --tabbar-h: 62px;
  --content-max: 1320px;
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-drawer: 400;
  --z-modal: 600;
  --z-lightbox: 800;
  --z-toast: 1000;
}

/* ============================================================================
   无障碇与偏好适配
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}

/* 设备不支持 backdrop-filter 时，用更实的底色兜住可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-1: rgba(22, 22, 31, 0.86);
    --glass-2: rgba(26, 26, 36, 0.90);
    --glass-3: rgba(32, 32, 44, 0.94);
    --glass-4: rgba(38, 38, 52, 0.96);
    --glass-dark: rgba(8, 8, 13, 0.96);
  }
}