/* ============================================================
   信星 (Xinxing) Design System — Colors & Type
   Brand: 成都信星网商虚拟产业园管理有限公司
   Aesthetic: Stripe-style restraint × Chinese fintech gravitas.
   ============================================================ */

:root {
  /* ---------- Brand: Deep Blue + Indigo→Cyan Gradient ---------- */
  --xx-primary:        #1a2b6d;  /* Anchor — deep navy/indigo. Logo wordmark, primary buttons, headings emphasis */
  --xx-primary-700:    #243a8a;  /* Hover/pressed shade */
  --xx-primary-300:    #4d63b8;  /* Outline / muted accent */
  --xx-primary-100:    #e8ebf6;  /* Soft tint backgrounds */

  --xx-accent-purple:  #6366f1;  /* Indigo accent — interactive, focus rings, eyebrows */
  --xx-accent-cyan:    #22d3ee;  /* Cyan accent — pulse dots, gradient terminus, success flourishes */
  --xx-accent-pink:    #ec4899;  /* Magenta — RESERVED for placeholder / "TBD" tags only */

  /* ---------- Brand Gradients ---------- */
  --xx-grad-brand: linear-gradient(135deg, #1a2b6d 0%, #6366f1 55%, #22d3ee 100%);
  --xx-grad-brand-soft: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(34,211,238,0.12));
  --xx-grad-text: linear-gradient(180deg, #0a0e27 0%, #1a2b6d 70%, #6366f1 100%);
  --xx-grad-cta-stripe: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);

  /* ---------- Neutrals ---------- */
  --xx-text-1:         #0a0e27;  /* Headlines, primary text */
  --xx-text-2:         #4a5578;  /* Body */
  --xx-text-3:         #6b7494;  /* Muted, captions, descriptions */
  --xx-text-on-dark:   #f7f8fc;

  --xx-bg:             #ffffff;
  --xx-bg-soft:        #f7f8fc;  /* Alternating section bg */
  --xx-bg-dark:        #0a0e27;
  --xx-bg-darker:      #050823;  /* Footer / CTA section */

  --xx-border:         rgba(10, 14, 39, 0.08);
  --xx-border-soft:    rgba(10, 14, 39, 0.04);
  --xx-border-strong:  rgba(10, 14, 39, 0.12);

  /* ---------- Type Stack ---------- */
  /* Primary is the system Chinese stack — PingFang on Apple, MS YaHei on Windows.
     This is INTENTIONAL: the brand reads as "trustworthy local Chinese fintech",
     not as a Western SaaS. Do not swap to Inter/Roboto for body. */
  --xx-font-sans:  -apple-system, BlinkMacSystemFont, "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
                   Helvetica, "Segoe UI", Roboto, sans-serif;
  --xx-font-mono:  "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  /* Numerals get Inter (or system) for tabular legibility on stat blocks/prices */
  --xx-font-num:   "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
                   "Segoe UI", Roboto, sans-serif;

  /* ---------- Type Scale ---------- */
  --xx-t-xs:   12px;
  --xx-t-sm:   14px;
  --xx-t-base: 16px;
  --xx-t-lg:   18px;
  --xx-t-xl:   20px;
  --xx-t-2xl:  24px;
  --xx-t-3xl:  30px;
  --xx-t-4xl:  38px;
  --xx-t-5xl:  48px;
  --xx-t-hero: clamp(40px, 7vw, 84px);

  /* ---------- Spacing (4px base) ---------- */
  --xx-s-1: 4px;
  --xx-s-2: 8px;
  --xx-s-3: 12px;
  --xx-s-4: 16px;
  --xx-s-5: 24px;
  --xx-s-6: 32px;
  --xx-s-7: 48px;
  --xx-s-8: 64px;
  --xx-s-9: 96px;
  --xx-s-10: 128px;

  /* ---------- Radius ---------- */
  --xx-r-sm:   6px;
  --xx-r-md:   10px;
  --xx-r-lg:   16px;
  --xx-r-xl:   24px;
  --xx-r-pill: 999px;

  /* ---------- Shadow ---------- */
  --xx-sh-sm:   0 1px 2px rgba(10, 14, 39, 0.06);
  --xx-sh-md:   0 4px 14px rgba(10, 14, 39, 0.08);
  --xx-sh-lg:   0 16px 48px rgba(10, 14, 39, 0.12);
  --xx-sh-xl:   0 24px 80px rgba(26, 43, 109, 0.18);
  --xx-sh-glow: 0 0 0 1px rgba(99, 102, 241, 0.15), 0 12px 40px rgba(99, 102, 241, 0.18);

  /* ---------- Easing ---------- */
  --xx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --xx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --xx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   Semantic element styles — apply these by tag, not class
   ============================================================ */

body {
  font-family: var(--xx-font-sans);
  font-size: var(--xx-t-base);
  line-height: 1.7;
  color: var(--xx-text-2);
  background: var(--xx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--xx-text-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h1 { font-size: var(--xx-t-hero); letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.02em; }
h3 { font-size: var(--xx-t-2xl); }
h4 { font-size: var(--xx-t-lg); }
h5 { font-size: var(--xx-t-sm); letter-spacing: 0.06em; text-transform: uppercase; }

p { margin: 0; }

a {
  color: var(--xx-primary);
  text-decoration: none;
  transition: color 0.2s var(--xx-ease-out);
}
a:hover { color: var(--xx-accent-purple); }

code, pre {
  font-family: var(--xx-font-mono);
  font-size: 0.92em;
}

::selection {
  background: rgba(99, 102, 241, 0.25);
  color: var(--xx-text-1);
}

/* Tabular numerals — for stats, prices, years */
.xx-num {
  font-family: var(--xx-font-num);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

/* Gradient text — reserve for hero title only */
.xx-grad-text {
  background: var(--xx-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Placeholder/TBD pill — magenta is ONLY for these */
.xx-placeholder-tag {
  display: inline-block;
  font-size: var(--xx-t-xs);
  font-weight: 500;
  color: var(--xx-accent-pink);
  background: rgba(236, 72, 153, 0.08);
  padding: 2px 8px;
  border-radius: var(--xx-r-sm);
  margin-left: var(--xx-s-2);
  letter-spacing: 0.04em;
}

/* Accessibility: Screen reader only utility class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}