/* base.css — reset, design tokens, typography
   Xingwang International Limited — xingwangcs.com */

:root {
  /* color */
  --ink: #0B0B0F;
  --ink-soft: #1A1A22;
  --paper: #F4F4F1;
  --paper-warm: #EAE7DF;
  --blue: #1C69D4;
  --blue-deep: #0B4AA8;
  --gold: #D4AF37;
  --gold-soft: #F0CE7A;
  --coral: #FF6B5B;
  --line: #E2E0D8;
  --line-dark: #2A2A33;
  --ok: #1F9D55;
  --warn: #E0A800;

  /* type */
  --fs-hero: clamp(48px, 8vw, 128px);
  --fs-h1: clamp(40px, 5vw, 80px);
  --fs-h2: clamp(28px, 3.5vw, 56px);
  --fs-h3: clamp(22px, 2vw, 32px);
  --fs-body: 18px;
  --fs-small: 14px;
  --fs-eyebrow: 12px;

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(11, 11, 15, .04), 0 2px 6px rgba(11, 11, 15, .06);
  --shadow-2: 0 4px 10px rgba(11, 11, 15, .08), 0 12px 30px rgba(11, 11, 15, .10);
  --shadow-pop: 0 20px 60px rgba(11, 11, 15, .18);

  /* motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-pop: cubic-bezier(.77, 0, .18, 1);

  /* layout */
  --container: 1280px;
  --container-wide: 1600px;
  --nav-h: 76px;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* typography */
h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { color: var(--ink-soft); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--gold { color: var(--gold); }
.lede { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }

.text-coral { color: var(--coral); }
.text-gold { color: var(--gold); }
.text-blue { color: var(--blue); }
.text-paper { color: var(--paper); }

/* container */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.container--wide { max-width: var(--container-wide); }

/* surfaces */
.surface-dark { background: var(--ink); color: var(--paper); }
.surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--paper); }
.surface-dark p { color: rgba(244, 244, 241, 0.78); }
.surface-warm { background: var(--paper-warm); }
.surface-blue { background: var(--blue); color: var(--paper); }
.surface-blue h1, .surface-blue h2, .surface-blue h3 { color: var(--paper); }

/* section */
section { padding: var(--s-10) 0; position: relative; }
section + section { padding-top: 0; }

/* selection */
::selection { background: var(--gold); color: var(--ink); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--ink-soft); border-radius: 10px; }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}