/* ==========================================================================
   Scmsky Design Tokens
   --------------------------------------------------------------------------
   设计令牌是整套 UI 的唯一真相来源：颜色、字号、间距、圆角、阴影、动效、层级。
   组件层只允许引用变量，不允许出现魔法数字（便于换肤、暗色模式与后续维护）。
   ========================================================================== */

:root {
  /* ---------- 品牌与语义色（浅色为默认主题） ---------- */
  --c-brand: #165dff;
  --c-brand-strong: #0b46d6;
  --c-brand-soft: #eaf1ff;
  --c-brand-contrast: #ffffff;
  --c-accent: #0f9b8e;
  --c-accent-soft: #e6f7f5;
  --c-ok: #0f7b5f;
  --c-warn: #b45309;
  --c-danger: #d92d20;

  /* ---------- 表面与文字 ---------- */
  --c-bg: #ffffff;
  --c-bg-subtle: #f5f7fb;
  --c-bg-muted: #eef2f9;
  --c-surface: #ffffff;
  --c-surface-2: #f9fafc;
  --c-surface-inverse: #0b1120;
  --c-border: #e3e8f0;
  --c-border-strong: #cdd6e4;
  --c-text: #0f172a;
  --c-text-2: #475569;
  --c-text-3: #64748b;
  --c-text-inverse: #ffffff;
  --c-overlay: rgb(8 15 30 / 0.55);

  /* ---------- 渐变与装饰 ---------- */
  --grad-brand: linear-gradient(135deg, #165dff 0%, #0ea5e9 52%, #12c2b4 100%);
  --grad-hero:
    radial-gradient(60rem 30rem at 12% -10%, rgb(22 93 255 / 0.16), transparent 60%),
    radial-gradient(50rem 26rem at 92% 0%, rgb(18 194 180 / 0.14), transparent 62%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 72%);
  --grad-dark: linear-gradient(160deg, #0b1120 0%, #101b30 55%, #0b1120 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");

  /* ---------- 字体 ---------- */
  --font-sans: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* 流体字号：小屏不局促、大屏不失控 */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  --fs-3xl: clamp(1.9rem, 1.5rem + 2vw, 2.875rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

  --lh-tight: 1.16;
  --lh-snug: 1.38;
  --lh-base: 1.75;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- 间距（4px 基准） ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-y: clamp(2.25rem, 1rem + 3.6vw, 4rem);
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --container: 1280px;
  --container-wide: 1440px;

  /* ---------- 圆角 ---------- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-pill: 999px;

  /* ---------- 阴影 ---------- */
  --sh-1: 0 1px 2px rgb(15 23 42 / 0.06), 0 1px 3px rgb(15 23 42 / 0.08);
  --sh-2: 0 12px 28px -18px rgb(15 23 42 / 0.28), 0 2px 6px -2px rgb(15 23 42 / 0.08);
  --sh-3: 0 28px 60px -32px rgb(15 23 42 / 0.35), 0 8px 20px -12px rgb(15 23 42 / 0.14);
  --sh-brand: 0 14px 30px -14px rgb(22 93 255 / 0.45);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;

  /* ---------- 层级 ---------- */
  --z-header: 100;
  --z-rail: 90;
  --z-overlay: 200;
  --z-dialog: 300;

  /* ---------- 其它 ---------- */
  --focus-ring: 0 0 0 3px rgb(22 93 255 / 0.38);
  --header-h: 68px;
  color-scheme: light;
}

/* 用户显式选择暗色，或系统偏好暗色时自动切换 */
:root[data-theme="dark"] {
  --c-brand: #7ba4ff;
  --c-brand-strong: #a8c2ff;
  --c-brand-soft: rgb(123 164 255 / 0.14);
  --c-brand-contrast: #0b1120;
  --c-accent: #35d6c3;
  --c-accent-soft: rgb(53 214 195 / 0.12);
  --c-ok: #4ade9b;
  --c-warn: #fbbf24;
  --c-danger: #ff8b81;

  --c-bg: #070b14;
  --c-bg-subtle: #0b1220;
  --c-bg-muted: #101a2c;
  --c-surface: #0e1626;
  --c-surface-2: #131e32;
  --c-surface-inverse: #f8fafc;
  --c-border: #1e2b42;
  --c-border-strong: #2b3c59;
  --c-text: #e9eefa;
  --c-text-2: #b3c0d4;
  --c-text-3: #8a9ab1;
  --c-text-inverse: #0b1120;
  --c-overlay: rgb(3 6 12 / 0.72);

  --grad-hero:
    radial-gradient(60rem 30rem at 12% -10%, rgb(22 93 255 / 0.28), transparent 60%),
    radial-gradient(50rem 26rem at 92% 0%, rgb(18 194 180 / 0.18), transparent 62%),
    linear-gradient(180deg, #0b1220 0%, #070b14 72%);

  --sh-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --sh-2: 0 14px 30px -20px rgb(0 0 0 / 0.7);
  --sh-3: 0 30px 64px -34px rgb(0 0 0 / 0.8);
  --sh-brand: 0 14px 30px -14px rgb(22 93 255 / 0.55);
  --focus-ring: 0 0 0 3px rgb(123 164 255 / 0.45);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-brand: #7ba4ff;
    --c-brand-strong: #a8c2ff;
    --c-brand-soft: rgb(123 164 255 / 0.14);
    --c-brand-contrast: #0b1120;
    --c-accent: #35d6c3;
    --c-accent-soft: rgb(53 214 195 / 0.12);
    --c-ok: #4ade9b;
    --c-warn: #fbbf24;
    --c-danger: #ff8b81;

    --c-bg: #070b14;
    --c-bg-subtle: #0b1220;
    --c-bg-muted: #101a2c;
    --c-surface: #0e1626;
    --c-surface-2: #131e32;
    --c-surface-inverse: #f8fafc;
    --c-border: #1e2b42;
    --c-border-strong: #2b3c59;
    --c-text: #e9eefa;
    --c-text-2: #b3c0d4;
    --c-text-3: #8a9ab1;
    --c-text-inverse: #0b1120;
    --c-overlay: rgb(3 6 12 / 0.72);

    --grad-hero:
      radial-gradient(60rem 30rem at 12% -10%, rgb(22 93 255 / 0.28), transparent 60%),
      radial-gradient(50rem 26rem at 92% 0%, rgb(18 194 180 / 0.18), transparent 62%),
      linear-gradient(180deg, #0b1220 0%, #070b14 72%);

    --sh-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --sh-2: 0 14px 30px -20px rgb(0 0 0 / 0.7);
    --sh-3: 0 30px 64px -34px rgb(0 0 0 / 0.8);
    --focus-ring: 0 0 0 3px rgb(123 164 255 / 0.45);
    color-scheme: dark;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
  }
}