/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Brand */
  --color-primary: #1877F2;
  --color-primary-dark: #0B5FD0;
  --color-primary-light: #E8F1FE;
  --color-primary-ink: #0C447C;
  --color-accent-purple: #7C5CFF;
  --color-accent-purple-soft: #F1EDFF;

  /* Semantic */
  --color-success: #12B76A;
  --color-success-soft: #E7F8F0;
  --color-danger: #F04438;
  --color-danger-soft: #FEECEB;
  --color-warning: #F79009;
  --color-warning-soft: #FFF6E5;
  --color-info: #2E90FA;

  /* Neutrals */
  --color-ink: #0A2540;
  --color-ink-soft: #123A63;
  --color-text: #344054;
  --color-text-sub: #667085;
  --color-text-mute: #98A2B3;
  --color-border: #EAECF0;
  --color-border-strong: #D0D5DD;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8FAFC;
  --color-bg-deep: #0A2540;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #1877F2 0%, #7C5CFF 100%);
  --gradient-hero: linear-gradient(135deg, #0A2540 0%, #123A63 45%, #1877F2 100%);
  --gradient-soft: linear-gradient(180deg, #E8F1FE 0%, #FFFFFF 100%);

  /* Typography */
  --font-cn: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", sans-serif;
  --font-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-sans: var(--font-en), var(--font-cn);
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  /* Spacing scale (base 4px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --gutter: 24px;
  --section-py: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);
  --shadow-brand: 0 10px 24px rgba(24, 119, 242, .28);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 200ms;
  --dur-mid: 300ms;
  --dur-slow: 600ms;
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body: 15px;
    --section-py: 56px;
    --gutter: 20px;
  }
}