/* ============================================================
   GP Sourcing — Design Tokens
   Premium Crisp Slate & B2B Royal Blue Aesthetic
   Light: #ffffff base | Dark: #09090b base
   ============================================================ */

:root {
  /* ── Palette ── */
  --bg:           #ffffff;          /* Pure clean white */
  --bg-soft:      #f4f4f5;          /* Crisp light neutral grey */
  --bg-subtle:    #e4e4e7;          /* Boundary grey */
  --surface:      #ffffff;          /* White card surface */
  --surface-2:    #fafafa;          /* Subtle off-white */
  --border:       rgba(24, 24, 27, 0.06); /* Ultra clean neutral border */
  --border-mid:   rgba(24, 24, 27, 0.10);
  --border-strong:rgba(24, 24, 27, 0.15);
  --border-hover: rgba(24, 24, 27, 0.20);

  --text:         #09090b;          /* Obsidian deep black */
  --text-2:       #27272a;          /* Charcoal grey */
  --muted:        #52525b;          /* Zinc body text grey */
  --faint:        #71717a;          /* Zinc secondary label grey */

  /* ── Accent — B2B Royal Blue ── */
  --accent:       #3b82f6;          /* Premium royal blue */
  --accent-2:     #2563eb;          /* Indigo accent */
  --accent-soft:  rgba(59, 130, 246, 0.04);
  --accent-border:rgba(59, 130, 246, 0.15);
  --cyan:         #06b6d4;          /* Complementary cyan */
  --cyan-soft:    rgba(6, 182, 212, 0.06);

  /* ── Gradient Text ── */
  --text-gradient-start: #09090b;
  --text-gradient-mid:   #2563eb;
  --text-gradient-end:   #4f46e5;

  /* ── Semantic ── */
  --green:        #10b981;
  --green-soft:   rgba(16, 185, 129, 0.06);
  --red:          #ef4444;

  /* ── Header ── */
  --header-height: 72px;
  --header-bg:    rgba(255, 255, 255, 0.75);
  --header-blur:  20px;
  --logo-gp-color:    #09090b;
  --logo-text-color:  #27272a;

  /* ── Radius ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl:28px;
  --r-full: 9999px;

  /* ── Shadow ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.02);
  --shadow-sm:  0 1px 3px rgba(59,130,246,0.03), 0 1px 2px rgba(0,0,0,0.01);
  --shadow-md:  0 4px 12px rgba(59,130,246,0.02), 0 2px 4px rgba(0,0,0,0.01);
  --shadow-lg:  0 10px 20px rgba(59,130,246,0.03), 0 4px 8px rgba(0,0,0,0.01);
  --shadow-xl:  0 20px 30px rgba(59,130,246,0.04), 0 8px 12px rgba(0,0,0,0.02);

  --font-sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Geist", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* ── Animation ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  150ms;
  --t-base:  220ms;
  --t-slow:  400ms;

  /* ── Layout ── */
  --max-w:        1400px;
  --max-w-text:   720px;
  --section-py:   56px;
}

/* ── Dark mode ── */
[data-theme="dark"] {
  --bg:           #08080a;          /* Neutral dark charcoal — Gold standard premium SaaS */
  --bg-soft:      #0e0e11;          /* Warm dark grey surface */
  --bg-subtle:    #16161a;          /* Elevated surface */
  --surface:      #0b0b0d;          /* Card surface */
  --surface-2:    #111114;          /* Hover card */
  --border:       rgba(148, 163, 184, 0.05); /* Cool slate border */
  --border-mid:   rgba(148, 163, 184, 0.10);
  --border-strong:rgba(148, 163, 184, 0.16);
  --border-hover: rgba(59, 130, 246, 0.20);

  --text:         #ffffff;          /* Crisp white */
  --text-2:       #f4f4f5;          /* Zinc soft white */
  --muted:        #94a3b8;          /* Cool slate muted text */
  --faint:        #64748b;          /* Cool slate dark muted text */

  --accent:       #3b82f6;          /* Stripe Cobalt Blue */
  --accent-2:     #60a5fa;          /* Steel Blue */
  --accent-soft:  rgba(59, 130, 246, 0.06);
  --accent-border:rgba(59, 130, 246, 0.20);
  --cyan:         #0ea5e9;          /* Sky Blue/Cyan */
  --cyan-soft:    rgba(14, 165, 233, 0.06);

  /* ── Gradient Text ── */
  --text-gradient-start: #ffffff;
  --text-gradient-mid:   #e2e8f0;   /* Bright Platinum */
  --text-gradient-end:   #94a3b8;   /* Titanium Slate (highly legible) */

  --header-bg:    rgba(8, 8, 10, 0.80);
  --logo-gp-color:    #ffffff;
  --logo-text-color:  #f4f4f5;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.6);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.7);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.8);
}

/* ── Chinese Typography Token Overrides ── */
html[lang^="zh"] {
  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  --font-display: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}